fix(graph): fix search params reload when back to graph

nrwl · Jun 17, 2024 · 2cceaf6 · 2cceaf6
1 parent e5d7805
commit 2cceaf6
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 83 deletions.
diff --git a/graph/client/src/app/feature-projects/projects-sidebar.tsx b/graph/client/src/app/feature-projects/projects-sidebar.tsx
@@ -296,23 +296,22 @@ export function ProjectsSidebar(): JSX.Element {
   }, [searchParams]);
 
   useIntervalWhen(
-    () => {
-      fetchProjectGraph(
+    async () => {
+      const response: ProjectGraphClientResponse = await fetchProjectGraph(
         projectGraphDataService,
         params,
         environmentConfig.appConfig
-      ).then((response: ProjectGraphClientResponse) => {
-        if (response.hash === lastHash) {
-          return;
-        }
-        projectGraphService.send({
-          type: 'updateGraph',
-          projects: response.projects,
-          dependencies: response.dependencies,
-          fileMap: response.fileMap,
-        });
-        setLastHash(response.hash);
+      );
+      if (response.hash === lastHash) {
+        return;
+      }
+      projectGraphService.send({
+        type: 'updateGraph',
+        projects: response.projects,
+        dependencies: response.dependencies,
+        fileMap: response.fileMap,
       });
+      setLastHash(response.hash);
     },
     5000,
     environmentConfig.watch

diff --git a/graph/client/src/app/shell.tsx b/graph/client/src/app/shell.tsx
@@ -71,15 +71,15 @@ export function Shell(): JSX.Element {
   useLayoutEffect(() => {
     setErrors(routerErrors);
   }, [routerErrors]);
+
   useIntervalWhen(
-    () => {
-      fetchProjectGraph(
+    async () => {
+      const response: ProjectGraphClientResponse = await fetchProjectGraph(
         projectGraphDataService,
         params,
         environmentConfig.appConfig
-      ).then((response: ProjectGraphClientResponse) => {
-        setErrors(response.errors);
-      });
+      );
+      setErrors(response.errors);
     },
     1000,
     environmentConfig.watch

diff --git a/graph/client/src/app/ui-components/error-boundary.tsx b/graph/client/src/app/ui-components/error-boundary.tsx
@@ -25,18 +25,18 @@ export function ErrorBoundary() {
 
   useIntervalWhen(
     async () => {
-      fetchProjectGraph(projectGraphDataService, params, appConfig).then(
-        (data) => {
-          if (
-            isRouteErrorResponse(error) &&
-            error.data.id === 'project-not-found' &&
-            data.projects.find((p) => p.name === error.data.projectName)
-          ) {
-            window.location.reload();
-          }
-          return;
-        }
+      const data = await fetchProjectGraph(
+        projectGraphDataService,
+        params,
+        appConfig
       );
+      if (
+        isRouteErrorResponse(error) &&
+        error.data.id === 'project-not-found' &&
+        data.projects.find((p) => p.name === error.data.projectName)
+      ) {
+        window.location.reload();
+      }
     },
     1000,
     watch

diff --git a/graph/project-details/src/lib/project-details-page.tsx b/graph/project-details/src/lib/project-details-page.tsx
@@ -37,17 +37,17 @@ export function ProjectDetailsPage() {
 
   useIntervalWhen(
     async () => {
-      fetchProjectGraph(projectGraphDataService, params, appConfig).then(
-        (data) => {
-          if (data?.hash !== hash) {
-            window.location.reload();
-          }
-          return;
-        }
+      const data = await fetchProjectGraph(
+        projectGraphDataService,
+        params,
+        appConfig
       );
+      if (data?.hash !== hash) {
+        window.location.reload();
+      }
     },
     1000,
-    watch
+    true
   );
 
   return (

diff --git a/graph/project-details/src/lib/project-details-wrapper.tsx b/graph/project-details/src/lib/project-details-wrapper.tsx
@@ -50,7 +50,8 @@ export function ProjectDetailsWrapper({
         navigate(
           routeConstructor(
             `/projects/${encodeURIComponent(data.projectName)}`,
-            true
+            true,
+            ['expanded'] // omit expanded targets from search params
           )
         );
       }
@@ -75,7 +76,8 @@ export function ProjectDetailsWrapper({
               pathname: `/tasks/${encodeURIComponent(data.targetName)}`,
               search: `?projects=${encodeURIComponent(data.projectName)}`,
             },
-            true
+            true,
+            ['expanded'] // omit expanded targets from search params
           )
         );
       }
@@ -95,9 +97,9 @@ export function ProjectDetailsWrapper({
 
   const updateSearchParams = (
     params: URLSearchParams,
-    targetNames: string[]
+    targetNames?: string[]
   ) => {
-    if (targetNames.length === 0) {
+    if (!targetNames || targetNames.length === 0) {
       params.delete('expanded');
     } else {
       params.set('expanded', targetNames.join(','));
@@ -118,21 +120,14 @@ export function ProjectDetailsWrapper({
       if (collapseAllTargets) {
         collapseAllTargets();
       }
-      setSearchParams(
-        (currentSearchParams) => {
-          currentSearchParams.delete('expanded');
-          return currentSearchParams;
-        },
-        { replace: true, preventScrollReset: true }
-      );
     };
   }, []); // only run on mount
 
   useEffect(() => {
     const expandedTargetsParams =
       searchParams.get('expanded')?.split(',') || [];
 
-    if (expandedTargetsParams.join(',') === expandedTargets.join(',')) {
+    if (expandedTargetsParams.join(',') === expandedTargets?.join(',')) {
       return;
     }
 

diff --git a/graph/shared/src/lib/use-interval-when.ts b/graph/shared/src/lib/use-interval-when.ts
@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
 
 export const useIntervalWhen = (
-  callback: () => void,
+  callback: () => Promise<void>,
   delay: number,
   condition: boolean
 ) => {
-  const savedCallback = useRef(() => {});
+  const savedCallback = useRef(() => Promise.resolve());
 
   useEffect(() => {
     if (condition) {
@@ -14,15 +14,24 @@ export const useIntervalWhen = (
   }, [callback, condition]);
 
   useEffect(() => {
-    if (condition) {
-      const tick = () => {
-        savedCallback.current();
-      };
+    if (!condition) {
+      return;
+    }
+    let timeoutId: NodeJS.Timeout;
 
+    async function callTickAfterDelay() {
+      await savedCallback.current();
       if (delay !== null) {
-        let id = setInterval(tick, delay);
-        return () => clearInterval(id);
+        timeoutId = setTimeout(callTickAfterDelay, delay);
       }
     }
+
+    callTickAfterDelay();
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
   }, [delay, condition]);
 };
diff --git a/graph/shared/src/lib/use-route-constructor.ts b/graph/shared/src/lib/use-route-constructor.ts
@@ -3,13 +3,23 @@ import { getEnvironmentConfig } from './use-environment-config';
 
 export const useRouteConstructor = (): ((
   to: To,
-  retainSearchParams: boolean
+  retainSearchParams: boolean,
+  searchParamsKeysToOmit?: string[]
 ) => To) => {
   const { environment } = getEnvironmentConfig();
   const { selectedWorkspaceId } = useParams();
   const [searchParams] = useSearchParams();
 
-  return (to: To, retainSearchParams: true) => {
+  return (
+    to: To,
+    retainSearchParams: boolean = true,
+    searchParamsKeysToOmit: string[] = []
+  ) => {
+    if (searchParamsKeysToOmit?.length) {
+      searchParamsKeysToOmit.forEach((key) => {
+        searchParams.delete(key);
+      });
+    }
     let pathname = '';
 
     if (typeof to === 'object') {

diff --git a/graph/ui-graph/src/lib/tooltip-service.ts b/graph/ui-graph/src/lib/tooltip-service.ts
@@ -37,8 +37,8 @@ export class GraphTooltipService {
           if (graph.getTaskInputs) {
             graph.getTaskInputs(event.data.id).then((inputs) => {
               if (
-                this.currentTooltip.type === 'taskNode' &&
-                this.currentTooltip.props.id === event.data.id
+                this.currentTooltip?.type === 'taskNode' &&
+                this.currentTooltip?.props.id === event.data.id
               ) {
                 this.openTaskNodeTooltip(event.ref, {
                   ...event.data,

diff --git a/...tails/src/lib/target-configuration-details-header/target-configuration-details-header.tsx b/...tails/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
@@ -129,14 +129,15 @@ export const TargetConfigurationDetailsHeader = ({
               // TODO: fix tooltip overflow in collapsed state
               data-tooltip={isCollasped ? false : 'View in Task Graph'}
               data-tooltip-align-right
+              onClick={(e) => {
+                if (isCollasped) {
+                  return;
+                }
+                e.stopPropagation();
+                onViewInTaskGraph({ projectName, targetName });
+              }}
             >
-              <EyeIcon
-                className={`h-5 w-5 !cursor-pointer`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onViewInTaskGraph({ projectName, targetName });
-                }}
-              />
+              <EyeIcon className={`h-5 w-5 !cursor-pointer`} />
             </button>
           )}
 

diff --git a/package.json b/package.json
@@ -249,7 +249,7 @@
     "react-markdown": "^8.0.7",
     "react-redux": "8.0.5",
     "react-refresh": "^0.10.0",
-    "react-router-dom": "^6.21.2",
+    "react-router-dom": "^6.23.1",
     "react-textarea-autosize": "^8.5.3",
     "regenerator-runtime": "0.13.7",
     "resolve.exports": "1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml