implement useStackEnvGroups on expanded job chart

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import yaml from "js-yaml";
 import backArrow from "assets/back_arrow.png";
@@ -31,9 +25,7 @@ import DeploymentType from "./DeploymentType";
 import IncidentsTab from "./incidents/IncidentsTab";
 import BuildSettingsTab from "./BuildSettingsTab";
 import { DisabledNamespacesForIncidents } from "./incidents/DisabledNamespaces";
-import { FullStackRevision, Stack } from "../stacks/types";
-import { PopulatedEnvGroup } from "components/porter-form/types";
-import { usePrevious } from "shared/hooks/usePrevious";
+import { useStackEnvGroups } from "./useStackEnvGroups";
 
 type Props = {
   namespace: string;
@@ -54,94 +46,6 @@ const getReadableDate = (s: string) => {
   return `${time} on ${date}`;
 };
 
-const useStackEnvGroups = (chart: ChartType) => {
-  const { currentProject, currentCluster, setCurrentError } = useContext(
-    Context
-  );
-  const [stackEnvGroups, setStackEnvGroups] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const stackRevisionCache = useRef<{ [id: number]: FullStackRevision }>({});
-
-  const getEnvGroups = async (stackRevision: FullStackRevision) => {
-    const envGroups = stackRevision.env_groups;
-
-    const envGroupsWithValues = envGroups.map((envGroup) => {
-      return api
-        .getEnvGroup<PopulatedEnvGroup>(
-          "<token>",
-          {},
-          {
-            id: currentProject.id,
-            namespace: chart.namespace,
-            cluster_id: currentCluster.id,
-            name: envGroup.name,
-            version: envGroup.env_group_version,
-          }
-        )
-        .then((res) => res.data);
-    });
-
-    return Promise.all(envGroupsWithValues);
-  };
-
-  const getStackRevision = (
-    stack_id: string,
-    namespace: string,
-    revision_id: number
-  ) => {
-    if (stackRevisionCache.current[revision_id]) {
-      return Promise.resolve(stackRevisionCache.current[revision_id]);
-    }
-
-    return api
-      .getStackRevision<FullStackRevision>(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-          namespace,
-          revision_id,
-          stack_id,
-        }
-      )
-      .then((res) => {
-        const newRevision = res.data;
-        stackRevisionCache.current = {
-          ...stackRevisionCache.current,
-          [newRevision.id]: newRevision,
-        };
-        return newRevision;
-      });
-  };
-
-  useEffect(() => {
-    const stack_id = chart.stack_id;
-    if (!stack_id) {
-      return;
-    }
-
-    setLoading(true);
-
-    getStackRevision(stack_id, chart.namespace, chart.version)
-      .then((stackRevision) => getEnvGroups(stackRevision))
-      .then((populatedEnvGroups) => {
-        setStackEnvGroups(populatedEnvGroups);
-
-        setLoading(false);
-      })
-      .catch((error) => {
-        setCurrentError(error);
-      });
-  }, [chart]);
-
-  return {
-    isStack: chart.stack_id?.length ? true : false,
-    stackEnvGroups,
-    isLoadingStackEnvGroups: loading,
-  };
-};
-
 const ExpandedChart: React.FC<Props> = (props) => {
   const [currentChart, setCurrentChart] = useState<ChartType>(
     props.currentChart
@@ -934,9 +838,10 @@ const ExpandedChart: React.FC<Props> = (props) => {
                         saveValuesStatus={saveValuesStatus}
                         injectedProps={{
                           "key-value-array": {
-                            availableSyncEnvGroups: isStack
-                              ? stackEnvGroups
-                              : undefined,
+                            availableSyncEnvGroups:
+                              isStack && !isPreview
+                                ? stackEnvGroups
+                                : undefined,
                           },
                         }}
                       />

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -28,6 +28,7 @@ import CommandLineIcon from "assets/command-line-icon";
 import CronParser from "cron-parser";
 import CronPrettifier from "cronstrue";
 import BuildSettingsTab from "./BuildSettingsTab";
+import { useStackEnvGroups } from "./useStackEnvGroups";
 
 const readableDate = (s: string) => {
   let ts = new Date(s);
@@ -69,6 +70,12 @@ export const ExpandedJobChartFC: React.FC<{
     setSelectedJob,
   } = useJobs(chart);
 
+  const {
+    isStack,
+    stackEnvGroups,
+    isLoadingStackEnvGroups,
+  } = useStackEnvGroups(chart);
+
   const [devOpsMode, setDevOpsMode] = useState(
     () => localStorage.getItem("devOpsMode") === "true"
   );
@@ -283,7 +290,7 @@ export const ExpandedJobChartFC: React.FC<{
 
   const formData = useMemo(() => cloneDeep(chart?.form || {}), [chart]);
 
-  if (status === "loading") {
+  if (status === "loading" || isLoadingStackEnvGroups) {
     return <Loading />;
   }
 
@@ -378,6 +385,12 @@ export const ExpandedJobChartFC: React.FC<{
                   <i className="material-icons">offline_bolt</i> DevOps Mode
                 </TabButton>
               }
+              injectedProps={{
+                "key-value-array": {
+                  availableSyncEnvGroups:
+                    isStack && !disableForm ? stackEnvGroups : undefined,
+                },
+              }}
             />
           )}
         </BodyWrapper>

dashboard/src/main/home/cluster-dashboard/expanded-chart/useStackEnvGroups.ts

@@ -0,0 +1,74 @@
+import { PopulatedEnvGroup } from "components/porter-form/types";
+import { useContext, useEffect, useState } from "react";
+import api from "shared/api";
+import { Context } from "shared/Context";
+import { ChartType } from "shared/types";
+import { Stack } from "../stacks/types";
+
+export const useStackEnvGroups = (chart: ChartType) => {
+  const { currentProject, currentCluster, setCurrentError } = useContext(
+    Context
+  );
+  const [stackEnvGroups, setStackEnvGroups] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const getEnvGroups = async (stack: Stack) => {
+    const envGroups = stack.latest_revision.env_groups;
+
+    const envGroupsWithValues = envGroups.map((envGroup) => {
+      return api
+        .getEnvGroup<PopulatedEnvGroup>(
+          "<token>",
+          {},
+          {
+            id: currentProject.id,
+            namespace: chart.namespace,
+            cluster_id: currentCluster.id,
+            name: envGroup.name,
+            version: envGroup.env_group_version,
+          }
+        )
+        .then((res) => res.data);
+    });
+
+    return Promise.all(envGroupsWithValues);
+  };
+
+  const getStack = (stack_id: string) =>
+    api
+      .getStack<Stack>(
+        "token",
+        {},
+        {
+          cluster_id: currentCluster.id,
+          project_id: currentProject.id,
+          stack_id,
+          namespace: chart.namespace,
+        }
+      )
+      .then((res) => res.data);
+
+  useEffect(() => {
+    const stack_id = chart.stack_id;
+    if (!stack_id) {
+      return;
+    }
+    setLoading(true);
+    getStack(stack_id)
+      .then((stack) => getEnvGroups(stack))
+      .then((populatedEnvGroups) => {
+        setStackEnvGroups(populatedEnvGroups);
+
+        setLoading(false);
+      })
+      .catch((error) => {
+        setCurrentError(error);
+      });
+  }, [chart.stack_id]);
+
+  return {
+    isStack: chart.stack_id?.length ? true : false,
+    stackEnvGroups,
+    isLoadingStackEnvGroups: loading,
+  };
+};