load env variables with revision (#3664)

dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx

@@ -63,11 +63,13 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
   const {
     porterApp,
     latestProto,
+    previewRevision,
     latestRevision,
     projectId,
     clusterId,
     deploymentTarget,
     servicesFromYaml,
+    appEnv,
     setPreviewRevision,
   } = useLatestRevision();
   const { validateApp } = useAppValidation({
@@ -261,8 +263,12 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
   useEffect(() => {
     reset({
       app: clientAppFromProto({
-        proto: latestProto,
+        proto: previewRevision
+          ? PorterApp.fromJsonString(atob(previewRevision.b64_app_proto))
+          : latestProto,
         overrides: servicesFromYaml,
+        variables: appEnv?.variables,
+        secrets: appEnv?.secret_variables,
       }),
       source: latestSource,
       deletions: {
@@ -270,7 +276,13 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
         serviceNames: [],
       },
     });
-  }, [servicesFromYaml, latestProto, latestRevision.revision_number]);
+  }, [
+    servicesFromYaml,
+    latestProto,
+    previewRevision,
+    latestRevision.revision_number,
+    appEnv,
+  ]);
 
   return (
     <FormProvider {...porterAppFormMethods}>

dashboard/src/main/home/app-dashboard/app-view/LatestRevisionContext.tsx

@@ -21,6 +21,10 @@ import {
   DeploymentTarget,
   useDeploymentTarget,
 } from "shared/DeploymentTargetContext";
+import {
+  PopulatedEnvGroup,
+  populatedEnvGroup,
+} from "../validate-apply/app-settings/types";
 
 export const LatestRevisionContext = createContext<{
   porterApp: PorterAppRecord;
@@ -31,6 +35,8 @@ export const LatestRevisionContext = createContext<{
   projectId: number;
   deploymentTarget: DeploymentTarget;
   previewRevision: AppRevision | null;
+  attachedEnvGroups: PopulatedEnvGroup[];
+  appEnv?: PopulatedEnvGroup;
   setPreviewRevision: Dispatch<SetStateAction<AppRevision | null>>;
 } | null>(null);
 
@@ -126,6 +132,51 @@ export const LatestRevisionProvider = ({
     }
   );
 
+  const revisionId = previewRevision?.id ?? latestRevision?.id;
+  const { data: { attachedEnvGroups = [], appEnv } = {} } = useQuery(
+    ["getAttachedEnvGroups", appName, revisionId],
+    async () => {
+      if (
+        !appName ||
+        !revisionId ||
+        !currentCluster?.id ||
+        !currentProject?.id
+      ) {
+        return {
+          attachedEnvGroups: [],
+          appEnv: undefined,
+        };
+      }
+
+      const res = await api.getAttachedEnvGroups(
+        "<token>",
+        {},
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          app_name: appName,
+          revision_id: revisionId,
+        }
+      );
+
+      const { env_groups: attachedEnvGroups, app_env: appEnv } = await z
+        .object({
+          env_groups: z.array(populatedEnvGroup),
+          app_env: populatedEnvGroup,
+        })
+        .parseAsync(res.data);
+
+      return {
+        attachedEnvGroups,
+        appEnv,
+      };
+    },
+    {
+      enabled:
+        !!appName && !!revisionId && !!currentCluster && !!currentProject,
+    }
+  );
+
   const latestSource: SourceOptions | null = useMemo(() => {
     if (!porterApp) {
       return null;
@@ -205,6 +256,8 @@ export const LatestRevisionProvider = ({
         projectId: currentProject.id,
         deploymentTarget: currentDeploymentTarget,
         servicesFromYaml: detectedServices,
+        attachedEnvGroups,
+        appEnv,
         previewRevision,
         setPreviewRevision,
       }}

dashboard/src/main/home/app-dashboard/app-view/tabs/Environment.tsx

@@ -1,7 +1,6 @@
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import React, { useMemo } from "react";
-import EnvVariables from "../../validate-apply/app-settings/EnvVariables";
 import Button from "components/porter/Button";
 import Error from "components/porter/Error";
 import { useFormContext } from "react-hook-form";
@@ -11,7 +10,6 @@ import { useQuery } from "@tanstack/react-query";
 import api from "shared/api";
 import { z } from "zod";
 import { populatedEnvGroup } from "../../validate-apply/app-settings/types";
-import EnvGroups from "../../validate-apply/app-settings/EnvGroups";
 import EnvSettings from "../../validate-apply/app-settings/EnvSettings";
 
 type Props = {
@@ -26,12 +24,11 @@ const Environment: React.FC<Props> = ({ latestSource }) => {
     projectId,
     previewRevision,
     servicesFromYaml,
+    attachedEnvGroups,
   } = useLatestRevision();
   const {
     formState: { isSubmitting, errors },
-    watch,
   } = useFormContext<PorterAppFormData>();
-  const envGroupNames = watch("app.envGroups").map((eg) => eg.name);
 
   const { data: baseEnvGroups = [] } = useQuery(
     ["getAllEnvGroups", projectId, clusterId],
@@ -76,9 +73,9 @@ const Environment: React.FC<Props> = ({ latestSource }) => {
         appName={latestProto.name}
         revision={previewRevision ? previewRevision : latestRevision} // get versions of env groups attached to preview revision if set
         baseEnvGroups={baseEnvGroups}
-        existingEnvGroupNames={envGroupNames}
         latestSource={latestSource}
         servicesFromYaml={servicesFromYaml}
+        attachedEnvGroups={attachedEnvGroups}
       />
       <Spacer y={0.5} />
       <Button

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvGroupModal.tsx

@@ -55,7 +55,7 @@ const EnvGroupModal: React.FC<Props> = ({ append, setOpen, baseEnvGroups }) => {
       <Spacer height="15px" />
       <ColumnContainer>
         <ScrollableContainer>
-          {baseEnvGroups?.length != envGroups?.length ? (
+          {remainingEnvGroupOptions.length ? (
             <>
               <Text color="helper">
                 Select an Env Group to load into your application.

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvGroups.tsx

@@ -16,13 +16,11 @@ import { IterableElement } from "type-fest";
 
 type Props = {
   baseEnvGroups?: PopulatedEnvGroup[];
-  existingEnvGroupNames?: string[];
   attachedEnvGroups?: PopulatedEnvGroup[];
 };
 
 const EnvGroups: React.FC<Props> = ({
   baseEnvGroups = [],
-  existingEnvGroupNames = [],
   attachedEnvGroups = [],
 }) => {
   const [showEnvModal, setShowEnvModal] = useState(false);
@@ -94,6 +92,7 @@ const EnvGroups: React.FC<Props> = ({
     const name = populatedEnvWithFallback[index].envGroup.name;
     remove(index);
 
+    const existingEnvGroupNames = envGroups.map((eg) => eg.name);
     if (existingEnvGroupNames.includes(name)) {
       appendDeletion({ name });
     }

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvSettings.tsx

@@ -1,98 +1,26 @@
-import React, { useContext, useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-import {
-  PorterAppFormData,
-  SourceOptions,
-  clientAppFromProto,
-} from "lib/porter-apps";
-import { z } from "zod";
+import React from "react";
+import { SourceOptions } from "lib/porter-apps";
 
-import { PopulatedEnvGroup, populatedEnvGroup } from "./types";
+import { PopulatedEnvGroup } from "./types";
 import EnvVariables from "./EnvVariables";
 import EnvGroups from "./EnvGroups";
-import { Context } from "shared/Context";
-import { useQuery } from "@tanstack/react-query";
-import api from "shared/api";
 import { AppRevision } from "lib/revisions/types";
-import { PorterApp } from "@porter-dev/api-contracts";
 import { DetectedServices } from "lib/porter-apps/services";
 
 type Props = {
   appName?: string;
   revision?: AppRevision;
   baseEnvGroups?: PopulatedEnvGroup[];
-  existingEnvGroupNames?: string[];
   servicesFromYaml: DetectedServices | null;
   latestSource?: SourceOptions;
+  attachedEnvGroups?: PopulatedEnvGroup[];
 };
 
 const EnvSettings: React.FC<Props> = (props) => {
-  const { currentCluster, currentProject } = useContext(Context);
-  const { reset } = useFormContext<PorterAppFormData>();
-
-  const { appName, revision, latestSource, servicesFromYaml } = props;
-
-  const { data: { attachedEnvGroups = [], appEnv } = {} } = useQuery(
-    ["getAttachedEnvGroups", appName, revision?.id],
-    async () => {
-      if (!appName || !revision || !currentCluster?.id || !currentProject?.id) {
-        return {
-          attachedEnvGroups: [],
-          appEnv: undefined,
-        };
-      }
-
-      const res = await api.getAttachedEnvGroups(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-          app_name: appName,
-          revision_id: revision.id,
-        }
-      );
-
-      const { env_groups: attachedEnvGroups, app_env: appEnv } = await z
-        .object({
-          env_groups: z.array(populatedEnvGroup),
-          app_env: populatedEnvGroup,
-        })
-        .parseAsync(res.data);
-
-      return {
-        attachedEnvGroups,
-        appEnv,
-      };
-    },
-    {
-      enabled: !!appName && !!revision && !!currentCluster && !!currentProject,
-    }
-  );
-
-  useEffect(() => {
-    if (!appEnv || !revision || !latestSource) {
-      return;
-    }
-    reset({
-      app: clientAppFromProto({
-        proto: PorterApp.fromJsonString(atob(revision.b64_app_proto)),
-        overrides: servicesFromYaml,
-        variables: appEnv.variables,
-        secrets: appEnv.secret_variables,
-      }),
-      source: latestSource,
-      deletions: {
-        serviceNames: [],
-        envGroupNames: [],
-      },
-    });
-  }, [appEnv, revision?.id, latestSource]);
-
   return (
     <>
       <EnvVariables />
-      <EnvGroups {...props} attachedEnvGroups={attachedEnvGroups} />
+      <EnvGroups {...props} attachedEnvGroups={props.attachedEnvGroups} />
     </>
   );
 };

dashboard/src/main/home/app-dashboard/validate-apply/revisions-list/RevisionTableContents.tsx

@@ -185,18 +185,6 @@ const RevisionTableContents: React.FC<RevisionTableContentsProps> = ({
                         : isLatestDeployedRevision
                     }
                     onClick={() => {
-                      reset({
-                        app: clientAppFromProto({
-                          proto: revision.app_proto,
-                          overrides: servicesFromYaml,
-                        }),
-                        source: latestSource,
-                        deletions: {
-                          serviceNames: [],
-                          envGroupNames: [],
-                        },
-                      });
-
                       setPreviewRevision(
                         isLatestDeployedRevision ? null : revision
                       );