@openshift-assisted/ui-lib 2.16.5-cim → 2.17.1-cim

package/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
 import {
   Button,
-  Modal,
   ButtonVariant,
-  ModalVariant,
-  Text,
-  TextVariants,
+  Content,
   List,
   ListComponent,
   ListItem,
   OrderType,
   HelperText,
   HelperTextItem,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
+import { PrismCode, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { saveAs } from 'file-saver';
@@ -38,9 +40,9 @@ export const DiscoveryTroubleshootingModalContent = () => {
   return (
     <List component={ListComponent.ol} type={OrderType.number}>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:The host machine is powered on')}</Text>
+        <Content component="p">{t('ai:The host machine is powered on')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-boot-time-helper">
             {t(
               'ai:Boot time depends on several factors such as your hardware and network configuration, and if you are booting from an ISO.',
             )}
@@ -48,29 +50,29 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:If you used DHCP networking, verify that your DHCP server is enabled')}
-        </Text>
+        </Content>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t(
             'ai:If you used static IP, bridges, and bonds networking, verify that your configurations are correct',
           )}
-        </Text>
+        </Content>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:SSH into your machine')}</Text>
+        <Content component="p">{t('ai:SSH into your machine')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-access-helper">
             {t(
               'ai:Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:',
             )}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="ssh -i <identity_file> core@<machine-ip>" />
+        <PrismCode code="ssh -i <identity_file> core@<machine-ip>" />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-auth-helper">
             {t(
               'ai:Authentication is provided by the discovery ISO, therefore when you access your host using SSH, a password is not required. Optional -i parameter can be used to specify the private key that matches the public key provided when generating Discovery ISO.',
             )}
@@ -78,11 +80,11 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:Unable to SSH into your hosts through the network?')}
-        </Text>
+        </Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-alternative-helper">
             {t(
               'ai:Try logging into the machine directly through physical access, out-of-band management, or a virtual machine console. To generate a new bootable image file with password-based login enabled, download the full image file and patch it locally with a login password of your choice using',
             )}{' '}
@@ -99,47 +101,45 @@ export const DiscoveryTroubleshootingModalContent = () => {
           </HelperTextItem>
         </HelperText>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-script-usage-helper">
             {t('ai:Run these commands to use the script:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`chmod +x ./change-iso-password.sh
 ./change-iso-password.sh <path_to_your_iso_file>`}
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:The discovery agent is running with the correct parameters')}
-        </Text>
-        <PrismCode theme={SimpleAIPrismTheme} code={`ps -ef | grep agent`} />
+        </Content>
+        <PrismCode code={`ps -ef | grep agent`} />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-agent-output-helper">
             {t('ai:The output displays the following:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`root        1786       1  0 08:03 ?        00:00:00 /usr/local/bin/agent --url https://api.openshift.com --cluster-id e4c85fbe-77c7-411e-b107-5120f615c4fb --agent-version registry.redhat.io/openshift4/assisted-installer-agent-rhel8:v4.6.0-17 --insecure=false
 core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:The agent ran successfully')}</Text>
+        <Content component="p">{t('ai:The agent ran successfully')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-agent-logs-helper">
             {t('ai:To verify that the agent ran successfully, check the logs:')}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl -u agent.service" />
+        <PrismCode code="sudo journalctl -u agent.service" />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-network-error-helper">
             {t('ai:In the following example, the errors indicate there is a network issue:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={{ ...SimpleAIPrismTheme, styles: [] }}
+          styles={[]}
           code={`Oct 15 11:26:35 localhost systemd[1]: agent.service: Service RestartSec=3s expired, scheduling restart.
 Oct 15 11:26:35 localhost systemd[1]: agent.service: Scheduled restart job, restart counter is at 9.
 Oct 15 11:26:35 localhost systemd[1]: Stopped agent.service.
@@ -152,7 +152,7 @@ Oct 15 11:26:35 localhost systemd[1]: agent.service: Failed with result 'exit-co
 Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
         />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-proxy-network-helper">
             <Trans
               t={t}
               components={{ code: <code /> }}
@@ -162,26 +162,25 @@ Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check agent logs')}</Text>
+        <Content component="p">{t('ai:Check agent logs')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-detailed-logs-helper">
             {t('ai:To view detailed agent logs and communication use following command:')}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl TAG=agent | less" />
+        <PrismCode code="sudo journalctl TAG=agent | less" />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check assisted-installer logs')}</Text>
+        <Content component="p">{t('ai:Check assisted-installer logs')}</Content>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`sudo su
 podman ps -a | grep assisted-installer
 podman logs <container id>`}
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check bootkube logs')}</Text>
-        <PrismCode theme={SimpleAIPrismTheme} code={`sudo journalctl -u bootkube`} />
+        <Content component="p">{t('ai:Check bootkube logs')}</Content>
+        <PrismCode code={`sudo journalctl -u bootkube`} />
       </ListItem>
     </List>
   );
@@ -221,24 +220,23 @@ export const DiscoveryTroubleshootingModal = ({
   setDiscoveryHintModalOpen,
   isOpen,
 }: DiscoveryTroubleshootingModalProps) => {
+  const { t } = useTranslation();
   const onClose = React.useCallback(
     () => setDiscoveryHintModalOpen(false),
     [setDiscoveryHintModalOpen],
   );
-  const { t } = useTranslation();
+
   return (
-    <Modal
-      title={t('ai:Hosts not showing up troubleshooter')}
-      isOpen={isOpen}
-      actions={[
+    <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.large}>
+      <ModalHeader title={t('ai:Hosts not showing up troubleshooter')} />
+      <ModalBody>
+        <DiscoveryTroubleshootingModalContent />
+      </ModalBody>
+      <ModalFooter>
         <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
           {t('ai:Close')}
-        </Button>,
-      ]}
-      onClose={onClose}
-      variant={ModalVariant.large}
-    >
-      <DiscoveryTroubleshootingModalContent />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -129,30 +129,32 @@ const DiskEncryptionControlGroup = ({
             />
           </StackItem>
         </RenderIf>
+        <RenderIf condition={hasEnabledDiskEncryption}>
+          <StackItem>
+            <Alert
+              variant={AlertVariant.warning}
+              data-testid="alert-tpmv2-bios"
+              isInline
+              title={
+                <FlexItem>
+                  {diskEncryptionMode === 'tpmv2' && (
+                    <>
+                      To use this encryption method, enable TPMv2 encryption in the BIOS of each
+                      selected host.
+                    </>
+                  )}
+                  {diskEncryptionMode === 'tang' && (
+                    <>
+                      The use of Tang encryption mode to encrypt your disks is only supported for
+                      bare metal or vSphere installations on user-provisioned infrastructure.
+                    </>
+                  )}
+                </FlexItem>
+              }
+            />
+          </StackItem>
+        </RenderIf>
       </Stack>
-      {hasEnabledDiskEncryption && (
-        <Alert
-          variant={AlertVariant.warning}
-          data-testid="alert-tpmv2-bios"
-          isInline
-          title={
-            <FlexItem>
-              {diskEncryptionMode === 'tpmv2' && (
-                <>
-                  To use this encryption method, enable TPMv2 encryption in the BIOS of each
-                  selected host.
-                </>
-              )}
-              {diskEncryptionMode === 'tang' && (
-                <>
-                  The use of Tang encryption mode to encrypt your disks is only supported for bare
-                  metal or vSphere installations on user-provisioned infrastructure.
-                </>
-              )}
-            </FlexItem>
-          }
-        />
-      )}
     </FormGroup>
   );
 };

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionMode.tsx

@@ -5,9 +5,8 @@ import {
   FlexItem,
   Stack,
   StackItem,
-  Text,
-  TextVariants,
-  TextContent,
+  Content,
+  ContentVariants,
   TooltipProps,
   Tooltip,
 } from '@patternfly/react-core';
@@ -117,9 +116,7 @@ export const DiskEncryptionMode = ({
         <Stack>
           &nbsp;
           <StackItem>
-            <TextContent>
-              <Text component={TextVariants.h6}>{t('ai:Tang servers')}</Text>
-            </TextContent>
+            <Content component={ContentVariants.h6}>{t('ai:Tang servers')}</Content>
           </StackItem>
           &nbsp;
           <TangServers isDisabled={isDisabled} tooltipProps={tooltipProps} />

package/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx

@@ -6,8 +6,8 @@ import {
   ButtonVariant,
   ClipboardCopy,
   clipboardCopyFunc,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -33,7 +33,7 @@ const DownloadIpxeScript = ({
   const { t } = useTranslation();
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -74,8 +74,8 @@ const DownloadIpxeScript = ({
             </DetailList>
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           variant={ButtonVariant.primary}
           onClick={() => downloadUrl && saveAs(downloadUrl)}
@@ -92,7 +92,7 @@ const DownloadIpxeScript = ({
         <Button variant={ButtonVariant.link} onClick={onClose} data-testid="edit-ipxe-btn">
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };

package/lib/common/components/clusterConfiguration/DownloadIso.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { saveAs } from 'file-saver';
 import {
   Alert,
   Button,
   ButtonVariant,
   ClipboardCopy,
   clipboardCopyFunc,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -23,6 +22,7 @@ export type DownloadISOProps = {
   isSNO?: boolean;
   fileName?: string;
   downloadUrl: string;
+  ciscoUrl?: string;
   onClose: () => void;
   onReset?: () => void;
   docVersion?: string;
@@ -38,18 +38,19 @@ const DownloadIso = ({
   isSNO = false,
   docVersion,
   updateTagsForCiscoIntersight,
+  ciscoUrl,
 }: DownloadISOProps) => {
   const wgetCommand = `wget -O ${fileName} '${downloadUrl || ''}'`;
   const { t } = useTranslation();
 
   const openCiscoIntersightHostsLink = (downloadUrl: string) => {
     updateTagsForCiscoIntersight ? updateTagsForCiscoIntersight() : '';
-    window.open(getCiscoIntersightLink(downloadUrl), '_blank', 'noopener');
+    window.open(getCiscoIntersightLink(downloadUrl, ciscoUrl), '_blank', 'noopener');
   };
 
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -104,6 +105,8 @@ const DownloadIso = ({
                 }
               />
             </DetailList>
+          </StackItem>
+          <StackItem>
             <Alert
               variant="info"
               isInline
@@ -113,13 +116,17 @@ const DownloadIso = ({
             />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           variant={ButtonVariant.primary}
-          onClick={() => downloadUrl && saveAs(downloadUrl)}
           data-testid="download-iso-btn"
           isDisabled={!downloadUrl}
+          component={'a'}
+          target="_blank"
+          href={downloadUrl}
+          download
+          rel="noopener noreferrer"
         >
           {t('ai:Download Discovery ISO')}
         </Button>
@@ -131,7 +138,7 @@ const DownloadIso = ({
             {t('ai:Edit ISO configuration')}
           </Button>
         )}
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };

package/lib/common/components/clusterConfiguration/DownloadIsoModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
 import DownloadIso, { DownloadISOProps } from './DownloadIso';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 
 type DownloadIsoModalProps = DownloadISOProps & {
   isOpen: boolean;
@@ -12,13 +12,12 @@ const DownloadIsoModal: React.FC<DownloadIsoModalProps> = ({ isOpen, ...props })
   return (
     <Modal
       aria-label={t('ai:Download host discovery ISO dialog')}
-      title={t('ai:Add host')}
       isOpen={isOpen}
       onClose={props.onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="download-discovery-iso-modal"
     >
+      <ModalHeader title={t('ai:Add host')} />
       <DownloadIso {...props} />
     </Modal>
   );

package/lib/common/components/clusterConfiguration/ProxyFields.css

@@ -1,3 +1,3 @@
-.ai-proxy-fields .pf-v5-c-check__body {
+.ai-proxy-fields .pf-v6-c-check__body {
   width: 100%;
 }

package/lib/common/components/clusterConfiguration/ProxyFields.tsx

@@ -35,7 +35,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:URL must start with <bold>http</bold>."
             />
           </div>
@@ -58,7 +58,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:URL must start with <bold>http</bold> (https schemes are not currently supported)."
             />
           </div>
@@ -81,7 +81,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:Use a comma to separate each listed domain. Preface a domain with <bold>.</bold> to include its subdomains. Use <bold>*</bold> to bypass the proxy for all destinations."
             />
           </div>

package/lib/common/components/clusterConfiguration/SecurityFields.tsx

@@ -11,14 +11,19 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const SshPublicKeyHelperText: React.FC<{
   fieldId?: string;
-}> = ({ fieldId = 'sshPublicKey' }) => {
+  allowMultipleKeys?: boolean;
+}> = ({ fieldId = 'sshPublicKey', allowMultipleKeys = false }) => {
   const { t } = useTranslation();
   return (
     <HelperText id={fieldId}>
-      <HelperTextItem>
-        {t(
-          'ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.',
-        )}{' '}
+      <HelperTextItem data-testid="ssh-public-key-helper-text">
+        {allowMultipleKeys
+          ? t(
+              'ai:Paste the content of public SSH keys you want to use to connect to the hosts into this field. Multiple keys can be separated by newlines.',
+            )
+          : t(
+              'ai:Paste the content of a public SSH key you want to use to connect to the hosts into this field.',
+            )}{' '}
         <ExternalLink href={SSH_GENERATION_DOC_LINK}>{t('ai:Learn more')}</ExternalLink>
       </HelperTextItem>
     </HelperText>
@@ -29,12 +34,14 @@ interface SecurityFieldsFieldsProps {
   clusterSshKey: Cluster['sshPublicKey'];
   imageSshKey?: Cluster['imageInfo']['sshPublicKey'];
   isDisabled?: boolean;
+  allowMultipleKeys?: boolean;
 }
 
 const SecurityFields = ({
   clusterSshKey,
   imageSshKey,
   isDisabled = false,
+  allowMultipleKeys = false,
 }: SecurityFieldsFieldsProps) => {
   //shareSshKey shouldn't response to changes. imageSshKey stays the same, there's a loading state while it's requested
   //clusterSshKey updating causes the textarea to disappear when the user clears it to edit it
@@ -77,7 +84,7 @@ const SecurityFields = ({
         <RenderIf condition={!shareSshKey}>
           <TextAreaField
             name="sshPublicKey"
-            helperText={<SshPublicKeyHelperText />}
+            helperText={<SshPublicKeyHelperText allowMultipleKeys={allowMultipleKeys} />}
             onBlur={handleSshKeyBlur}
             isDisabled={isDisabled}
           />