feat(ui): reset the widget when access expires (#51)

Signed-off-by: ashutosh16 <[email protected]>
argoproj-labs · Oct 30, 2024 · 00e02a8 · 00e02a8
1 parent 756565b
commit 00e02a8
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 70 deletions.
diff --git a/ui/src/component/ephemeral-access-details.tsx b/ui/src/component/ephemeral-access-details.tsx
@@ -56,20 +56,37 @@ const EphemeralAccessDetails: React.FC<AccessDetailsComponentProps> = ({
         localStorage.setItem(application?.metadata?.name, 'null');
       }
 
-      if (accessRequest && accessRequest.status === AccessRequestResponseBodyStatus.GRANTED) {
-        setEnabled(false);
+      switch (accessRequestData?.status) {
+        case AccessRequestResponseBodyStatus.GRANTED:
+          setEnabled(false);
+          break;
+        case AccessRequestResponseBodyStatus.DENIED:
+          notify(
+            'last request was denied: ' + accessRequestData?.message &&
+              accessRequestData?.message + '. Please try again!'
+          );
+          setEnabled(true);
+          setAccessRequest(null);
+          break;
+        case AccessRequestResponseBodyStatus.REQUESTED:
+          setEnabled(false);
+          break;
+        default:
+          setEnabled(true);
+          break;
       }
       return accessRequestData;
     } catch (error) {
       setEnabled(true);
       notify('Failed to connect to  backend: ' + error.message);
     }
+
     return null;
   }, []);
 
-  const requestAccessHandler = useCallback(async (): Promise<CreateAccessRequestBody> => {
+  const requestAccessHandler = useCallback(async (): Promise<CreateAccessRequestBody | null> => {
     try {
-      const { data } = await createAccessrequest(
+      await createAccessrequest(
         {
           roleName: window?.EPHEMERAL_ACCESS_VARS?.EPHEMERAL_ACCESS_DEFAULT_ROLE
         },
@@ -79,69 +96,73 @@ const EphemeralAccessDetails: React.FC<AccessDetailsComponentProps> = ({
         }
       );
 
-      if (
-        data.status === AccessRequestResponseBodyStatus.GRANTED ||
-        data.status === AccessRequestResponseBodyStatus.DENIED
-      ) {
-        setEnabled(false);
-      } else {
-        const intervalId = setInterval(async () => {
-          const accessData = await fetchAccess();
-          if (
-            accessData?.status === AccessRequestResponseBodyStatus.GRANTED ||
-            accessData?.status === AccessRequestResponseBodyStatus.DENIED
-          ) {
-            setEnabled(false);
-            clearInterval(intervalId);
+      const intervalId = setInterval(async () => {
+        const updatedAccessData = await fetchAccess();
+        if (
+          updatedAccessData?.status === AccessRequestResponseBodyStatus.GRANTED ||
+          updatedAccessData?.status === AccessRequestResponseBodyStatus.DENIED
+        ) {
+          if (updatedAccessData?.expiresAt) {
+            const timeoutDuration =
+              moment.parseZone(updatedAccessData.expiresAt).valueOf() - moment().valueOf();
+            if (timeoutDuration > 0) {
+              setTimeout(() => {
+                setAccessRequest(null);
+                setEnabled(true);
+              }, timeoutDuration);
+            }
           }
-        }, 500);
-      }
+          clearInterval(intervalId);
+        }
+      }, 500);
     } catch (error) {
       setEnabled(true);
-      if (error.response.status === 409) {
-        notify('Permission request already exists');
-        const accessData = await fetchAccess();
-        if (
-          accessData?.status === AccessRequestResponseBodyStatus.GRANTED ||
-          accessData?.status === AccessRequestResponseBodyStatus.DENIED
-        ) {
-          setAccessRequest(accessData);
-          setEnabled(false);
+      if (error.response) {
+        switch (error.response.status) {
+          case 409:
+            notify('permission request already exists');
+            const accessData = await fetchAccess();
+            if (
+              accessData?.status === AccessRequestResponseBodyStatus.GRANTED ||
+              accessData?.status === AccessRequestResponseBodyStatus.DENIED
+            ) {
+              setAccessRequest(accessData);
+              setEnabled(false);
+            }
+            break;
+          case 401:
+          case 403:
+            notify('extension is not authorized: ' + error.message);
+            break;
+          case 502:
+            notify('error occurred while requesting permission: ' + error.message);
+            break;
+          default:
+            notify('failed to connect to backend: ' + error.message);
+            break;
         }
+      } else {
+        notify('An unexpected error occurred: ' + error.message);
       }
-      if (error.response.status === 401) {
-        notify('Extension is not enabled');
-        setEnabled(false);
-      }
-
-      if (error.response.status === 502) {
-        notify('Error occurred while requesting permission');
-        setEnabled(false);
-      }
+      setEnabled(false);
       return null;
     }
-  }, [applicationName, applicationNamespace, project, username, fetchAccess]);
-
+  }, [fetchAccess]);
   useEffect(() => {
     const fetchData = async () => {
-      const currentAccess = await fetchAccess();
-      switch (currentAccess?.status) {
-        case AccessRequestResponseBodyStatus.GRANTED:
-          setEnabled(false);
-          break;
-        case AccessRequestResponseBodyStatus.DENIED:
-          notify('last request was denied: ' + accessRequest?.message + '. Please try again!');
-          setEnabled(true);
-          setAccessRequest(null);
-          break;
-        case AccessRequestResponseBodyStatus.REQUESTED:
-          setEnabled(false);
-          break;
-        default:
-          setEnabled(true);
-          break;
+      const updatedAccessData = await fetchAccess();
+      if (updatedAccessData?.expiresAt) {
+        const timeoutDuration =
+          moment.parseZone(updatedAccessData.expiresAt).valueOf() - moment().valueOf();
+        if (timeoutDuration > 0) {
+          setTimeout(() => {
+            setAccessRequest(null);
+            setEnabled(true);
+          }, timeoutDuration);
+        }
       }
     };
+
     fetchData();
   }, []);
 

diff --git a/ui/src/component/ephemeral-access-panel.tsx b/ui/src/component/ephemeral-access-panel.tsx
@@ -27,28 +27,15 @@ const DisplayAccessPermission: React.FC<{ application: Application }> = ({ appli
     }
   }, [application.metadata?.name]);
 
-  const validatePermissions = () => {
-    const accessPermission = JSON.parse(localStorage.getItem(application.metadata?.name));
-    if (accessPermission === null) {
-      localStorage.removeItem(application.metadata?.name);
-      setAccessRequest(null);
-    }
-  };
 
   useEffect(() => {
     const intervalId = setInterval(() => {
       getPermissions();
-      validatePermissions();
     }, 500);
 
     return () => clearInterval(intervalId);
   }, [getPermissions]);
 
-
-  const handleLinkClick = useCallback(() => {
-    window.location.href = `/applications/argocd/${application.metadata.name}?view=tree&resource=&extension=ephemeral_access`;
-  }, []);
-
   return EnableEphemeralAccess(application) ? (
     <div
       key='ephemeral-access-status-icon'
@@ -70,7 +57,6 @@ const DisplayAccessPermission: React.FC<{ application: Application }> = ({ appli
       </label>
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
         <div
-          onClick={handleLinkClick}
           style={{
             marginRight: '5px',
             position: 'relative',