From 37a7e48648668341ff205a5c5983fecda2b21a91 Mon Sep 17 00:00:00 2001
From: Patrick Ear <patrick.ear@scality.com>
Date: Thu, 19 Sep 2024 16:20:30 +0200
Subject: [PATCH 1/2] ARTESCA-13337 - fix error edit lock setting

---
 .../databrowser/objects/ObjectLockSetting.tsx  | 11 +++++++----
 .../details/__tests__/Properties.test.tsx      | 18 ++++++------------
 src/react/databrowser/objects/utils.ts         |  9 +++++----
 src/types/s3.ts                                |  2 +-
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/react/databrowser/objects/ObjectLockSetting.tsx b/src/react/databrowser/objects/ObjectLockSetting.tsx
index 61301573b..8130dcc3f 100644
--- a/src/react/databrowser/objects/ObjectLockSetting.tsx
+++ b/src/react/databrowser/objects/ObjectLockSetting.tsx
@@ -137,7 +137,10 @@ export default function ObjectLockSetting() {
   useEffect(() => {
     setValue('isRetentionEnabled', isDefaultRetentionEnabled);
     setValue('retentionMode', defaultRetentionMode);
-    setValue('retentionUntilDate', defaultRetentionUntilDate);
+    setValue(
+      'retentionUntilDate',
+      DateTime.fromJSDate(defaultRetentionUntilDate).toFormat('yyyy-LL-dd'),
+    );
   }, [
     setValue,
     isDefaultRetentionEnabled,
@@ -285,9 +288,9 @@ export default function ObjectLockSetting() {
                       type="date"
                       name="retention-until-date"
                       disabled={!isRetentionEnabled}
-                      onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        onChange(e.target.value)
-                      }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        onChange(e.target.value);
+                      }}
                       value={retentionUntilDate}
                       min={minRetainUtilDate}
                     />
diff --git a/src/react/databrowser/objects/details/__tests__/Properties.test.tsx b/src/react/databrowser/objects/details/__tests__/Properties.test.tsx
index 46b0f7f69..70a834e0b 100644
--- a/src/react/databrowser/objects/details/__tests__/Properties.test.tsx
+++ b/src/react/databrowser/objects/details/__tests__/Properties.test.tsx
@@ -89,11 +89,10 @@ describe('Properties', () => {
       <Properties
         objectMetadata={{
           ...OBJECT_METADATA,
-          //@ts-expect-error fix this when you are working on it
           lockStatus: 'LOCKED',
           objectRetention: {
             mode: 'GOVERNANCE',
-            retainUntilDate: '2020-10-17 10:06:54',
+            retainUntilDate: new Date('2020-10-17 10:06:54'),
           },
         }}
       />,
@@ -120,11 +119,10 @@ describe('Properties', () => {
       <Properties
         objectMetadata={{
           ...OBJECT_METADATA,
-          //@ts-expect-error fix this when you are working on it
           lockStatus: 'RELEASED',
           objectRetention: {
             mode: 'GOVERNANCE',
-            retainUntilDate: '2020-10-17 10:06:54',
+            retainUntilDate: new Date('2020-10-17 10:06:54'),
           },
         }}
       />,
@@ -145,11 +143,10 @@ describe('Properties', () => {
       <Properties
         objectMetadata={{
           ...OBJECT_METADATA,
-          //@ts-expect-error fix this when you are working on it
           lockStatus: 'LOCKED',
           objectRetention: {
             mode: 'GOVERNANCE',
-            retainUntilDate: '2020-10-17 10:06:54',
+            retainUntilDate: new Date('2020-10-17 10:06:54'),
           },
           isLegalHoldEnabled: true,
         }}
@@ -168,11 +165,10 @@ describe('Properties', () => {
       <Properties
         objectMetadata={{
           ...OBJECT_METADATA,
-          //@ts-expect-error fix this when you are working on it
           lockStatus: 'LOCKED',
           objectRetention: {
             mode: 'GOVERNANCE',
-            retainUntilDate: '2020-10-17 10:06:54',
+            retainUntilDate: new Date('2020-10-17 10:06:54'),
           },
           isLegalHoldEnabled: true,
           storageClass: 'europe25-myroom-cold',
@@ -211,11 +207,10 @@ describe('Properties', () => {
       <Properties
         objectMetadata={{
           ...OBJECT_METADATA,
-          //@ts-expect-error fix this when you are working on it
           lockStatus: 'LOCKED',
           objectRetention: {
             mode: 'GOVERNANCE',
-            retainUntilDate: '2020-10-17 10:06:54',
+            retainUntilDate: new Date('2020-10-17 10:06:54'),
           },
           isLegalHoldEnabled: true,
           storageClass: 'europe25-myroom-cold',
@@ -259,11 +254,10 @@ describe('Properties', () => {
       <Properties
         objectMetadata={{
           ...OBJECT_METADATA,
-          //@ts-expect-error fix this when you are working on it
           lockStatus: 'LOCKED',
           objectRetention: {
             mode: 'GOVERNANCE',
-            retainUntilDate: '2020-10-17 10:06:54',
+            retainUntilDate: new Date('2020-10-17 10:06:54'),
           },
           isLegalHoldEnabled: true,
           storageClass: 'europe25-myroom-cold',
diff --git a/src/react/databrowser/objects/utils.ts b/src/react/databrowser/objects/utils.ts
index 3f1d78a59..ac4bf50d7 100644
--- a/src/react/databrowser/objects/utils.ts
+++ b/src/react/databrowser/objects/utils.ts
@@ -4,8 +4,9 @@ import type { ObjectMetadata } from '../../../types/s3';
 function getDefaultRetention(objectMetadata: ObjectMetadata | null) {
   const isDefaultRetentionEnabled =
     objectMetadata?.objectRetention !== undefined;
+
   const defaultRetentionUntilDate =
-    objectMetadata?.objectRetention?.retainUntilDate.split(' ')[0] || '';
+    objectMetadata?.objectRetention?.retainUntilDate;
   const defaultRetentionMode =
     objectMetadata?.objectRetention?.mode || 'GOVERNANCE';
   return {
@@ -17,7 +18,7 @@ function getDefaultRetention(objectMetadata: ObjectMetadata | null) {
 
 // input date format yyyy-mm-dd hh:mm:ss "2017-05-15 09:24:15"
 // get the min value for calendar picker in object retention setting, with yyyy-mm-dd as format
-function getDefaultMinRetainUntilDate(d: string, mode: string): string {
+function getDefaultMinRetainUntilDate(d: Date, mode: string): string {
   const futureDate = DateTime.now()
     .plus(
       Duration.fromObject({
@@ -33,8 +34,8 @@ function getDefaultMinRetainUntilDate(d: string, mode: string): string {
   // when we switch mode from "GOVERNANCE" to "COMPLIANCE", we should be able to keep the same previous retain date
   const previousRetainUntilDate =
     mode === 'GOVERNANCE'
-      ? DateTime.fromSQL(d).toISODate()
-      : DateTime.fromSQL(d)
+      ? DateTime.fromJSDate(d).toISODate()
+      : DateTime.fromJSDate(d)
           .plus(
             Duration.fromObject({
               days: 1,
diff --git a/src/types/s3.ts b/src/types/s3.ts
index d95ce0c0a..4835785b7 100644
--- a/src/types/s3.ts
+++ b/src/types/s3.ts
@@ -161,7 +161,7 @@ export type ObjectMetadata = {
   readonly isLegalHoldEnabled?: boolean;
   readonly objectRetention?: {
     mode: RetentionMode;
-    retainUntilDate: string;
+    retainUntilDate: Date;
   };
   readonly metadata: MetadataItems;
   readonly tags: Tags;

From 70699f02bc2bc5fa38131d337d6eaf83962a5ccf Mon Sep 17 00:00:00 2001
From: Patrick Ear <patrick.ear@scality.com>
Date: Thu, 19 Sep 2024 16:35:10 +0200
Subject: [PATCH 2/2] fix types

---
 .../__tests__/ObjectLockSetting.test.tsx      |  4 +-
 .../objects/details/Properties.tsx            | 77 ++++++++-----------
 .../details/__tests__/Properties.test.tsx     |  4 +-
 3 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/src/react/databrowser/objects/__tests__/ObjectLockSetting.test.tsx b/src/react/databrowser/objects/__tests__/ObjectLockSetting.test.tsx
index f4c7bc834..86d5f1304 100644
--- a/src/react/databrowser/objects/__tests__/ObjectLockSetting.test.tsx
+++ b/src/react/databrowser/objects/__tests__/ObjectLockSetting.test.tsx
@@ -42,7 +42,7 @@ describe('ObjectLockSetting', () => {
             bucketName: 'test-bucket',
             objectRetention: {
               mode: 'GOVERNANCE',
-              retainUntilDate: '2022-01-31 00:00:00"',
+              retainUntilDate: new Date('2022-01-31 00:00:00'),
             },
           },
         },
@@ -72,7 +72,7 @@ describe('ObjectLockSetting', () => {
             bucketName: 'test-bucket',
             objectRetention: {
               mode: 'COMPLIANCE',
-              retainUntilDate: '2022-01-31 00:00:00"',
+              retainUntilDate: new Date('2022-01-31 00:00:00'),
             },
           },
         },
diff --git a/src/react/databrowser/objects/details/Properties.tsx b/src/react/databrowser/objects/details/Properties.tsx
index 269856c12..ed57106e8 100644
--- a/src/react/databrowser/objects/details/Properties.tsx
+++ b/src/react/databrowser/objects/details/Properties.tsx
@@ -2,7 +2,7 @@
 import Table, * as T from '../../../ui-elements/TableKeyValue2';
 import { Clipboard } from '../../../ui-elements/Clipboard';
 import MiddleEllipsis from '../../../ui-elements/MiddleEllipsis';
-import type { ObjectMetadata } from '../../../../types/s3';
+import type { ObjectEntity, ObjectMetadata } from '../../../../types/s3';
 import {
   FormattedDateTime,
   Icon,
@@ -31,7 +31,7 @@ import {
 } from '../../../ui-elements/Veeam/VeeamConstants';
 
 type Props = {
-  objectMetadata: ObjectMetadata;
+  objectMetadata: ObjectMetadata & { lockStatus?: ObjectEntity['lockStatus'] };
 };
 const TruncatedValue = styled.div`
   max-width: 18rem;
@@ -203,47 +203,38 @@ function Properties({ objectMetadata }: Props) {
                 <T.Key> Lock </T.Key>
                 <T.GroupValues>
                   <div>
-                    {
-                      //@ts-expect-error fix this when you are working on it
-                      objectMetadata.lockStatus === 'LOCKED' && (
-                        <>
-                          Locked <Icon name="Lock" /> (
-                          {objectMetadata.objectRetention.mode.toLowerCase()})
-                          <br />
-                          until{' '}
-                          <FormattedDateTime
-                            format="date-time-second"
-                            value={
-                              new Date(
-                                objectMetadata.objectRetention.retainUntilDate,
-                              )
-                            }
-                          />
-                        </>
-                      )
-                    }
-                    {
-                      //@ts-expect-error fix this when you are working on it
-                      objectMetadata.lockStatus === 'RELEASED' && (
-                        <>
-                          Released <Icon name="Lock-open" />
-                          <br />
-                          since{' '}
-                          <FormattedDateTime
-                            format="date-time-second"
-                            value={
-                              new Date(
-                                objectMetadata.objectRetention.retainUntilDate,
-                              )
-                            }
-                          />
-                        </>
-                      )
-                    }
-                    {
-                      //@ts-expect-error fix this when you are working on it
-                      objectMetadata.lockStatus === 'NONE' && 'No retention'
-                    }
+                    {objectMetadata.lockStatus === 'LOCKED' && (
+                      <>
+                        Locked <Icon name="Lock" /> (
+                        {objectMetadata.objectRetention.mode.toLowerCase()})
+                        <br />
+                        until{' '}
+                        <FormattedDateTime
+                          format="date-time-second"
+                          value={
+                            new Date(
+                              objectMetadata.objectRetention.retainUntilDate,
+                            )
+                          }
+                        />
+                      </>
+                    )}
+                    {objectMetadata.lockStatus === 'RELEASED' && (
+                      <>
+                        Released <Icon name="Lock-open" />
+                        <br />
+                        since{' '}
+                        <FormattedDateTime
+                          format="date-time-second"
+                          value={
+                            new Date(
+                              objectMetadata.objectRetention.retainUntilDate,
+                            )
+                          }
+                        />
+                      </>
+                    )}
+                    {objectMetadata.lockStatus === 'NONE' && 'No retention'}
                   </div>
                   {isObjectLockEnabled && (
                     <Button
diff --git a/src/react/databrowser/objects/details/__tests__/Properties.test.tsx b/src/react/databrowser/objects/details/__tests__/Properties.test.tsx
index 70a834e0b..353d9f1d6 100644
--- a/src/react/databrowser/objects/details/__tests__/Properties.test.tsx
+++ b/src/react/databrowser/objects/details/__tests__/Properties.test.tsx
@@ -18,7 +18,9 @@ import Properties from '../Properties';
 import { getConfigOverlay } from '../../../../../js/mock/managementClientMSWHandlers';
 
 const renderProperties = (
-  component: React.ReactNode = <Properties objectMetadata={OBJECT_METADATA} />,
+  component: React.ReactNode = (
+    <Properties objectMetadata={{ ...OBJECT_METADATA, lockStatus: 'NONE' }} />
+  ),
   state = {},
 ) => {
   return renderWithRouterMatch(