display EmptyCell when Modified On or Storage Location is undefined a…

src/react/databrowser/objects/ObjectListTable.tsx

@@ -32,6 +32,7 @@ import { useS3Client } from '../../next-architecture/ui/S3ClientProvider';
 import { parseRestore } from '../../reducers/s3';
 import { useAccountsLocationsAndEndpoints } from '../../next-architecture/domain/business/accounts';
 import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
+import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 
 export const Icon = styled.i<{ isMargin?: boolean }>`
   margin-right: ${spacing.sp4};
@@ -272,12 +273,15 @@ export default function ObjectListTable({
           textAlign: 'right',
         },
         Cell: ({ value }) => {
-          return (
-            <FormattedDateTime
-              format="date-time-second"
-              value={new Date(value)}
-            />
-          );
+          if (value) {
+            return (
+              <FormattedDateTime
+                format="date-time-second"
+                value={new Date(value)}
+              />
+            );
+          }
+          return <EmptyCell mr={0} />;
         },
 
         cellStyle: {
@@ -310,6 +314,9 @@ export default function ObjectListTable({
         accessor: 'storageClass',
         width: 20,
         Cell({ value: storageClass }: { value: string }) {
+          if (!storageClass) {
+            return <EmptyCell mr={0} />;
+          }
           const accountsLocationsEndpointsAdapter =
             useAccountsLocationsEndpointsAdapter();
           const { accountsLocationsAndEndpoints, status } =
@@ -328,6 +335,9 @@ export default function ObjectListTable({
             </div>
           );
         },
+        cellStyle: {
+          textAlign: 'right',
+        },
       },
     ],
     [

src/react/databrowser/objects/__tests__/ObjectList.test.tsx

@@ -8,14 +8,20 @@ import { checkBox, reduxMount } from '../../../utils/testUtil';
 import ObjectList from '../ObjectList';
 import {
   FIRST_FORMATTED_OBJECT,
+  NO_DATE_FORMATTED_OBJECT,
   SECOND_FORMATTED_OBJECT,
 } from './utils/testUtil';
 import { LIST_OBJECTS_S3_TYPE } from '../../../utils/s3';
 import { TEST_API_BASE_URL, reduxRender } from '../../../utils/testUtil';
-import { screen, waitFor } from '@testing-library/react';
+import {
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { VEEAM_XML_PREFIX } from '../../../ui-elements/Veeam/VeeamConstants';
+import { Icon } from '@scality/core-ui';
 
 const server = setupServer(
   rest.get(`${TEST_API_BASE_URL}/${BUCKET_NAME}`, (req, res, ctx) => {
@@ -308,4 +314,19 @@ describe('ObjectList', () => {
       expect(screen.getByText('List Versions')).toBeEnabled();
     });
   });
+  it('should display empty cell when date and stroage location are undefined', async () => {
+    reduxRender(
+      <ObjectList
+        //@ts-expect-error fix this when you are working on it
+        objects={List([NO_DATE_FORMATTED_OBJECT])}
+        bucketName={BUCKET_NAME}
+        prefixWithSlash=""
+        toggled={List()}
+      />,
+    );
+    await waitFor(() =>
+      expect(screen.getByText(/object3/i)).toBeInTheDocument(),
+    );
+    expect(screen.getAllByLabelText(/Minus/)).toHaveLength(2);
+  });
 });

src/react/databrowser/objects/__tests__/utils/testUtil.ts

@@ -16,6 +16,15 @@ export const SECOND_FORMATTED_OBJECT = {
   signedUrl: '',
   toggled: true,
 };
+export const NO_DATE_FORMATTED_OBJECT = {
+  key: 'toto/object3',
+  isFolder: false,
+  name: 'object3',
+  lastModified: '',
+  size: 213,
+  signedUrl: '',
+  toggled: false,
+};
 export const BUCKET_INFO = {
   name: 'bucket1',
   policy: false,
@@ -26,4 +35,4 @@ export const BUCKET_INFO = {
   versioning: 'Disabled',
   public: false,
   locationConstraint: 'us-east-1',
-};
+};