Improvements to Share Link component behavior (minio#3387)

Improvements to Share Link component to avoid multiple re-renders during common actions

Signed-off-by: Benjamin Perez <[email protected]>

.github/workflows/vulncheck.yaml

@@ -50,11 +50,4 @@ jobs:
         working-directory: ./web-app
         continue-on-error: false
         run: |
-          # Ignore "pdfjs-dist" advisory, because it's a dependency
-          # of "react-pdf" that cannot be upgraded. Because the
-          # "isEvalSupported" value is always set to "false", it
-          # isn't a security problem. See also
-          # - https://github.com/wojtekmaj/react-pdf/issues/1789
-          # - https://github.com/wojtekmaj/react-pdf/discussions/1786
-          # - https://www.npmjs.com/advisories/1097244    
           yarn npm audit --recursive --environment production --no-deprecations

web-app/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx

@@ -56,16 +56,14 @@ const ShareFile = ({
 }: IShareFileProps) => {
   const dispatch = useAppDispatch();
   const distributedSetup = useSelector(selDistSet);
-  const maxshareLinkExpTimeVal = useSelector(maxShareLinkExpTime);
+  const maxShareLinkExpTimeVal = useSelector(maxShareLinkExpTime);
   const [shareURL, setShareURL] = useState<string>("");
   const [isLoadingVersion, setIsLoadingVersion] = useState<boolean>(true);
   const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
   const [selectedDate, setSelectedDate] = useState<string>("");
   const [dateValid, setDateValid] = useState<boolean>(true);
   const [versionID, setVersionID] = useState<string>("null");
 
-  const initialDate = new Date();
-
   const dateChanged = (newDate: string, isValid: boolean) => {
     setDateValid(isValid);
     if (isValid) {
@@ -205,18 +203,17 @@ const ShareFile = ({
                   The following URL lets you share this object without requiring
                   a login. <br />
                   The URL expires automatically at the earlier of your
-                  configured time ({niceTimeFromSeconds(maxshareLinkExpTimeVal)}
+                  configured time ({niceTimeFromSeconds(maxShareLinkExpTimeVal)}
                   ) or the expiration of your current web session.
                 </span>
               </Tooltip>
             </Grid>
             <br />
             <Grid item xs={12}>
               <DaysSelector
-                initialDate={initialDate}
                 id="date"
                 label="Active for"
-                maxSeconds={maxshareLinkExpTimeVal}
+                maxSeconds={maxShareLinkExpTimeVal}
                 onChange={dateChanged}
                 entity="Link"
               />

web-app/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx

@@ -24,28 +24,23 @@ const HOUR_MINUTES = 60;
 
 interface IDaysSelector {
   id: string;
-  initialDate: Date;
   maxSeconds: number;
   label: string;
   entity: string;
   onChange: (newDate: string, isValid: boolean) => void;
 }
 
-const calculateNewTime = (
-  initialDate: Date,
-  days: number,
-  hours: number,
-  minutes: number,
-) => {
-  return DateTime.fromJSDate(initialDate).plus({
-    hours: hours + days * 24,
-    minutes,
-  }); // Lump days into hours to avoid daylight savings causing issues
+const calculateNewTime = (days: number, hours: number, minutes: number) => {
+  return DateTime.now()
+    .plus({
+      hours: hours + days * 24,
+      minutes,
+    })
+    .toISO(); // Lump days into hours to avoid daylight savings causing issues
 };
 
 const DaysSelector = ({
   id,
-  initialDate,
   label,
   maxSeconds,
   entity,
@@ -59,7 +54,7 @@ const DaysSelector = ({
   const [selectedHours, setSelectedHours] = useState<number>(0);
   const [selectedMinutes, setSelectedMinutes] = useState<number>(0);
   const [validDate, setValidDate] = useState<boolean>(true);
-  const [dateSelected, setDateSelected] = useState<DateTime>(DateTime.now());
+  const [dateSelected, setDateSelected] = useState<string | null>(null);
 
   // Set initial values
   useEffect(() => {
@@ -75,19 +70,16 @@ const DaysSelector = ({
       !isNaN(selectedMinutes)
     ) {
       setDateSelected(
-        calculateNewTime(
-          initialDate,
-          selectedDays,
-          selectedHours,
-          selectedMinutes,
-        ),
+        calculateNewTime(selectedDays, selectedHours, selectedMinutes),
       );
     }
-  }, [initialDate, selectedDays, selectedHours, selectedMinutes]);
+  }, [selectedDays, selectedHours, selectedMinutes]);
 
   useEffect(() => {
-    if (validDate) {
-      const formattedDate = dateSelected.toFormat("yyyy-MM-dd HH:mm:ss");
+    if (validDate && dateSelected) {
+      const formattedDate = DateTime.fromISO(dateSelected).toFormat(
+        "yyyy-MM-dd HH:mm:ss",
+      );
       onChange(formattedDate.split(" ").join("T"), true);
     } else {
       onChange("0000-00-00", false);
@@ -270,12 +262,14 @@ const DaysSelector = ({
           },
         }}
       >
-        {validDate ? (
+        {validDate && dateSelected ? (
           <div className={"validityText"}>
             <LinkIcon />
             <div>{entity} will be available until:</div>{" "}
             <div className={"validTill"}>
-              {dateSelected.toFormat("MM/dd/yyyy HH:mm:ss ZZZZ")}
+              {DateTime.fromISO(dateSelected).toFormat(
+                "MM/dd/yyyy HH:mm:ss ZZZZ",
+              )}
             </div>
           </div>
         ) : (