ACM-18354: Implement user interface for the multiple SSH keys

libs/locales/lib/en/translation.json

@@ -666,7 +666,8 @@
   "ai:Packet loss": "Packet loss",
   "ai:Password": "Password",
   "ai:Paste in 1 or more PEM formatted certificates that you want the cluster to trust.": "Paste in 1 or more PEM formatted certificates that you want the cluster to trust.",
-  "ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.": "Paste the content of a public ssh key you want to use to connect to the hosts into this field.",
+  "ai:Paste the content of a public SSH key you want to use to connect to the hosts into this field.": "Paste the content of a public SSH key you want to use to connect to the hosts into this field.",
+  "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.": "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.",
   "ai:Pending": "Pending",
   "ai:Pending - {{operatorsCountString}}": "Pending - {{operatorsCountString}}",
   "ai:Pending host assignment": "Pending host assignment",

libs/ui-lib/lib/cim/components/ClusterDeployment/networking/ClusterDeploymentNetworkingForm.tsx

@@ -157,7 +157,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
           )}
         </StackItem>
         <StackItem>
-          <SecurityFields clusterSshKey={cluster.sshPublicKey} />
+          <SecurityFields clusterSshKey={cluster.sshPublicKey} allowMultipleKeys={true} />
         </StackItem>
         <StackItem>
           <TextContent>

libs/ui-lib/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -17,7 +17,7 @@ import {
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
   vipArrayValidationSchema,
-  sshPublicKeyValidationSchema,
+  sshPublicKeyListValidationSchema,
   hostSubnetValidationSchema,
   httpProxyValidationSchema,
   noProxyValidationSchema,
@@ -52,7 +52,7 @@ const getNetworkConfigurationValidationSchema = (
       serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
       apiVips: vipArrayValidationSchema(hostSubnets, values, initialValues.apiVips),
       ingressVips: vipArrayValidationSchema(hostSubnets, values, initialValues.ingressVips),
-      sshPublicKey: sshPublicKeyValidationSchema,
+      sshPublicKey: sshPublicKeyListValidationSchema,
       hostSubnet: hostSubnetValidationSchema,
       httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
       httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported

libs/ui-lib/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.',
-        )}{' '}
+        {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}
           />

libs/ui-lib/lib/common/components/ui/formik/validationSchemas.ts

@@ -122,14 +122,12 @@ export const sshPublicKeyListValidationSchema = Yup.string()
       if (!value) {
         return true;
       }
-      return !!trimSshPublicKey(value).match(SSH_PUBLIC_KEY_REGEX);
-
-      // disable until mutliple keys are supported (https://issues.redhat.com/browse/METAL-250)
-      // return (
-      //   trimSshPublicKey(value)
-      //     .split('\n')
-      //     .find((line: string) => !line.match(SSH_PUBLIC_KEY_REGEX)) === undefined
-      // );
+
+      return (
+        trimSshPublicKey(value)
+          .split('\n')
+          .find((line: string) => !line.match(SSH_PUBLIC_KEY_REGEX)) === undefined
+      );
     },
   )
   .test('ssh-public-keys-unique', 'SSH public keys must be unique.', (value?: string) => {

libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -21,7 +21,7 @@ import {
   AlertFormikError,
   httpProxyValidationSchema,
   noProxyValidationSchema,
-  sshPublicKeyListValidationSchema,
+  sshPublicKeyValidationSchema,
 } from '../../../common/components/ui';
 import {
   DiscoveryImageType,
@@ -54,7 +54,7 @@ export type OcmDiscoveryImageFormValues = OcmImageCreateParams &
 
 const validationSchema = Yup.lazy((values: OcmDiscoveryImageFormValues) =>
   Yup.object<OcmDiscoveryImageFormValues>().shape({
-    sshPublicKey: sshPublicKeyListValidationSchema,
+    sshPublicKey: sshPublicKeyValidationSchema,
     httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
     httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
     noProxy: noProxyValidationSchema,

libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -9,7 +9,7 @@ import {
   NetworkConfigurationValues,
   serviceNetworkValidationSchema,
   IPv4ValidationSchema,
-  sshPublicKeyListValidationSchema,
+  sshPublicKeyValidationSchema,
   IPV4_STACK,
   DUAL_STACK,
   vipArrayValidationSchema,
@@ -75,7 +75,7 @@ export const getNetworkConfigurationValidationSchema = (
         values,
         initialValues.ingressVips,
       ),
-      sshPublicKey: sshPublicKeyListValidationSchema,
+      sshPublicKey: sshPublicKeyValidationSchema,
       machineNetworks:
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()