Merge pull request #312 from kloudlite/update/environments

WEB: Discard changes working fine when switching tab of app settings

lib/client/hooks/use-unsaved-changes.tsx

@@ -6,14 +6,14 @@ import {
   useRevalidator,
 } from '@remix-run/react';
 import {
+  ReactNode,
   createContext,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
 } from 'react';
-import { ChildrenProps } from '~/components/types';
 import Popup from '~/components/molecule/popup';
 import { useReload } from '../helpers/reloader';
 
@@ -41,7 +41,13 @@ const UnsavedChanges = createContext<{
   loading: false,
 });
 
-export const UnsavedChangesProvider = ({ children }: ChildrenProps) => {
+export const UnsavedChangesProvider = ({
+  children,
+  onProceed,
+}: {
+  children?: ReactNode;
+  onProceed?: (props: { setPerformAction?: (action: string) => void }) => void;
+}) => {
   const [hasChanges, setHasChanges] = useState<boolean>(false);
   const [reload, setReload] = useState(false);
   const [ignorePaths, setIgnorePaths] = useState<string[]>([]);
@@ -139,13 +145,23 @@ export const UnsavedChangesProvider = ({ children }: ChildrenProps) => {
           <Popup.Button
             content="Discard"
             variant="warning"
-            onClick={() => proceed?.()}
+            onClick={() => {
+              proceed?.();
+              onProceed?.({ setPerformAction });
+            }}
           />
         </Popup.Footer>
       </Popup.Root>
     </UnsavedChanges.Provider>
   );
 };
+
+export const DISCARD_ACTIONS = {
+  DISCARD_CHANGES: 'discard-changes',
+  VIEW_CHANGES: 'view-changes',
+  INIT: 'init',
+};
+
 export const useUnsavedChanges = () => {
   return useContext(UnsavedChanges);
 };

src/apps/console/hooks/use-is-owner.tsx

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import { useConsoleApi } from '../server/gql/api-provider';
+
+export const useIsOwner = ({ accountName }: { accountName: string }) => {
+  const api = useConsoleApi();
+  const { data: teamMembers, isLoading: teamMembersLoading } = useCustomSwr(
+    `${accountName}-owners`,
+    async () => {
+      return api.listMembershipsForAccount({
+        accountName,
+      });
+    }
+  );
+
+  const { data: currentUser, isLoading: currentUserLoading } = useCustomSwr(
+    'current-user',
+    async () => {
+      return api.whoAmI();
+    }
+  );
+
+  const isOwner = useCallback(() => {
+    if (!teamMembers || !currentUser) return false;
+
+    const owner = teamMembers.find((member) => member.role === 'account_owner');
+
+    return owner?.user?.email === currentUser?.email;
+  }, [teamMembers, currentUser]);
+
+  return {
+    isOwner: isOwner(),
+    isLoading: teamMembersLoading || currentUserLoading,
+  };
+};

src/apps/console/page-components/app/compute.tsx

@@ -7,7 +7,10 @@ import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import { useAppState } from '~/console/page-components/app-states';
 import { FadeIn, parseValue } from '~/console/page-components/util';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import {
+  DISCARD_ACTIONS,
+  useUnsavedChanges,
+} from '~/root/lib/client/hooks/use-unsaved-changes';
 import Yup from '~/root/lib/server/helpers/yup';
 import appInitialFormValues, { mapFormValuesToApp } from './app-utils';
 import { plans } from './datas';
@@ -79,7 +82,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
           mapFormValuesToApp({
             appIn: val,
             oldAppIn: s,
-          })
+          }),
         );
       },
     });
@@ -97,7 +100,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
   }, [values, mode]);
 
   useEffect(() => {
-    if (performAction === 'discard-changes') {
+    if (performAction === DISCARD_ACTIONS.DISCARD_CHANGES) {
       resetValues();
     }
   }, [performAction]);
@@ -167,7 +170,7 @@ const AppCompute = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
                 handleChange('selectedPlan')(dummyEvent(v.value));
                 handleChange('memPerCpu')(dummyEvent(v.memoryPerCpu));
                 handleChange('cpuMode')(
-                  dummyEvent(v.isShared ? 'shared' : 'dedicated')
+                  dummyEvent(v.isShared ? 'shared' : 'dedicated'),
                 );
               }}
             />

src/apps/console/page-components/app/general.tsx

@@ -16,7 +16,10 @@ import { ensureAccountClientSide } from '~/console/server/utils/auth-utils';
 import { constants } from '~/console/server/utils/constants';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
-import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
+import {
+  DISCARD_ACTIONS,
+  useUnsavedChanges,
+} from '~/root/lib/client/hooks/use-unsaved-changes';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 
@@ -119,7 +122,7 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
         setImageLoaded(false);
       }
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -133,7 +136,7 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
       }
     },
     300,
-    [imageSearchText]
+    [imageSearchText],
   );
 
   const {
@@ -176,7 +179,7 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
       displayName: Yup.string().required(),
       imageUrl: Yup.string().matches(
         constants.dockerImageFormatRegex,
-        'Invalid image format'
+        'Invalid image format',
       ),
       manualRepo: Yup.string().when(
         ['imageUrl', 'imageMode'],
@@ -189,7 +192,7 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
             return schema.required().matches(regex, 'Invalid image format');
           }
           return schema;
-        }
+        },
       ),
       imageMode: Yup.string().required(),
       source: Yup.object()
@@ -242,7 +245,7 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
   }, [values, mode]);
 
   useEffect(() => {
-    if (performAction === 'discard-changes') {
+    if (performAction === DISCARD_ACTIONS.DISCARD_CHANGES) {
       // if (app.ciBuildId) {
       //   setIsEdited(false);
       // }

src/apps/console/routes/_main+/$account+/env+/$environment+/app+/$app+/settings+/_layout.tsx

@@ -18,6 +18,7 @@ import { constants } from '~/console/server/utils/constants';
 import { useReload } from '~/lib/client/helpers/reloader';
 import useForm from '~/lib/client/hooks/use-form';
 import {
+  DISCARD_ACTIONS,
   UnsavedChangesProvider,
   useUnsavedChanges,
 } from '~/lib/client/hooks/use-unsaved-changes';
@@ -177,7 +178,7 @@ const Layout = () => {
         }
         toast.success('App updated successfully');
         // @ts-ignore
-        setPerformAction('init');
+        setPerformAction(DISCARD_ACTIONS.INIT);
         if (!gitMode) {
           // @ts-ignore
           setBuildData(null);
@@ -221,7 +222,7 @@ const Layout = () => {
   }, [rootContext.app]);
 
   useEffect(() => {
-    if (performAction === 'discard-changes') {
+    if (performAction === DISCARD_ACTIONS.DISCARD_CHANGES) {
       setApp(rootContext.app);
       setReadOnlyApp(rootContext.app);
       // @ts-ignore
@@ -237,7 +238,7 @@ const Layout = () => {
           'min-w-[1000px]': showDiff,
           'min-w-[500px]': !showDiff,
         })}
-        show={performAction === 'view-changes'}
+        show={performAction === DISCARD_ACTIONS.VIEW_CHANGES}
         onOpenChange={(v) => setPerformAction(v)}
       >
         <Popup.Header>Commit Changes</Popup.Header>
@@ -302,7 +303,11 @@ const Settings = () => {
   const rootContext = useOutletContext<IAppContext>();
   return (
     <AppContextProvider initialAppState={rootContext.app}>
-      <UnsavedChangesProvider>
+      <UnsavedChangesProvider
+        onProceed={({ setPerformAction }) => {
+          setPerformAction?.(DISCARD_ACTIONS.DISCARD_CHANGES);
+        }}
+      >
         <Layout />
       </UnsavedChangesProvider>
     </AppContextProvider>

src/apps/console/routes/_main+/$account+/env+/$environment+/new-app/app-environment-variables.tsx

@@ -21,6 +21,10 @@ import NoResultsFound from '~/console/components/no-results-found';
 import { IShowDialog } from '~/console/components/types.d';
 import { useAppState } from '~/console/page-components/app-states';
 import useForm from '~/root/lib/client/hooks/use-form';
+import {
+  DISCARD_ACTIONS,
+  useUnsavedChanges,
+} from '~/root/lib/client/hooks/use-unsaved-changes';
 import Yup from '~/root/lib/server/helpers/yup';
 import { NonNullableString } from '~/root/lib/types/common';
 import AppDialog from './app-dialogs';
@@ -205,9 +209,11 @@ const EnvironmentVariablesList = ({
 };
 
 export const EnvironmentVariables = () => {
-  const { setContainer, getContainer } = useAppState();
+  const { setContainer, getContainer, getReadOnlyContainer, readOnlyApp } =
+    useAppState();
 
   const [showCSDialog, setShowCSDialog] = useState<IShowDialog>(null);
+  const { performAction } = useUnsavedChanges();
 
   const entry = Yup.object({
     type: Yup.string().oneOf(['config', 'secret']).notRequired(),
@@ -231,10 +237,16 @@ export const EnvironmentVariables = () => {
       .notRequired(),
   });
 
-  const { values, setValues, submit } = useForm({
-    initialValues: getContainer().env,
+  const {
+    values,
+    setValues,
+    submit,
+    resetValues: reset,
+  } = useForm({
+    initialValues: getReadOnlyContainer().env || null,
     validationSchema: Yup.array(entry),
     onSubmit: (val) => {
+      // @ts-ignore
       setContainer((c) => ({
         ...c,
         env: val,
@@ -261,6 +273,7 @@ export const EnvironmentVariables = () => {
   };
 
   const removeEntry = (val: IEnvVariable) => {
+    // @ts-ignore
     setValues((v) => {
       const nv = v?.filter((v) => v.key !== val.key);
       return nv;
@@ -334,6 +347,25 @@ export const EnvironmentVariables = () => {
     },
   });
 
+  useEffect(() => {
+    if (performAction === DISCARD_ACTIONS.DISCARD_CHANGES) {
+      // if (app.ciBuildId) {
+      //   setIsEdited(false);
+      // }
+      reset();
+      // @ts-ignore
+      // setBuildData(readOnlyApp?.build);
+    }
+
+    // else if (performAction === 'init') {
+    //   setIsEdited(false);
+    // }
+  }, [performAction]);
+
+  useEffect(() => {
+    reset();
+  }, [readOnlyApp]);
+
   return (
     <>
       <form

src/apps/iot-console/routes/_main+/$account+/$project+/deviceblueprint+/$deviceblueprint+/app+/$app+/settings+/_layout.tsx

@@ -1,6 +1,7 @@
 import { Outlet, useOutletContext } from '@remix-run/react';
 import SidebarLayout from '~/iotconsole/components/sidebar-layout';
 import {
+  DISCARD_ACTIONS,
   UnsavedChangesProvider,
   useUnsavedChanges,
 } from '~/lib/client/hooks/use-unsaved-changes';
@@ -52,8 +53,8 @@ const Layout = () => {
     setIgnorePaths(
       navItems.map(
         (ni) =>
-          `/${account}/deviceblueprint/${deviceBlueprintName}/app/${appName}/settings/${ni.value}`
-      )
+          `/${account}/deviceblueprint/${deviceBlueprintName}/app/${appName}/settings/${ni.value}`,
+      ),
     );
   }, []);
 
@@ -110,7 +111,7 @@ const Layout = () => {
   }, [rootContext.app]);
 
   useEffect(() => {
-    if (performAction === 'discard-changes') {
+    if (performAction === DISCARD_ACTIONS.DISCARD_CHANGES) {
       setApp(rootContext.app);
       setPerformAction('');
     }
@@ -120,7 +121,7 @@ const Layout = () => {
     <SidebarLayout navItems={navItems} parentPath="/settings">
       <Popup.Root
         className="w-[90vw] max-w-[1440px] min-w-[1000px]"
-        show={performAction === 'view-changes'}
+        show={performAction === DISCARD_ACTIONS.VIEW_CHANGES}
         onOpenChange={(v) => setPerformAction(v)}
       >
         <Popup.Header>Review Changes</Popup.Header>