[POR-1743] Env group revision sync

api/server/handlers/environment_groups/list.go

@@ -39,8 +39,8 @@ type ListEnvironmentGroupsResponse struct {
 type EnvironmentGroupListItem struct {
 	Name               string            `json:"name"`
 	LatestVersion      int               `json:"latest_version"`
-	Variables          map[string]string `json:"variables"`
-	SecretVariables    map[string]string `json:"secret_variables"`
+	Variables          map[string]string `json:"variables,omitempty"`
+	SecretVariables    map[string]string `json:"secret_variables,omitempty"`
 	CreatedAtUTC       time.Time         `json:"created_at"`
 	LinkedApplications []string          `json:"linked_applications,omitempty"`
 }

api/server/handlers/porter_app/get_app_env.go

@@ -124,10 +124,11 @@ func (c *GetAppEnvHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	}
 
 	envFromProtoInp := porter_app.AppEnvironmentFromProtoInput{
-		ProjectID: project.ID,
-		ClusterID: int(cluster.ID),
-		App:       appProto,
-		K8SAgent:  agent,
+		ProjectID:                  project.ID,
+		ClusterID:                  int(cluster.ID),
+		App:                        appProto,
+		K8SAgent:                   agent,
+		DeploymentTargetRepository: c.Repo().DeploymentTarget(),
 	}
 
 	envGroups, err := porter_app.AppEnvironmentFromProto(ctx, envFromProtoInp, porter_app.WithEnvGroupFilter(request.EnvGroups), porter_app.WithSecrets())

api/server/handlers/porter_app/validate.go

@@ -40,6 +40,7 @@ func NewValidatePorterAppHandler(
 type Deletions struct {
 	ServiceNames     []string `json:"service_names"`
 	EnvVariableNames []string `json:"env_variable_names"`
+	EnvGroupNames    []string `json:"env_group_names"`
 }
 
 // ValidatePorterAppRequest is the request object for the /apps/validate endpoint
@@ -128,6 +129,7 @@ func (c *ValidatePorterAppHandler) ServeHTTP(w http.ResponseWriter, r *http.Requ
 		Deletions: &porterv1.Deletions{
 			ServiceNames:     request.Deletions.ServiceNames,
 			EnvVariableNames: request.Deletions.EnvVariableNames,
+			EnvGroupNames:    request.Deletions.EnvGroupNames,
 		},
 	})
 	ccpResp, err := c.Config().ClusterControlPlaneClient.ValidatePorterApp(ctx, validateReq)

dashboard/package.json

@@ -141,6 +141,7 @@
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^4.2.3",
     "ts-loader": "^8.0.4",
+    "type-fest": "^4.3.1",
     "typescript": "^4.1.2",
     "webpack": "^4.44.2",
     "webpack-bundle-analyzer": "^4.4.2",

dashboard/src/lib/hooks/useAppValidation.ts

@@ -117,6 +117,7 @@ export const useAppValidation = ({
           commit_sha,
           deletions: {
             service_names: data.deletions.serviceNames.map((s) => s.name),
+            env_group_names: data.deletions.envGroupNames.map((eg) => eg.name),
             env_variable_names: [],
           },
         },

dashboard/src/lib/porter-apps/index.ts

@@ -62,6 +62,11 @@ export const deletionValidator = z.object({
       name: z.string(),
     })
     .array(),
+  envGroupNames: z
+    .object({
+      name: z.string(),
+    })
+    .array(),
 });
 
 // clientAppValidator is the representation of a Porter app on the client, and is used to validate inputs for app setting fields
@@ -314,7 +319,7 @@ export function clientAppFromProto({
       key,
       value,
       hidden: true,
-      locked: false,
+      locked: true,
       deleted: false,
     })),
   ];

dashboard/src/lib/revisions/types.ts

@@ -20,7 +20,7 @@ export const appRevisionValidator = z.object({
     name: z.string(),
     latest_version: z.number(),
     variables: z.record(z.string(), z.string()).optional(),
-    secrets: z.record(z.string(), z.string()).optional(),
+    secret_variables: z.record(z.string(), z.string()).optional(),
     created_at: z.string(),
   }),
 });

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

@@ -110,11 +110,12 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
         proto: latestProto,
         overrides: servicesFromYaml,
         variables: latestRevision.env.variables,
-        secrets: latestRevision.env.secrets,
+        secrets: latestRevision.env.secret_variables,
       }),
       source: latestSource,
       deletions: {
         serviceNames: [],
+        envGroupNames: [],
       },
     },
   });
@@ -258,10 +259,11 @@ const AppDataContainer: React.FC<AppDataContainerProps> = ({ tabParam }) => {
         proto: latestProto,
         overrides: servicesFromYaml,
         variables: latestRevision.env.variables,
-        secrets: latestRevision.env.secrets,
+        secrets: latestRevision.env.secret_variables,
       }),
       source: latestSource,
       deletions: {
+        envGroupNames: [],
         serviceNames: [],
       },
     });

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

@@ -7,12 +7,46 @@ import Error from "components/porter/Error";
 import { useFormContext } from "react-hook-form";
 import { PorterAppFormData } from "lib/porter-apps";
 import { useLatestRevision } from "../LatestRevisionContext";
+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";
 
 const Environment: React.FC = () => {
-  const { latestRevision } = useLatestRevision();
+  const {
+    latestRevision,
+    latestProto,
+    clusterId,
+    projectId,
+  } = useLatestRevision();
   const {
     formState: { isSubmitting, errors },
+    watch,
   } = useFormContext<PorterAppFormData>();
+  const envGroupNames = watch("app.envGroups").map((eg) => eg.name);
+
+  const { data: baseEnvGroups = [] } = useQuery(
+    ["getAllEnvGroups", projectId, clusterId],
+    async () => {
+      const res = await api.getAllEnvGroups(
+        "<token>",
+        {},
+        {
+          id: projectId,
+          cluster_id: clusterId,
+        }
+      );
+
+      const { environment_groups } = await z
+        .object({
+          environment_groups: z.array(populatedEnvGroup).default([]),
+        })
+        .parseAsync(res.data);
+
+      return environment_groups;
+    }
+  );
 
   const buttonStatus = useMemo(() => {
     if (isSubmitting) {
@@ -32,6 +66,12 @@ const Environment: React.FC = () => {
       <Spacer y={0.5} />
       <Text color="helper">Shared among all services.</Text>
       <EnvVariables />
+      <EnvGroups
+        appName={latestProto.name}
+        revisionId={latestRevision.id}
+        baseEnvGroups={baseEnvGroups}
+        existingEnvGroupNames={envGroupNames}
+      />
       <Spacer y={0.5} />
       <Button
         type="submit"

dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx

@@ -44,6 +44,11 @@ import { useAppValidation } from "lib/hooks/useAppValidation";
 import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 import PorterYamlModal from "./PorterYamlModal";
+import EnvGroups from "../validate-apply/app-settings/EnvGroups";
+import {
+  PopulatedEnvGroup,
+  populatedEnvGroup,
+} from "../validate-apply/app-settings/types";
 
 type CreateAppProps = {} & RouteComponentProps;
 
@@ -103,6 +108,31 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
     }
   );
 
+  const { data: baseEnvGroups = [] } = useQuery(
+    ["getAllEnvGroups", currentProject?.id, currentCluster?.id],
+    async () => {
+      if (!currentProject?.id || !currentCluster?.id) {
+        return [];
+      }
+      const res = await api.getAllEnvGroups<PopulatedEnvGroup[]>(
+        "<token>",
+        {},
+        {
+          id: currentProject.id,
+          cluster_id: currentCluster.id,
+        }
+      );
+
+      const { environment_groups } = await z
+        .object({
+          environment_groups: z.array(populatedEnvGroup).default([]),
+        })
+        .parseAsync(res.data);
+
+      return environment_groups;
+    }
+  );
+
   const porterAppFormMethods = useForm<PorterAppFormData>({
     resolver: zodResolver(porterAppFormValidator),
     reValidateMode: "onSubmit",
@@ -127,6 +157,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
       },
       deletions: {
         serviceNames: [],
+        envGroupNames: [],
       },
     },
   });
@@ -248,11 +279,13 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
           .parseAsync(envGroupResponse.data);
 
         const envGroups = [
-          ...app.envGroups.filter(group => group.name !== addedEnvGroup.env_group_name),
+          ...app.envGroups.filter(
+            (group) => group.name !== addedEnvGroup.env_group_name
+          ),
           {
             name: addedEnvGroup.env_group_name,
-            version: addedEnvGroup.env_group_version
-          }
+            version: addedEnvGroup.env_group_version,
+          },
         ];
         const appWithSeededEnv = new PorterApp({
           ...app,
@@ -552,8 +585,9 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                             }
                           >
                             {detectedServices.count > 0
-                              ? `Detected ${detectedServices.count} service${detectedServices.count > 1 ? "s" : ""
-                              } from porter.yaml.`
+                              ? `Detected ${detectedServices.count} service${
+                                  detectedServices.count > 1 ? "s" : ""
+                                } from porter.yaml.`
                               : `Could not detect any services from porter.yaml. Make sure it exists in the root of your repo.`}
                           </Text>
                         </AppearingDiv>
@@ -572,6 +606,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                       Specify environment variables shared among all services.
                     </Text>
                     <EnvVariables />
+                    <EnvGroups baseEnvGroups={baseEnvGroups} />
                   </>,
                   source.type === "github" && (
                     <>