Implemented creation flow for environment groups on stacks

dashboard/src/components/porter-form/PorterForm.tsx

@@ -70,7 +70,7 @@ const PorterForm: React.FC<Props> = (props) => {
     const bundledProps = {
       ...field,
       isReadOnly,
-      injectedValues: injected ?? {},
+      injectedProps: injected ?? {},
     };
 
     switch (field.type) {

dashboard/src/components/porter-form/field-components/KeyValueArray.tsx

@@ -202,6 +202,7 @@ const KeyValueArray: React.FC<Props> = (props) => {
             existingValues={getProcessedValues(state.values)}
             enableSyncedEnvGroups={enableSyncedEnvGroups}
             syncedEnvGroups={state.synced_env_groups}
+            availableEnvGroups={props.injectedProps?.availableSyncEnvGroups}
             namespace={variables.namespace}
             clusterId={variables.clusterId}
             closeModal={() =>

dashboard/src/main/home/cluster-dashboard/stacks/launch/NewApp.tsx

@@ -85,8 +85,19 @@ const NewApp = () => {
     return <>Unexpected error</>;
   }
 
-  const handleSubmit = async (rawValues: any) => {
+  const handleSubmit = async ({
+    values: rawValues,
+    metadata,
+  }: {
+    values: any;
+    metadata: any;
+  }) => {
     setSaveButtonStatus("loading");
+    // console.log(metadata);
+    const syncedEnvGroups = metadata["container.env"]?.added?.map(
+      ({ name }: { name: string }) => name
+    );
+    // return;
 
     // Convert dotted keys to nested objects
     let values: any = {};
@@ -171,13 +182,16 @@ const NewApp = () => {
       return;
     }
 
-    addAppResource({
-      name: appName,
-      source_config_name: newStack.source_configs[0]?.name || "",
-      template_name: params.template_name,
-      template_version: params.version,
-      values,
-    });
+    addAppResource(
+      {
+        name: appName,
+        source_config_name: newStack.source_configs[0]?.name || "",
+        template_name: params.template_name,
+        template_version: params.version,
+        values,
+      },
+      [...syncedEnvGroups]
+    );
 
     setSaveButtonStatus("successful");
     setTimeout(() => {
@@ -225,9 +239,10 @@ const NewApp = () => {
           valuesToOverride={{ namespace }}
           injectedProps={{
             "key-value-array": {
-              availableSyncEnvGroups: [],
+              availableSyncEnvGroups: newStack.env_groups as any,
             },
           }}
+          includeMetadata
         />
       </div>
     </StyledLaunchFlow>

dashboard/src/main/home/cluster-dashboard/stacks/launch/NewEnvGroup.tsx

@@ -5,20 +5,43 @@ import React, { useContext, useState } from "react";
 import { isAlphanumeric } from "shared/common";
 import { useRouting } from "shared/routing";
 import styled from "styled-components";
-import EnvGroupArray from "../../env-groups/EnvGroupArray";
+import EnvGroupArray, { KeyValueType } from "../../env-groups/EnvGroupArray";
 import { SubmitButton } from "./components/styles";
 import { StacksLaunchContext } from "./Store";
 
+const envArrayToObject = (variables: KeyValueType[]) => {
+  return variables.reduce<{ [key: string]: string }>((acc, curr) => {
+    acc[curr.key] = curr.value;
+    return acc;
+  }, {});
+};
+
 const NewEnvGroup = () => {
   const { addEnvGroup } = useContext(StacksLaunchContext);
   const [name, setName] = useState("");
-  const [envVariables, setEnvVariables] = useState<any[]>([]);
+  const [envVariables, setEnvVariables] = useState<KeyValueType[]>([]);
 
   const { pushFiltered } = useRouting();
 
   const isDisabled = () =>
     !isAlphanumeric(name) || name === "" || !envVariables.length;
 
+  const handleOnSubmit = () => {
+    const variables = envVariables.filter((variable) => !variable.locked);
+    const secret_variables = envVariables.filter((variable) => variable.locked);
+
+    addEnvGroup({
+      name,
+      variables: envArrayToObject(variables),
+      secret_variables: envArrayToObject(secret_variables),
+      linked_applications: [],
+    });
+    setName("");
+    setEnvVariables([]);
+    pushFiltered("/stacks/launch/overview", []);
+    return;
+  };
+
   return (
     <>
       <Heading isAtTop={true}>Name</Heading>
@@ -53,13 +76,7 @@ const NewEnvGroup = () => {
       />
 
       <SubmitButton
-        onClick={() => {
-          addEnvGroup({
-            name,
-            variables: [...envVariables],
-          });
-          pushFiltered("/stacks/launch/overview", []);
-        }}
+        onClick={handleOnSubmit}
         makeFlush
         clearPosition
         text="Save env group"

dashboard/src/main/home/cluster-dashboard/stacks/launch/Overview.tsx

@@ -19,6 +19,7 @@ import Helper from "components/form-components/Helper";
 import Heading from "components/form-components/Heading";
 import TitleSection from "components/TitleSection";
 import DynamicLink from "components/DynamicLink";
+import EnvGroupCard from "./components/EnvGroupCard";
 
 const Overview = () => {
   const {
@@ -163,8 +164,8 @@ const Overview = () => {
 
       <Heading>Env groups</Heading>
       <CardGrid>
-        {newStack.envGroups.map((envGroup) => (
-          <>{envGroup.name}</>
+        {newStack.env_groups.map((envGroup) => (
+          <EnvGroupCard key={envGroup.name} envGroup={envGroup} />
         ))}
 
         <AddResourceButtonStyles.Wrapper>

dashboard/src/main/home/cluster-dashboard/stacks/launch/Store.tsx

@@ -15,11 +15,14 @@ export type StacksLaunchContextType = {
     sourceConfig: Omit<CreateStackBody["source_configs"][0], "name">
   ) => void;
 
-  addAppResource: (appResource: CreateStackBody["app_resources"][0]) => void;
+  addAppResource: (
+    appResource: CreateStackBody["app_resources"][0],
+    syncedEnvGroups: string[]
+  ) => void;
 
   removeAppResource: (appResource: CreateStackBody["app_resources"][0]) => void;
 
-  addEnvGroup: (envGroup: CreateStackBody["envGroups"][0]) => void;
+  addEnvGroup: (envGroup: CreateStackBody["env_groups"][0]) => void;
 
   submit: () => Promise<void>;
 };
@@ -29,7 +32,7 @@ const defaultValues: StacksLaunchContextType = {
     name: "",
     app_resources: [],
     source_configs: [],
-    envGroups: [],
+    env_groups: [],
   },
 
   namespace: "",
@@ -97,12 +100,40 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
   };
 
   const addAppResource: StacksLaunchContextType["addAppResource"] = (
-    appResource
+    appResource,
+    syncedEnvGroups
   ) => {
-    setNewStack((prev) => ({
-      ...prev,
-      app_resources: [...prev.app_resources, appResource],
-    }));
+    setNewStack((prev) => {
+      const envGroups = syncedEnvGroups
+        .map((envGroupName) => {
+          return prev.env_groups.find(
+            (envGroup) => envGroup.name === envGroupName
+          );
+        })
+        .map((envGroup) => {
+          return {
+            ...envGroup,
+            linked_applications: [
+              ...envGroup.linked_applications,
+              appResource.name,
+            ],
+          };
+        });
+
+      // Replace prev.envGroups with envGroups based on name
+      const newEnvGroups = prev.env_groups.map((envGroup) => {
+        const newEnvGroup = envGroups.find(
+          (envGroup2) => envGroup2.name === envGroup.name
+        );
+        return newEnvGroup ? newEnvGroup : envGroup;
+      });
+
+      return {
+        ...prev,
+        app_resources: [...prev.app_resources, appResource],
+        env_groups: newEnvGroups,
+      };
+    });
   };
 
   const removeAppResource: StacksLaunchContextType["removeAppResource"] = (
@@ -119,7 +150,7 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
   const addEnvGroup: StacksLaunchContextType["addEnvGroup"] = (envGroup) => {
     setNewStack((prev) => ({
       ...prev,
-      envGroups: [...prev.envGroups, envGroup],
+      env_groups: [...prev.env_groups, envGroup],
     }));
   };
 

dashboard/src/main/home/cluster-dashboard/stacks/types.ts

@@ -21,9 +21,15 @@ export type CreateStackBody = {
     };
   }[];
 
-  envGroups: {
+  env_groups: {
     name: string;
-    variables: unknown[];
+    variables: {
+      [key: string]: string;
+    };
+    secret_variables: {
+      [key: string]: string;
+    };
+    linked_applications: string[];
   }[];
 };