Added util to update page title and added empty data check on environ…

…ment page (#4162) * Added util to update page title and fixed env page loader Signed-off-by: Hrishav <[email protected]> * Fixed issues found while testing Signed-off-by: Hrishav <[email protected]> * Fixed UI issues found Signed-off-by: Hrishav <[email protected]> --------- Signed-off-by: Hrishav <[email protected]> Co-authored-by: Saranya Jena <[email protected]>
litmuschaos · Sep 13, 2023 · ac6ebe4 · ac6ebe4
1 parent 7bcbd7c
commit ac6ebe4
Show file tree

Hide file tree

Showing 37 changed files with 308 additions and 150 deletions.
diff --git a/chaoscenter/web/src/app/App.tsx b/chaoscenter/web/src/app/App.tsx
@@ -9,7 +9,7 @@ import { AppStoreProvider } from '@context';
 
 export function AppWithAuthentication(): React.ReactElement {
   return (
-    <AppStoreProvider>
+    <AppStoreProvider updateAppStore={() => void 0}>
       <StringsContext.Provider value={{ data: strings as StringsMap }}>
         <LitmusAPIProvider config={APIEndpoints}>
           <RoutesWithAuthentication />

diff --git a/chaoscenter/web/src/components/ProjectCard/ProjectCard.tsx b/chaoscenter/web/src/components/ProjectCard/ProjectCard.tsx
@@ -15,7 +15,7 @@ interface ProjectCardProps {
 export default function ProjectCard({ data }: ProjectCardProps): React.ReactElement {
   const { getString } = useStrings();
   const history = useHistory();
-  const { projectID, currentUserInfo } = useAppStore();
+  const { projectID, currentUserInfo, updateAppStore } = useAppStore();
 
   const isSelected = projectID === data.projectID;
   const collaborators = data.members?.map(member => {
@@ -27,6 +27,7 @@ export default function ProjectCard({ data }: ProjectCardProps): React.ReactElem
 
   const handleProjectSelect = (): void => {
     const projectRole = data.members?.find(member => member.userID === currentUserInfo?.ID)?.role;
+    updateAppStore({ projectID: data.projectID, projectName: data.name });
     setUserDetails({
       projectRole,
       projectID: data.projectID

diff --git a/chaoscenter/web/src/components/SideNav/SideNav.module.scss b/chaoscenter/web/src/components/SideNav/SideNav.module.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  .bottomContainer[data-isRoutePresent='false'] {
+  .bottomContainer[data-isroutepresent='false'] {
     border-top: none;
   }
 

diff --git a/chaoscenter/web/src/components/SideNav/SideNav.tsx b/chaoscenter/web/src/components/SideNav/SideNav.tsx
@@ -9,6 +9,8 @@ import { useLogout, useRouteWithBaseUrl } from '@hooks';
 import { useStrings } from '@strings';
 import ProjectSelectorController from '@controllers/ProjectSelector';
 import NavExpandable from '@components/NavExpandable';
+import { getUserDetails } from '@utils';
+import { PermissionGroup } from '@models';
 import css from './SideNav.module.scss';
 
 interface SidebarLinkProps extends NavLinkProps {
@@ -59,8 +61,9 @@ export const SIDE_NAV_EXPAND_TIMER = 500;
 export default function SideNav(): ReactElement {
   const { getString } = useStrings();
   const paths = useRouteWithBaseUrl();
-  const accountScopedPaths = useRouteWithBaseUrl('account');
   const { forceLogout } = useLogout();
+  const { projectRole } = getUserDetails();
+  const accountScopedPaths = useRouteWithBaseUrl('account');
   const collapseByDefault = false;
   const [sideNavHovered, setSideNavhovered] = useState<boolean>(false);
   const [sideNavExpanded, setSideNavExpanded] = useState<boolean>(!collapseByDefault);
@@ -109,15 +112,17 @@ export default function SideNav(): ReactElement {
             <SidebarLink label={'Environments'} to={paths.toEnvironments()} />
             <SidebarLink label={'Resilience Probes'} to={paths.toChaosProbes()} />
             <SidebarLink label={'ChaosHubs'} to={paths.toChaosHubs()} />
-            <NavExpandable title="Project Setup" route={paths.toProjectSetup()}>
-              <SidebarLink label={'Members'} to={paths.toProjectMembers()} />
-              <SidebarLink label={'Gitops'} to={paths.toGitops()} />
-              <SidebarLink label={'Image Registry'} to={paths.toImageRegistry()} />
-            </NavExpandable>
+            {projectRole === PermissionGroup.OWNER && (
+              <NavExpandable title="Project Setup" route={paths.toProjectSetup()}>
+                <SidebarLink label={'Members'} to={paths.toProjectMembers()} />
+                <SidebarLink label={'GitOps'} to={paths.toGitops()} />
+                <SidebarLink label={'Image Registry'} to={paths.toImageRegistry()} />
+              </NavExpandable>
+            )}
           </Layout.Vertical>
         )}
       </div>
-      <Container className={css.bottomContainer} data-isRoutePresent={isPathPresent('settings')}>
+      <Container className={css.bottomContainer} data-isroutepresent={isPathPresent('settings')}>
         {!isPathPresent('settings') && (
           <div className={css.iconContainer}>
             <Icon className={css.icon} name={'chaos-litmuschaos'} size={200} />

diff --git a/chaoscenter/web/src/context/AppStoreContext.tsx b/chaoscenter/web/src/context/AppStoreContext.tsx
@@ -5,13 +5,17 @@ import { getUserDetails } from '../utils/userDetails';
 
 export interface AppStoreContextProps {
   readonly projectID?: string;
+  readonly projectName?: string;
   readonly projectRole?: string;
   readonly currentUserInfo?: UserInfo;
   readonly matchPath?: string;
   readonly renderUrl?: string;
-  updateAppStore?(
+  updateAppStore(
     data: Partial<
-      Pick<AppStoreContextProps, 'projectID' | 'projectRole' | 'currentUserInfo' | 'matchPath' | 'renderUrl'>
+      Pick<
+        AppStoreContextProps,
+        'projectID' | 'projectName' | 'projectRole' | 'currentUserInfo' | 'matchPath' | 'renderUrl'
+      >
     >
   ): void;
 }

diff --git a/chaoscenter/web/src/controllers/APITokens/APITokens.tsx b/chaoscenter/web/src/controllers/APITokens/APITokens.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useToaster } from '@harnessio/uicore';
+import ApiTokensView from '@views/ApiTokens';
+import { useGetApiTokensQuery } from '@api/auth';
+import { getUserDetails } from '@utils';
+
+interface APITokensControllerProps {
+  setApiTokensCount: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export default function APITokensController(props: APITokensControllerProps): React.ReactElement {
+  const { setApiTokensCount } = props;
+  const { showError } = useToaster();
+  const { accountID } = getUserDetails();
+
+  const {
+    data: apiTokensData,
+    isLoading: apiTokensLoading,
+    refetch: apiTokensRefetch
+  } = useGetApiTokensQuery(
+    { user_id: accountID },
+    {
+      onError: error => {
+        showError(error.error);
+      },
+      onSuccess: data => {
+        setApiTokensCount(data.apiTokens.length);
+      }
+    }
+  );
+
+  return (
+    <ApiTokensView
+      apiTokensData={apiTokensData}
+      apiTokensRefetch={apiTokensRefetch}
+      getApiTokensQueryLoading={apiTokensLoading}
+    />
+  );
+}
diff --git a/chaoscenter/web/src/controllers/APITokens/index.ts b/chaoscenter/web/src/controllers/APITokens/index.ts
@@ -0,0 +1,3 @@
+import APITokensController from './APITokens';
+
+export default APITokensController;
diff --git a/...r/web/src/controllers/AccountSettingsOverviewProjects/AccountSettingsOverviewProjects.tsx b/...r/web/src/controllers/AccountSettingsOverviewProjects/AccountSettingsOverviewProjects.tsx
@@ -4,15 +4,12 @@ import {
   useGetOwnerProjectsQuery,
   useListInvitationsQuery,
   useAcceptInvitationMutation,
-  GetUserWithProjectOkResponse,
-  useGetApiTokensQuery
+  GetUserWithProjectOkResponse
 } from '@api/auth';
 import UserCreatedProjectsView from '@views/UserCreatedProjects';
 import ProjectsJoinedView from '@views/ProjectsJoined';
 import ProjectInvitationsView from '@views/ProjectInvitations';
 import { InvitationState } from '@models';
-import { useAppStore } from '@context';
-import ApiTokensView from '@views/ApiTokens';
 
 interface AccountSettingsOverviewProjectsControllerProps {
   getUserWithProjectsRefetch: <TPageData>(
@@ -23,17 +20,11 @@ interface AccountSettingsOverviewProjectsControllerProps {
 export default function AccountSettingsOverviewProjectsController({
   getUserWithProjectsRefetch
 }: AccountSettingsOverviewProjectsControllerProps): React.ReactElement {
-  const { currentUserInfo } = useAppStore();
   const {
     data: ownerProjectsData,
     isLoading: getOwnerProjectsLoading,
     refetch: getProjectDataRefetch
   } = useGetOwnerProjectsQuery({});
-  const {
-    data: apiTokensData,
-    isLoading: apiTokensLoading,
-    refetch: apiTokensRefetch
-  } = useGetApiTokensQuery({ user_id: currentUserInfo?.ID ?? '' });
   const {
     data: projectsJoinedData,
     isLoading: projectsJoinedLoading,
@@ -62,11 +53,6 @@ export default function AccountSettingsOverviewProjectsController({
         useGetOwnerProjectsQuery={getOwnerProjectsLoading}
         getProjectDataRefetch={getProjectDataRefetch}
       />
-      <ApiTokensView
-        apiTokensData={apiTokensData}
-        useGetApiTokensQuery={apiTokensLoading}
-        apiTokensRefetch={apiTokensRefetch}
-      />
       <ProjectsJoinedView
         joinedProjects={projectsJoinedData}
         useGetUserWithProjectQueryLoading={projectsJoinedLoading}

diff --git a/chaoscenter/web/src/controllers/CreateNewToken/CreateNewToken.tsx b/chaoscenter/web/src/controllers/CreateNewToken/CreateNewToken.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import type { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query';
 import { useToaster } from '@harnessio/uicore';
-import { GetApiTokensOkResponse, useCreateApiTokenMutation } from '@api/auth';
+import { ErrorModel, GetApiTokensResponse, useCreateApiTokenMutation } from '@api/auth';
 import { useStrings } from '@strings';
 import CreateNewTokenView from '@views/CreateNewToken';
 
 interface CreateNewTokenControllerProps {
   apiTokensRefetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
-  ) => Promise<QueryObserverResult<GetApiTokensOkResponse, unknown>>;
+  ) => Promise<QueryObserverResult<GetApiTokensResponse, ErrorModel>>;
   handleClose: () => void;
 }
 

diff --git a/chaoscenter/web/src/controllers/DeleteApiToken/DeleteApiToken.tsx b/chaoscenter/web/src/controllers/DeleteApiToken/DeleteApiToken.tsx
@@ -1,13 +1,13 @@
 import type { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query';
 import React from 'react';
-import { GetApiTokensOkResponse, useRemoveApiTokenMutation } from '@api/auth';
+import { ErrorModel, GetApiTokensResponse, useRemoveApiTokenMutation } from '@api/auth';
 import DeleteApiTokenView from '@views/DeleteApiToken';
 
 interface DeleteApiTokenControllerProps {
   token: string | undefined;
   apiTokensRefetch: <TPageData>(
     options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined
-  ) => Promise<QueryObserverResult<GetApiTokensOkResponse, unknown>>;
+  ) => Promise<QueryObserverResult<GetApiTokensResponse, ErrorModel>>;
   handleClose: () => void;
 }
 

diff --git a/chaoscenter/web/src/controllers/InviteNewMembers/types.ts b/chaoscenter/web/src/controllers/InviteNewMembers/types.ts
@@ -1,6 +1,6 @@
 export interface InviteUserDetails {
   username: string;
-  id: string;
+  userID: string;
   email: string;
   name: string;
 }
diff --git a/chaoscenter/web/src/controllers/ProjectSelector/ProjectSelector.tsx b/chaoscenter/web/src/controllers/ProjectSelector/ProjectSelector.tsx
@@ -2,16 +2,23 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import ProjectSelectorView from '@views/ProjectSelector';
 import { useGetProjectQuery } from '@api/auth';
+import { useAppStore } from '@context';
 
 export default function ProjectSelectorController(): React.ReactElement {
   const { projectID } = useParams<{ projectID: string }>();
+  const { updateAppStore } = useAppStore();
 
   const { data: projectData } = useGetProjectQuery(
     {
       project_id: projectID
     },
     {
-      enabled: !!projectID
+      enabled: !!projectID,
+      onSuccess: data => {
+        updateAppStore({
+          projectName: data.data?.name
+        });
+      }
     }
   );
 

diff --git a/chaoscenter/web/src/hooks/index.ts b/chaoscenter/web/src/hooks/index.ts
@@ -7,3 +7,5 @@ export * from './useRouteDefinitionsMatch';
 export * from './useRouteWithBaseUrl';
 export * from './useLogout';
 export * from './useTrackedRef';
+export * from './useDocumentTitle';
+export * from './useDeepCompareEffect';
diff --git a/chaoscenter/web/src/hooks/useDeepCompareEffect.ts b/chaoscenter/web/src/hooks/useDeepCompareEffect.ts
@@ -0,0 +1,42 @@
+import React from 'react';
+import { isEqualWith } from 'lodash-es';
+
+/**
+ * Custom version of isEqual to handle function comparison
+ */
+function isEqual(a: unknown, b: unknown): boolean {
+  return isEqualWith(a, b, (x: unknown, y: unknown): boolean | undefined => {
+    // Deal with the function comparison case
+    if (typeof x === 'function' && typeof y === 'function') {
+      return x.toString() === y.toString();
+    }
+
+    // Fallback on the method
+    return undefined;
+  });
+}
+
+function useDeepCompareMemoize(value: React.DependencyList): React.DependencyList | undefined {
+  const ref = React.useRef<React.DependencyList>();
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
+/**
+ * Accepts a function that contains imperative, possibly effectful code.
+ *
+ * This is the deepCompare version of the `React.useEffect` hooks (that is shallowed compare)
+ *
+ * @param effect Imperative function that can return a cleanup function
+ * @param deps If present, effect will only activate if the values in the list change.
+ *
+ * @see https://gist.github.com/kentcdodds/fb8540a05c43faf636dd68647747b074#gistcomment-2830503
+ */
+export function useDeepCompareEffect(effect: React.EffectCallback, deps: React.DependencyList): void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(effect, useDeepCompareMemoize(deps));
+}
diff --git a/chaoscenter/web/src/hooks/useDocumentTitle.ts b/chaoscenter/web/src/hooks/useDocumentTitle.ts
@@ -0,0 +1,59 @@
+import { useParams } from 'react-router-dom';
+import { useStrings } from '@strings';
+import { useAppStore } from '@context';
+import { useDeepCompareEffect } from './useDeepCompareEffect';
+
+export type Title = string | string[];
+
+export interface UseDocumentTitleReturn {
+  updateTitle: (newTitle: Title) => void;
+}
+
+export function useDocumentTitle(title: Title): UseDocumentTitleReturn {
+  const { getString } = useStrings();
+  const { projectID: projectIdFromParams, accountID } = useParams<{ projectID: string; accountID: string }>();
+  const projectIdFromLocalStorage = localStorage.getItem('projectID');
+  const { projectName, currentUserInfo } = useAppStore();
+
+  const getStringFromTitle = (str: Title): string => (Array.isArray(str) ? str.filter(s => s).join(' | ') : str);
+
+  const updateTitle = (newTitle: Title): void => {
+    const titleArray = [getStringFromTitle(newTitle), getString('litmusChaos')];
+
+    if (accountID && projectIdFromParams) {
+      // If you're in project scoped routes, add project name to title from appStore
+      let projectTitle = '';
+      if (projectIdFromParams === projectIdFromLocalStorage) {
+        projectTitle = projectName || projectIdFromParams;
+      } else {
+        projectTitle = projectIdFromParams;
+      }
+
+      titleArray.splice(1, 0, projectTitle);
+    } else if (accountID && !projectIdFromParams) {
+      // If you're in account scoped routes, add account ID to title
+      let accountTitle = '';
+      if (accountID === currentUserInfo?.ID) {
+        accountTitle = currentUserInfo?.username || accountID;
+      } else {
+        accountTitle = accountID;
+      }
+      titleArray.splice(1, 0, accountTitle);
+    }
+
+    document.title = titleArray.filter(s => s).join(' | ');
+  };
+
+  useDeepCompareEffect(() => {
+    updateTitle(title);
+
+    return () => {
+      // reset title on unmount
+      document.title = getString('litmusChaos');
+    };
+  }, [title]);
+
+  return {
+    updateTitle
+  };
+}
diff --git a/chaoscenter/web/src/routes/RouteDefinitions.ts b/chaoscenter/web/src/routes/RouteDefinitions.ts
@@ -58,12 +58,11 @@ export const paths: UseRouteDefinitionsProps = {
   toKubernetesChaosInfrastructures: ({ environmentID }) => `/environments/${environmentID}/kubernetes`,
   toKubernetesChaosInfrastructureDetails: ({ chaosInfrastructureID, environmentID }) =>
     `/environments/${environmentID}/kubernetes/${chaosInfrastructureID}`,
-  // chaos image registry routes
-  toImageRegistry: () => `/image-registry`,
-  toGitops: () => `/gitops`,
   // Account Scoped Routes
   toAccountSettingsOverview: () => '/settings/overview',
   // Project Setup Routes
   toProjectSetup: () => '/setup',
-  toProjectMembers: () => '/setup/members'
+  toProjectMembers: () => '/setup/members',
+  toImageRegistry: () => `/setup/image-registry`,
+  toGitops: () => `/setup/gitops`
 };