@openshift-assisted/ui-lib 2.7.11-cim → 2.8.2-cim

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import {
+  Modal,
+  Button,
+  ButtonVariant,
+  Text,
+  ModalVariant,
+  ExpandableSection,
+} from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { Cluster, removeProtocolFromURL } from '../../api';
+import { ToolbarButton } from '../ui/Toolbar';
+import PrismCode from '../ui/PrismCode';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type WebConsoleHintProps = {
+  cluster: Cluster;
+  consoleUrl?: string;
+  idPrefix?: string;
+};
+
+type LaunchOpenshiftConsoleButtonProps = WebConsoleHintProps & {
+  isDisabled: boolean;
+  id?: string;
+};
+
+type ConsoleModalProps = WebConsoleHintProps & {
+  closeModal: () => void;
+  isOpen: boolean;
+};
+
+type ModalExpandableSectionProps = {
+  toggleText: string;
+  className: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  requiredList: string[];
+};
+
+const formatMultilineString = (multiLineList: string[]): string =>
+  multiLineList && multiLineList.length > 0
+    ? [...multiLineList.slice(1)].reduce((accu, elem) => `${accu}\n${elem}`, multiLineList[0])
+    : '';
+
+const ModalExpandableSection: React.FC<ModalExpandableSectionProps> = (props) => {
+  const { requiredList, ...otherProps } = props;
+  return (
+    <ExpandableSection {...otherProps}>
+      <PrismCode code={formatMultilineString(requiredList)} language="markup" copiable />
+    </ExpandableSection>
+  );
+};
+
+export const WebConsoleHint: React.FC<WebConsoleHintProps> = ({ cluster, consoleUrl }) => {
+  const [isDNSExpanded, setIsDNSExpanded] = React.useState(true);
+  const handleToggle = () => setIsDNSExpanded(!isDNSExpanded);
+  const [apiVip = '', ingressVip = ''] = [cluster.apiVip, cluster.ingressVip];
+  const clusterUrl = `${cluster.name || ''}.${cluster.baseDnsDomain || ''}`;
+  const appsUrl = `apps.${clusterUrl}`;
+  const etcHosts = [
+    `${apiVip}\tapi.${clusterUrl}`,
+    `${ingressVip}\toauth-openshift.${appsUrl}`,
+    `${ingressVip}\t${removeProtocolFromURL(consoleUrl)}`,
+    `${ingressVip}\tgrafana-openshift-monitoring.${appsUrl}`,
+    `${ingressVip}\tthanos-querier-openshift-monitoring.${appsUrl}`,
+    `${ingressVip}\tprometheus-k8s-openshift-monitoring.${appsUrl}`,
+    `${ingressVip}\talertmanager-main-openshift-monitoring.${appsUrl}`,
+  ];
+  // Pad the lines as long as the longest record
+  const paddingNum = `*.${appsUrl}.`.length + 2;
+  const aRecords = [
+    `api.${clusterUrl}`.padEnd(paddingNum) + `A\t${apiVip}`,
+    `*.${appsUrl}`.padEnd(paddingNum) + `A\t${ingressVip}`,
+  ];
+  const { t } = useTranslation();
+  return (
+    <>
+      <Text component="p">
+        {t(
+          'ai:In order to access the OpenShift Web Console, use external DNS server or local configuration to resolve its hostname. To do so, either:',
+        )}
+      </Text>
+      <ModalExpandableSection
+        toggleText={t('ai:Option 1: Add the following records to your DNS server (recommended)')}
+        className="pf-u-pb-md"
+        isExpanded={isDNSExpanded}
+        onToggle={handleToggle}
+        requiredList={aRecords}
+      />
+      <ModalExpandableSection
+        toggleText={t('ai:Option 2: Update your local /etc/hosts or /etc/resolv.conf files')}
+        className="pf-u-pb-md"
+        isExpanded={!isDNSExpanded}
+        onToggle={handleToggle}
+        requiredList={etcHosts}
+      />
+    </>
+  );
+};
+
+export const LaunchOpenshiftConsoleButton: React.FC<LaunchOpenshiftConsoleButtonProps> = ({
+  cluster,
+  consoleUrl,
+  isDisabled,
+  id,
+}) => {
+  const [isOpen, setOpen] = React.useState(false);
+  const { t } = useTranslation();
+  return (
+    <>
+      <ToolbarButton
+        type="button"
+        variant={ButtonVariant.primary}
+        isDisabled={isDisabled}
+        onClick={() => setOpen(true)}
+        data-testid={id}
+      >
+        {t('ai:Launch OpenShift Console')}
+      </ToolbarButton>
+      <ConsoleModal
+        closeModal={() => setOpen(false)}
+        consoleUrl={consoleUrl}
+        cluster={cluster}
+        isOpen={isOpen}
+      />
+    </>
+  );
+};
+
+export const TroubleshootingOpenshiftConsoleButton: React.FC<WebConsoleHintProps> = ({
+  cluster,
+  consoleUrl,
+  idPrefix,
+}) => {
+  const [isOpen, setOpen] = React.useState(false);
+  const { t } = useTranslation();
+  return (
+    <>
+      <Button
+        variant="link"
+        icon={<InfoCircleIcon />}
+        iconPosition="left"
+        isInline
+        onClick={() => setOpen(true)}
+        data-testid={`${idPrefix || ''}-troubleshooting-hint-open`}
+      >
+        {t('ai:Not able to access the Web Console?')}
+      </Button>
+      <ConsoleModal
+        closeModal={() => setOpen(false)}
+        consoleUrl={consoleUrl}
+        cluster={cluster}
+        isOpen={isOpen}
+      />
+    </>
+  );
+};
+
+export const ConsoleModal: React.FC<ConsoleModalProps> = ({
+  closeModal,
+  cluster,
+  consoleUrl,
+  isOpen,
+}) => {
+  const { t } = useTranslation();
+  const actions = [
+    <Button
+      type="submit"
+      key="launch"
+      variant={ButtonVariant.primary}
+      onClick={() => window.open(consoleUrl, '_blank', 'noopener')}
+      isDisabled={!consoleUrl}
+    >
+      {t('ai:Launch OpenShift Console')}
+    </Button>,
+    <Button variant={ButtonVariant.secondary} onClick={() => closeModal()} key="close">
+      {t('ai:Close')}
+    </Button>,
+  ];
+  return (
+    <Modal
+      title={t('ai:OpenShift Web Console troubleshooting')}
+      isOpen={isOpen}
+      onClose={closeModal}
+      actions={actions}
+      variant={ModalVariant.large}
+    >
+      <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
+    </Modal>
+  );
+};

package/lib/common/components/clusterDetail/FinalizingProgress.tsx

@@ -0,0 +1,118 @@
+import { Cluster } from '../../api/types';
+import { EventListFetchProps } from '../../types';
+import React from 'react';
+import { EventsModal } from '../ui';
+import { Button, ButtonVariant, Popover, Text, TextContent } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  InProgressIcon,
+  PendingIcon,
+} from '@patternfly/react-icons';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/esm/global_success_color_100';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import ClusterProgressItem from './ClusterProgressItem';
+import capitalize from 'lodash-es/capitalize.js';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type FinalizingProgressProps = {
+  cluster: Cluster;
+  onFetchEvents: EventListFetchProps['onFetchEvents'];
+  fallbackEventsURL?: string;
+};
+
+const areAllBuiltInOperatorsAvailable = (
+  monitoredOperators: Cluster['monitoredOperators'] = [],
+) => {
+  return monitoredOperators.length
+    ? monitoredOperators
+        .filter((op) => op.operatorType === 'builtin')
+        .every((op) => op.status === 'available')
+    : false;
+};
+
+export const getFinalizingStatus = (cluster: Cluster) => {
+  let finalizingIcon, initializationStatus;
+  if (areAllBuiltInOperatorsAvailable(cluster.monitoredOperators)) {
+    finalizingIcon = <CheckCircleIcon color={okColor.value} />;
+    initializationStatus = 'completed';
+  } else {
+    switch (cluster.status) {
+      case 'finalizing':
+        finalizingIcon = <InProgressIcon />;
+        initializationStatus = 'finalizing';
+        break;
+      case 'error':
+      case 'cancelled':
+        finalizingIcon = <ExclamationCircleIcon color={dangerColor.value} />;
+        initializationStatus = 'failed';
+        break;
+      case 'installed':
+      case 'adding-hosts':
+        finalizingIcon = <CheckCircleIcon color={okColor.value} />;
+        initializationStatus = 'completed';
+        break;
+      default:
+        finalizingIcon = <PendingIcon />;
+        initializationStatus = 'pending';
+    }
+  }
+
+  return { finalizingIcon, initializationStatus };
+};
+
+export const FinalizingProgress: React.FC<FinalizingProgressProps> = ({
+  cluster,
+  onFetchEvents,
+  fallbackEventsURL,
+}) => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const { finalizingIcon, initializationStatus } = getFinalizingStatus(cluster);
+  const closeModal = () => setIsModalOpen(false);
+  const { t } = useTranslation();
+  return (
+    <>
+      <EventsModal
+        title={t('ai:Cluster Events')}
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        hostId={undefined}
+        cluster={cluster}
+        entityKind="cluster"
+        onFetchEvents={onFetchEvents}
+        fallbackEventsURL={fallbackEventsURL}
+      />
+      <ClusterProgressItem icon={finalizingIcon}>
+        <>
+          {['finalizing', 'pending'].includes(initializationStatus) ? (
+            <Popover
+              zIndex={300} // set the zIndex below Cluster Events Modal
+              headerContent={<>{t('ai:Initialization')}</>}
+              bodyContent={
+                <TextContent>
+                  <Text>
+                    {t(
+                      'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
+                    )}
+                  </Text>
+                </TextContent>
+              }
+              footerContent={
+                <Button variant={ButtonVariant.link} isInline onClick={() => setIsModalOpen(true)}>
+                  {t('ai:Open Events Log')}
+                </Button>
+              }
+            >
+              <Button variant={ButtonVariant.link} isInline>
+                {t('ai:Initialization')}
+              </Button>
+            </Popover>
+          ) : (
+            t('ai:Initialization')
+          )}
+          <small>{capitalize(initializationStatus)}</small>
+        </>
+      </ClusterProgressItem>
+    </>
+  );
+};

package/lib/common/components/clusterDetail/KubeconfigDownload.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { saveAs } from 'file-saver';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { canDownloadKubeconfig } from '../hosts/utils';
+import { useAlerts } from '../AlertsContextProvider';
+import { Cluster } from '../../api/types';
+/* eslint-disable no-restricted-imports */
+import { ocmClient } from '../../../ocm/api/axiosClient';
+import { getApiErrorMessage, handleApiError } from '../../../ocm/api/utils';
+import ClustersAPI from '../../../ocm/services/apis/ClustersAPI';
+/* eslint-enable no-restricted-imports */
+import { AxiosResponseHeaders } from 'axios';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { TFunction } from 'i18next';
+
+type KubeconfigDownloadProps = {
+  className?: string;
+  clusterId: Cluster['id'];
+  status: Cluster['status'];
+  id?: string;
+  handleDownload?: () => void;
+};
+
+const getKubeconfigFileName = (
+  headers:
+    | AxiosResponseHeaders
+    | Partial<Record<string, string> & { 'set-cookie'?: string[] | undefined }>,
+) => {
+  const fileNameMatch =
+    headers['content-disposition'] && headers['content-disposition'].match(/filename=".*"/);
+  return fileNameMatch ? fileNameMatch[0].slice(10, -1) : 'kubeconfig';
+};
+
+const KubeconfigDownload: React.FC<KubeconfigDownloadProps> = ({
+  clusterId,
+  status,
+  id,
+  handleDownload,
+  className,
+}) => {
+  const { addAlert } = useAlerts();
+
+  const download = React.useCallback(
+    async (clusterId: Cluster['id'], t: TFunction) => {
+      try {
+        if (ocmClient) {
+          const { data } = await ClustersAPI.getPresignedForClusterCredentials({
+            clusterId,
+            fileName: 'kubeconfig',
+          });
+          saveAs(data.url);
+        } else {
+          const response = await ClustersAPI.downloadClusterCredentials(clusterId, 'kubeconfig');
+          const fileName = getKubeconfigFileName(response.headers);
+
+          saveAs(response.data, fileName);
+        }
+      } catch (e) {
+        handleApiError(e, (e) => {
+          addAlert({
+            title: t('ai:Could not download kubeconfig'),
+            message: getApiErrorMessage(e),
+          });
+        });
+      }
+    },
+    [addAlert],
+  );
+  const { t } = useTranslation();
+  return (
+    <Button
+      variant={ButtonVariant.secondary}
+      className={className}
+      onClick={handleDownload || (() => download(clusterId, t))}
+      isDisabled={!canDownloadKubeconfig(status)}
+      id={id}
+      data-testid={id}
+    >
+      {t('ai:Download kubeconfig')}
+    </Button>
+  );
+};
+
+export default KubeconfigDownload;

package/lib/common/components/clusterDetail/OperatorsProgressItem.css

@@ -0,0 +1,4 @@
+.operators-progress-item__operators-list {
+  padding-left: 0 !important;
+  list-style-type: none !important;
+}

package/lib/common/components/clusterDetail/OperatorsProgressItem.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Button, ButtonVariant, List, ListItem, Popover } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  InProgressIcon,
+  PendingIcon,
+} from '@patternfly/react-icons';
+import {
+  global_danger_color_100 as dangerColor,
+  global_success_color_100 as okColor,
+} from '@patternfly/react-tokens';
+import { pluralize } from 'humanize-plus';
+import { TFunction } from 'i18next';
+import { Cluster, MonitoredOperator, MonitoredOperatorsList, OperatorStatus } from '../../api';
+import { operatorLabelsCim, OperatorName } from '../../config';
+import ClusterProgressItem from './ClusterProgressItem';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { useFeatureSupportLevel } from '../featureSupportLevels';
+
+import './OperatorsProgressItem.css';
+
+export function getAggregatedStatus(operators: MonitoredOperatorsList) {
+  const operatorStates: (OperatorStatus | 'pending')[] = operators.map(
+    (operator) => operator.status || 'pending',
+  );
+  if (operatorStates.includes('failed')) return 'failed';
+  if (operatorStates.includes('progressing')) return 'progressing';
+  if (operatorStates.includes('pending')) return 'pending';
+  return 'available';
+}
+
+export const getOperatorCountString = (count: number) => `${count} ${pluralize(count, 'operator')}`;
+
+export function getOperatorsLabel(operators: MonitoredOperatorsList, t: TFunction) {
+  const failedOperatorsCount = operators.filter((o) => o.status === 'failed').length;
+  const status = getAggregatedStatus(operators);
+  const operatorsCountString = getOperatorCountString(operators.length);
+
+  switch (status) {
+    case 'available':
+      return t('ai:{{operatorsCountString}} installed', {
+        operatorsCountString: operatorsCountString,
+      });
+    case 'failed':
+      return operators.length > 1
+        ? `${failedOperatorsCount}/${operatorsCountString} failed`
+        : `${getOperatorCountString(failedOperatorsCount)} failed`;
+    case 'progressing':
+      return t('ai:Installing {{operatorsCountString}}', {
+        operatorsCountString: operatorsCountString,
+      });
+
+    default:
+      return t('ai:Pending - {{operatorsCountString}}', {
+        operatorsCountString: operatorsCountString,
+      });
+  }
+}
+
+export function getOperatorsIcon(status: OperatorStatus | 'pending') {
+  switch (status) {
+    case 'available':
+      return <CheckCircleIcon color={okColor.value} />;
+    case 'failed':
+      return <ExclamationCircleIcon color={dangerColor.value} />;
+    case 'progressing':
+      return <InProgressIcon />;
+    default:
+      return <PendingIcon />;
+  }
+}
+
+type OperatorListProps = {
+  operators: MonitoredOperatorsList;
+  openshiftVersion: Cluster['openshiftVersion'];
+};
+
+type OperatorsPopoverProps = OperatorListProps & {
+  children: React.ComponentProps<typeof Popover>['children'];
+};
+
+const OperatorsPopover = ({ operators, openshiftVersion, children }: OperatorsPopoverProps) => {
+  const { t } = useTranslation();
+  const featureSupportLevel = useFeatureSupportLevel();
+
+  return (
+    <Popover
+      headerContent={<div>{t('ai:Operators')}</div>}
+      bodyContent={
+        <List className="operators-progress-item__operators-list">
+          {operators.map((operator: MonitoredOperator) => {
+            let status = operator.status ?? 'pending';
+            if (operator.status === 'available') {
+              status = 'installed';
+            }
+            const name =
+              operatorLabelsCim(t, openshiftVersion, featureSupportLevel)[
+                operator.name as OperatorName
+              ] || operator.name;
+            return (
+              <ListItem key={operator.name} title={operator.statusInfo}>
+                {name} {status}
+              </ListItem>
+            );
+          })}
+        </List>
+      }
+      minWidth="30rem"
+      maxWidth="50rem"
+    >
+      {children}
+    </Popover>
+  );
+};
+
+const OperatorsProgressItem = ({ operators, openshiftVersion }: OperatorListProps) => {
+  const { t } = useTranslation();
+  const icon = getOperatorsIcon(getAggregatedStatus(operators));
+  const label = getOperatorsLabel(operators, t);
+  return (
+    <ClusterProgressItem icon={icon}>
+      <>
+        <OperatorsPopover operators={operators} openshiftVersion={openshiftVersion}>
+          <Button variant={ButtonVariant.link} isInline data-testid="operators-progress-item">
+            {t('ai:Operators')}
+          </Button>
+        </OperatorsPopover>
+        <small>{label}</small>
+      </>
+    </ClusterProgressItem>
+  );
+};
+
+export default OperatorsProgressItem;

package/lib/common/components/clusterDetail/ProgressBarTexts.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Host, HostRole } from '../../api/types';
+import { CheckCircleIcon, ExclamationCircleIcon, InProgressIcon } from '@patternfly/react-icons';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/esm/global_success_color_100';
+import ClusterProgressItem from './ClusterProgressItem';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type HostProgressProps = {
+  hosts: Host[];
+  hostRole: HostRole;
+};
+
+export const ProgressBarTexts = ({ hosts, hostRole }: HostProgressProps) => {
+  const { t } = useTranslation();
+
+  const hostRoleText =
+    hostRole === 'master'
+      ? t('ai:Control Plane', { count: hosts.length })
+      : t('ai:Worker', { count: hosts.length });
+
+  if (hosts.some((host) => ['cancelled', 'error'].includes(host.status))) {
+    const failedHostsCount = hosts.filter((host) => host.status === 'error').length;
+    return (
+      <ClusterProgressItem icon={<ExclamationCircleIcon color={dangerColor.value} />}>
+        <>
+          {hostRoleText}
+          <br />
+          <small>
+            {failedHostsCount}/
+            {hostRole === 'master'
+              ? t('ai:{{count}} control plane node failed', { count: hosts.length })
+              : t('ai:{{count}} worker failed', { count: hosts.length })}
+          </small>
+        </>
+      </ClusterProgressItem>
+    );
+  }
+
+  const installedHosts = hosts.filter((host) =>
+    ['installed', 'added-to-existing-cluster'].includes(host.status),
+  );
+  const beingInstalledHosts = hosts.filter((host) =>
+    [
+      'preparing-for-installation',
+      'preparing-successful',
+      'pending-for-input',
+      'installing',
+      'installing-in-progress',
+      'installing-pending-user-action',
+      'resetting-pending-user-action',
+      'resetting',
+    ].includes(host.status),
+  );
+  if (beingInstalledHosts.length > 0) {
+    return (
+      <ClusterProgressItem icon={<InProgressIcon />}>
+        <>
+          {hostRoleText}
+          <br />
+          <small>
+            {hostRole === 'master'
+              ? t('ai:Installing {{count}} control plane node', {
+                  count: beingInstalledHosts.length,
+                })
+              : t('ai:Installing {{count}} worker', { count: beingInstalledHosts.length })}
+          </small>
+        </>
+      </ClusterProgressItem>
+    );
+  }
+
+  return (
+    <ClusterProgressItem icon={<CheckCircleIcon color={okColor.value} />}>
+      <>
+        {hostRoleText}
+        <br />
+        <small>
+          {hostRole === 'master'
+            ? t('ai:{{count}} control plane node installed', { count: installedHosts.length })
+            : t('ai:{{count}} worker installed', { count: installedHosts.length })}
+        </small>
+      </>
+    </ClusterProgressItem>
+  );
+};

package/lib/common/components/clusterWizard/ClusterWizardStep.css

@@ -0,0 +1,31 @@
+.cluster-wizard-step .pf-c-wizard__nav-item {
+  white-space: nowrap;
+}
+
+.wizard-nav-item-warning-icon {
+  margin-left: var(--pf-global--spacer--sm);
+}
+
+.cluster-wizard .cluster-wizard-step__footer {
+  display: block !important;
+  z-index: 90 !important;
+}
+
+.cluster-deployment-wizard .cluster-wizard-step__footer {
+  display: block !important;
+}
+
+.cluster-wizard.pf-c-wizard {
+  --pf-c-wizard__nav--Width: 19rem;
+}
+
+.pf-c-wizard__inner-wrap {
+  overflow: auto;
+}
+
+@media (min-width: 768px) {
+  .cluster-wizard .cluster-wizard-step .pf-c-wizard__main {
+    /* That breaks scrollbar in the ClusterDeployment wizard. As a fix, the "cluster-wizard" class is on the ClusterWizard and CreateClusterWizard only. */
+    overflow: inherit !important;
+  }
+}

package/lib/common/components/clusterWizard/ClusterWizardStep.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { WizardBody, WizardBodyProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import './ClusterWizardStep.css';
+
+type ClusterWizardStepProps = {
+  footer?: React.ReactNode;
+  navigation?: React.ReactNode;
+};
+
+const ClusterWizardStep: React.FC<ClusterWizardStepProps> = ({ navigation, footer, children }) => {
+  // activeStep is required, but we're not passing it. Using the cast to avoid TS error
+  const activeStep = undefined as unknown as WizardBodyProps['activeStep'];
+  return (
+    <div className={css(styles.wizardOuterWrap, 'cluster-wizard-step')}>
+      <div className={css(styles.wizardInnerWrap)}>
+        {navigation}
+        <WizardBody aria-labelledby="step-id" hasNoBodyPadding={false} activeStep={activeStep}>
+          {children}
+        </WizardBody>
+      </div>
+      {footer && <div className="pf-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
+    </div>
+  );
+};
+
+export default ClusterWizardStep;

package/lib/common/components/clusterWizard/ClusterWizardStepHeader.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Text, TextContent } from '@patternfly/react-core';
+
+const ClusterWizardStepHeader: React.FC = ({ children }) => (
+  <TextContent>
+    <Text component="h2">{children}</Text>
+  </TextContent>
+);
+
+export default ClusterWizardStepHeader;