feat(hpc-managed-vcd): add delete button for storage & compute

ref: MANAGER-16676 Signed-off-by: David Arsène <[email protected]>
ovh · Jan 14, 2025 · 2d36b20 · 2d36b20
1 parent 078784d
commit 2d36b20
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 86 deletions.
diff --git a/...s/manager/apps/hpc-vmware-managed-vcd/public/translations/datacentres/Messages_fr_FR.json b/...s/manager/apps/hpc-vmware-managed-vcd/public/translations/datacentres/Messages_fr_FR.json
@@ -6,5 +6,6 @@
   "managed_vcd_vdc_quota_value": "{{quota}} Go",
   "managed_vcd_vdc_vcpu_speed": "Vitesse vCPU",
   "managed_vcd_vdc_vcpu_value": "{{speed}} GHz",
-  "managed_vcd_vdc_usage": "Usage"
+  "managed_vcd_vdc_usage": "Usage",
+  "managed_vcd_vdc_contact_support": "Merci de contacter le support"
 }
diff --git a/...er/apps/hpc-vmware-managed-vcd/src/components/datagrid/compute/ComputeCells.component.tsx b/...er/apps/hpc-vmware-managed-vcd/src/components/datagrid/compute/ComputeCells.component.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
+  ODS_ICON_NAME,
+  ODS_ICON_SIZE,
+} from '@ovhcloud/ods-components';
+import {
+  OsdsButton,
+  OsdsIcon,
+  OsdsTooltip,
+  OsdsTooltipContent,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ODS_THEME_COLOR_HUE,
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+  ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import { VCDCompute } from '@ovh-ux/manager-module-vcd-api';
+import { DataGridTextCell } from '@ovh-ux/manager-react-components';
+
+export const DatagridIdCell = (vcdCompute: VCDCompute) => (
+  <DataGridTextCell>{vcdCompute?.id}</DataGridTextCell>
+);
+
+export const DatagridVHostProfilCell = (vcdCompute: VCDCompute) => (
+  <DataGridTextCell>{vcdCompute?.currentState?.profile}</DataGridTextCell>
+);
+
+export const DatagridCpuCountCell = (vcdCompute: VCDCompute) => (
+  <DataGridTextCell>{vcdCompute.currentState?.vCPUCount}</DataGridTextCell>
+);
+
+export const DatagridBillingCell = (vcdCompute: VCDCompute) => {
+  const { t } = useTranslation('datacentres/compute');
+  return (
+    <DataGridTextCell>
+      {t(
+        `managed_vcd_vdc_compute_billing_${vcdCompute.currentState?.billingType}`,
+      )}
+    </DataGridTextCell>
+  );
+};
+
+export const DatagridRamCountCell = (vcdCompute: VCDCompute) => {
+  const { t } = useTranslation('datacentres');
+
+  return (
+    <DataGridTextCell>
+      {t('managed_vcd_vdc_quota_value', {
+        quota: vcdCompute.currentState?.memoryQuota,
+      })}
+    </DataGridTextCell>
+  );
+};
+
+export const ActionDeleteCell = () => {
+  const { t } = useTranslation('datacentres');
+
+  return (
+    <OsdsTooltip>
+      <OsdsButton
+        size={ODS_BUTTON_SIZE.sm}
+        variant={ODS_BUTTON_VARIANT.ghost}
+        color={ODS_THEME_COLOR_INTENT.primary}
+        disabled
+      >
+        <OsdsIcon
+          name={ODS_ICON_NAME.BIN}
+          size={ODS_ICON_SIZE.xs}
+          color={ODS_THEME_COLOR_INTENT.default}
+        />
+      </OsdsButton>
+      <OsdsTooltipContent slot="tooltip-content">
+        <OsdsText
+          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+          color={ODS_THEME_COLOR_INTENT.text}
+          size={ODS_THEME_TYPOGRAPHY_SIZE._100}
+          hue={ODS_THEME_COLOR_HUE._500}
+        >
+          {t('managed_vcd_vdc_contact_support')}
+        </OsdsText>
+      </OsdsTooltipContent>
+    </OsdsTooltip>
+  );
+};
diff --git a/...er/apps/hpc-vmware-managed-vcd/src/components/datagrid/storage/StorageCells.component.tsx b/...er/apps/hpc-vmware-managed-vcd/src/components/datagrid/storage/StorageCells.component.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { VCDStorage } from '@ovh-ux/manager-module-vcd-api';
+import { DataGridTextCell } from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
+import { capitalize } from '@/utils/capitalize';
+
+export const DatagridIdCell = (vcdStorage: VCDStorage) => (
+  <DataGridTextCell>{vcdStorage?.id}</DataGridTextCell>
+);
+
+export const DatagridNameCell = (vcdStorage: VCDStorage) => (
+  <DataGridTextCell>{vcdStorage?.currentState?.name}</DataGridTextCell>
+);
+
+export const DatagridProfileCell = (vcdStorage: VCDStorage) => (
+  <DataGridTextCell>{vcdStorage?.currentState?.profile}</DataGridTextCell>
+);
+
+export const DatagridTypeCell = (vcdStorage: VCDStorage) => (
+  <DataGridTextCell>
+    {capitalize(vcdStorage?.currentState?.type)}
+  </DataGridTextCell>
+);
+
+export const DatagridCapacityCell = (vcdStorage: VCDStorage) => {
+  const { t } = useTranslation('datacentres');
+  return (
+    <DataGridTextCell>
+      {t('managed_vcd_vdc_quota_value', {
+        quota: vcdStorage?.currentState.capacity,
+      })}
+    </DataGridTextCell>
+  );
+};
+
+export const DatagridBillingCell = (vcdStorage: VCDStorage) => {
+  const { t } = useTranslation('datacentres/compute');
+  return (
+    <DataGridTextCell>
+      {t(
+        `managed_vcd_vdc_compute_billing_${vcdStorage?.currentState?.billingType}`,
+      )}
+    </DataGridTextCell>
+  );
+};
diff --git a/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/compute/DatacentreCompute.page.tsx b/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/compute/DatacentreCompute.page.tsx
@@ -1,52 +1,25 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
-import { DataGridTextCell } from '@ovh-ux/manager-react-components';
-import { OsdsButton } from '@ovhcloud/ods-components/react';
-import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   getVcdDatacentreComputeRoute,
   getVdcComputeQueryKey,
-  VCDCompute,
 } from '@ovh-ux/manager-module-vcd-api';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { OsdsButton } from '@ovhcloud/ods-components/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ID_LABEL } from '../../dashboard.constants';
+import { VHOST_LABEL, VHOSTS_LABEL } from './datacentreCompute.constants';
+import {
+  ActionDeleteCell,
+  DatagridBillingCell,
+  DatagridCpuCountCell,
+  DatagridIdCell,
+  DatagridRamCountCell,
+  DatagridVHostProfilCell,
+} from '@/components/datagrid/compute/ComputeCells.component';
 import DatagridContainer from '@/components/datagrid/container/DatagridContainer.component';
 import { subRoutes, urls } from '@/routes/routes.constant';
-import { VHOST_LABEL, VHOSTS_LABEL } from './datacentreCompute.constants';
-import { ID_LABEL } from '../../dashboard.constants';
-
-const DatagridIdCell = (vcdCompute: VCDCompute) => (
-  <DataGridTextCell>{vcdCompute?.id}</DataGridTextCell>
-);
-const DatagridVHostProfilCell = (vcdCompute: VCDCompute) => (
-  <DataGridTextCell>{vcdCompute?.currentState?.profile}</DataGridTextCell>
-);
-
-const DatagridCpuCountCell = (vcdCompute: VCDCompute) => (
-  <DataGridTextCell>{vcdCompute.currentState?.vCPUCount}</DataGridTextCell>
-);
-const DatagridBillingCell = (vcdCompute: VCDCompute) => {
-  const { t } = useTranslation('datacentres/compute');
-  return (
-    <DataGridTextCell>
-      {t(
-        `managed_vcd_vdc_compute_billing_${vcdCompute.currentState?.billingType}`,
-      )}
-    </DataGridTextCell>
-  );
-};
-
-const DatagridRamCountCell = (vcdCompute: VCDCompute) => {
-  const { t } = useTranslation('datacentres');
-
-  return (
-    <DataGridTextCell>
-      {t('managed_vcd_vdc_quota_value', {
-        quota: vcdCompute.currentState?.memoryQuota,
-      })}
-    </DataGridTextCell>
-  );
-};
 
 export default function ComputeListingPage() {
   const { id, vdcId } = useParams();
@@ -85,6 +58,11 @@ export default function ComputeListingPage() {
       label: t('managed_vcd_vdc_compute_billing'),
       isSortable: false,
     },
+    {
+      id: 'actions',
+      cell: ActionDeleteCell,
+      isSortable: false,
+    },
   ];
 
   return (

diff --git a/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/compute/DatacentreCompute.spec.tsx b/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/compute/DatacentreCompute.spec.tsx
@@ -4,7 +4,11 @@ import {
   organizationList,
   datacentreList,
 } from '@ovh-ux/manager-module-vcd-api';
-import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
+import {
+  assertTextVisibility,
+  getButtonByIcon,
+} from '@ovh-ux/manager-core-test-utils';
+import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import {
   DEFAULT_LISTING_ERROR,
   labels,
@@ -15,7 +19,7 @@ import { VHOSTS_LABEL } from '../compute/datacentreCompute.constants';
 
 describe('Datacentre Compute Listing Page', () => {
   it('access and display compute listing page', async () => {
-    await renderTest({
+    const { container } = await renderTest({
       initialRoute: `/${organizationList[0].id}/datacentres/${datacentreList[0].id}`,
     });
 
@@ -29,6 +33,14 @@ describe('Datacentre Compute Listing Page', () => {
     await assertTextVisibility(
       labels.datacentresCompute.managed_vcd_vdc_compute_order_cta,
     );
+    const deleteButton = await getButtonByIcon({
+      container,
+      iconName: ODS_ICON_NAME.BIN,
+      disabled: true,
+    });
+    expect(deleteButton.closest('osds-tooltip')).toHaveTextContent(
+      labels.datacentres.managed_vcd_vdc_contact_support,
+    );
   });
 
   it('display an error', async () => {

diff --git a/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/storage/DatacentreStorage.page.tsx b/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/storage/DatacentreStorage.page.tsx
@@ -1,4 +1,3 @@
-import { DataGridTextCell } from '@ovh-ux/manager-react-components';
 import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -8,48 +7,20 @@ import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
   getVcdDatacentreStorageRoute,
   getVdcStorageQueryKey,
-  VCDStorage,
 } from '@ovh-ux/manager-module-vcd-api';
 import DatagridContainer from '@/components/datagrid/container/DatagridContainer.component';
 import { STORAGE_LABEL } from '../datacentreDashboard.constants';
 import { subRoutes, urls } from '@/routes/routes.constant';
-import { capitalize } from '@/utils/capitalize';
 import { ID_LABEL } from '../../dashboard.constants';
-
-const DatagridIdCell = (vcdStorage: VCDStorage) => (
-  <DataGridTextCell>{vcdStorage?.id}</DataGridTextCell>
-);
-const DatagridNameCell = (vcdStorage: VCDStorage) => (
-  <DataGridTextCell>{vcdStorage?.currentState?.name}</DataGridTextCell>
-);
-const DatagridProfileCell = (vcdStorage: VCDStorage) => (
-  <DataGridTextCell>{vcdStorage?.currentState?.profile}</DataGridTextCell>
-);
-const DatagridTypeCell = (vcdStorage: VCDStorage) => (
-  <DataGridTextCell>
-    {capitalize(vcdStorage?.currentState?.type)}
-  </DataGridTextCell>
-);
-const DatagridCapacityCell = (vcdStorage: VCDStorage) => {
-  const { t } = useTranslation('datacentres');
-  return (
-    <DataGridTextCell>
-      {t('managed_vcd_vdc_quota_value', {
-        quota: vcdStorage?.currentState.capacity,
-      })}
-    </DataGridTextCell>
-  );
-};
-const DatagridBillingCell = (vcdStorage: VCDStorage) => {
-  const { t } = useTranslation('datacentres/compute');
-  return (
-    <DataGridTextCell>
-      {t(
-        `managed_vcd_vdc_compute_billing_${vcdStorage?.currentState?.billingType}`,
-      )}
-    </DataGridTextCell>
-  );
-};
+import { ActionDeleteCell } from '@/components/datagrid/compute/ComputeCells.component';
+import {
+  DatagridBillingCell,
+  DatagridCapacityCell,
+  DatagridIdCell,
+  DatagridNameCell,
+  DatagridProfileCell,
+  DatagridTypeCell,
+} from '@/components/datagrid/storage/StorageCells.component';
 
 export default function StorageListingPage() {
   const { id, vdcId } = useParams();
@@ -94,6 +65,11 @@ export default function StorageListingPage() {
       label: tCompute('managed_vcd_vdc_compute_billing'),
       isSortable: false,
     },
+    {
+      id: 'actions',
+      cell: ActionDeleteCell,
+      isSortable: false,
+    },
   ];
 
   return (

diff --git a/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/storage/DatacentreStorage.spec.tsx b/.../hpc-vmware-managed-vcd/src/pages/dashboard/datacentre/storage/DatacentreStorage.spec.tsx
@@ -4,7 +4,11 @@ import {
   organizationList,
   datacentreList,
 } from '@ovh-ux/manager-module-vcd-api';
-import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
+import {
+  assertTextVisibility,
+  getButtonByIcon,
+} from '@ovh-ux/manager-core-test-utils';
+import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
 import {
   DEFAULT_LISTING_ERROR,
   labels,
@@ -14,7 +18,7 @@ import { STORAGE_LABEL } from '../datacentreDashboard.constants';
 
 describe('Datacentre Storage Listing Page', () => {
   it('access and display storage listing page', async () => {
-    await renderTest({
+    const { container } = await renderTest({
       initialRoute: `/${organizationList[0].id}/datacentres/${datacentreList[0].id}`,
     });
 
@@ -28,6 +32,15 @@ describe('Datacentre Storage Listing Page', () => {
     await assertTextVisibility(
       labels.datacentresStorage.managed_vcd_vdc_storage_order_cta,
     );
+
+    const deleteButton = await getButtonByIcon({
+      container,
+      iconName: ODS_ICON_NAME.BIN,
+      disabled: true,
+    });
+    expect(deleteButton.closest('osds-tooltip')).toHaveTextContent(
+      labels.datacentres.managed_vcd_vdc_contact_support,
+    );
   });
 
   it('display an error', async () => {