feat(pci-instances): add list of ssh keys and save new

Tsiorifamonjena · ovh-cds · Tsiorifamonjena · commit dad0b0481f72 · 2025-11-13T11:58:31.000+01:00
ref: #TAPC-4623, #TAPC-4626

Signed-off-by: tsiorifamonjena &lt;tsiorifamonjena.tianjanahary.ext@corp.ovh.com&gt;
Co-authored-by: CDS Translator Agent &lt;opensource@ovh.net&gt;
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_de_DE.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_de_DE.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Geben Sie Ihren SSH-Schlüssel ein",
   "pci_instance_creation_select_sshKey_add_key_description": "Die akzeptierten SSH-Schlüsseltypen sind RSA, ECDSA und ED25519. Ihr SSH-Schlüssel wird in allen Regionen und Rechenzentren von OVHcloud Ihres Projekts verfügbar sein.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Schlüssel validieren",
-  "pci_instance_creation_select_sshKey_add_new": "Einen neuen SSH-Schlüssel erstellen"
+  "pci_instance_creation_select_sshKey_add_new": "Einen neuen SSH-Schlüssel erstellen",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Wählen Sie einen vorhandenen Schlüssel aus",
+  "pci_instance_creation_select_sshKey_add_key_done": "Ihr SSH-Schlüssel wird am Ende des Konfigurationsprozesses erstellt.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Bitte wählen Sie einen anderen Namen, dieser ist bereits vergeben."
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_en_GB.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_en_GB.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Enter your SSH key",
   "pci_instance_creation_select_sshKey_add_key_description": "Accepted SSH keys are of type RSA, ECDSA, and ED25519. Your SSH key will be available across all OVHcloud regions and datacenters for your project.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Validate the key",
-  "pci_instance_creation_select_sshKey_add_new": "Create a new SSH key"
+  "pci_instance_creation_select_sshKey_add_new": "Create a new SSH key",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Select an existing key",
+  "pci_instance_creation_select_sshKey_add_key_done": "Your SSH key will be created at the end of the setup process.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Thank you for choosing a different name, this one is already in use."
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_es_ES.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_es_ES.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Introduce tu clave SSH",
   "pci_instance_creation_select_sshKey_add_key_description": "Las claves SSH aceptadas son de tipo RSA, ECDSA y ED25519. Tu clave SSH estará disponible en todas las regiones y centros de datos de OVHcloud de tu proyecto.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Validar la clave",
-  "pci_instance_creation_select_sshKey_add_new": "Crear una nueva clave SSH"
+  "pci_instance_creation_select_sshKey_add_new": "Crear una nueva clave SSH",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Seleccione una clave existente",
+  "pci_instance_creation_select_sshKey_add_key_done": "Su clave SSH se creará al final del proceso de configuración.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Gracias por elegir un nombre diferente, este ya está en uso."
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_CA.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_CA.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Entrez votre clé SSH",
   "pci_instance_creation_select_sshKey_add_key_description": "Les clés SSH acceptées sont de type RSA, ECDSA et ED25519. Votre clé SSH sera disponible sur l’ensemble des régions et datacenters d’OVHcloud de votre projet.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Valider la clé",
-  "pci_instance_creation_select_sshKey_add_new": "Créer une nouvelle clé SSH"
+  "pci_instance_creation_select_sshKey_add_new": "Créer une nouvelle clé SSH",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Sélectionnez une clé existante",
+  "pci_instance_creation_select_sshKey_add_key_done": "Votre clé SSH sera créée à la fin du processus de configuration.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Merci de choisir un nom différent, celui-ci est déjà utilisé"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_FR.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_FR.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Entrez votre clé SSH",
   "pci_instance_creation_select_sshKey_add_key_description": "Les clés SSH acceptées sont de type RSA, ECDSA et ED25519. Votre clé SSH sera disponible sur l’ensemble des régions et datacenters d’OVHcloud de votre projet.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Valider la clé",
-  "pci_instance_creation_select_sshKey_add_new": "Créer une nouvelle clé SSH"
+  "pci_instance_creation_select_sshKey_add_new": "Créer une nouvelle clé SSH",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Sélectionnez une clé existante",
+  "pci_instance_creation_select_sshKey_add_key_done": "Votre clé SSH sera créée à la fin du processus de configuration.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Merci de choisir un nom différent, celui-ci est déjà utilisé"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_it_IT.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_it_IT.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Inserisci la tua chiave SSH",
   "pci_instance_creation_select_sshKey_add_key_description": "Le chiavi SSH accettate sono di tipo RSA, ECDSA e ED25519. La tua chiave SSH sarà disponibile in tutte le regioni e i data center di OVHcloud del tuo progetto.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Conferma la chiave",
-  "pci_instance_creation_select_sshKey_add_new": "Crea una nuova chiave SSH"
+  "pci_instance_creation_select_sshKey_add_new": "Crea una nuova chiave SSH",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Seleziona una chiave esistente",
+  "pci_instance_creation_select_sshKey_add_key_done": "La tua chiave SSH verrà creata al termine del processo di configurazione.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Grazie per aver scelto un nome diverso, questo è già in uso."
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_pl_PL.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_pl_PL.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Wprowadź swój klucz SSH",
   "pci_instance_creation_select_sshKey_add_key_description": "Akceptowane klucze SSH to RSA, ECDSA i ED25519. Twój klucz SSH będzie dostępny we wszystkich regionach i centrach danych OVHcloud w Twoim projekcie.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Zatwierdź klucz",
-  "pci_instance_creation_select_sshKey_add_new": "Utwórz nowy klucz SSH"
+  "pci_instance_creation_select_sshKey_add_new": "Utwórz nowy klucz SSH",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Wybierz istniejący klucz",
+  "pci_instance_creation_select_sshKey_add_key_done": "Twój klucz SSH zostanie utworzony na końcu procesu konfiguracji.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Dziękujemy za wybranie innej nazwy, ta jest już używana."
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_pt_PT.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_pt_PT.json
@@ -87,5 +87,8 @@
   "pci_instance_creation_select_sshKey_add_key_label": "Insira sua chave SSH",
   "pci_instance_creation_select_sshKey_add_key_description": "As chaves SSH aceitas são do tipo RSA, ECDSA e ED25519. Sua chave SSH estará disponível em todas as regiões e datacenters da OVHcloud do seu projeto.",
   "pci_instance_creation_select_sshKey_add_key_submit_btn": "Validar a chave",
-  "pci_instance_creation_select_sshKey_add_new": "Criar uma nova chave SSH"
+  "pci_instance_creation_select_sshKey_add_new": "Criar uma nova chave SSH",
+  "pci_instance_creation_select_sshKey_dropdown_label": "Selecione uma chave existente",
+  "pci_instance_creation_select_sshKey_add_key_done": "A sua chave SSH será criada no final do processo de configuração.",
+  "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Obrigado por escolher um nome diferente, este já está em uso."
 }
diff --git a/packages/manager/apps/pci-instances/src/components/banner/Banner.component.tsx b/packages/manager/apps/pci-instances/src/components/banner/Banner.component.tsx
@@ -0,0 +1,24 @@
+import { FC, PropsWithChildren } from 'react';
+import {
+  Message,
+  MessageIcon,
+  ICON_NAME,
+  MessageBody,
+  MessageProp,
+} from '@ovhcloud/ods-react';
+
+type TBannerProps = PropsWithChildren<MessageProp>;
+
+const Banner: FC<TBannerProps> = ({ children, color, ...props }) => {
+  const icon =
+    color === 'warning' ? ICON_NAME.triangleExclamation : ICON_NAME.circleInfo;
+
+  return (
+    <Message color={color} dismissible={false} {...props}>
+      <MessageIcon name={icon} />
+      <MessageBody>{children}</MessageBody>
+    </Message>
+  );
+};
+
+export default Banner;
diff --git a/packages/manager/apps/pci-instances/src/constants.ts b/packages/manager/apps/pci-instances/src/constants.ts
@@ -30,7 +30,7 @@ export const actionSectionRegex = /(?:rescue\/(start|end)|(?<!rescue\/)(start|st
 
 export const instanceNameRegex = /^[a-zA-Z0-9-_.]{0,255}$/;
 
-export const sshKeyRegex = /^(ssh|sk|ecdsa)-(rsa|ed\d+|sha2|ssh|ecdsa)\-?(ed\d+@.*|sha2.*|nistp\d+@.*)?.*/;
+export const sshKeyRegex = /^(ssh-(rsa|ed\d+)|ecdsa-sha2-nistp\d+) [A-Za-z0-9+\/=]+(?: [^\s]+)?$/;
 
 export const CHANGELOG_LINKS = {
   changelog:
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.page.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.page.tsx
@@ -20,6 +20,7 @@ import {
   distributionImageNameSchema,
   sshNameSchema,
   sshKeySchema,
+  sshIdSchema,
 } from '@/pages/instances/create/CreateInstance.schema';
 
 import { useInstancesCatalog } from '@/data/hooks/catalog/useInstancesCatalog';
@@ -40,6 +41,7 @@ export const instanceCreationSchema = z.object({
   distributionImageType: distributionImageTypeSchema,
   distributionImageName: distributionImageNameSchema,
   sshName: sshNameSchema.nullable(),
+  sshId: sshIdSchema,
   sshKey: sshKeySchema.optional(),
 });
 
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.schema.ts b/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.schema.ts
@@ -34,13 +34,36 @@ export const distributionImageTypeSchema = z.string().nullable();
 
 export const distributionImageNameSchema = z.string().nullable();
 
-export const sshNameSchema = z.string().min(1);
-
-export const sshKeySchema = z.string().regex(sshKeyRegex);
-
-export const addSshKeyFormSchema = z.object({
-  sshName: sshNameSchema,
-  sshKey: sshKeySchema,
-});
-
-export type TAddSshKeyForm = z.infer<typeof addSshKeyFormSchema>;
+export const sshNameSchema = z.string().nonempty();
+
+export const sshIdSchema = z.string().optional();
+
+export const sshKeySchema = z
+  .string()
+  .trim()
+  .regex(sshKeyRegex);
+
+type TAddSshKeyFormSchemaBuilderArgs = Partial<{
+  unavailableNames: string[];
+  requiredError: string;
+  unavailableNameError: string;
+}>;
+
+export const buildAddSshKeyFormSchema = ({
+  unavailableNames = [],
+  requiredError,
+  unavailableNameError,
+}: TAddSshKeyFormSchemaBuilderArgs = {}) =>
+  z.object({
+    sshName: z
+      .string()
+      .nonempty(requiredError)
+      .refine((name) => !unavailableNames.includes(name), {
+        message: unavailableNameError,
+      }),
+    sshKey: sshKeySchema,
+  });
+
+export type TAddSshKeyForm = z.infer<
+  ReturnType<typeof buildAddSshKeyFormSchema>
+>;
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/Name.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/Name.component.tsx
@@ -3,7 +3,7 @@ import { FormField, FormFieldLabel, Input, Text } from '@ovhcloud/ods-react';
 import clsx from 'clsx';
 import { useFormContext } from 'react-hook-form';
 
-export const nameDefaultValue = 'default name to add';
+export const nameDefaultValue = 'default_name_to_add';
 
 export const Name = () => {
   const { t } = useTranslation(['common', 'creation']);
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/SshKey.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/SshKey.component.tsx
@@ -1,24 +1,28 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Button,
   Divider,
+  FormField,
+  FormFieldLabel,
   Icon,
-  ICON_NAME,
-  Message,
-  MessageBody,
-  MessageIcon,
+  Select,
+  SelectContent,
+  SelectControl,
+  SelectOptionItem,
+  SelectValueChangeDetail,
   Text,
 } from '@ovhcloud/ods-react';
 import { useTranslation } from 'react-i18next';
 import { SshKeyHelper } from './sshKey/SshKeyHelper.component';
 import { useSshKeys } from '@/data/hooks/ssh/useSshKeys';
 import { deps } from '@/deps/deps';
 import { useProjectId } from '@/hooks/project/useProjectId';
-import { selectSshKeys } from '../view-models/sshKeysViewModel';
+import { selectSshKeys, TSshKeyData } from '../view-models/sshKeysViewModel';
 import AddSshKey from './sshKey/AddSshKey.component';
-import { SubmitHandler, useFormContext } from 'react-hook-form';
+import { SubmitHandler, useFormContext, useWatch } from 'react-hook-form';
 import { TInstanceCreationForm } from '../CreateInstance.page';
 import { TAddSshKeyForm } from '../CreateInstance.schema';
+import Banner from '@/components/banner/Banner.component';
 
 type TSshKeyProps = {
   microRegion: string;
@@ -28,27 +32,82 @@ const SshKey = ({ microRegion }: TSshKeyProps) => {
   const projectId = useProjectId();
   const { t } = useTranslation('creation');
   const [openSshKeyform, setOpenSshKeyForm] = useState<boolean>(false);
-  const { setValue } = useFormContext<TInstanceCreationForm>();
+  const [sshKeyItems, setSshKeyItems] = useState<TSshKeyData[]>([]);
+  const [isSshKeyAdded, setIsSshKeyAdded] = useState<boolean>(false);
+  const { control, setValue } = useFormContext<TInstanceCreationForm>();
+  const selectedSshKeyId = useWatch({
+    control,
+    name: 'sshId',
+  });
 
   const { isLoading } = useSshKeys(microRegion);
 
-  const sshKeys = selectSshKeys(deps)(projectId, microRegion);
+  const sshKeys = useMemo(
+    () => (isLoading ? [] : selectSshKeys(deps)(projectId, microRegion)),
+    [isLoading, microRegion, projectId],
+  );
+
+  const unavailableSshNames = useMemo(
+    () => sshKeyItems.map(({ label }) => label),
+    [sshKeyItems],
+  );
 
   const handleOpenSshKeyForm = () => setOpenSshKeyForm(true);
 
+  const handleCloseSshKeyForm = () => setOpenSshKeyForm(false);
+
+  const handleCloseSshKeyAddedMessage = () => setIsSshKeyAdded(false);
+
   const handleAddSshKey: SubmitHandler<TAddSshKeyForm> = ({
     sshName,
     sshKey,
   }) => {
     setValue('sshName', sshName);
     setValue('sshKey', sshKey);
-    setOpenSshKeyForm(false);
+
+    setSshKeyItems((prevSshKeys) => [
+      {
+        label: sshName,
+        value: prevSshKeys.length.toString(),
+      },
+      ...prevSshKeys,
+    ]);
+
+    handleCloseSshKeyForm();
+    setIsSshKeyAdded(true);
+  };
+
+  const handleCancelAddSshKey = () => {
+    if (sshKeyItems.length === 0) return;
+    handleCloseSshKeyForm();
+  };
+
+  const updateSshKeyFields = useCallback(
+    (sshKeys: TSshKeyData[]) => {
+      const selectedSshKey = sshKeys[0];
+
+      if (selectedSshKey) {
+        setValue('sshId', selectedSshKey.value);
+        setValue('sshName', selectedSshKey.label);
+      }
+    },
+    [setValue],
+  );
+
+  const handleSelectSshKey = ({ items }: SelectValueChangeDetail) => {
+    updateSshKeyFields(items as SelectOptionItem<TSshKeyData>[]);
+    handleCloseSshKeyAddedMessage();
   };
 
   useEffect(() => {
+    if (!isLoading) setSshKeyItems(sshKeys);
     if (!isLoading && sshKeys.length === 0) setOpenSshKeyForm(true);
   }, [isLoading, sshKeys]);
 
+  useEffect(() => {
+    updateSshKeyFields(sshKeyItems);
+  }, [sshKeyItems, updateSshKeyFields]);
+
   return (
     <section>
       <Divider spacing="64" />
@@ -61,27 +120,56 @@ const SshKey = ({ microRegion }: TSshKeyProps) => {
       <Text className="mt-4" preset="paragraph">
         {t('creation:pci_instance_creation_select_sshKey_description')}
       </Text>
+      {isSshKeyAdded && (
+        <div className="mt-4">
+          <Banner
+            color="information"
+            dismissible
+            onRemove={handleCloseSshKeyAddedMessage}
+          >
+            {t('creation:pci_instance_creation_select_sshKey_add_key_done')}
+          </Banner>
+        </div>
+      )}
       {!isLoading && (
         <>
-          {sshKeys.length === 0 && (
+          {sshKeyItems.length === 0 && (
             <div className="mt-4">
-              <Message color="warning">
-                <MessageIcon name={ICON_NAME.triangleExclamation} />
-                <MessageBody>
-                  {t(
-                    'creation:pci_instance_creation_select_sshKey_missing_warning',
-                  )}
-                </MessageBody>
-              </Message>
+              <Banner color="warning">
+                {t(
+                  'creation:pci_instance_creation_select_sshKey_missing_warning',
+                )}
+              </Banner>
             </div>
           )}
           {openSshKeyform ? (
-            <AddSshKey onSubmit={handleAddSshKey} />
+            <AddSshKey
+              unavailableNames={unavailableSshNames}
+              onSubmit={handleAddSshKey}
+              onCancel={handleCancelAddSshKey}
+            />
           ) : (
-            <Button variant="ghost" onClick={handleOpenSshKeyForm}>
-              <Icon name="plus" />
-              {t('creation:pci_instance_creation_select_sshKey_add_new')}
-            </Button>
+            <>
+              <FormField className="max-w-[32%] my-4">
+                <FormFieldLabel>
+                  {t(
+                    'creation:pci_instance_creation_select_sshKey_dropdown_label',
+                  )}
+                </FormFieldLabel>
+                <Select
+                  items={sshKeyItems}
+                  value={selectedSshKeyId ? [selectedSshKeyId] : []}
+                  onValueChange={handleSelectSshKey}
+                >
+                  <SelectControl />
+                  <SelectContent />
+                </Select>
+              </FormField>
+              <Button variant="ghost" onClick={handleOpenSshKeyForm}>
+                <Icon name="plus" />
+                {t('creation:pci_instance_creation_select_sshKey_add_new')}
+              </Button>
+            </>
           )}
         </>
       )}
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/sshKey/AddSshKey.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/sshKey/AddSshKey.component.tsx
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/hooks/useForm.ts b/packages/manager/apps/pci-instances/src/pages/instances/create/hooks/useForm.ts
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/view-models/sshKeysViewModel.ts b/packages/manager/apps/pci-instances/src/pages/instances/create/view-models/sshKeysViewModel.ts
