From d96e3505f643d948efff9fcd6f6f57cb824a6f1e Mon Sep 17 00:00:00 2001
From: Orlando Valverde <4467518+septum@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:11:45 -0600
Subject: [PATCH] frontend: Fix issues with dependencies when updating workflow
 layout context (#3183)

---
 frontend/workflows/audit/src/logs/index.tsx            |  6 +++---
 .../projectCatalog/src/details/components/layout.tsx   | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/workflows/audit/src/logs/index.tsx b/frontend/workflows/audit/src/logs/index.tsx
index cd7ae42978..3235da1d32 100644
--- a/frontend/workflows/audit/src/logs/index.tsx
+++ b/frontend/workflows/audit/src/logs/index.tsx
@@ -70,13 +70,13 @@ const AuditLog: React.FC<AuditLogProps> = ({ heading, detailsPathPrefix, downloa
 
   const theme = useTheme();
   const shrink = useMediaQuery(theme.breakpoints.down("md"));
-  const workflowLayoutContent = useWorkflowLayoutContext();
+  const workflowLayoutContext = useWorkflowLayoutContext();
 
   const genTimeRangeKey = () => `${startTime}-${endTime}-${new Date().toString()}`;
 
   React.useEffect(() => {
     if (theme.clutch.useWorkflowLayout) {
-      workflowLayoutContent.setHeaderContent(
+      workflowLayoutContext.setHeaderContent(
         <Stack
           direction={shrink ? "column" : "row"}
           spacing={1}
@@ -113,7 +113,7 @@ const AuditLog: React.FC<AuditLogProps> = ({ heading, detailsPathPrefix, downloa
         </Stack>
       );
     }
-  }, [isLoading, shrink]);
+  }, [isLoading, shrink, startTime, endTime]);
 
   return (
     <RootContainer spacing={2} direction="column" padding={theme.clutch.layout.gutter}>
diff --git a/frontend/workflows/projectCatalog/src/details/components/layout.tsx b/frontend/workflows/projectCatalog/src/details/components/layout.tsx
index 14fbad11c4..67faf1d083 100644
--- a/frontend/workflows/projectCatalog/src/details/components/layout.tsx
+++ b/frontend/workflows/projectCatalog/src/details/components/layout.tsx
@@ -42,7 +42,7 @@ const CatalogLayout = ({
   );
   const projInfo = React.useMemo(() => ({ projectId, projectInfo }), [projectId, projectInfo]);
   const theme = useTheme();
-  const workflowLayoutContent = useWorkflowLayoutContext();
+  const workflowLayoutContext = useWorkflowLayoutContext();
 
   const redirectNotFound = () => navigate(`/${projectId}/notFound`, { replace: true });
 
@@ -74,13 +74,13 @@ const CatalogLayout = ({
 
   React.useEffect(() => {
     if (theme.clutch.useWorkflowLayout) {
-      workflowLayoutContent.setTitle(
+      workflowLayoutContext.setTitle(
         `${projectInfo?.name ?? projectId}${title ? ` ${title}` : ""}`
       );
 
-      workflowLayoutContent.setSubtitle(description ?? (projectInfo?.data?.description as string));
+      workflowLayoutContext.setSubtitle(description ?? (projectInfo?.data?.description as string));
 
-      workflowLayoutContent.setHeaderContent(
+      workflowLayoutContext.setHeaderContent(
         projectInfo ? (
           <QuickLinksAndSettings
             linkGroups={(projectInfo.linkGroups as QuickLinkGroup[]) || []}
@@ -90,7 +90,7 @@ const CatalogLayout = ({
         ) : null
       );
     }
-  }, [description, projectInfo, title]);
+  }, [projectInfo, projectId, title, description, configLinks, quickLinkSettings]);
 
   return (
     <ProjectDetailsContext.Provider value={projInfo}>