fix(kms): lean (#13788)

ref: MANAGER-15718 Signed-off-by: Vincent BONMARCHAND <[email protected]>
ovh · Oct 25, 2024 · f262440 · f262440
1 parent f5e0529
commit f262440
Show file tree

Hide file tree

Showing 41 changed files with 829 additions and 400 deletions.
diff --git a/packages/manager/apps/key-management-service/package.json b/packages/manager/apps/key-management-service/package.json
@@ -53,9 +53,12 @@
     "@playwright/test": "^1.34.3",
     "@tanstack/react-query-devtools": "^5.51.21",
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@vitejs/plugin-react": "^4.2.1",
-    "typescript": "^4.3.2",
+    "element-internals-polyfill": "^1.3.11",
+    "msw": "2.1.7",
+    "typescript": "^5.1.6",
     "vite": "^5.2.13",
     "vitest": "^1.2.0"
   },

diff --git a/...gement-service/public/translations/key-management-service/serviceKeys/Messages_en_GB.json b/...gement-service/public/translations/key-management-service/serviceKeys/Messages_en_GB.json
@@ -32,8 +32,8 @@
   "key_management_service_service-keys_dashboard_field_operations_decrypt": "Decrypt",
   "key_management_service_service-keys_dashboard_field_operations_sign": "Signature",
   "key_management_service_service-keys_dashboard_field_operations_verify": "Verification",
-  "key_management_service_service-keys_dashboard_field_operations_wrapKey": "Encapsulation",
-  "key_management_service_service-keys_dashboard_field_operations_unwrapKey": "Decapsulation",
+  "key_management_service_service-keys_dashboard_field_operations_wrapKey": "Wrap",
+  "key_management_service_service-keys_dashboard_field_operations_unwrapKey": "Unwrap",
   "key_management_service_service-keys_update_name_title": "Rename",
   "key_management_service_service-keys_update_name_error_required": "The name must be between 1 and 32 characters long.",
   "key_management_service_service-keys_update_name_error_max": "The maximum number of characters has been exceeded. (32 characters maximum)",
@@ -52,7 +52,7 @@
   "key_management_service_service-keys_create_crypto_field_type_title": "Key type",
   "key_management_service_service-keys_create_crypto_field_type_subtitle": "Specify the type of algorithm used for the encryption key.",
   "key_management_service_service-keys_create_crypto_field_type_description_rsa": "Asymmetric key for signature and verification.",
-  "key_management_service_service-keys_create_crypto_field_type_description_oct": "Symmetric key for encryption/decryption and encapsulation.",
+  "key_management_service_service-keys_create_crypto_field_type_description_oct": "Symmetric key for encryption/decryption and wrapping.",
   "key_management_service_service-keys_create_crypto_field_type_description_ec": "Elliptical asymmetric key for signature and verification.",
   "key_management_service_service-keys_create_crypto_field_size_title": "Key size (algorithm)",
   "key_management_service_service-keys_create_crypto_field_size_subtitle": "Select the encryption key size.",

diff --git a/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx b/packages/manager/apps/key-management-service/src/components/Listing/ListingCells.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   ActionMenu,
-  DataGridClipboardCell,
+  Clipboard,
   DataGridTextCell,
   Links,
 } from '@ovh-ux/manager-react-components';
@@ -10,7 +10,7 @@ import {
   PageLocation,
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ODS_ICON_NAME, ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
 import { OsdsSpinner } from '@ovhcloud/ods-components/react';
@@ -24,9 +24,10 @@ import { useOkmsServiceKeyById } from '@/data/hooks/useOkmsServiceKeys';
 import { useFormattedDate } from '@/hooks/useFormattedDate';
 import { useKMSServiceInfos } from '@/data/hooks/useKMSServiceInfos';
 import { OkmsServiceState } from '../layout-helpers/Dashboard/okmsServiceState/OkmsServiceState.component';
+import { OkmsContext } from '@/pages/dashboard';
 
 export const DatagridCellId = (props: OKMS | OkmsAllServiceKeys) => {
-  return <DataGridClipboardCell text={props.id} />;
+  return <Clipboard value={props.id} />;
 };
 
 export const DatagridCellName = (props: OKMS) => {
@@ -62,7 +63,7 @@ export const DatagridCellRegion = (props: OKMS) => {
 
 export const DatagridCellStatus = (props: OKMS) => {
   const { data: OkmsServiceInfos, isLoading, isError } = useKMSServiceInfos(
-    props,
+    props.id,
   );
   if (isLoading) {
     return <OsdsSpinner inline size={ODS_SPINNER_SIZE.sm} />;
@@ -97,7 +98,7 @@ export const DatagridServiceKeyCellName = (props: OkmsAllServiceKeys) => {
 };
 
 export const DatagridServiceKeyCellId = (props: OkmsAllServiceKeys) => {
-  return <DataGridClipboardCell text={props.id} />;
+  return <Clipboard value={props.id} />;
 };
 
 export const DatagridCellType = (props: OkmsAllServiceKeys) => {
@@ -129,12 +130,12 @@ export const DatagridStatus = (props: OkmsAllServiceKeys) => {
 };
 
 export const DatagridServiceKeyActionMenu = (props: OkmsAllServiceKeys) => {
-  const { okmsId } = useParams();
+  const okms = useContext(OkmsContext);
   const { data: serviceKey, isPending } = useOkmsServiceKeyById({
-    okmsId,
+    okmsId: okms.id,
     keyId: props.id,
   });
-  const actionList = useServiceKeyActionsList(okmsId, serviceKey?.data, true);
+  const actionList = useServiceKeyActionsList(okms, serviceKey?.data, true);
 
   if (isPending) {
     return <></>;

diff --git a/packages/manager/apps/key-management-service/src/components/Modal/EditNameModal.tsx b/packages/manager/apps/key-management-service/src/components/Modal/EditNameModal.tsx
diff --git a/...ice/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx b/...ice/src/components/layout-helpers/Dashboard/GeneralInformationsTiles/InformationsTile.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { OsdsButton, OsdsIcon, OsdsLink } from '@ovhcloud/ods-components/react';
 import { Clipboard } from '@ovh-ux/manager-react-components';
 import {
@@ -15,48 +15,41 @@ import {
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useTranslation } from 'react-i18next';
+import { Outlet, useNavigate } from 'react-router-dom';
 import { OKMS } from '@/types/okms.type';
-import EditNameModal from '@/components/Modal/EditNameModal';
-import { useUpdateOkmsName } from '@/data/hooks/useUpdateOkmsName';
 import { Tile } from '@/components/dashboard/tile/tile.component';
 import { TileSeparator } from '@/components/dashboard/tile-separator/tileSeparator';
 import { TileValue } from '@/components/dashboard/tile-value/tileValue.component';
 import { TileItem } from '@/components/dashboard/tile-item/tileItem.component';
+import { KMSServiceInfos } from '@/types/okmsService.type';
 
 type InformationTileProps = {
   okmsData?: OKMS;
+  okmsServiceInfos?: KMSServiceInfos;
 };
 
-const InformationsTile = ({ okmsData }: InformationTileProps) => {
+const InformationsTile = ({
+  okmsData,
+  okmsServiceInfos,
+}: InformationTileProps) => {
   const { t } = useTranslation('key-management-service/dashboard');
   const { trackClick } = useOvhTracking();
-  const [editModalDisplayed, setEditModalDisplayed] = useState(false);
-  const { updateKmsName } = useUpdateOkmsName({});
+  const navigate = useNavigate();
 
   return (
     <Tile title={t('general_informations')}>
-      {editModalDisplayed && (
-        <EditNameModal
-          okms={okmsData}
-          toggleModal={setEditModalDisplayed}
-          onEditName={(okms: OKMS) =>
-            updateKmsName({ okms: okms.id, displayName: okms.iam.displayName })
-          }
-        />
-      )}
       <TileSeparator />
       <TileItem title={t('key_management_service_dashboard_field_label_name')}>
         <div className="flex justify-between items-center">
-          <TileValue value={okmsData?.iam.displayName} />
+          <TileValue value={okmsServiceInfos?.resource.displayName} />
           <OsdsButton
             circle
             variant={ODS_BUTTON_VARIANT.stroked}
             color={ODS_THEME_COLOR_INTENT.primary}
-            onClick={() => setEditModalDisplayed(true)}
+            onClick={() => navigate('update-name')}
           >
             <OsdsIcon
               aria-label="edit"
-              onClick={() => setEditModalDisplayed(true)}
               name={ODS_ICON_NAME.PEN}
               size={ODS_ICON_SIZE.xs}
               color={ODS_THEME_COLOR_INTENT.primary}
@@ -113,6 +106,7 @@ const InformationsTile = ({ okmsData }: InformationTileProps) => {
           {okmsData?.swaggerEndpoint}
         </OsdsLink>
       </TileItem>
+      <Outlet />
     </Tile>
   );
 };

diff --git a/...ice/src/components/serviceKey/serviceKeyStateActions/ServiceKeyStateActions.component.tsx b/...ice/src/components/serviceKey/serviceKeyStateActions/ServiceKeyStateActions.component.tsx
@@ -1,5 +1,6 @@
-import { OsdsIcon, OsdsButton } from '@ovhcloud/ods-components/react';
 import React from 'react';
+import { OsdsIcon, OsdsButton } from '@ovhcloud/ods-components/react';
+import { ManagerButton } from '@ovh-ux/manager-react-components';
 import {
   ODS_BUTTON_SIZE,
   ODS_BUTTON_TEXT_ALIGN,
@@ -9,9 +10,10 @@ import {
 } from '@ovhcloud/ods-components';
 import { OkmsAllServiceKeys } from '@/types/okmsServiceKey.type';
 import useServiceKeyActionsList from '@/hooks/serviceKey/useServiceKeyActionsList';
+import { OKMS } from '@/types/okms.type';
 
 type ServiceKeyStateActionsProps = {
-  okmsId: string;
+  okms: OKMS;
   okmsKey: OkmsAllServiceKeys;
 };
 
@@ -23,38 +25,62 @@ const ActionsIcons = [
 ];
 
 const ServiceKeyStateActions = ({
-  okmsId,
+  okms,
   okmsKey,
 }: ServiceKeyStateActionsProps) => {
-  const actionList = useServiceKeyActionsList(okmsId, okmsKey);
+  const actionList = useServiceKeyActionsList(okms, okmsKey);
 
   const getActionIcon = (id: number) => {
     return ActionsIcons.find((actionIcon) => actionIcon.id === id)?.icon;
   };
   return (
     <>
-      {actionList.map((action) => (
-        <OsdsButton
-          key={action.id}
-          color={action.color}
-          variant={ODS_BUTTON_VARIANT.ghost}
-          size={ODS_BUTTON_SIZE.sm}
-          textAlign={ODS_BUTTON_TEXT_ALIGN.start}
-          onClick={action.onClick}
-          disabled={action.disabled || undefined}
-          href={action.href}
-          download={action.download}
-        >
-          <span slot="start">{action.label}</span>
-          <span slot="end">
-            <OsdsIcon
-              name={getActionIcon(action.id)}
-              size={ODS_ICON_SIZE.xxs}
-              color={action.color}
-            />
-          </span>
-        </OsdsButton>
-      ))}
+      {actionList.map((action) => {
+        return action.iamActions ? (
+          <ManagerButton
+            key={action.id}
+            color={action.color}
+            variant={ODS_BUTTON_VARIANT.ghost}
+            size={ODS_BUTTON_SIZE.sm}
+            textAlign={ODS_BUTTON_TEXT_ALIGN.start}
+            onClick={action.onClick}
+            disabled={action.disabled || undefined}
+            href={action.href}
+            download={action.download}
+            urn={action.urn}
+            iamActions={action.iamActions}
+          >
+            <span slot="start">{action.label}</span>
+            <span slot="end">
+              <OsdsIcon
+                name={getActionIcon(action.id)}
+                size={ODS_ICON_SIZE.xxs}
+                color={action.color}
+              />
+            </span>
+          </ManagerButton>
+        ) : (
+          <OsdsButton
+            key={action.id}
+            variant={ODS_BUTTON_VARIANT.ghost}
+            size={ODS_BUTTON_SIZE.sm}
+            color={action.color}
+            href={action.href}
+            download={action.download}
+            disabled={action.disabled || undefined}
+            onClick={action.onClick}
+          >
+            <span slot="start">{action.label}</span>
+            <span slot="end">
+              <OsdsIcon
+                name={getActionIcon(action.id)}
+                size={ODS_ICON_SIZE.xxs}
+                color={action.color}
+              />
+            </span>
+          </OsdsButton>
+        );
+      })}
     </>
   );
 };

diff --git a/packages/manager/apps/key-management-service/src/data/api/okms.ts b/packages/manager/apps/key-management-service/src/data/api/okms.ts
@@ -92,20 +92,6 @@ export const getListingIcebergV2 = async ({
   }
 };
 
-/**
- *  Get okms listing with iceberg V2
- */
-export const getListingIceberg = async () => {
-  try {
-    const List = await fetchIcebergV2({
-      route: '/okms/resource',
-    });
-    return List.data as OKMS[];
-  } catch (error) {
-    return null;
-  }
-};
-
 export const getOkmsResourceQueryKey = (okmsId: string) => [
   `get/okms/resource/${okmsId}`,
 ];