From bdcf36badaaf5db2368ee3e8f0fa4b950a28afa1 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Mon, 6 Nov 2023 18:07:04 +0100
Subject: [PATCH 1/3] ZKUI-397: implement the logic of getBucketTagging and add
 use-case session in bucket overview

---
 src/js/mock/S3ClientMSWHandlers.ts            |  67 ++++++++++
 .../databrowser/buckets/details/Overview.tsx  | 115 ++++++++++++++----
 .../details/__tests__/Overview.test.tsx       |  76 ++++++++++--
 .../domain/business/buckets.test.tsx          |  58 ++++++++-
 .../domain/business/buckets.ts                |  44 +++++++
 .../domain/entities/bucket.ts                 |   4 +
 src/react/reducers/initialConstants.ts        |   2 +-
 src/react/ui-elements/Veeam/VeeamTable.tsx    |   8 ++
 src/react/ui-elements/Veeam/useMockData.ts    |  12 +-
 src/react/utils/testUtil.tsx                  |  10 +-
 10 files changed, 358 insertions(+), 38 deletions(-)

diff --git a/src/js/mock/S3ClientMSWHandlers.ts b/src/js/mock/S3ClientMSWHandlers.ts
index 789986f0c..84e2a3ca9 100644
--- a/src/js/mock/S3ClientMSWHandlers.ts
+++ b/src/js/mock/S3ClientMSWHandlers.ts
@@ -118,6 +118,43 @@ export function mockBucketOperations(
         );
       }
 
+      if (req.url.searchParams.has('cors')) {
+        return res(
+          ctx.xml(`
+          <?xml version="1.0" encoding="UTF-8"?>
+          <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
+          </CORSConfiguration>
+        `),
+        );
+      }
+
+      if (req.url.searchParams.has('acl')) {
+        return res(
+          ctx.xml(`
+          <?xml version="1.0" encoding="UTF-8"?>
+          <AccessControlPolicy xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
+            <Owner>
+              <ID>1234</ID>
+              <DisplayName>test</DisplayName>
+            </Owner>
+            <AccessControlList>
+            </AccessControlList>
+          </AccessControlPolicy>
+        `),
+        );
+      }
+
+      if (req.url.searchParams.has('object-lock')) {
+        return res(
+          ctx.xml(`
+          <?xml version="1.0" encoding="UTF-8"?>
+          <ObjectLockConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
+            <ObjectLockEnabled>Enabled</ObjectLockEnabled>
+          </ObjectLockConfiguration>
+        `),
+        );
+      }
+
       return res(ctx.status(404));
     },
   );
@@ -178,3 +215,33 @@ export const mockObjectEmpty = (bucketName: string) => {
     },
   );
 };
+
+export const mockGetBucketTagging = (bucketName: string) => {
+  return rest.get(
+    `${zenkoUITestConfig.zenkoEndpoint}/${bucketName}`,
+    (req, res, ctx) => {
+      if (req.url.searchParams.has('tagging')) {
+        return res(
+          ctx.xml(`
+          <?xml version="1.0" encoding="UTF-8"?>
+          <Tagging>
+            <TagSet>
+              <Tag><Key>X-Scality-Usecase</Key><Value>Veeam 12</Value></Tag>
+            </TagSet>
+          </Tagging>`),
+        );
+      }
+    },
+  );
+};
+
+export const mockGetBucketTaggingError = (bucketName: string) => {
+  return rest.get(
+    `${zenkoUITestConfig.zenkoEndpoint}/${bucketName}`,
+    (req, res, ctx) => {
+      if (req.url.searchParams.has('tagging')) {
+        return res(ctx.status(500));
+      }
+    },
+  );
+};
diff --git a/src/react/databrowser/buckets/details/Overview.tsx b/src/react/databrowser/buckets/details/Overview.tsx
index ba11b3c9e..a890b38f0 100644
--- a/src/react/databrowser/buckets/details/Overview.tsx
+++ b/src/react/databrowser/buckets/details/Overview.tsx
@@ -1,4 +1,10 @@
-import { ConstrainedText, Icon, Toggle, Tooltip } from '@scality/core-ui';
+import {
+  ConstrainedText,
+  Icon,
+  Toast,
+  Toggle,
+  Tooltip,
+} from '@scality/core-ui';
 import { SmallerText } from '@scality/core-ui/dist/components/text/Text.component';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,7 +16,10 @@ import type { BucketInfo } from '../../../../types/s3';
 import type { AppState } from '../../../../types/state';
 import { useCurrentAccount } from '../../../DataServiceRoleProvider';
 import { getBucketInfo, toggleBucketVersioning } from '../../../actions';
-import { useChangeBucketVersionning } from '../../../next-architecture/domain/business/buckets';
+import {
+  useBucketTagging,
+  useChangeBucketVersionning,
+} from '../../../next-architecture/domain/business/buckets';
 import { Bucket } from '../../../next-architecture/domain/entities/bucket';
 import { ButtonContainer } from '../../../ui-elements/Container';
 import { DeleteBucket } from '../../../ui-elements/DeleteBucket';
@@ -26,6 +35,11 @@ import {
 import { useWorkflows } from '../../../workflow/Workflows';
 import { useEffect, useState } from 'react';
 import { Button } from '@scality/core-ui/dist/next';
+import {
+  BUCKET_TAG_USECASE,
+  VEEAMVERSION11,
+  VEEAMVERSION12,
+} from '../../../ui-elements/Veeam/VeeamConstants';
 
 function capitalize(string: string) {
   return string.toLowerCase().replace(/^\w/, (c) => {
@@ -88,6 +102,17 @@ function Overview({ bucket, ingestionStates }: Props) {
   const features = useSelector((state: AppState) => state.auth.config.features);
   const { account } = useCurrentAccount();
   const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
+  const [bucketTaggingToast, setBucketTaggingToast] = useState(true);
+  const { tags } = useBucketTagging({ bucketName: bucket.name });
+  const VEEAM_FEATURE_FLAG_ENABLED = features.includes('Veeam');
+  const isVeeamBucket =
+    tags.status === 'success' &&
+    (tags.value?.[BUCKET_TAG_USECASE] === VEEAMVERSION11 ||
+      tags.value?.[BUCKET_TAG_USECASE] === VEEAMVERSION12) &&
+    VEEAM_FEATURE_FLAG_ENABLED;
+
+  const isVeeam12 =
+    isVeeamBucket && tags.value?.[BUCKET_TAG_USECASE] === VEEAMVERSION12;
 
   useEffect(() => {
     dispatch(getBucketInfo(bucket.name));
@@ -136,6 +161,14 @@ function Overview({ bucket, ingestionStates }: Props) {
             : null
         }
       />
+      <Toast
+        message="Encountered issues loading bucket tagging, causing uncertainty about the use-case. Please refresh the page."
+        open={tags.status === 'error' && bucketTaggingToast}
+        status="error"
+        onClose={() => {
+          setBucketTaggingToast(false);
+        }}
+      />
       <ButtonContainer>
         <EmptyBucket bucketName={bucket.name} />
         <DeleteBucket bucketName={bucket.name} />
@@ -208,6 +241,58 @@ function Overview({ bucket, ingestionStates }: Props) {
                   )}
                 </T.Value>
               </T.Row>
+              <T.Row>
+                <T.Key> Location </T.Key>
+                <T.Value>
+                  {bucketInfo.locationConstraint || 'us-east-1'}
+                  {' / '}
+                  <small>
+                    {locations &&
+                      getLocationType(locations[bucketInfo.locationConstraint])}
+                  </small>
+                </T.Value>
+              </T.Row>
+              {features.includes(XDM_FEATURE) && (
+                <T.Row>
+                  <T.Key> Async Metadata updates </T.Key>
+                  <T.Value>
+                    {ingestionValue}
+                    {isIngestion && <HelpAsyncNotification />}
+                  </T.Value>
+                </T.Row>
+              )}
+            </T.GroupContent>
+          </T.Group>
+          {isVeeamBucket && (
+            <T.Group>
+              <T.GroupName> Use-case </T.GroupName>
+              <T.Row>
+                <T.Key> Use-case </T.Key>
+                <T.Value> Backup - {tags.value?.[BUCKET_TAG_USECASE]}</T.Value>
+              </T.Row>
+              {isVeeam12 && (
+                <T.Row>
+                  <T.Key> Max repository Capacity </T.Key>
+                  <T.GroupValues>
+                    {/* TODO */}
+                    <>5TB</>
+                    <Button
+                      variant="outline"
+                      label="Edit"
+                      aria-label="Edit max capacity"
+                      icon={<Icon name="Pencil" />}
+                      onClick={() => {
+                        //TODO: open the modal to modify the capacity
+                      }}
+                    />
+                  </T.GroupValues>
+                </T.Row>
+              )}
+            </T.Group>
+          )}
+          <T.Group>
+            <T.GroupName> Data protection </T.GroupName>
+            <T.GroupContent>
               {bucketInfo.objectLockConfiguration.ObjectLockEnabled ===
                 'Enabled' && (
                 <T.Row>
@@ -218,12 +303,18 @@ function Overview({ bucket, ingestionStates }: Props) {
                       id="edit-retention-btn"
                       variant="outline"
                       label="Edit"
+                      aria-label="Edit default retention"
                       icon={<Icon name="Pencil" />}
                       onClick={() => {
                         history.push(
                           `/accounts/${account?.Name}/buckets/${bucket.name}/retention-setting`,
                         );
                       }}
+                      disabled={isVeeamBucket}
+                      tooltip={{
+                        overlay:
+                          'Edition is disabled as it is managed by Veeam.',
+                      }}
                     />
                   </T.GroupValues>
                 </T.Row>
@@ -235,26 +326,6 @@ function Overview({ bucket, ingestionStates }: Props) {
                   <T.Value>Disabled</T.Value>
                 </T.Row>
               )}
-              <T.Row>
-                <T.Key> Location </T.Key>
-                <T.Value>
-                  {bucketInfo.locationConstraint || 'us-east-1'}
-                  {' / '}
-                  <small>
-                    {locations &&
-                      getLocationType(locations[bucketInfo.locationConstraint])}
-                  </small>
-                </T.Value>
-              </T.Row>
-              {features.includes(XDM_FEATURE) && (
-                <T.Row>
-                  <T.Key> Async Metadata updates </T.Key>
-                  <T.Value>
-                    {ingestionValue}
-                    {isIngestion && <HelpAsyncNotification />}
-                  </T.Value>
-                </T.Row>
-              )}
             </T.GroupContent>
           </T.Group>
           <T.Group>
diff --git a/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx b/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
index 6642b0cc1..f9208f48b 100644
--- a/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
+++ b/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
@@ -1,4 +1,3 @@
-import * as T from '../../../../ui-elements/TableKeyValue2';
 import * as actions from '../../../../actions/s3bucket';
 import {
   bucketInfoResponseNoVersioning,
@@ -9,17 +8,18 @@ import {
   bucketInfoResponseObjectLockDefaultRetention,
 } from '../../../../../js/mock/S3Client';
 import Overview from '../Overview';
-import { Toggle } from '@scality/core-ui';
+import { NewWrapper, zenkoUITestConfig } from '../../../../utils/testUtil';
 import {
-  reduxMount,
-  reduxRender,
-  zenkoUITestConfig,
-} from '../../../../utils/testUtil';
-import { fireEvent, screen, waitFor, within } from '@testing-library/react';
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import Immutable from 'immutable';
 import userEvent from '@testing-library/user-event';
 import { renderWithRouterMatch } from '../../../../utils/testUtil';
-import { debug } from 'jest-preview';
+
 const BUCKET = {
   CreationDate: 'Tue Oct 12 2020 18:38:56',
   LocationConstraint: '',
@@ -198,6 +198,11 @@ import {
   getConfigOverlay,
   getStorageConsumptionMetricsHandlers,
 } from '../../../../../js/mock/managementClientMSWHandlers';
+import {
+  mockBucketOperations,
+  mockGetBucketTagging,
+  mockGetBucketTaggingError,
+} from '../../../../../js/mock/S3ClientMSWHandlers';
 const mockResponse =
   '<VersioningConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><Status>Enabled</Status></VersioningConfiguration>';
 const TEST_ACCOUNT =
@@ -235,6 +240,7 @@ const server = setupServer(
     zenkoUITestConfig.managementEndpoint,
     INSTANCE_ID,
   ),
+  mockBucketOperations(),
 );
 beforeAll(() => {
   server.listen({ onUnhandledRequest: 'error' });
@@ -242,6 +248,21 @@ beforeAll(() => {
 afterAll(() => server.close());
 afterEach(() => server.resetHandlers());
 
+const selectors = {
+  editDefaultRetentionButton: () =>
+    screen.getByRole('button', {
+      name: /edit default retention/i,
+    }),
+  bucketTaggingErrorToastCloseButton: () =>
+    screen.getByRole('button', {
+      name: /close/i,
+    }),
+  bucketTaggingErrorToast: () =>
+    screen.getByText(
+      /Encountered issues loading bucket tagging, causing uncertainty about the use-case. Please refresh the page./i,
+    ),
+};
+
 describe('Overview', () => {
   it('should call the updateBucketVersioning function when clicking on the toggle versioning button', async () => {
     const useUpdateBucketVersioningMock = jest.fn();
@@ -273,4 +294,43 @@ describe('Overview', () => {
       expect(useUpdateBucketVersioningMock).toHaveBeenCalledWith(mockResponse);
     });
   });
+
+  it('should display the Veeam use-case and disable the edition of default retention', async () => {
+    //Setup
+    server.use(mockGetBucketTagging(bucketName));
+    //Exersise
+    render(<Overview bucket={{ name: bucketName }} />, {
+      wrapper: NewWrapper(),
+    });
+    //Verify
+    await waitFor(() => {
+      expect(
+        screen.getByText(new RegExp(`Backup - Veeam 12`, 'i')),
+      ).toBeInTheDocument();
+    });
+    expect(selectors.editDefaultRetentionButton()).toBeDisabled();
+  });
+
+  it('should show error toast when loading bucket tagging failed', async () => {
+    //Setup
+    server.use(mockGetBucketTaggingError(bucketName));
+    //Exersise
+    render(<Overview bucket={{ name: bucketName }} />, {
+      wrapper: NewWrapper(),
+    });
+    //Verify
+    await waitFor(() => {
+      expect(selectors.bucketTaggingErrorToast()).toBeInTheDocument();
+    });
+    //Exersise
+    userEvent.click(selectors.bucketTaggingErrorToastCloseButton());
+    //Verify
+    await waitFor(() => {
+      expect(
+        screen.queryByText(
+          /Encountered issues loading bucket tagging, causing uncertainty about the use-case. Please refresh the page./i,
+        ),
+      ).toBe(null);
+    });
+  });
 });
diff --git a/src/react/next-architecture/domain/business/buckets.test.tsx b/src/react/next-architecture/domain/business/buckets.test.tsx
index b32434230..716863e45 100644
--- a/src/react/next-architecture/domain/business/buckets.test.tsx
+++ b/src/react/next-architecture/domain/business/buckets.test.tsx
@@ -2,10 +2,15 @@ import {
   DEFAULT_LOCATION,
   useBucketLatestUsedCapacity,
   useBucketLocationConstraint,
+  useBucketTagging,
   useListBucketsForCurrentAccount,
 } from './buckets';
 import { IMetricsAdapter } from '../../adapters/metrics/IMetricsAdapter';
-import { RenderResult, WaitFor } from '@testing-library/react-hooks';
+import {
+  RenderResult,
+  WaitFor,
+  renderHook,
+} from '@testing-library/react-hooks';
 import { MockedMetricsAdapter } from '../../adapters/metrics/MockedMetricsAdapter';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
@@ -22,11 +27,18 @@ import {
   RenderAdditionalHook,
 } from '../../../utils/testMultipleHooks';
 import { _AuthContext } from '../../ui/AuthProvider';
-import { Wrapper, zenkoUITestConfig } from '../../../utils/testUtil';
+import {
+  NewWrapper,
+  Wrapper,
+  zenkoUITestConfig,
+} from '../../../utils/testUtil';
 import {
   mockBucketListing,
   mockBucketOperations,
+  mockGetBucketTagging,
+  mockGetBucketTaggingError,
 } from '../../../../js/mock/S3ClientMSWHandlers';
+import { BUCKET_TAG_USECASE } from '../../../ui-elements/Veeam/VeeamConstants';
 
 jest.setTimeout(30000);
 
@@ -887,4 +899,46 @@ describe('Buckets domain', () => {
       });
     });
   });
+
+  describe('useBucketTagging', () => {
+    it('should return the tags for a specific bucket', async () => {
+      //Setup
+      const BUCKET_NAME = 'bucket-name';
+      server.use(mockGetBucketTagging(BUCKET_NAME));
+      const { waitFor, result } = renderHook(
+        () => useBucketTagging({ bucketName: BUCKET_NAME }),
+        { wrapper: NewWrapper() },
+      );
+      //Exercise
+      await waitFor(() => result.current.tags.status === 'success');
+      //Verify
+      expect(result.current).toEqual({
+        tags: {
+          status: 'success',
+          value: {
+            [BUCKET_TAG_USECASE]: 'Veeam 12',
+          },
+        },
+      });
+    });
+    it('should return an error if the tags fetching failed', async () => {
+      //Setup
+      const BUCKET_NAME = 'bucket-name';
+      server.use(mockGetBucketTaggingError(BUCKET_NAME));
+      const { waitFor, result } = renderHook(
+        () => useBucketTagging({ bucketName: BUCKET_NAME }),
+        { wrapper: NewWrapper() },
+      );
+      //Exercise
+      await waitFor(() => result.current.tags.status === 'error');
+      //Verify
+      expect(result.current).toEqual({
+        tags: {
+          status: 'error',
+          title: 'An error occurred while fetching the tags',
+          reason: 'Internal Server Error',
+        },
+      });
+    });
+  });
 });
diff --git a/src/react/next-architecture/domain/business/buckets.ts b/src/react/next-architecture/domain/business/buckets.ts
index 4c7b22fd0..981e179e0 100644
--- a/src/react/next-architecture/domain/business/buckets.ts
+++ b/src/react/next-architecture/domain/business/buckets.ts
@@ -17,6 +17,7 @@ import {
   BucketDefaultRetentionPromiseResult,
   BucketLatestUsedCapacityPromiseResult,
   BucketLocationConstraintPromiseResult,
+  BucketTaggingPromiseResult,
   BucketVersionningPromiseResult,
   BucketsPromiseResult,
 } from '../entities/bucket';
@@ -91,6 +92,12 @@ export const queries = {
     enabled: !!buckets.length,
     ...noRefetchOptions,
   }),
+  getBucketTagging: (s3Client: S3, bucketName: string) => ({
+    queryKey: ['bucketTagging', getS3ClientHash(s3Client), bucketName],
+    queryFn: () => s3Client.getBucketTagging({ Bucket: bucketName }).promise(),
+    enabled: !!bucketName && !!s3Client.config.credentials?.accessKeyId,
+    ...noRefetchOptions,
+  }),
 };
 
 /**
@@ -508,3 +515,40 @@ export const useBucketLatestUsedCapacity = ({
     },
   };
 };
+
+export const useBucketTagging = ({
+  bucketName,
+}: {
+  bucketName: string;
+}): BucketTaggingPromiseResult => {
+  const s3Client = useS3Client();
+  const { data, status } = useQuery({
+    ...queries.getBucketTagging(s3Client, bucketName),
+  });
+
+  if (status === 'loading' || status === 'idle') {
+    return {
+      tags: {
+        status: 'loading',
+      },
+    };
+  }
+  if (status === 'error') {
+    return {
+      tags: {
+        status: 'error',
+        title: 'An error occurred while fetching the tags',
+        reason: 'Internal Server Error',
+      },
+    };
+  }
+  return {
+    tags: {
+      status: 'success',
+      value: data?.TagSet?.reduce((acc, tag) => {
+        acc[tag.Key] = tag.Value;
+        return acc;
+      }, {} as Record<string, string>),
+    },
+  };
+};
diff --git a/src/react/next-architecture/domain/entities/bucket.ts b/src/react/next-architecture/domain/entities/bucket.ts
index 748f08e99..bcf1a5258 100644
--- a/src/react/next-architecture/domain/entities/bucket.ts
+++ b/src/react/next-architecture/domain/entities/bucket.ts
@@ -27,3 +27,7 @@ export type Bucket = BucketLocationConstraintPromiseResult & {
 export type BucketsPromiseResult = {
   buckets: PromiseResult<Bucket[]>;
 };
+
+export type BucketTaggingPromiseResult = {
+  tags: PromiseResult<Record<string, string>>;
+};
diff --git a/src/react/reducers/initialConstants.ts b/src/react/reducers/initialConstants.ts
index c3c27df86..50c382995 100644
--- a/src/react/reducers/initialConstants.ts
+++ b/src/react/reducers/initialConstants.ts
@@ -36,7 +36,7 @@ export const initialAuthState: AuthState = {
   stsClient: new MockSTSClient(),
   managementClient: new MockManagementClient(),
   config: {
-    features: [],
+    features: ['Veeam'],
   },
   oidcLogout: null,
 };
diff --git a/src/react/ui-elements/Veeam/VeeamTable.tsx b/src/react/ui-elements/Veeam/VeeamTable.tsx
index 7fac5b3eb..7bb3908ec 100644
--- a/src/react/ui-elements/Veeam/VeeamTable.tsx
+++ b/src/react/ui-elements/Veeam/VeeamTable.tsx
@@ -24,8 +24,16 @@ export default function VeeamTable(_: VeeamTableProps) {
 
   const columns: Column<{
     action: string;
+    step: number;
     status?: string;
   }>[] = [
+    {
+      Header: 'Step',
+      accessor: 'step',
+      Cell: ({ value }) => {
+        return <Text>{value}</Text>;
+      },
+    },
     {
       Header: 'Action',
       accessor: 'action',
diff --git a/src/react/ui-elements/Veeam/useMockData.ts b/src/react/ui-elements/Veeam/useMockData.ts
index a826581d4..06f993b48 100644
--- a/src/react/ui-elements/Veeam/useMockData.ts
+++ b/src/react/ui-elements/Veeam/useMockData.ts
@@ -7,34 +7,38 @@ type MockTableData = {
 
 const mockTableData = [
   {
+    step: 1,
     action: 'Create an Account',
     status: undefined,
   },
   {
+    step: 2,
     action: 'Create an User',
     status: undefined,
   },
+  { step: 3, action: 'Create a Bucket', status: undefined },
   {
-    action: 'Create a Bucket',
-    status: undefined,
-  },
-  {
+    step: 4,
     action: 'Create the Veeam policy',
     status: undefined,
   },
   {
+    step: 5,
     action: 'Attach the Veeam policy to the User',
     status: undefined,
   },
   {
+    step: 6,
     action: 'Tag bucket as Veeam Bucket',
     status: undefined,
   },
   {
+    step: 7,
     action: 'Enable Smart Object Storage support',
     status: undefined,
   },
   {
+    step: 8,
     action: 'Set Smart Object Storage capacity',
     status: undefined,
   },
diff --git a/src/react/utils/testUtil.tsx b/src/react/utils/testUtil.tsx
index ce02cfacd..a99c5600a 100644
--- a/src/react/utils/testUtil.tsx
+++ b/src/react/utils/testUtil.tsx
@@ -7,7 +7,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import thunk from 'redux-thunk';
 import { createMemoryHistory } from 'history';
 import IAMClient from '../../js/IAMClient';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider, setLogger } from 'react-query';
 import { Route, Router } from 'react-router-dom';
 
 import { fireEvent, render } from '@testing-library/react';
@@ -144,6 +144,14 @@ export const queryClient = new QueryClient({
   },
 });
 
+//Note: React Query version 4 setLogger function is removed.
+setLogger({
+  log: console.log,
+  warn: console.warn,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  error: () => {},
+});
+
 export const zenkoUITestConfig = {
   iamEndpoint: TEST_API_BASE_URL,
   managementEndpoint: TEST_API_BASE_URL,

From e88ec5ee573bf85038d4ea2ce5896e65508ab03d Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Tue, 14 Nov 2023 11:20:25 +0100
Subject: [PATCH 2/3] ZKUI-397: Select the error toast by the role

---
 .../databrowser/buckets/details/__tests__/Overview.test.tsx   | 4 ++--
 src/react/reducers/initialConstants.ts                        | 4 +---
 src/react/utils/testUtil.tsx                                  | 1 +
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx b/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
index f9208f48b..08be7c231 100644
--- a/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
+++ b/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
@@ -254,11 +254,11 @@ const selectors = {
       name: /edit default retention/i,
     }),
   bucketTaggingErrorToastCloseButton: () =>
-    screen.getByRole('button', {
+    within(screen.getByRole('status')).getByRole('button', {
       name: /close/i,
     }),
   bucketTaggingErrorToast: () =>
-    screen.getByText(
+    within(screen.getByRole('status')).getByText(
       /Encountered issues loading bucket tagging, causing uncertainty about the use-case. Please refresh the page./i,
     ),
 };
diff --git a/src/react/reducers/initialConstants.ts b/src/react/reducers/initialConstants.ts
index 50c382995..7f2fdbf78 100644
--- a/src/react/reducers/initialConstants.ts
+++ b/src/react/reducers/initialConstants.ts
@@ -35,9 +35,7 @@ export const initialAuthState: AuthState = {
   configFailure: false,
   stsClient: new MockSTSClient(),
   managementClient: new MockManagementClient(),
-  config: {
-    features: ['Veeam'],
-  },
+  config: { features: [] },
   oidcLogout: null,
 };
 export const initialConfigUIState = {
diff --git a/src/react/utils/testUtil.tsx b/src/react/utils/testUtil.tsx
index a99c5600a..d8ea72c0b 100644
--- a/src/react/utils/testUtil.tsx
+++ b/src/react/utils/testUtil.tsx
@@ -108,6 +108,7 @@ export const realStoreWithInitState = (state) => {
     ...(state || {}),
   };
   tmpState.auth.managementClient = TEST_MANAGEMENT_CLIENT;
+  tmpState.auth.config.features = ['Veeam'];
   const store = createStore(
     zenkoUIReducer(),
     tmpState,

From 27f01c889dddd81f03f826b794d97f46fa8c5e27 Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Tue, 14 Nov 2023 12:10:00 +0100
Subject: [PATCH 3/3] ZKUI-397: Extract the Veeam feature flag in the same
 place as XDM feature

---
 src/js/config.ts                                            | 1 +
 src/react/databrowser/buckets/details/Overview.tsx          | 4 ++--
 .../databrowser/buckets/details/__tests__/Overview.test.tsx | 6 +++---
 src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx           | 3 ++-
 src/react/utils/testUtil.tsx                                | 6 ++++--
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/js/config.ts b/src/js/config.ts
index fa4de4476..604e5f91d 100644
--- a/src/js/config.ts
+++ b/src/js/config.ts
@@ -1 +1,2 @@
 export const XDM_FEATURE = 'XDM';
+export const VEEAM_FEATURE = 'Veeam';
diff --git a/src/react/databrowser/buckets/details/Overview.tsx b/src/react/databrowser/buckets/details/Overview.tsx
index a890b38f0..bcf205ff2 100644
--- a/src/react/databrowser/buckets/details/Overview.tsx
+++ b/src/react/databrowser/buckets/details/Overview.tsx
@@ -11,7 +11,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import type { WorkflowScheduleUnitState } from '../../../../types/stats';
 import { HelpAsyncNotification } from '../../../ui-elements/Help';
-import { XDM_FEATURE } from '../../../../js/config';
+import { VEEAM_FEATURE, XDM_FEATURE } from '../../../../js/config';
 import type { BucketInfo } from '../../../../types/s3';
 import type { AppState } from '../../../../types/state';
 import { useCurrentAccount } from '../../../DataServiceRoleProvider';
@@ -104,7 +104,7 @@ function Overview({ bucket, ingestionStates }: Props) {
   const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
   const [bucketTaggingToast, setBucketTaggingToast] = useState(true);
   const { tags } = useBucketTagging({ bucketName: bucket.name });
-  const VEEAM_FEATURE_FLAG_ENABLED = features.includes('Veeam');
+  const VEEAM_FEATURE_FLAG_ENABLED = features.includes(VEEAM_FEATURE);
   const isVeeamBucket =
     tags.status === 'success' &&
     (tags.value?.[BUCKET_TAG_USECASE] === VEEAMVERSION11 ||
diff --git a/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx b/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
index 08be7c231..f25cdcde3 100644
--- a/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
+++ b/src/react/databrowser/buckets/details/__tests__/Overview.test.tsx
@@ -298,7 +298,7 @@ describe('Overview', () => {
   it('should display the Veeam use-case and disable the edition of default retention', async () => {
     //Setup
     server.use(mockGetBucketTagging(bucketName));
-    //Exersise
+    //Exercise
     render(<Overview bucket={{ name: bucketName }} />, {
       wrapper: NewWrapper(),
     });
@@ -314,7 +314,7 @@ describe('Overview', () => {
   it('should show error toast when loading bucket tagging failed', async () => {
     //Setup
     server.use(mockGetBucketTaggingError(bucketName));
-    //Exersise
+    //Exercise
     render(<Overview bucket={{ name: bucketName }} />, {
       wrapper: NewWrapper(),
     });
@@ -322,7 +322,7 @@ describe('Overview', () => {
     await waitFor(() => {
       expect(selectors.bucketTaggingErrorToast()).toBeInTheDocument();
     });
-    //Exersise
+    //Exercise
     userEvent.click(selectors.bucketTaggingErrorToastCloseButton());
     //Verify
     await waitFor(() => {
diff --git a/src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx b/src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx
index 6035b4d57..85de88b3f 100644
--- a/src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx
+++ b/src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx
@@ -10,6 +10,7 @@ import {
 } from '../../next-architecture/ui/ConfigProvider';
 import { ArtescaLogo } from './ArtescaLogo';
 import { VeeamLogo } from './VeeamLogo';
+import { VEEAM_FEATURE } from '../../../js/config';
 
 const CustomModal = styled(Modal)`
   background-color: ${(props) => props.theme.backgroundLevel1};
@@ -18,7 +19,7 @@ const CustomModal = styled(Modal)`
 export const VeeamWelcomeModalInternal = () => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const { features } = useConfig();
-  if (!features.includes('Veeam')) {
+  if (!features.includes(VEEAM_FEATURE)) {
     return <></>;
   }
 
diff --git a/src/react/utils/testUtil.tsx b/src/react/utils/testUtil.tsx
index d8ea72c0b..ad8106228 100644
--- a/src/react/utils/testUtil.tsx
+++ b/src/react/utils/testUtil.tsx
@@ -25,7 +25,7 @@ import ZenkoClient from '../../js/ZenkoClient';
 import { _ConfigContext } from '../next-architecture/ui/ConfigProvider';
 import { S3ClientProvider } from '../next-architecture/ui/S3ClientProvider';
 import { _AuthContext } from '../next-architecture/ui/AuthProvider';
-import { XDM_FEATURE } from '../../js/config';
+import { VEEAM_FEATURE, XDM_FEATURE } from '../../js/config';
 import { LocationAdapterProvider } from '../next-architecture/ui/LocationAdapterProvider';
 import MetricsAdapterProvider from '../next-architecture/ui/MetricsAdapterProvider';
 import { INSTANCE_ID } from '../actions/__tests__/utils/testUtil';
@@ -108,7 +108,9 @@ export const realStoreWithInitState = (state) => {
     ...(state || {}),
   };
   tmpState.auth.managementClient = TEST_MANAGEMENT_CLIENT;
-  tmpState.auth.config.features = ['Veeam'];
+  if (!state?.auth?.config?.features) {
+    tmpState.auth.config.features = [VEEAM_FEATURE];
+  }
   const store = createStore(
     zenkoUIReducer(),
     tmpState,