fix(pci-billing): alert creation rights

ref: DTCORE-2941 Signed-off-by: Florian Renaut <[email protected]>
ovh · Dec 17, 2024 · 68a1ca0 · 68a1ca0
1 parent a97b08f
commit 68a1ca0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 35 deletions.
diff --git a/packages/manager/apps/pci-billing/src/pages/billing/estimate/Alerts.part.tsx b/packages/manager/apps/pci-billing/src/pages/billing/estimate/Alerts.part.tsx
@@ -30,6 +30,7 @@ import { useState } from 'react';
 import { ApiError } from '@ovh-ux/manager-core-api';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { Currency } from '@ovh-ux/manager-config';
+import { useProjectRights } from '@ovh-ux/manager-pci-common';
 import { AlertModalComponent } from '@/pages/billing/estimate/components/AlertModal.component';
 
 import queryClient from '@/queryClient';
@@ -72,11 +73,13 @@ export const AlertsPart = ({
   onCreate,
   onUpdate,
   onDelete,
-  isLoading,
+  isLoading: isAlertDataLoading,
 }: TAlertsPart): JSX.Element => {
   const { t: tEstimate } = useTranslation('estimate');
 
   const { addError } = useNotifications();
+  const { hasReadWriteRights, isPending: isRightsPending } = useProjectRights();
+  const isLoading = isAlertDataLoading || isRightsPending;
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -212,48 +215,54 @@ export const AlertsPart = ({
                 </ResponsiveContainer>
               </div>
               <div>
+                {hasReadWriteRights && (
+                  <>
+                    <OsdsButton
+                      color={ODS_THEME_COLOR_INTENT.primary}
+                      variant={ODS_BUTTON_VARIANT.stroked}
+                      inline
+                      size={ODS_BUTTON_SIZE.sm}
+                      onClick={openModal}
+                    >
+                      {tEstimate('cpbe_estimate_alert_edit')}{' '}
+                    </OsdsButton>
+                    <OsdsButton
+                      className="ml-2"
+                      color={ODS_THEME_COLOR_INTENT.primary}
+                      variant={ODS_BUTTON_VARIANT.flat}
+                      inline
+                      size={ODS_BUTTON_SIZE.sm}
+                      onClick={() => remove()}
+                    >
+                      {tEstimate('cpbe_estimate_alert_delete')}{' '}
+                    </OsdsButton>
+                  </>
+                )}
+              </div>
+            </>
+          ) : (
+            hasReadWriteRights && (
+              <div className="mt-8">
                 <OsdsButton
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  variant={ODS_BUTTON_VARIANT.stroked}
-                  inline
-                  size={ODS_BUTTON_SIZE.sm}
-                  onClick={openModal}
-                >
-                  {tEstimate('cpbe_estimate_alert_edit')}{' '}
-                </OsdsButton>
-                <OsdsButton
-                  className="ml-2"
                   color={ODS_THEME_COLOR_INTENT.primary}
                   variant={ODS_BUTTON_VARIANT.flat}
                   inline
                   size={ODS_BUTTON_SIZE.sm}
-                  onClick={() => remove()}
+                  onClick={openModal}
+                  disabled={!!currentPricesError || undefined}
                 >
-                  {tEstimate('cpbe_estimate_alert_delete')}{' '}
+                  <OsdsIcon
+                    name={ODS_ICON_NAME.BELL}
+                    size={ODS_ICON_SIZE.xs}
+                    color={ODS_THEME_COLOR_INTENT.primary}
+                    contrasted
+                    aria-hidden="true"
+                    className="mr-2"
+                  />
+                  {tEstimate('cpbe_estimate_alert_create')}{' '}
                 </OsdsButton>
               </div>
-            </>
-          ) : (
-            <div className="mt-8">
-              <OsdsButton
-                color={ODS_THEME_COLOR_INTENT.primary}
-                variant={ODS_BUTTON_VARIANT.flat}
-                inline
-                size={ODS_BUTTON_SIZE.sm}
-                onClick={openModal}
-                disabled={!!currentPricesError || undefined}
-              >
-                <OsdsIcon
-                  name={ODS_ICON_NAME.BELL}
-                  size={ODS_ICON_SIZE.xs}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                  contrasted
-                  aria-hidden="true"
-                  className="mr-2"
-                />
-                {tEstimate('cpbe_estimate_alert_create')}{' '}
-              </OsdsButton>
-            </div>
+            )
           )}
         </>
       )}

diff --git a/packages/manager/apps/pci-billing/src/setupTests.tsx b/packages/manager/apps/pci-billing/src/setupTests.tsx
@@ -25,6 +25,10 @@ vi.mock('@ovh-ux/manager-pci-common', async () => {
       projectName: 'project-name',
       project_id: 'project-id',
     }),
+    useProjectRights: vi.fn().mockReturnValue({
+      hasReadWriteRights: true,
+      isPending: false,
+    }),
   };
 });
 
@@ -63,6 +67,7 @@ vi.mock('react-i18next', () => ({
     },
   }),
   Trans: ({ children }: { children: string }) => children,
+  Translation: ({ children }: { children: string }) => children,
 }));
 
 const mocks = vi.hoisted(() => ({