feat(kms): add iam management on service keys

ref: MANAGER-15238 Signed-off-by: Romain Jamet <[email protected]>
ovh · Oct 17, 2024 · 74cc7c1 · 74cc7c1
1 parent 60cf4e3
commit 74cc7c1
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 135 deletions.
diff --git a/...nagement-service/public/translations/key-management-service/dashboard/Messages_fr_FR.json b/...nagement-service/public/translations/key-management-service/dashboard/Messages_fr_FR.json
@@ -55,9 +55,5 @@
   "key_management_service_dashboard_dashboard_field_state_suspended": "Suspendu",
   "key_management_service_dashboard_dashboard_field_state_toActivate": "À activer",
   "key_management_service_dashboard_dashboard_field_state_toDelete": "À supprimer",
-  "key_management_service_dashboard_dashboard_field_state_toSuspend": "À suspendre",
-  "key_management_service_update_name_success_banner": "Le nom a été modifié avec succès.",
-  "key_management_service_update_name_error_banner": "La modification n'a pas été prise en compte.",
-  "key_management_service_dashboard_modal_input_label": "Nouveau nom d'affichage",
-  "key_management_service_update_name": ""
+  "key_management_service_dashboard_dashboard_field_state_toSuspend": "À suspendre"
 }
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,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   ActionMenu,
   Clipboard,
@@ -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,6 +24,7 @@ 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 <Clipboard value={props.id} />;
@@ -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/...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/hooks/useOkmsServiceKeys.ts b/packages/manager/apps/key-management-service/src/data/hooks/useOkmsServiceKeys.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { ApiError } from '@ovh-ux/manager-core-api';
 import { ErrorResponse } from '@/types/api.type';
 import {
   getOkmsServiceKeyResource,
@@ -16,7 +17,7 @@ import {
 /* Service Key List */
 
 export const useAllOkmsServiceKeys = (okmsId: string) => {
-  return useQuery({
+  return useQuery<{ data: OkmsAllServiceKeys[] }, ApiError>({
     queryKey: getOkmsServiceKeyResourceListQueryKey(okmsId),
     queryFn: () => getListingOkmsServiceKey(okmsId),
     retry: false,

diff --git a/packages/manager/apps/key-management-service/src/data/hooks/useUpdateOkmsName.ts b/packages/manager/apps/key-management-service/src/data/hooks/useUpdateOkmsName.ts
@@ -1,6 +1,5 @@
 import { ApiError, ApiResponse } from '@ovh-ux/manager-core-api';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import {
@@ -36,7 +35,7 @@ export const useUpdateOkmsName = ({
   onError,
 }: UpdateOkmsParams) => {
   const queryClient = useQueryClient();
-  const { t } = useTranslation('key-management-service/dashboard');
+  const { t } = useTranslation('key-management-service/serviceKeys');
   const { addError, addSuccess, clearNotifications } = useNotifications();
 
   const {
@@ -65,13 +64,16 @@ export const useUpdateOkmsName = ({
         queryKey: getOkmsResourceQueryKey(okmsId),
       });
       clearNotifications();
-      addSuccess(t('key_management_service_update_name_success_banner'), true);
+      addSuccess(
+        t('key_management_service_service-keys_update_name_success'),
+        true,
+      );
       onSuccess?.();
     },
     onError: (result: ApiError) => {
       clearNotifications();
       addError(
-        t('key_management_service_update_name_error_banner', {
+        t('key_management_service_service-keys_update_error', {
           error: result.message,
         }),
         true,

diff --git a/...es/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx b/...es/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActions.spec.tsx
@@ -1,8 +1,13 @@
 import { describe, expect, it, vi } from 'vitest';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { renderHook } from '@testing-library/react';
-import { OkmsKeyTypes, OkmsServiceKeyState } from '@/types/okmsServiceKey.type';
+import {
+  OkmsAllServiceKeys,
+  OkmsKeyTypes,
+  OkmsServiceKeyState,
+} from '@/types/okmsServiceKey.type';
 import useServiceKeyActionsList from './useServiceKeyActionsList';
+import { OKMS } from '@/types/okms.type';
 
 vi.mock('react-i18next', () => ({
   useTranslation: vi.fn(() => ({ t: vi.fn((key) => key) })),
@@ -31,13 +36,25 @@ vi.mock('@/data/hooks/useUpdateOkmsServiceKey', () => ({
 }));
 
 describe('useServiceKeyActionsList', () => {
-  const okmsId = 'testOkmsId';
-  const commonKeyProps = {
+  const okms: OKMS = {
+    iam: {
+      displayName: 'kms-1',
+      id: '1b4e7c8e-d1b8-4b46-a584-52c8b4b0225c',
+      urn: `urn:v1:eu:resource:okms:1b4e7c8e-d1b8-4b46-a584-52c8b4b0225c`,
+    },
+    id: '7f3a82ac-a8d8-4c2a-ab0c-f6e86ddf6a7c',
+    kmipEndpoint: 'eu-west-rbx.okms.ovh.net:1234',
+    region: 'EU_WEST_RBX',
+    restEndpoint: 'https://eu-west-rbx.okms.ovh.net',
+    swaggerEndpoint: '"https://swagger-eu-west-rbx.okms.ovh.net',
+  };
+
+  const commonKeyProps: Omit<OkmsAllServiceKeys, 'type' | 'state'> = {
     id: 'testKeyId',
     name: 'testKeyName',
-    keys: [] as any[],
+    keys: [],
     createdAt: '2023-01-01T00:00:00Z',
-    operations: [] as any[],
+    operations: [],
   };
 
   const useCases = [
@@ -171,7 +188,7 @@ describe('useServiceKeyActionsList', () => {
   useCases.forEach(({ description, okmsKey, expectedActions }) => {
     it(description, () => {
       const { result } = renderHook(() =>
-        useServiceKeyActionsList(okmsId, okmsKey),
+        useServiceKeyActionsList(okms, okmsKey),
       );
       expect(result.current).toEqual(
         expect.arrayContaining(

diff --git a/...ges/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx b/...ges/manager/apps/key-management-service/src/hooks/serviceKey/useServiceKeyActionsList.tsx
@@ -13,9 +13,10 @@ import {
   OkmsKeyTypes,
   OkmsServiceKeyState,
 } from '@/types/okmsServiceKey.type';
+import { OKMS } from '@/types/okms.type';
 
 const useServiceKeyActionsList = (
-  okmsId: string,
+  okms: OKMS,
   okmsKey?: OkmsAllServiceKeys,
   isListMode?: boolean,
 ) => {
@@ -26,10 +27,10 @@ const useServiceKeyActionsList = (
     deleteKmsServiceKey,
     isPending: deleteIsPending,
   } = useDeleteOkmsServiceKey({
-    okmsId,
+    okmsId: okms.id,
     keyId: okmsKey?.id,
     onSuccess: () => {
-      navigate(`/${okmsId}/${ROUTES_URLS.keys}`);
+      navigate(`/${okms.id}/${ROUTES_URLS.keys}`);
     },
     onError: () => {},
   });
@@ -38,7 +39,7 @@ const useServiceKeyActionsList = (
     updateKmsServiceKey,
     isPending: updateIsPending,
   } = useUpdateOkmsServiceKey({
-    okmsId,
+    okmsId: okms.id,
     keyId: okmsKey?.id,
     onSuccess: () => {
       addSuccess(
@@ -72,9 +73,11 @@ const useServiceKeyActionsList = (
         return isListMode
           ? navigate(`${ROUTES_URLS.serviceKeyDeactivate}/${okmsKey?.id}`)
           : navigate(
-              `/${okmsId}/${ROUTES_URLS.keys}/${okmsKey?.id}/${ROUTES_URLS.serviceKeyDeactivate}`,
+              `/${okms.id}/${ROUTES_URLS.keys}/${okmsKey?.id}/${ROUTES_URLS.serviceKeyDeactivate}`,
             );
       },
+      iamActions: ['okms:apiovh:resource/serviceKey/deactivate'],
+      urn: okms.iam.urn,
     });
   }
   if (
@@ -87,6 +90,8 @@ const useServiceKeyActionsList = (
       color: ODS_THEME_COLOR_INTENT.primary,
       disabled: updateIsPending,
       onClick: () => updateKmsServiceKey({ state: OkmsServiceKeyState.active }),
+      iamActions: ['okms:apiovh:resource/serviceKey/activate'],
+      urn: okms.iam.urn,
     });
   }
   if (
@@ -100,6 +105,8 @@ const useServiceKeyActionsList = (
       disabled:
         okmsKey?.state === OkmsServiceKeyState.active || deleteIsPending,
       onClick: () => deleteKmsServiceKey(),
+      iamActions: ['okms:apiovh:resource/serviceKey/delete'],
+      urn: okms.iam.urn,
     });
   }
   return items;

diff --git a/...gement-service/src/pages/dashboard/generalInformations/updateName/OkmsNameUpdateModal.tsx b/...gement-service/src/pages/dashboard/generalInformations/updateName/OkmsNameUpdateModal.tsx
@@ -6,7 +6,10 @@ import { useUpdateOkmsName } from '@/data/hooks/useUpdateOkmsName';
 import { useKMSServiceInfos } from '@/data/hooks/useKMSServiceInfos';
 
 const OkmsNameUpdateModal = () => {
-  const { t } = useTranslation('key-management-service/dashboard');
+  const { t: tDashboard } = useTranslation('key-management-service/dashboard');
+  const { t: tCredential } = useTranslation(
+    'key-management-service/credential',
+  );
   const { okmsId } = useParams();
   const { data: okmsServiceInfos, isLoading } = useKMSServiceInfos(okmsId);
   const navigate = useNavigate();
@@ -19,8 +22,10 @@ const OkmsNameUpdateModal = () => {
 
   return (
     <UpdateNameModal
-      headline={t('key_management_service_dashboard_modal_title')}
-      inputLabel={t('key_management_service_dashboard_modal_input_label')}
+      headline={tDashboard('key_management_service_dashboard_modal_title')}
+      inputLabel={tCredential(
+        'key_management_service_credential_dashboard_name',
+      )}
       defaultValue={okmsServiceInfos?.data.resource.displayName}
       isLoading={isLoading || isPending}
       error={error?.message}

diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx
@@ -33,7 +33,12 @@ export default function DashboardPage() {
     'key-management-service/credential',
   );
   const { okmsId } = useParams();
-  const { data: okms, isLoading: isOkmsLoading, isError: isOkmsError, error: okmsError } = useOKMSById(okmsId);
+  const {
+    data: okms,
+    isLoading: isOkmsLoading,
+    isError: isOkmsError,
+    error: okmsError,
+  } = useOKMSById(okmsId);
 
   const {
     data: okmsServiceInfos,
@@ -93,7 +98,7 @@ export default function DashboardPage() {
       id: ROUTES_URLS.okmsUpdateName,
       label: tDashboard('key_management_service_update_name'),
       navigateTo: `/${okmsId}/${ROUTES_URLS.okmsUpdateName}`,
-    }
+    },
   ];
 
   const headerProps: HeadersProps = {