@patternfly/react-core#Text JavaScript Examples

render() {
    return (
      <React.Fragment>
        <EmptyState>
          <EmptyStateIcon icon={SearchIcon} />
          <Text component="h1" size="lg">
            {this.props.headingText ? this.props.headingText : "This object couldn't be found."}
          </Text>
          <EmptyStateBody>
            {this.props.bodyText ? this.props.bodyText : "Either the object doesn't exist or the ID is invalid."}
          </EmptyStateBody>
          <NavLink style={{ color: 'white' }} to={!this.props.returnLink ?  '' : this.props.returnLink}>
            <Button variant="primary" style = {{ margin: '25px' }}>
              {this.props.returnLinkText ? this.props.returnLinkText : "Return to dashboard"}
            </Button>
          </NavLink>
        </EmptyState>
      </React.Fragment>
    );
  }

Quickstarts = () => {
  return (
    <QuickStartCatalogSection>
      <TextContent className="pf-u-mb-md">
        <Text component="h2">Documentation</Text>
        <Text component="p" className="catalog-sub">
          Technical information for using the service
        </Text>
      </TextContent>
      <Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
        {quickstarts.map((quickStart, index) => {
          return (
            <GalleryItem
              key={index}
              className="pfext-quick-start-catalog__gallery-item"
            >
              <QuickStartTile quickStart={quickStart} />
            </GalleryItem>
          );
        })}
      </Gallery>
    </QuickStartCatalogSection>
  );
}

SignatureDesctiprion = ({ signature }) => {
    const intl = useIntl();
    const [isCodeEditorEnabled] = useState(false);
    return (
        <Grid hasGutter>
            {isCodeEditorEnabled && (
                <GridItem span={6}>
                    <CodeEditor code={signature.rawRule} isReadOnly />
                </GridItem>
            )}
            <GridItem span={isCodeEditorEnabled && 6 || 12}> <Text className='ins-l-sigtable--title' component={TextVariants.h6}>
                {intl.formatMessage(messages.description)}
            </Text>{signature.metadata.description}
            </GridItem>
        </Grid>
    );
}

ActivationKeysDocsPopover = (props) => {
  const { orgId } = props;
  return (
    <Popover
      headerContent="Activation Keys"
      position={PopoverPosition.rightStart}
      bodyContent={
        <TextContent>
          <Text>
            Activation keys assist you in registering systems. Metadata such as
            role, system purpose, and usage can be automatically attached to
            systems via an activation key, and monitored with
            <a
              target="_blank"
              rel="noopener noreferrer"
              href={'https://console.redhat.com/insights/subscriptions/rhel'}
            >
              {' '}
              Subscription Watch.
            </a>
          </Text>
          <Text>
            To register with an activation key, you will need your organization
            ID: <b>{orgId}</b>
          </Text>
        </TextContent>
      }
    >
      <Button variant="plain" isInline style={{ padding: 0 }}>
        <OutlinedQuestionCircleIcon />
      </Button>
    </Popover>
  );
}

render () {
    return (
      <Modal
        variant={ModalVariant.small}
        title={this.props.title}
        isOpen={this.props.isOpen}
        onClose={this.onClose}
        actions={[
          <Button key="delete" variant="danger" onClick={this.onDelete}>Delete</Button>,
          <Button key="cancel" variant="link" onClick={this.onClose}>Cancel</Button>
        ]}
      >
      <Text>{this.props.body}</Text>
      </Modal>
    );
  }

LogNestedTable = ({ services, isInsights }) => {
  return (
    <Stack>
      <StackItem>
        <TextContent>
          <Text component={TextVariants.h3}>State pushed to systems</Text>
        </TextContent>
      </StackItem>
      <Table
        aria-label="Active services Table"
        className="sed-c-services__table"
        cells={columns}
        rows={[
          {
            noPadding: true,
            cells: [
              'Connected to Red Hat Insighsts',
              isInsights ? 'on' : 'off',
            ],
          },
          ...Object.entries(services).map(([key, value]) => [
            rowMapper[key],
            value === 'enabled' ? 'on' : 'off',
          ]),
        ]}
        variant="compact"
      >
        <TableHeader />
        <TableBody />
      </Table>
    </Stack>
  );
}

render() {
    const { view } = this.state;
    const { location, history } = this.props;
    document.title = view ? view.title + ' | Ibutsu' : document.title;
    const ViewComponent = view ? VIEW_MAP[view.widget] : 'div';
    return (
      <React.Fragment>
        <PageSection id="page" variant={PageSectionVariants.light}>
          <TextContent>
            <Text className="title" component="h1">{(view && view.title) || 'Loading...'}</Text>
          </TextContent>
        </PageSection>
        <PageSection className="pf-u-pb-0">
          <ViewComponent view={view} location={location} history={history}/>
        </PageSection>
      </React.Fragment>
    );
  }

RoutingTab = () => {
    const dispatch = useNetworkDispatch();
    const { routes } = useNetworkState();

    useEffect(() => { fetchRoutes(dispatch) }, [dispatch]);

    const routesList = routes ? Object.values(routes) : [];

    const routesNotFound = () => (
        <EmptyState>
            <EmptyStateIcon icon={InfoCircleIcon} />
            <Title headingLevel="h4" size="lg">
                {_('No user-defined routes were found.')}
            </Title>
            <AddRoute />
        </EmptyState>
    );

    if (routesList.length === 0) {
        return routesNotFound();
    }

    return (
        <Card>
            <CardHeader>
                <CardActions>
                    <AddRoute />
                </CardActions>
                <CardTitle>
                    <Text component={TextVariants.h2}>{_("User-defined Routes")}</Text>
                </CardTitle>
            </CardHeader>
            <CardBody>
                <RoutesList routes={routesList} />
            </CardBody>
        </Card>
    );
}

Samples = () => (
  <div className="samples">
    <TextContent>
      <Text component={TextVariants.h1}>Hello World</Text>
      <Text component={TextVariants.h2}>Second level</Text>
      <Text component={TextVariants.h3}>Third level</Text>
      <Text component={TextVariants.h4}>Fourth level</Text>
      <Text component={TextVariants.h5}>Fifth level</Text>
      <Text component={TextVariants.h6}>Sixth level</Text>
    </TextContent>
  </div>
)

createDescription = (deviceIds) => {
  const systemText =
    deviceIds.length > 1 ? `${deviceIds.length} systems` : deviceIds[0].name;
  return (
    <Text>
      Select a group to add <strong>{systemText} </strong> or create a new one.
    </Text>
  );
}

DeleteActivationKeyConfirmationModal = (props) => {
  const { isOpen, handleModalToggle, name } = props;
  const { addSuccessNotification, addErrorNotification } = useNotifications();
  const { mutate, isLoading } = useDeleteActivationKey();
  const queryClient = useQueryClient();

  const deleteActivationKey = (name) => {
    mutate(name, {
      onSuccess: (_data, name) => {
        queryClient.setQueryData('activation_keys', (oldData) =>
          oldData.filter((entry) => entry.name != name)
        );
        addSuccessNotification(`Activation Key ${name} deleted`);
        handleModalToggle();
      },
      onError: () => {
        addErrorNotification('Something went wrong. Please try again');
        handleModalToggle();
      },
    });
    mutate;
  };
  const actions = [
    <Button
      key="confirm"
      variant="danger"
      onClick={() => deleteActivationKey(name)}
      data-testid="delete-activation-key-confirmation-modal-confirm-button"
    >
      Delete
    </Button>,
    <Button key="cancel" variant="link" onClick={handleModalToggle}>
      Cancel
    </Button>,
  ];

  const title = (
    <>
      <TextContent>
        <Text component={TextVariants.h2}>
          <ExclamationTriangleIcon size="md" color="#F0AB00" /> Delete
          Activation Key?
        </Text>
      </TextContent>
    </>
  );
  const content = () => {
    if (isLoading) {
      return <Loading />;
    } else {
      return (
        <TextContent>
          <Text component={TextVariants.p}>
            <b>{name}</b> will no longer be available for use. This operation
            cannot be undone.
          </Text>
        </TextContent>
      );
    }
  };

  return (
    <Modal
      title={title}
      isOpen={isOpen}
      onClose={handleModalToggle}
      variant={ModalVariant.small}
      actions={actions}
    >
      {content()}
    </Modal>
  );
}

render() {
    const themeColors = [
                  'var(--pf-global--success-color--100)',
                  'var(--pf-global--danger-color--100)',
                  'var(--pf-global--info-color--100)',
                  'var(--pf-global--warning-color--100)',
                  'var(--pf-global--palette--purple-400)',
                  'var(--pf-global--palette--purple-700)',
                  'var(--pf-global--primary-color--100)'
                ];
    return (
      <Card>
        <WidgetHeader title={this.title} getDataFunc={this.getResultSummary} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody>
          <div>
            {!this.state.isLoading &&
            <ChartDonut
              constrainToVisibleArea={true}
              data={[
                { x: 'Passed', y: this.state.summary.passed },
                { x: 'Failed', y: this.state.summary.failed },
                { x: 'Skipped', y: this.state.summary.skipped },
                { x: 'Error', y: this.state.summary.error },
                { x: 'Xfailed', y: this.state.summary.xfailed },
                { x: 'Xpassed', y: this.state.summary.xpassed }
              ]}
              labels={({datum}) => `${toTitleCase(datum.x)}: ${datum.y}`}
              height={200}
              title={this.state.summary.total}
              subTitle="total results"
              style={{
                labels: {fontFamily: 'RedHatText'}
              }}
              colorScale={themeColors}
            />
            }
            {this.state.isLoading &&
            <Text component="h2">Loading ...</Text>
            }
          </div>
          {!this.state.isLoading &&
          <p className="pf-u-pt-sm">Total number of tests: {this.state.summary.total}</p>
          }
        </CardBody>
        <CardFooter>
          {!this.state.isLoading &&
          <ChartLegend
            data={[
                {name: 'Passed (' + this.state.summary.passed + ')'},
                {name: 'Failed (' + this.state.summary.failed + ')'},
                {name: 'Skipped (' + this.state.summary.skipped + ')'},
                {name: 'Error (' + this.state.summary.error + ')'},
                {name: 'Xfailed (' + this.state.summary.xfailed + ')'},
                {name: 'Xpassed (' + this.state.summary.xpassed + ')'}
              ]}
            height={120}
            orientation="horizontal"
            responsive={false}
            itemsPerRow={2}
            colorScale={themeColors}
            style={{
              labels: {fontFamily: 'RedHatText'},
              title: {fontFamily: 'RedHatText'}
            }}
          />
          }
        </CardFooter>
      </Card>
    );
  }

YourInformation = () => {
  const env = insights.chrome.getEnvironment();
  const prefix = insights.chrome.isProd ? '' : `${env === 'ci' ? 'qa' : env}.`;

  const { isLoaded, currentUser } = useCurrentUser();

  return (
    <Card className="pref-email__info" ouiaId="user-pref-info-card">
      <CardHeader>
        <TextContent>
          <Text component={TextVariants.h2}>Your information</Text>
        </TextContent>
      </CardHeader>
      <CardBody>
        <DataList>
          <DataListItem>
            <DataListItemRow>
              <DataListItemCells
                className="pref-u-condensed"
                dataListCells={[
                  <DataListCell
                    isFilled={false}
                    className="pref-c-title pref-u-bold pref-u-condensed"
                    key="email-title"
                  >
                    Email address
                  </DataListCell>,
                  <DataListCell
                    isFilled
                    key="email-value"
                    className="pref-email__info-user-email pref-u-condensed"
                  >
                    {isLoaded ? (
                      <Fragment>
                        <span className="pf-u-mr-md">{currentUser.email}</span>
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href={`https://www.${prefix}redhat.com/wapps/ugc/protected/emailChange.html`}
                        >
                          Not correct?
                        </a>
                      </Fragment>
                    ) : (
                      <Skeleton size="lg" />
                    )}
                  </DataListCell>,
                ]}
              />
            </DataListItemRow>
          </DataListItem>
        </DataList>
      </CardBody>
    </Card>
  );
}

render() {
    const {
      columns,
      rows,
      selectedResults,
      includeSkipped,
      filters
    } = this.state;
    const { run_id } = this.props
    const pagination = {
      pageSize: this.state.pageSize,
      page: this.state.page,
      totalItems: this.state.totalItems
    }
    // filters for the metadata
    const resultFilters = [
      <MetaFilter
        key="metafilter"
        // user_properties fields shouldn't be injected here
        fieldOptions={FILTERABLE_RESULT_FIELDS}
        runId={run_id}
        setFilter={this.setFilter}
        customFilters={{'result': filters['result']}}
      />,
    ]
    return (
      <Card className="pf-u-mt-lg">
        <CardHeader>
          <Flex style={{ width: '100%' }}>
            <FlexItem grow={{ default: 'grow' }}>
              <TextContent>
                <Text component="h2" className="pf-c-title pf-m-xl">Test Failures</Text>
              </TextContent>
            </FlexItem>
            <FlexItem>
              <TextContent>
                <Checkbox id="include-skips" label="Include skips, xfails" isChecked={includeSkipped} aria-label="include-skips-checkbox" onChange={this.onSkipCheck}/>
              </TextContent>
            </FlexItem>
            <FlexItem>
              <MultiClassificationDropdown selectedResults={selectedResults} refreshFunc={this.refreshResults}/>
            </FlexItem>
            <FlexItem>
              <Button variant="secondary" onClick={this.refreshResults}>Refresh results</Button>
            </FlexItem>
          </Flex>
        </CardHeader>
        <CardBody>
          <FilterTable
            columns={columns}
            rows={rows}
            pagination={pagination}
            isEmpty={this.state.isEmpty}
            isError={this.state.isError}
            onCollapse={this.onCollapse}
            onSetPage={this.setPage}
            onSetPageSize={this.pageSizeSelect}
            canSelectAll={true}
            onRowSelect={this.onTableRowSelect}
            variant={TableVariant.compact}
            activeFilters={this.state.filters}
            filters={resultFilters}
            onRemoveFilter={this.removeFilter}
            hideFilters={["run_id", "project_id"]}
          />
        </CardBody>
      </Card>
    );
  }

CustomPackageLabel = () => {
  const { getState, change } = useFormApi();
  const addedRepos = getState()?.values?.['third-party-repositories'];
  const initialRepos = getState()?.values?.['initial-custom-repositories'];
  const customPackages = getState()?.values?.['custom-packages'];

  const release = getState()?.values?.release;
  const releaseName = release !== undefined ? releaseMapper[release] : '';

  useEffect(() => {
    change('validate-custom-repos', true);
    change('show-custom-packages', true);
  }, []);

  return (
    <>
      <TextContent>
        <Text>
          Add packages from{' '}
          <Popover
            style={{ visibility: 'visible' }}
            position="bottom"
            headerContent="Custom Repositories"
            bodyContent={
              <Stack>
                {addedRepos.map((repo) => (
                  <StackItem key={repo}>
                    <Text>{repo.name}</Text>
                  </StackItem>
                ))}
              </Stack>
            }
          >
            <Button variant="link" isInline>
              {addedRepos.length} custom repositories
            </Button>{' '}
            to your
          </Popover>
          <b> {releaseName}</b> image.
        </Text>
      </TextContent>
      {addedRepos.length === 0 && customPackages.length > 0
        ? showAlert('danger')
        : checkRepoNameMismatch(initialRepos, addedRepos, customPackages)
        ? showAlert('warning')
        : null}
    </>
  );
}

render() {
    const xLabels = [<ChartLineIcon key={0} />];
    const yLabels = [];
    const data = [];
    let labels = [];
    for (const key of Object.keys(this.state.data.heatmap)) {
      const newLabels = [];
      const values = this.state.data.heatmap[key];
      yLabels.push(<div key={key} title={key} className="ellipsis">{key}</div>);
      data.push(values);
      values.forEach((item) => {
        if (!!item && (item.length > 2) && !!item[3]) {
          newLabels.push(<Link to={`/results?metadata.jenkins.build_number[eq]=${item[3]}&metadata.jenkins.job_name[eq]=` + this.params['job_name']} key={item[3]}>{item[3]}</Link>);
        }
      });
      if (newLabels.length > labels.length) {
        labels = newLabels;
      }
    }
    labels.forEach((item) => xLabels.push(item));
    const actions = this.getJenkinsAnalysisLink() || {};
    return (
      <Card>
        <WidgetHeader title={this.title} actions={actions} getDataFunc={this.getHeatmap} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody data-id="heatmap" style={{paddingTop: '0.5rem'}}>
          {(!this.state.heatmapError && this.state.isLoading) &&
          <Text component="h2">Loading ...</Text>
          }
          {(!this.state.heatmapError && !this.state.isLoading) &&
          <HeatMap
            xLabels={xLabels}
            yLabels={yLabels}
            yLabelWidth={this.labelWidth}
            yLabelTextAlign={"left"}
            data={data}
            squares
            cellStyle={this.getCellStyle}
            cellRender={this.renderCell}
            title={(value) => value ? `${value[0]}` : ''}
          />
          }
          {this.state.heatmapError &&
          <p>Error fetching data</p>
          }
        </CardBody>
        {!this.props.hideDropdown &&
        <CardFooter>
          <ParamDropdown
            dropdownItems={this.props.dropdownItems || [3, 5, 6, 7]}
            handleSelect={this.onBuildSelect}
            defaultValue={this.params.builds}
            tooltip={"Set no. of builds to:"}
          />
          <ParamDropdown
            dropdownItems={['Yes', 'No']}
            handleSelect={this.onSkipSelect}
            defaultValue={this.state.countSkips}
            tooltip="Count skips as failure:"
          />
        </CardFooter>
        }
      </Card>
    );
  }

description = (name) => (
  <Text>
    <strong>{name} </strong>and all its data will be permanently deleted.
    Associated systems will be removed from the group but will not be deleted.
  </Text>
)

render() {
    const legendData = this.getLegendData();
    return (
      <Card>
        <WidgetHeader title={this.title} getDataFunc={this.getData} onDeleteClick={this.props.onDeleteClick}/>
        <CardBody data-id="generic-area">
          {this.state.areaChartError &&
            <p>Error fetching data</p>
          }
          {(!this.state.runAggregatorError && this.state.isLoading) &&
          <Text component="h2">Loading ...</Text>
          }
          {(!this.state.runAggregatorError && !this.state.isLoading) &&
          <Chart
            padding={ this.props.padding || {
              bottom: 30,
              left: 150,
              right: 15,
              top: 20
            }}
            domainPadding={{y: 10}}
            height={this.props.height || 200}
            themeColor={ChartThemeColor.multiUnordered}
            containerComponent={this.getTooltip()}
          >
            <ChartStack>
              {this.state.areaCharts}
            </ChartStack>
            <ChartAxis
              label={this.props.xLabel || "x"}
              fixLabelOverlap
              style={{
                tickLabels: {fontSize: this.props.fontSize-2 || 14},
                axisLabel: {fontSize: this.props.fontSize || 14}
              }}
            />
            <ChartAxis
              label={this.props.yLabel || "y"}
              dependentAxis
              style={{
                tickLabels: {fontSize: this.props.fontSize-2 || 14},
                axisLabel: {fontSize: this.props.fontSize || 14}
              }}
            />
          </Chart>
          }
        </CardBody>
        <CardFooter>
          <ChartLegend
            height={30}
            data={legendData}
            style={{
              labels: {fontFamily: 'RedHatText', fontSize: this.props.fontSize-2 || 14},
              title: {fontFamily: 'RedHatText'}
            }}
            colorScale={this.props.colorScale}
            themeColor={ChartThemeColor.multiUnordered}
          />
          {this.props.varExplanation &&
          <Text component="h3">{this.props.varExplanation}</Text>
          }
       </CardFooter>
      </Card>
    )
  }

RegisterWithUserName = () => {
  return (
    <FormGroup
      label={
        <span>
          Register with a username and password&nbsp;
          <Popover
            position="right"
            bodyContent={
              <TextContent>
                <Text>
                  Recommended for users with accounts with Simple Content Access
                  (SCA) enabled. If SCA is not enabled for your account,
                  subscriptions will be auto-attached.&nbsp;
                  <Text
                    href="https://access.redhat.com/articles/simple-content-access"
                    component="a"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Learn about Simple Content Access&nbsp;
                    <ExternalLinkAltIcon />
                  </Text>
                </Text>
                <Text>
                  Any credentials of a user with a valid subscription can be
                  used.
                </Text>
              </TextContent>
            }
          >
            <OutlinedQuestionCircleIcon />
          </Popover>
        </span>
      }
      helperText={<CopyHelperText />}
    >
      <ClipboardCopy>
        rhc connect -u &#60;username&#62; -p &#60;password&#62;
      </ClipboardCopy>
    </FormGroup>
  );
}

InterfacesTab = () => {
    const dispatch = useNetworkDispatch();
    const { interfaces, connections } = useNetworkState();

    useEffect(() => {
        fetchConnections(dispatch);
        fetchInterfaces(dispatch);
        listenToInterfacesChanges(dispatch);
    }, [dispatch]);

    const managedInterfacesList = interfaces ? Object.values(interfaces).filter((i) => i.managed || !i.virtual) : [];
    const unmanagedInterfacesList = interfaces ? Object.values(interfaces).filter((i) => !managedInterfacesList.includes(i)) : [];
    const connectionsList = connections ? Object.values(connections) : [];

    const renderUnmanagedInterfaces = () => {
        if (unmanagedInterfacesList.length === 0) return;

        return (
            <Card>
                <CardHeader>
                    <CardActions />
                    <CardTitle>
                        <Text component={TextVariants.h2}>{_("Unmanaged Interfaces")}</Text>
                    </CardTitle>
                </CardHeader>
                <CardBody>
                    <UnmanagedInterfacesList interfaces={unmanagedInterfacesList} />
                </CardBody>
            </Card>
        );
    };

    return (
        <>
            <Card>
                <CardHeader>
                    <CardActions>
                        <AddConnectionMenu />
                    </CardActions>
                    <CardTitle>
                        <Text component={TextVariants.h2}>{_("Interfaces")}</Text>
                    </CardTitle>
                </CardHeader>
                <CardBody>
                    <InterfacesList interfaces={managedInterfacesList} connections={connectionsList} />
                </CardBody>
            </Card>
            { renderUnmanagedInterfaces() }
        </>
    );
}

createRows = (data, imageSetId, latestImageVersion) => {
  return data?.map(({ image }) => ({
    rowInfo: {
      id: image?.ID,
      imageStatus: image?.Status,
      isoURL: image?.Installer?.ImageBuildISOURL,
      latestImageVersion,
      currentImageVersion: image.Version,
    },
    noApiSortFilter: [
      image?.Version,
      imageTypeMapper[image?.ImageType],
      image?.CreatedAt,
      image?.Status,
    ],
    cells: [
      {
        title: (
          <Link
            to={`${paths['manage-images']}/${imageSetId}/versions/${image.ID}/details`}
          >
            {image?.Version}
          </Link>
        ),
      },
      {
        title: imageTypeMapper[image?.ImageType],
      },
      {
        title: image?.Commit?.OSTreeCommit ? (
          <Tooltip content={<div>{image?.Commit?.OSTreeCommit}</div>}>
            <span>{truncateString(image?.Commit?.OSTreeCommit, 5, 5)}</span>
          </Tooltip>
        ) : (
          <Text>Unavailable</Text>
        ),
      },
      {
        title: <DateFormat date={image?.CreatedAt} />,
      },
      {
        title: <Status type={image?.Status.toLowerCase()} />,
      },
    ],
  }));
}

ConfirmChangesModal = ({
  isOpen = false,
  handleCancel,
  handleConfirm,
  systemsCount,
  data,
}) => {
  return (
    <Modal
      variant="small"
      title="Confirm changes"
      isOpen={isOpen}
      onClose={handleCancel}
      actions={[
        <Button
          key="confirm"
          variant="primary"
          type="button"
          onClick={handleConfirm}
        >
          Confirm changes
        </Button>,
        <Button
          key="cancel"
          variant="link"
          type="button"
          onClick={handleCancel}
        >
          Cancel
        </Button>,
      ]}
    >
      <TextContent>
        <Text component="p">
          Your changes applies to{' '}
          <b>
            {systemsCount} connected {pluralize(systemsCount, 'system')}
          </b>
          . Selected settings will also be applied to <b>all future systems</b>{' '}
          that are connected through remote host configuration (rhc).
        </Text>
        <Text component="p" className="pf-u-mb-sm">
          Upon confirmation, an Ansible Playbook will be pushed to{' '}
          {systemsCount} {pluralize(systemsCount, 'system')} to apply changes.
        </Text>
      </TextContent>
      <Button
        variant="link"
        onClick={() => {
          (async () => {
            const playbook = await configApi.getPlaybookPreview({
              compliance_openscap: data.useOpenSCAP ? 'enabled' : 'disabled',
              insights: data.hasInsights ? 'enabled' : 'disabled',
              remediations: data.enableCloudConnector ? 'enabled' : 'disabled',
            });
            downloadFile(playbook);
          })();
        }}
        style={{ paddingLeft: 0 }}
      >
        View playbook
      </Button>
    </Modal>
  );
}

ModalConfirm = ({
    caption,
    title,
    isOpen = false,
    onConfirm,
    onConfirmDisable = false,
    onConfirmLabel = _("Confirm"),
    onCancel,
    onCancelLabel = _("Cancel"),
    variant = ModalVariant.small,
    children
}) => {
    if (!isOpen) return;

    return (
        <Modal
            aria-label={title}
            variant={variant}
            isOpen={isOpen}
            showClose={false}
            header={
                <>
                    <Text component={TextVariants.small} className='modal-form-caption'>
                        {caption}
                    </Text>
                    <Title headingLevel="h1">
                        {title}
                    </Title>
                </>
            }
            footer={
                <ActionGroup>
                    <Button key="confirm" variant="danger" onClick={onConfirm}>
                        {onConfirmLabel}
                    </Button>

                    <Button key="cancel" variant="link" onClick={onCancel}>
                        {onCancelLabel}
                    </Button>
                </ActionGroup>
            }
        >
            {children}
        </Modal>
    );
}

ConnectSystemsModal = () => {
  return (
    <Popover
      maxWidth="200px"
      headerContent="About Remote Host Configuration Manager"
      className="connector"
      bodyContent={
        <TextContent>
          <Text>
            Remote host configuration (rhc) allows you to register with Red Hat
            Subscription Management (RHSM), connect to Red Hat Insights, and
            manage your Insights connections with one command.
            <br /> rhc can enable Cloud Connector on supported configurations to
            allow for remediation of Insights issues directly from
            console.redhat.com.
            <br />
          </Text>
          <Text>
            Remote host configuration connects RHEL 7.9+ and 8.4+ systems. To
            register other systems with RHSM or Insights, check out the{' '}
            <Text
              href="./insights/registration"
              component="a"
              target="_blank"
              rel="noopener noreferrer"
            >
              Registration Assistant
            </Text>
            .
          </Text>
          <div className="pf-c-form inc-c-connector__connect-systems-modal-form">
            <RegisterWithActivationKey />
          </div>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href={
              'https://access.redhat.com/documentation/en-us/red_hat_insights/2022/html-single/red_hat_connector_configuration_guide/index'
            }
          >
            Connecting with Red Hat
            {<ExternalLinkAltIcon className="pf-u-ml-sm" />}
          </a>
        </TextContent>
      }
    >
      <Button variant="plain" isInline style={{ padding: 0 }}>
        <OutlinedQuestionCircleIcon />
      </Button>
    </Popover>
  );
}

ModalForm = ({
    caption,
    title,
    isOpen = false,
    onSubmit,
    onSubmitDisable = false,
    onSubmitLabel = _("Apply"),
    onCancel,
    onCancelLabel = _("Cancel"),
    variant = ModalVariant.small,
    children
}) => {
    if (!isOpen) return;

    return (
        <Modal
            aria-label={title}
            variant={variant}
            isOpen={isOpen}
            showClose={false}
            header={
                <>
                    <Text component={TextVariants.small} className='modal-form-caption'>
                        {caption}
                    </Text>
                    <Title headingLevel="h1">
                        {title}
                    </Title>
                </>
            }
            footer={
                <ActionGroup>
                    <Button key="submit" onClick={onSubmit} isDisabled={onSubmitDisable}>
                        {onSubmitLabel}
                    </Button>

                    <Button key="cancel" variant="link" onClick={onCancel}>
                        {onCancelLabel}
                    </Button>
                </ActionGroup>
            }
        >

            <Form>
                {children}
            </Form>
        </Modal>
    );
}

ImageActions = ({ imageData, openUpdateWizard }) => {
  const [isOpen, setIsOpen] = useState(false);

  const dropdownItems = [
    <DropdownItem href={imageData?.Installer?.ImageBuildISOURL} key="link">
      <Text className="force-text-black">Download</Text>
    </DropdownItem>,
  ];

  const handleToggle = (isOpen) => setIsOpen(isOpen);

  const handleSelect = () => {
    setIsOpen((prevState) => !prevState);
  };

  const handleUpdate = () => {
    openUpdateWizard(imageData.ID);
  };

  return (
    <>
      <SplitItem>
        <Button onClick={handleUpdate} variant="secondary">
          Update
        </Button>
        {imageData?.Installer?.ImageBuildISOURL ? (
          <Dropdown
            position="right"
            onSelect={handleSelect}
            toggle={
              <KebabToggle onToggle={handleToggle} id="image-detail-kebab" />
            }
            isOpen={isOpen}
            isPlain
            dropdownItems={dropdownItems}
          />
        ) : null}
      </SplitItem>
    </>
  );
}

Footer = () => (
  <footer key="footer-2" className="ws-org-pfsite-l-footer-dark pf-m-no-fill">
    <Grid className="pf-u-py-xl-on-sm pf-u-py-0-on-md pf-u-align-items-center">
      <GridItem md={2} mdOffset={1}>
        <Text
          component={TextVariants.a}
          href="//www.redhat.com"
          target="top"
          aria-label="Visit Red Hat.com"
        >
          <img src={redhatLogo} alt="Red Hat logo" width="100px" />
        </Text>
      </GridItem>
      <GridItem md={3}>
        <span className="ws-org-pfsite-site-copyright">Operate First is a Red Hat Initiative.</span>
      </GridItem>
      <GridItem md={6}>
        <Text
          component={TextVariants.a}
          href="//www.redhat.com/en/about/privacy-policy"
          target="top"
          aria-label="Privacy statement"
        >
          Privacy statement
        </Text>
        <Text
          component={TextVariants.a}
          href="//www.redhat.com/en/about/terms-use"
          target="top"
          aria-label="Terms of use"
        >
          Terms of use
        </Text>
        <Text
          component={TextVariants.a}
          href="//www.redhat.com/en/about/all-policies-guidelines"
          target="top"
          aria-label="All policies and guidelines"
        >
          All policies and guidelines
        </Text>
        <Text
          component={TextVariants.a}
          href="//thenounproject.com/exgoya/"
          target="top"
          aria-label="Operate First Logo Creator"
        >
          Creator of Operate-First Logo
        </Text>
        <Text
          component={TextVariants.a}
          href="//www.openstack.org/legal/community-code-of-conduct/"
          target="top"
          aria-label="Code of Conduct"
        >
          Code of Conduct
        </Text>
      </GridItem>
    </Grid>
  </footer>
)

ImageVersionDetail = ({ data, imageVersion }) => {
  const history = useHistory();
  const [isUpdateWizardOpen, setIsUpdateWizardOpen] = useState(false);
  const [imageData, setImageData] = useState({});

  useEffect(() => {
    setImageData(data);
  }, [data]);

  const openUpdateWizard = () => {
    history.push({
      pathname: history.location.pathname,
      search: new URLSearchParams({
        update_image: true,
      }).toString(),
    });
    setIsUpdateWizardOpen(true);
  };

  return (
    <Fragment>
      <PageHeader className="pf-m-light">
        <Stack hasGutter>
          <StackItem>
            <DetailsHead
              imageData={imageData}
              imageVersion={imageVersion}
              openUpdateWizard={openUpdateWizard}
            />
          </StackItem>
        </Stack>
        <StackItem>
          <Text>{data?.Description}</Text>
        </StackItem>
      </PageHeader>
      <ImageDetailTabs imageData={imageData} imageVersion={imageVersion} />
      {isUpdateWizardOpen && (
        <Suspense
          fallback={
            <Bullseye>
              <Spinner />
            </Bullseye>
          }
        >
          <UpdateImageWizard
            navigateBack={() => {
              history.push({ pathname: history.location.pathname });
              setIsUpdateWizardOpen(false);
            }}
            updateimageVersionId={data?.ID}
          />
        </Suspense>
      )}
    </Fragment>
  );
}

render() {
    document.title = 'Test Runs | Ibutsu';
    const {
      columns,
      rows,
      fieldSelection,
      isFieldOpen,
      fieldOptions,
      isOperationOpen,
      operationSelection,
      textFilter,
      boolSelection,
      isBoolOpen,
    } = this.state;
    const filterMode = getFilterMode(fieldSelection);
    const operationMode = getOperationMode(operationSelection);
    const operations = getOperationsFromField(fieldSelection);
    const filters = [
      <Select
        aria-label="Select a field"
        placeholderText="Select a field"
        selections={fieldSelection}
        isOpen={isFieldOpen}
        isCreatable={true}
        variant={SelectVariant.typeahead}
        maxHeight={"1140%"}
        onToggle={this.onFieldToggle}
        onSelect={this.onFieldSelect}
        onCreateOption={this.onFieldCreate}
        onClear={this.onFieldClear}
        key="field"
      >
        {fieldOptions.map((option, index) => (
          <SelectOption key={index} value={option} />
        ))}
      </Select>,
      <Select
        variant={SelectVariant.single}
        onToggle={this.onOperationToggle}
        onSelect={this.onOperationSelect}
        isOpen={isOperationOpen}
        selections={operationSelection}
        key="operation"
      >
        {Object.keys(operations).map((option, index) => <SelectOption key={index} value={option}/>)}
      </Select>,
      <React.Fragment key="value">
        {(operationMode === 'bool') &&
        <Select
          aria-label="Select True/False"
          placeholderText="Select True/False"
          variant={SelectVariant.single}
          isOpen={isBoolOpen}
          selections={boolSelection}
          onToggle={this.onBoolToggle}
          onSelect={this.onBoolSelect}
          onClear={this.onBoolClear}
        >
          {["True", "False"].map((option, index) => (
            <SelectOption key={index} value={option} />
          ))}
        </Select>
        }
        {(filterMode === 'text' && operationMode === 'single') &&
          <TextInput type="text" id="textSelection" placeholder="Type in value" value={textFilter || ''} onChange={this.onTextChanged} style={{height: "inherit"}}/>
        }
        {(operationMode === 'multi') &&
          <MultiValueInput onValuesChange={this.onInValuesChange} style={{height: "inherit"}}/>
        }
      </React.Fragment>
    ];
    const pagination = {
      pageSize: this.state.pageSize,
      page: this.state.page,
      totalItems: this.state.totalItems
    };
    return (
      <React.Fragment>
        <PageSection id="page" variant={PageSectionVariants.light}>
          <TextContent>
            <Text className="title" component="h1">Test runs</Text>
          </TextContent>
        </PageSection>
        <PageSection>
          <Card>
            <CardBody className="pf-u-p-0">
              <FilterTable
                columns={columns}
                rows={rows}
                filters={filters}
                activeFilters={this.state.filters}
                pagination={pagination}
                isEmpty={this.state.isEmpty}
                isError={this.state.isError}
                onApplyFilter={this.applyFilter}
                onRemoveFilter={this.removeFilter}
                onClearFilters={this.clearFilters}
                onSetPage={this.setPage}
                onSetPageSize={this.setPageSize}
                hideFilters={["project_id"]}
              />
            </CardBody>
            <CardFooter>
              <Text className="disclaimer" component="h4">
                * Note: for performance reasons, the total number of items is an approximation.
                Use the API with &lsquo;estimate=false&rsquo; if you need an accurate count.
              </Text>
            </CardFooter>
          </Card>
        </PageSection>
      </React.Fragment>
    );
  }