Fix retention date on object UI (#556)

Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx

@@ -27,6 +27,7 @@ import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapp
 import RadioGroupSelector from "../../../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import DateSelector from "../../../../Common/FormComponents/DateSelector/DateSelector";
 import api from "../../../../../../common/api";
+import { twoDigitDate } from "../../../../Common/FormComponents/DateSelector/utils";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -76,6 +77,19 @@ const SetRetention = ({
       setType(objectInfo.retention_mode.toLowerCase());
       setAlreadyConfigured(true);
     }
+    // get retention_until_date if defined
+    if (objectInfo.retention_until_date) {
+      const valueDate = new Date(objectInfo.retention_until_date);
+      if (valueDate.toString() !== "Invalid Date") {
+        const year = valueDate.getFullYear();
+        const month = twoDigitDate(valueDate.getMonth() + 1);
+        const day = valueDate.getDate();
+        if (!isNaN(day) && month !== "NaN" && !isNaN(year)) {
+          setDate(`${year}-${month}-${day}`);
+        }
+      }
+      setAlreadyConfigured(true);
+    }
   }, [objectInfo]);
 
   const dateElement = useRef<IRefObject>(null);
@@ -217,10 +231,13 @@ const SetRetention = ({
             label="Date"
             disableOptions={dateFieldDisabled()}
             ref={dateElement}
+            value={date}
             borderBottom={true}
             onDateChange={(date: string, isValid: boolean) => {
               setIsDateValid(isValid);
-              setDate(date);
+              if (isValid) {
+                setDate(date);
+              }
             }}
           />
         </Grid>

portal-ui/src/screens/Console/Common/FormComponents/DateSelector/DateSelector.tsx

@@ -86,6 +86,7 @@ interface IDateSelectorProps {
   addSwitch?: boolean;
   tooltip?: string;
   borderBottom?: boolean;
+  value?: string;
   onDateChange: (date: string, isValid: boolean) => any;
 }
 
@@ -100,6 +101,7 @@ const DateSelector = forwardRef(
       tooltip = "",
       borderBottom = false,
       onDateChange,
+      value = "",
     }: IDateSelectorProps,
     ref: any
   ) => {
@@ -110,6 +112,18 @@ const DateSelector = forwardRef(
     const [day, setDay] = useState<string>("");
     const [year, setYear] = useState<string>("");
 
+    useEffect(() => {
+      // verify if there is a current value
+      // assume is in the format "2021-12-30"
+      if (value !== "") {
+        const valueSplit = value.split("-");
+        setYear(valueSplit[0]);
+        setMonth(valueSplit[1]);
+        // Turn to single digit to be displayed on dropdown buttons
+        setDay(`${parseInt(valueSplit[2])}`);
+      }
+    }, [value]);
+
     useEffect(() => {
       const [isValid, dateString] = validDate(year, month, day);
       onDateChange(dateString, isValid);

portal-ui/src/screens/Console/Common/FormComponents/DateSelector/utils.ts

@@ -56,3 +56,9 @@ export const validDate = (year: string, month: string, day: string): any[] => {
 
   return [parsedDate === dateString, dateString];
 };
+
+// twoDigitDate gets a two digit string number used for months or days
+// returns "NaN" if number is NaN
+export const twoDigitDate = (num: number): string => {
+  return num < 10 ? `0${num}` : `${num}`;
+};