feat(okms): add a key/value editor to secret data

ref: #MANAGER-18318

Signed-off-by: Mathieu Mousnier <[email protected]>

Author: mathieumousnier

packages/manager/apps/okms/public/translations/secret-manager/Messages_fr_FR.json

@@ -31,7 +31,10 @@
   "okms_activation_in_progress": "Veuillez patienter, création en cours.",
   "okms_list": "Liste de domaines OKMS",
   "editor": "Éditeur JSON",
+  "error_duplicate_keys": "Vous ne pouvez pas avoir deux clés identiques.",
+  "error_empty_keys": "Vous ne pouvez pas avoir de clé vide.",
   "error_invalid_json": "JSON non valide",
+  "error_key_value_conversion": "La valeur ne peut pas être convertie en paires clé-valeur.",
   "error_path_allowed_characters": "Le path ne peut contenir que les caractères suivants: A-Z a-z 0-9 . _ : / = @ et -",
   "error_path_structure": "Le path ne peut commencer ou finir par '/', ni contenir deux '/' à la suite.",
   "error_invalid_duration": "La durée d'expiration doit être une durée (ex: 30s, 5m, 2h, 7d, 7d1h30m10s)",

packages/manager/apps/okms/src/common/components/drawer/DrawerInnerComponents.component.tsx

@@ -5,7 +5,11 @@ import { OdsButton } from '@ovhcloud/ods-components/react';
 // Those components will be moved to MRC to get a composable version of the drawer
 
 export const DrawerContent = ({ children }: PropsWithChildren) => {
-  return <div className="flex flex-1 flex-col">{children}</div>;
+  return (
+    <section className="flex-1 overflow-y-auto outline-none">
+      {children}
+    </section>
+  );
 };
 
 export type DrawerFooterProps = PropsWithChildren & {
@@ -37,7 +41,7 @@ export const DrawerFooter = ({
   secondaryButtonLabel,
 }: DrawerFooterProps) => {
   return (
-    <footer className="mb-6 space-x-2 ">
+    <footer className="my-6 space-x-2 ">
       {secondaryButtonLabel && (
         <OdsButton
           variant={'ghost'}

packages/manager/apps/okms/src/modules/secret-manager/components/SecretValueToggle.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { OdsSwitch, OdsSwitchItem } from '@ovhcloud/ods-components/react';
+
+export type SecretValueToggleState = 'key-value' | 'json';
+
+type SecretValueToggleProps = {
+  state: SecretValueToggleState;
+  onChange: (state: SecretValueToggleState) => void;
+};
+
+export const SecretValueToggle = ({
+  state,
+  onChange,
+}: SecretValueToggleProps) => {
+  return (
+    <OdsSwitch name="secretValueType">
+      <OdsSwitchItem
+        isChecked={state === 'key-value'}
+        onClick={() => onChange('key-value')}
+      >
+        Clé valeur
+      </OdsSwitchItem>
+      <OdsSwitchItem
+        isChecked={state === 'json'}
+        onClick={() => onChange('json')}
+      >
+        JSON
+      </OdsSwitchItem>
+    </OdsSwitch>
+  );
+};

packages/manager/apps/okms/src/modules/secret-manager/components/form/SecretDataFormField.component.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  useController,
+  UseControllerProps,
+  useFormContext,
+} from 'react-hook-form';
+import {
+  formatKeyValuePairsFromString,
+  formatStringFromKeyValuePairs,
+  isSimpleKeyValueObjectFromString,
+} from '@secret-manager/utils/keyValue';
+import { OdsButton, OdsFormField } from '@ovhcloud/ods-components/react';
+import { KeyValuesEditorItem, KeyValuePair } from './KeyValuesEditorItem';
+import { KeyValuesEditorErrorMessage } from './KeyValuesEditorErrorMessage';
+
+type FormFieldInput = {
+  data: string;
+};
+
+export const KeyValuesEditor = <T extends FormFieldInput>({
+  name,
+  control,
+}: UseControllerProps<T>) => {
+  const { t } = useTranslation(['secret-manager']);
+  const { field, fieldState } = useController({ name, control });
+  const { setError } = useFormContext();
+
+  // We store the data in a local array to allow 2 rows with the same key
+  // Otherwise, an row would disappear while typing as soon as a key appears twice
+  const [keyValuePairs, setKeyValuePairs] = useState<KeyValuePair[]>(
+    formatKeyValuePairsFromString(field.value),
+  );
+
+  const updateFormState = (newKeyValuePairs: KeyValuePair[]) => {
+    // Update local state
+    setKeyValuePairs(newKeyValuePairs);
+
+    // Look for duplicate keys
+    const keys = new Set(newKeyValuePairs.map(({ key }) => key));
+    const hasDuplicateKeys = keys.size !== newKeyValuePairs.length;
+    if (hasDuplicateKeys) {
+      setError(name, { message: t('error_duplicate_keys') });
+      return;
+    }
+
+    // Update form state
+    const data = formatStringFromKeyValuePairs(newKeyValuePairs);
+    field.onChange(data);
+  };
+
+  const handleItemChange = (index: number, item: KeyValuePair) => {
+    const newKeyValuePairs = [...keyValuePairs];
+    newKeyValuePairs[index] = item;
+    updateFormState(newKeyValuePairs);
+  };
+
+  const handleAddItem = () => {
+    const newKeyValuePairs = [...keyValuePairs];
+    newKeyValuePairs.push({ key: '', value: '' });
+    updateFormState(newKeyValuePairs);
+  };
+
+  const handleDeleteItem = (index: number) => {
+    const newKeyValuePairs = [...keyValuePairs];
+    newKeyValuePairs.splice(index, 1);
+    updateFormState(newKeyValuePairs);
+  };
+
+  const handleItemBlur = () => {
+    updateFormState(keyValuePairs);
+  };
+
+  const isKeyValueObject = isSimpleKeyValueObjectFromString(field.value);
+  const isValueEmpty = !field.value;
+  if (isKeyValueObject || isValueEmpty) {
+    return (
+      <div className="space-y-5">
+        <OdsFormField
+          className="w-full block space-y-1"
+          error={fieldState.error?.message}
+        >
+          {keyValuePairs.map(({ key, value }, index) => (
+            <KeyValuesEditorItem
+              key={`key-value-pair-item-index-${index}`}
+              index={index}
+              item={{ key, value }}
+              onChange={(item) => handleItemChange(index, item)}
+              onDelete={() => handleDeleteItem(index)}
+              onBlur={handleItemBlur}
+            />
+          ))}
+        </OdsFormField>
+        <OdsButton
+          size="sm"
+          variant="outline"
+          icon="plus"
+          label="Ajouter une ligne"
+          onClick={handleAddItem}
+        />
+      </div>
+    );
+  }
+
+  return <KeyValuesEditorErrorMessage />;
+};

packages/manager/apps/okms/src/modules/secret-manager/components/form/keyValuesEditor/KeyValuesEditor.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { OdsMessage } from '@ovhcloud/ods-components/react';
+
+export const KeyValuesEditorErrorMessage = () => {
+  const { t } = useTranslation(['secret-manager']);
+  return (
+    <OdsMessage color="danger" isDismissible={false}>
+      {t('error_key_value_conversion')}
+    </OdsMessage>
+  );
+};

packages/manager/apps/okms/src/modules/secret-manager/components/form/keyValuesEditor/KeyValuesEditorErrorMessage.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  OdsFormField,
+  OdsInput,
+  OdsButton,
+} from '@ovhcloud/ods-components/react';
+import {
+  OdsInputChangeEventDetail,
+  OdsInputCustomEvent,
+} from '@ovhcloud/ods-components';
+
+export type KeyValuePair = {
+  key: string;
+  value: string;
+};
+
+type KeyValuesEditorItemProps = {
+  index: number;
+  item: KeyValuePair;
+  onChange: (item: KeyValuePair) => void;
+  onDelete: () => void;
+  onBlur: () => void;
+};
+
+type OdsInputChangeEventHandler = (
+  event: OdsInputCustomEvent<OdsInputChangeEventDetail>,
+) => void;
+
+export const KeyValuesEditorItem = ({
+  index,
+  item,
+  onChange,
+  onDelete,
+  onBlur,
+}: KeyValuesEditorItemProps) => {
+  const keyInputName = `key-value-pair-key-input-index-${index}`;
+  const valueInputName = `key-value-pair-value-input-index-${index}`;
+
+  const handleKeyChange: OdsInputChangeEventHandler = (event) => {
+    onChange({ ...item, key: event.detail.value.toString() });
+  };
+
+  const handleValueChange: OdsInputChangeEventHandler = (event) => {
+    onChange({ ...item, value: event.detail.value.toString() });
+  };
+
+  return (
+    <div className="flex gap-2 items-center">
+      <OdsFormField className="w-full">
+        <label slot="label">Clé</label>
+        <OdsInput
+          name={keyInputName}
+          value={item.key}
+          onOdsChange={handleKeyChange}
+          onOdsBlur={onBlur}
+        />
+      </OdsFormField>
+      <OdsFormField className="w-full">
+        <label slot="label">Valeur</label>
+
+        <OdsInput
+          name={valueInputName}
+          value={item.value}
+          onOdsChange={handleValueChange}
+          onOdsBlur={onBlur}
+        />
+      </OdsFormField>
+      <OdsButton
+        className="mt-5"
+        size="sm"
+        variant="ghost"
+        icon="trash"
+        label=""
+        onClick={onDelete}
+      />
+    </div>
+  );
+};

packages/manager/apps/okms/src/modules/secret-manager/components/form/keyValuesEditor/KeyValuesEditorItem.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { useController, UseControllerProps } from 'react-hook-form';
+import { isSimpleKeyValueObjectFromString } from '@secret-manager/utils/keyValue';
+import {
+  SecretValueToggle,
+  SecretValueToggleState,
+} from '@secret-manager/components/SecretValueToggle';
+import { KeyValuesEditor } from '../keyValuesEditor/KeyValuesEditor';
+import { SecretDataInput } from './SecretDataInput.component';
+
+type FormFieldInput = {
+  data: string;
+};
+
+export const SecretDataFormField = <T extends FormFieldInput>({
+  name,
+  control,
+}: UseControllerProps<T>) => {
+  const { field } = useController({ name, control });
+
+  const isKeyValueObject = isSimpleKeyValueObjectFromString(field.value);
+  const isEmpty = !field.value;
+  const [toggleState, setToggleState] = useState<SecretValueToggleState>(
+    isKeyValueObject || isEmpty ? 'key-value' : 'json',
+  );
+
+  return (
+    <div className="flex flex-col gap-6 pl-1 mt-1">
+      <div>
+        <SecretValueToggle state={toggleState} onChange={setToggleState} />
+      </div>
+      {toggleState === 'key-value' ? (
+        <KeyValuesEditor name={name} control={control} />
+      ) : (
+        <SecretDataInput name={name} control={control} />
+      )}
+    </div>
+  );
+};

packages/manager/apps/okms/src/modules/secret-manager/components/form/secretKeyValueField/SecretDataFormField.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useController, UseControllerProps } from 'react-hook-form';
+import { OdsFormField, OdsTextarea } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { SECRET_FORM_FIELD_TEST_IDS } from '../form.constants';
+
+type FormFieldInput = {
+  data: string;
+};
+
+export const SecretDataInput = <T extends FormFieldInput>({
+  name,
+  control,
+}: UseControllerProps<T>) => {
+  const { t } = useTranslation(['secret-manager']);
+  const { field, fieldState } = useController({ name, control });
+
+  return (
+    <OdsFormField error={fieldState.error?.message} className="w-full">
+      <label htmlFor={field.name} slot="label">
+        {t('editor')}
+      </label>
+      <OdsTextarea
+        id={field.name}
+        name={field.name}
+        value={field.value || ''}
+        onOdsBlur={field.onBlur}
+        onOdsChange={field.onChange}
+        isResizable
+        rows={12}
+        data-testid={SECRET_FORM_FIELD_TEST_IDS.INPUT_DATA}
+      />
+    </OdsFormField>
+  );
+};