@patternfly/react-core#Button JavaScript Examples

export function buildBadge(key, value, isRead, onClick) {
  const badge = <Badge key={key} isRead = {isRead}>{value}</Badge>;
  if (onClick) {
    return <Button key={key} variant="link" style={{padding:0}} onClick = {onClick}>{badge}</Button>
  }
  else {
    return badge;
  }
}

CreateActivationKeyButton = (props) => {
  const { onClick } = props;
  const queryClient = useQueryClient();
  const user = queryClient.getQueryData('user');
  const isDisabled = () => {
    return !user.rbacPermissions.canWriteActivationKeys;
  };
  return (
    <Button variant="primary" onClick={onClick} isDisabled={isDisabled()}>
      Create activation key
    </Button>
  );
}

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>
    );
  }

EmptyAccount = ({ message, className }) => {
    const intl = useIntl();
    return (
        <EmptyState className={className} variant='large'>
            <EmptyStateIcon icon={WrenchIcon} />
            <Title headingLevel="h4" size="lg">
                {intl.formatMessage(messages.emptyAccountTitle)}
            </Title>
            <EmptyStateBody>
                {message}
            </EmptyStateBody>
            <Button
                variant="primary"
                component="a"
                href={'https://access.redhat.com/documentation/en-us/red_hat_insights/2022/html/' +
                'assessing_and_reporting_malware_signatures_on_rhel_systems_with_the_insights_for' +
                '_rhel_malware_service/'}
                target="_blank" >
                {intl.formatMessage(messages.emptyAccountButton)}
            </Button>
        </EmptyState>
    );
}

ComingSoon = () => {
  const intl = useIntl();
  return (
    <EmptyState variant="small" id="coming-soon-message">
      <EmptyStateIcon icon={InProgressIcon} color="#151515" />
      <Title headingLevel="h2" size="2xl">
        {intl.formatMessage(messages.comingSoonTitle)}
      </Title>
      <EmptyStateBody>
        {intl.formatMessage(messages.comingSoonBody)}
      </EmptyStateBody>
      <Link to="/recommendations">
        <Button variant="primary">Recommendations</Button>
      </Link>
    </EmptyState>
  );
}

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>
  );
}

RunTaskButton = ({
  classname,
  isFirst,
  openTaskModal,
  slug,
  variant,
}) => {
  return (
    <Button
      aria-label={`${slug}-run-task-button`}
      className={classname}
      variant={variant}
      onClick={() => openTaskModal(slug)}
    >
      {isFirst ? 'Run task' : 'Run task again'}
    </Button>
  );
}

FormButtons = ({
  dirtyFieldsSinceLastSubmit,
  submitSucceeded,
  pristine,
}) => {
  const { reset } = useFormApi();
  const noChanges =
    isEmpty(dirtyFieldsSinceLastSubmit) || (!submitSucceeded && pristine);
  return (
    <ActionGroup>
      <Button
        className="pref-email__form-button"
        type="submit"
        ouiaId="user-pref-primary-button"
        isDisabled={noChanges}
        variant="primary"
      >
        Save
      </Button>
      <Button
        variant="link"
        ouiaId="user-pref-reset-button"
        isDisabled={noChanges}
        onClick={() => reset()}
      >
        Cancel
      </Button>
    </ActionGroup>
  );
}

RequestCertificate = ({ cas, addAlert, mode }) => {
    const [showDialog, setShowDialog] = useState(false);
    const [hostname, setHostname] = useState("");

    useEffect(() => {
        if (mode === "request") {
            cockpit.file("/etc/hostname", { superuser: "try" }).read()
                    .done((content, tag) => setHostname(content.trim()))
                    .catch(error => console.error(error));
        }
    }, [mode]);

    const canRequest = Object.values(cas).length !== 0;

    return (
        <>
            <Button id={mode === "request" ? "request-certificate-action" : "import-certificate-action"}
                    variant="secondary"
                    isDisabled={!canRequest && hostname !== ""}
                    onClick={() => setShowDialog(true)}>
                {mode === "request" ? _("Request certificate") : _("Import certificate")}
            </Button>

            { canRequest && showDialog &&
                <RequestCertificateModal onClose={() => setShowDialog(false)} hostname={hostname} cas={cas} addAlert={addAlert} mode={mode} /> }
        </>
    );
}

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>
    );
  }

render() {
        const { service, serviceName, errorMessage } = this.props;

        const troubleshoot = (
            <Button variant="link"
                onClick={ () => cockpit.jump("/system/services#/" + serviceName) }>
                { _("Troubleshoot") }
            </Button>
        );

        if (!service || !service.exists) {
            return <EmptyStatePanel title={ _("Loading the certificate service") } loading />;
        } else if (service.state === "starting") {
            return <EmptyStatePanel title={ _("Starting the certificate service") } loading />;
        } else if (!service.state !== "running") {
            return <EmptyStatePanel title={ _("The certificate service is not active") }
                       icon={ ExclamationCircleIcon }
                       paragraph={ errorMessage }
                       secondary={ troubleshoot }
                       action={ _("Start the certificate service") }
                       onAction={ () => this.startCertmonger() }
            />;
        }
    }

render () {
    return (
      <Modal
        variant={ModalVariant.small}
        title="New Dashboard"
        isOpen={this.props.isOpen}
        onClose={this.onClose}
        actions={[
          <Button key="save" variant="primary" onClick={this.onSave}>Save</Button>,
          <Button key="cancel" variant="link" onClick={this.onClose}>Cancel</Button>
        ]}
      >
        <Form>
          <FormGroup label="Title" fieldId="dashboard-title" helperTextInvalid="A dashboard title is required" helperTextInvalidIcon={<ExclamationCircleIcon />} validated={this.state.isTitleValid} isRequired>

            <TextInput type="text" id="dashboard-title" name="dashboard-title" value={this.state.title} onChange={this.onTitleChange} validated={this.state.isTitleValid} isRequired />
          </FormGroup>
          <FormGroup label="Description" fieldId="dashboard-description">
            <TextInput type="text" id="dashboard-description" name="dashboard-description" value={this.state.description} onChange={this.onDescriptionChange} />
          </FormGroup>
        </Form>
      </Modal>
    );
  }

AddRoute = ({ variant = 'primary' }) => {
    const [isFormOpen, setFormOpen] = useState(false);

    return (
        <>
            { isFormOpen && <RouteForm isOpen={isFormOpen} onClose={() => setFormOpen(false)} /> }
            <Button variant={variant} onClick={() => setFormOpen(true)}>{_("Add Route")}</Button>
        </>
    );
}

Layout = ({ location, srcLink, banner, children }) => {
  const [isNavOpen, setIsNavOpen] = useState(true);

  const onNavToggle = () => {
    setIsNavOpen(!isNavOpen);
  };

  return (
    <Page
      header={<Header isNavOpen={isNavOpen} onNavToggle={onNavToggle} location={location} />}
      sidebar={<NavSidebar isNavOpen={isNavOpen} location={location} />}
      isManagedSidebar
      className="layout"
    >
      {banner && (
        <PageSection className="banner">
          <TextContent>
            <section dangerouslySetInnerHTML={{ __html: banner.html }} />
          </TextContent>
        </PageSection>
      )}
      {children}
      <PageSection isFilled className="ofc-text-center" variant={PageSectionVariants.dark}>
        <TextContent>
          <Button variant="primary" isLarge component="a" href={srcLink} target="_contribute">
            Contribute to this page
          </Button>
        </TextContent>
      </PageSection>
      <Footer />
    </Page>
  );
}

AvailableImageTile = ({ onNewImageClick }) => {
  const { isLoading, hasError, data } = useSelector(
    ({ imagesReducer }) => ({
      isLoading:
        imagesReducer?.isLoading !== undefined
          ? imagesReducer?.isLoading
          : true,
      hasError: imagesReducer?.hasError || false,
      data: imagesReducer?.data || null,
    }),
    shallowEqual
  );

  return (
    <AvailableImageTileBase>
      <CardBody>
        {isLoading ? (
          <Bullseye>
            <Spinner />
          </Bullseye>
        ) : hasError ? (
          data
        ) : (
          <Button variant="link" style={{ paddingLeft: 0 }}>
            {data.meta.count} images
          </Button>
        )}
      </CardBody>
      <CardFooter>
        <Button variant="primary" onClick={() => onNewImageClick()}>
          Create new image
        </Button>
      </CardFooter>
    </AvailableImageTileBase>
  );
}

HostSelector = ({ baseUrl, setBaseUrl }) => {
    const [input, setInput] = useState(baseUrl);
    const history = useHistory();

    const setUrl = (url) => {
        setInput(url);
        setBaseUrl(url);
        setBaseUrlConstant(url);
        history.push(history.location.pathname);
    };

    return <InputGroup>
        <Button id="select-production" variant="control" onClick={() => setUrl(PRODUCTION_URL)}>Production</Button>
        <Button id="select-localhost" variant="control" onClick={() => setUrl(LOCALHOST)}>Localhost</Button>
        <TextInput id="custom-input" type='url' aria-label="custom input field" value={input} onChange={(input) => setInput(input)} />
        <Button variant="primary" onClick={() => setUrl(input)}>Submit</Button>
    </InputGroup>;
}

function userToRow(user, onDeleteClick) {
  let userName = user.name;
  if (user.is_superadmin) {
    userName = [
      user.name,
      " ",
      <Label key="admin" className="super-admin-label" variant="filled" color="blue" isCompact>Administrator</Label>
    ];
  }
  return {
    "cells": [
      {title: userName},
      {title: user.email},
      {title: user.projects ? user.projects.map(project => project.title).join(', ') : ''},
      {title: user.is_active ? 'Active' : 'Inactive'},
      {
        title: (
          <div style={{textAlign: "right"}}>
            <Button
              variant="primary"
              ouiaId={`admin-users-edit-${user.id}`}
              component={(props: any) => <Link {...props} to={`/admin/users/${user.id}`} />}
              isSmall
            >
              <PencilAltIcon />
            </Button>
            &nbsp;
            <Button
              variant="danger"
              ouiaId={`admin-users-delete-${user.id}`}
              onClick={() => onDeleteClick(user.id)}
              isSmall
            >
              <TrashIcon />
            </Button>
          </div>
        )
      }
    ]
  }
}

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>
    </>
  );
}

getTestArtifacts(resultId) {
    HttpClient.get([Settings.serverUrl, 'artifact'], {resultId: resultId})
      .then(response => HttpClient.handleResponse(response))
      .then(data => {
        let artifactTabs = [];
        data.artifacts.forEach((artifact) => {
          console.log(artifact);
          HttpClient.get([Settings.serverUrl, 'artifact', artifact.id, 'view'])
            .then(response => {
              let contentType = response.headers.get('Content-Type');
              if (contentType.includes('text')) {
                response.text().then(text => {
                  artifactTabs.push(
                    <Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileAltIcon} text={artifact.filename} />}>
                      <Card>
                        <CardBody>
                          <Editor fontFamily="Hack, monospace" theme="vs-dark" value={text} height="40rem" options={{readOnly: true}} />
                        </CardBody>
                        <CardFooter>
                          <Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
                        </CardFooter>
                      </Card>
                    </Tab>
                  );
                  this.setState({artifactTabs});
                });
              }
              else if (contentType.includes('image')) {
                response.blob().then(blob => {
                  let imageUrl = URL.createObjectURL(blob);
                  artifactTabs.push(
                    <Tab key={artifact.id} eventKey={artifact.id} title={<TabTitle icon={FileImageIcon} text={artifact.filename} />}>
                      <Card>
                        <CardBody>
                          <img src={imageUrl} alt={artifact.filename}/>
                        </CardBody>
                        <CardFooter>
                          <Button component="a" href={`${Settings.serverUrl}/artifact/${artifact.id}/download`}>Download {artifact.filename}</Button>
                        </CardFooter>
                      </Card>
                    </Tab>
                  );
                  this.setState({artifactTabs});
                });
              }
            });
        });
      });
  }

CreateGroupButton = ({ openModal }) => (
  <>
    <Text>Or</Text>
    <Button variant="secondary" className="pf-u-w-50" onClick={openModal}>
      Create Group
    </Button>
  </>
)

render() {
    document.title = 'User Tokens | Ibutsu';
    const { columns, rows } = this.state;
    const pagination = {
      pageSize: this.state.pageSize,
      page: this.state.page,
      totalItems: this.state.totalItems
    };
    return (
      <React.Fragment>
        <PageSection id="page" variant={PageSectionVariants.light}>
          <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
            <FlexItem spacer={{ default: 'spacerLg' }}>
              <TextContent>
                <Text className="title" component="h1">Tokens</Text>
              </TextContent>
            </FlexItem>
            <FlexItem>
              <Button
                aria-label="Add token"
                variant="secondary"
                title="Add token"
                onClick={this.onAddTokenClick}
              >
                <PlusCircleIcon /> Add Token
              </Button>
            </FlexItem>
          </Flex>
        </PageSection>
        <PageSection>
          <Card>
            <CardBody className="pf-u-p-0">
              <FilterTable
                columns={columns}
                rows={rows}
                pagination={pagination}
                isEmpty={this.state.isEmpty}
                isError={this.state.isError}
                onSetPage={this.setPage}
                onSetPageSize={this.setPageSize}
              />
            </CardBody>
          </Card>
        </PageSection>
        <AddTokenModal
          isOpen={this.state.isAddTokenOpen}
          onSave={this.onAddTokenSave}
          onClose={this.onAddTokenClose}
        />
        <DeleteModal
          title="Delete token"
          body="Would you like to delete the selected token?"
          isOpen={this.state.isDeleteTokenOpen}
          onDelete={this.onDeleteToken}
          onClose={this.onDeleteTokenClose}
        />
      </React.Fragment>
    );
  }

ExternalLink = ({ href, children }) => {
    return (
        <Button component="a" variant="link" target="_blank" href={href}>
            {children}
        </Button>
    );
}

HeaderTools = () => {
  const {
    site: { siteMetadata: links },
  } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            github
            youtube
            slack
            twitter
          }
        }
      }
    `
  );

  const headerTools = [
    {
      href: links.github,
      ariaLabel: 'Operate First GitHub organization',
      icon: <GithubIcon />,
    },
    {
      href: links.slack,
      ariaLabel: 'Operate First Slack workspace',
      icon: <SlackIcon />,
    },
    {
      href: links.youtube,
      ariaLabel: 'Operate First YouTube',
      icon: <YoutubeIcon />,
    },
    {
      href: links.twitter,
      ariaLabel: 'Operate First Twitter',
      icon: <TwitterIcon />,
    },
  ];

  return (
    <PageHeaderTools>
      <PageHeaderToolsItem>
        <Launcher />
      </PageHeaderToolsItem>
      {headerTools.map((t) => (
        <PageHeaderToolsItem key={t.href}>
          <Button component="a" variant="plain" href={t.href} target="top" aria-label={t.ariaLabel}>
            {t.icon}
          </Button>
        </PageHeaderToolsItem>
      ))}
    </PageHeaderTools>
  );
}

CancelRequestModal = ({ requestId, onClose }) => {
  const [isLoading, setIsLoading] = React.useState(false);
  const dispatch = useDispatch();
  const onCancel = () => {
    setIsLoading(true);
    // https://ci.cloud.redhat.com/docs/api-docs/rbac#operations-CrossAccountRequest-patchCrossAccountRequest
    apiInstance
      .patch(
        `${API_BASE}/cross-account-requests/${requestId}/`,
        { status: 'cancelled' },
        {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
        }
      )
      .then((res) => {
        if (res.errors && res.errors.length > 0) {
          throw Error(res.errors.map((e) => e.detail).join('\n'));
        }
        dispatch(
          addNotification({
            variant: 'success',
            title: 'Request cancelled successfully',
          })
        );
        setIsLoading(false);
        onClose(true);
      })
      .catch((err) => {
        dispatch(
          addNotification({
            variant: 'danger',
            title: 'There was an error cancelling your request',
            description: err.message,
          })
        );
        setIsLoading(false);
        onClose(true);
      });
  };
  return (
    <Modal
      title="Cancel request?"
      isOpen
      variant="small"
      onClose={() => onClose(false)}
      actions={[
        <Button key="confirm" variant="danger" onClick={onCancel}>
          Yes, cancel
        </Button>,
        <Button key="cancel" variant="link" onClick={() => onClose(false)}>
          No, keep
        </Button>,
      ]}
    >
      Request <b>{requestId}</b> will be withdrawn.
      {isLoading && <Spinner size="lg" />}
    </Modal>
  );
}

CustomButtons = ({ buttonLabels: { cancel, submit, back } }) => {
  const [isSaving, setIsSaving] = useState(false);
  const { handlePrev, formOptions } = useContext(WizardContext);
  return (
    <FormSpy>
      {() => (
        <React.Fragment>
          <Button
            variant="primary"
            type="button"
            isDisabled={
              !formOptions.valid ||
              formOptions.getState().validating ||
              isSaving
            }
            onClick={() => {
              formOptions.onSubmit({
                values: formOptions.getState().values,
                setIsSaving,
              });
            }}
          >
            {submit}
          </Button>
          <Button
            type="button"
            variant="secondary"
            onClick={handlePrev}
            isDisabled={isSaving}
          >
            {back}
          </Button>
          <div className="pf-c-wizard__footer-cancel">
            <Button
              type="button"
              variant="link"
              onClick={formOptions.onCancel}
              isDisabled={isSaving}
            >
              {cancel}
            </Button>
          </div>
        </React.Fragment>
      )}
    </FormSpy>
  );
}

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>
  );
}

createRows = ({
  distribution,
  installedPackages,
  addedPackages,
  showAll,
}) => {
  const rowData =
    showAll === 0
      ? installedPackages.filter(
          (pack) =>
            addedPackages?.filter((image) => pack.name === image.Name).length >
            0
        )
      : installedPackages;
  return rowData.map((packageData) => ({
    noApiSortFilter: [
      packageData?.name,
      packageData?.version,
      packageData?.release,
      //packageData?.type,
    ],
    cells: [
      packageData?.name,
      packageData?.version,
      packageData?.release,
      //packageData?.type,
      {
        title: (
          <a
            href={`https://access.redhat.com/downloads/content/rhel---${distribution}/x86_64/7416/${packageData?.name}/${packageData?.version}-${packageData?.release}/${packageData?.arch}/fd431d51/package`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Button
              variant="link"
              isSmall
              icon={<ExternalLinkAltIcon />}
              iconPosition="right"
            >
              More information
            </Button>
          </a>
        ),
      },
    ],
  }));
}

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>
  );
}

AuthModal = () => {
  return (
    <Modal
      style={{ padding: '15px' }}
      isOpen={true}
      variant="small"
      onClose={() => (window.location.href = 'https://console.redhat.com/')}
      aria-label="auth-modal"
      header={
        <h2 className="pf-u-pr-xl pf-u-pl-xl pf-u-font-size-2xl pf-u-text-align-center pf-u-font-weight-bold">
          Edge management requires a valid Smart Management subscription
        </h2>
      }
      footer={
        <ModalBoxFooter
          style={{
            display: 'flex',
            justifyContent: 'center',
            width: '100%',
            flexDirection: 'column',
            paddingTop: 0,
          }}
        >
          <Button
            key="get-started"
            component="a"
            className="pf-u-mb-md"
            variant="primary"
            target="_blank"
            href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux/try-it"
          >
            Get started
          </Button>
          <Button
            component="a"
            key="interactive-demo"
            className="pf-u-mb-md"
            variant="secondary"
            target="_blank"
            href="https://red.ht/edgemanagementlab"
          >
            Try the interactive demo
          </Button>
          <Button
            component="a"
            key="not-now"
            variant="link"
            href="https://console.redhat.com/"
          >
            Not now
          </Button>
        </ModalBoxFooter>
      }
      title="Edge management requires a valid subscription"
      width="640px"
    >
      <img
        style={{ margin: '0 auto', display: 'block' }}
        src={edgeIcon}
        width="200px"
        alt="edge icon"
      />
      <p className="pf-u-pr-xl pf-u-pl-xl pf-u-text-align-center">
        Securely manage and scale deployments at the edge with zero-touch
        provisioning, system health visibility, and quick security remediations
        and more with a Red Hat Smart Management subscription
      </p>
    </Modal>
  );
}