refactor(pci-instances): isolate ssh selector from react hook form

Signed-off-by: tsiorifamonjena <[email protected]>

Author: Tsiorifamonjena

packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.page.tsx

@@ -40,7 +40,7 @@ export const instanceCreationSchema = z.object({
   distributionImageType: distributionImageTypeSchema,
   distributionImageName: distributionImageNameSchema,
   sshKeyId: sshKeyIdSchema,
-  sshPublicKey: sshPublicKeySchema.nullable(),
+  newSshPublicKey: sshPublicKeySchema.nullable(),
 });
 
 const CreateInstance: FC = () => {

packages/manager/apps/pci-instances/src/pages/instances/create/components/SshKey.component.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import { Button, Divider, Icon, Text } from '@ovhcloud/ods-react';
 import { useTranslation } from 'react-i18next';
 import { SshKeyHelper } from './sshKey/SshKeyHelper.component';
@@ -7,12 +7,13 @@ import { deps } from '@/deps/deps';
 import { useProjectId } from '@/hooks/project/useProjectId';
 import { selectSshKeys } from '../view-models/sshKeysViewModel';
 import AddSshKey from './sshKey/AddSshKey.component';
-import { SubmitHandler } from 'react-hook-form';
+import { SubmitHandler, useFormContext, useWatch } from 'react-hook-form';
 import { TAddSshKeyForm } from '../CreateInstance.schema';
 import Banner from '@/components/banner/Banner.component';
 import SshKeySelector, {
   TCustomSelectSshKeyData,
 } from './sshKey/SshKeySelector.component';
+import { TInstanceCreationForm } from '../CreateInstance.page';
 
 type TSshKeyProps = {
   microRegion: string;
@@ -21,9 +22,10 @@ type TSshKeyProps = {
 const SshKey = ({ microRegion }: TSshKeyProps) => {
   const projectId = useProjectId();
   const { t } = useTranslation('creation');
+
   const [openSshKeyform, setOpenSshKeyForm] = useState<boolean>(false);
   const [newSshKeys, setNewSshKeys] = useState<TCustomSelectSshKeyData[]>([]);
-  const [openSshKeyAddedMessage, setopenSshKeyAddedMessage] = useState<boolean>(
+  const [openSshKeyAddedMessage, setOpenSshKeyAddedMessage] = useState<boolean>(
     false,
   );
 
@@ -34,16 +36,31 @@ const SshKey = ({ microRegion }: TSshKeyProps) => {
     [isLoading, microRegion, projectId],
   );
 
+  const { control, setValue } = useFormContext<TInstanceCreationForm>();
+  const selectedSshKeyId = useWatch({
+    control,
+    name: 'sshKeyId',
+  });
+
   const unavailableSshKeyIds = useMemo(
     () => [...newSshKeys, ...sshKeys].map(({ value }) => value),
     [newSshKeys, sshKeys],
   );
 
+  const sshKeyItems = useMemo(() => {
+    const existingSshKeys = sshKeys.map((item) => ({
+      ...item,
+      newSshPublicKey: null,
+    }));
+
+    return [...newSshKeys, ...existingSshKeys];
+  }, [newSshKeys, sshKeys]);
+
   const handleOpenSshKeyForm = () => setOpenSshKeyForm(true);
 
   const handleCloseSshKeyForm = () => setOpenSshKeyForm(false);
 
-  const handleCloseSshKeyAddedMessage = () => setopenSshKeyAddedMessage(false);
+  const handleCloseSshKeyAddedMessage = () => setOpenSshKeyAddedMessage(false);
 
   const handleAddSshKey: SubmitHandler<TAddSshKeyForm> = ({
     sshKeyId,
@@ -53,24 +70,43 @@ const SshKey = ({ microRegion }: TSshKeyProps) => {
       {
         label: sshKeyId,
         value: sshKeyId,
-        sshPublicKey,
+        newSshPublicKey: sshPublicKey,
       },
       ...prevSshKeys,
     ]);
 
     handleCloseSshKeyForm();
-    setopenSshKeyAddedMessage(true);
+    setOpenSshKeyAddedMessage(true);
   };
 
   const handleCancelAddSshKey = () => {
     if (sshKeys.length === 0 && newSshKeys.length === 0) return;
     handleCloseSshKeyForm();
   };
 
+  const updateSshKeyFields = useCallback(
+    (sshKey: TCustomSelectSshKeyData) => {
+      setValue('sshKeyId', sshKey.value);
+      setValue('newSshPublicKey', sshKey.newSshPublicKey);
+    },
+    [setValue],
+  );
+
+  const handleSelectSshKey = (sshKey: TCustomSelectSshKeyData) => {
+    updateSshKeyFields(sshKey);
+    handleCloseSshKeyAddedMessage();
+  };
+
   useEffect(() => {
     if (!isLoading && sshKeys.length === 0) setOpenSshKeyForm(true);
   }, [isLoading, sshKeys]);
 
+  useEffect(() => {
+    const selectedSshKey = sshKeyItems[0];
+
+    if (selectedSshKey) updateSshKeyFields(selectedSshKey);
+  }, [sshKeyItems, updateSshKeyFields]);
+
   return (
     <section>
       <Divider spacing="64" />
@@ -114,9 +150,9 @@ const SshKey = ({ microRegion }: TSshKeyProps) => {
           ) : (
             <>
               <SshKeySelector
-                sshKeysItems={sshKeys}
-                newSshKeys={newSshKeys}
-                onValueChange={handleCloseSshKeyAddedMessage}
+                items={sshKeyItems}
+                value={selectedSshKeyId ? [selectedSshKeyId] : []}
+                onValueChange={handleSelectSshKey}
               />
               <Button variant="ghost" onClick={handleOpenSshKeyForm}>
                 <Icon name="plus" />

packages/manager/apps/pci-instances/src/pages/instances/create/components/sshKey/SshKeySelector.component.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo } from 'react';
+import { FC } from 'react';
 import {
   FormField,
   FormFieldLabel,
@@ -9,72 +9,35 @@ import {
 } from '@ovhcloud/ods-react';
 import { useTranslation } from 'react-i18next';
 import { TSshKeyData } from '../../view-models/sshKeysViewModel';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { TInstanceCreationForm } from '../../CreateInstance.page';
 
 export type TCustomSelectSshKeyData = TSshKeyData & {
-  sshPublicKey: string | null;
+  newSshPublicKey: string | null;
 };
 
 type TSshKeySelectorProps = {
-  sshKeysItems: TSshKeyData[];
-  newSshKeys: TCustomSelectSshKeyData[];
-  onValueChange: () => void;
+  items: TCustomSelectSshKeyData[];
+  value: string[];
+  onValueChange: (sshKey: TCustomSelectSshKeyData) => void;
 };
 
 const SshKeySelector: FC<TSshKeySelectorProps> = ({
-  sshKeysItems,
-  newSshKeys,
+  items,
+  value,
   onValueChange,
 }) => {
   const { t } = useTranslation('creation');
-  const { control, setValue } = useFormContext<TInstanceCreationForm>();
-  const selectedSshKeyId = useWatch({
-    control,
-    name: 'sshKeyId',
-  });
-
-  const updateSshKeyFields = useCallback(
-    (sshKey: TCustomSelectSshKeyData) => {
-      setValue('sshKeyId', sshKey.value);
-      setValue('sshPublicKey', sshKey.sshPublicKey);
-    },
-    [setValue],
-  );
 
   const handleSelectSshKey = ({ items }: SelectValueChangeDetail) => {
     const selectedSshKey = (items as TCustomSelectSshKeyData[])[0];
-    if (selectedSshKey) {
-      updateSshKeyFields(selectedSshKey);
-      onValueChange();
-    }
+    if (selectedSshKey) onValueChange(selectedSshKey);
   };
 
-  const items = useMemo(() => {
-    const existingSshKeys = sshKeysItems.map((item) => ({
-      ...item,
-      sshPublicKey: null,
-    }));
-
-    return [...newSshKeys, ...existingSshKeys];
-  }, [newSshKeys, sshKeysItems]);
-
-  useEffect(() => {
-    const selectedSshKey = items[0];
-
-    if (selectedSshKey) updateSshKeyFields(selectedSshKey);
-  }, [items, updateSshKeyFields]);
-
   return (
     <FormField className="max-w-[32%] my-4">
       <FormFieldLabel>
         {t('creation:pci_instance_creation_select_sshKey_dropdown_label')}
       </FormFieldLabel>
-      <Select
-        items={items}
-        value={selectedSshKeyId ? [selectedSshKeyId] : []}
-        onValueChange={handleSelectSshKey}
-      >
+      <Select items={items} value={value} onValueChange={handleSelectSshKey}>
         <SelectControl />
         <SelectContent />
       </Select>

packages/manager/apps/pci-instances/src/pages/instances/create/hooks/useForm.ts

@@ -71,7 +71,7 @@ export const useForm = (projectId: string) => {
 
   const sshKeyIdDefaultValue = null;
 
-  const sshPublicKeyDefaultValue = null;
+  const newSshPublicKeyDefaultValue = null;
 
   const formMethods = useReactHookForm({
     resolver: zodResolver(instanceCreationSchema),
@@ -89,7 +89,7 @@ export const useForm = (projectId: string) => {
       distributionImageType: distributionImageTypeDefaultValue,
       distributionImageName: distributionImageNameDefaultValue,
       sshKeyId: sshKeyIdDefaultValue,
-      sshPublicKey: sshPublicKeyDefaultValue,
+      newSshPublicKey: newSshPublicKeyDefaultValue,
     },
     mode: 'onChange',
   });