Implement new env group form for existing stacks.

Implement routing for expanded stack.
Added an onCancel function for the NewEnvGroupForm.
Implemented the onCancel function on places using the NewEnvGroupForm.
Added some error handling for onSubmit to new env group for existing stacks.

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

@@ -0,0 +1,65 @@
+import { AxiosError } from "axios";
+import React, { useContext } from "react";
+import { useParams } from "react-router";
+import api from "shared/api";
+import { Context } from "shared/Context";
+import { useRouting } from "shared/routing";
+import NewEnvGroupForm from "../components/NewEnvGroupForm";
+import { CreateStackBody } from "../types";
+
+const NewEnvGroup = () => {
+  const { currentProject, currentCluster } = useContext(Context);
+  const { stack_id, namespace } = useParams<{
+    stack_id: string;
+    namespace: string;
+  }>();
+  const { pushFiltered } = useRouting();
+
+  const createEnvGroup = async (
+    newEnvGroup: CreateStackBody["env_groups"][0]
+  ) => {
+    try {
+      await api.addStackEnvGroup(
+        "<token>",
+        {
+          env_group: newEnvGroup,
+        },
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          namespace,
+          stack_id,
+        }
+      );
+    } catch (error) {
+      const axiosError: AxiosError = error;
+
+      if (axiosError.code === "404" || axiosError.code === "405") {
+        throw "New env group not implemented";
+      }
+
+      if (axiosError.code === "409") {
+        throw "Name is already in use";
+      }
+
+      if (error?.message) {
+        throw error.message;
+      }
+
+      throw error;
+    }
+  };
+
+  return (
+    <>
+      <NewEnvGroupForm
+        onSubmit={createEnvGroup}
+        onCancel={() => {
+          pushFiltered("../" + stack_id, []);
+        }}
+      />
+    </>
+  );
+};
+
+export default NewEnvGroup;

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/components/EnvGroups.tsx

@@ -7,6 +7,7 @@ import sliders from "assets/sliders.svg";
 import DynamicLink from "components/DynamicLink";
 import Placeholder from "components/Placeholder";
 import Loading from "components/Loading";
+import { useRouteMatch } from "react-router";
 
 type PopulatedEnvGroup = {
   applications: string[];
@@ -22,6 +23,7 @@ const EnvGroups = ({ stack }: { stack: Stack }) => {
   const { currentProject, currentCluster } = useContext(Context);
   const [isLoading, setIsLoading] = useState(true);
   const [envGroups, setEnvGroups] = useState<PopulatedEnvGroup[]>([]);
+  const { url } = useRouteMatch();
 
   const getEnvGroups = async () => {
     const stackEnvGroups = stack.latest_revision.env_groups;
@@ -78,34 +80,37 @@ const EnvGroups = ({ stack }: { stack: Stack }) => {
   }
 
   return (
-    <Card.Grid style={{ marginTop: "0px" }}>
-      {envGroups.map((envGroup) => {
-        return (
-          <Card.Wrapper variant="unclickable">
-            <Card.Title>
-              <Card.SmallerIcon src={sliders}></Card.SmallerIcon>
-              {envGroup.name}
-            </Card.Title>
+    <>
+      <DynamicLink to={`${url}/new-env-group`}>Add new env group</DynamicLink>
+      <Card.Grid style={{ marginTop: "0px" }}>
+        {envGroups.map((envGroup) => {
+          return (
+            <Card.Wrapper variant="unclickable">
+              <Card.Title>
+                <Card.SmallerIcon src={sliders}></Card.SmallerIcon>
+                {envGroup.name}
+              </Card.Title>
 
-            <Card.Actions>
-              <Card.ActionButton
-                as={DynamicLink}
-                to={{
-                  pathname: "/env-groups",
-                  search: `?namespace=${stack.namespace}&selected_env_group=${
-                    envGroup.name
-                  }&redirect_url=${encodeURIComponent(
-                    window.location.pathname
-                  )}`,
-                }}
-              >
-                <i className="material-icons-outlined">launch</i>
-              </Card.ActionButton>
-            </Card.Actions>
-          </Card.Wrapper>
-        );
-      })}
-    </Card.Grid>
+              <Card.Actions>
+                <Card.ActionButton
+                  as={DynamicLink}
+                  to={{
+                    pathname: "/env-groups",
+                    search: `?namespace=${stack.namespace}&selected_env_group=${
+                      envGroup.name
+                    }&redirect_url=${encodeURIComponent(
+                      window.location.pathname
+                    )}`,
+                  }}
+                >
+                  <i className="material-icons-outlined">launch</i>
+                </Card.ActionButton>
+              </Card.Actions>
+            </Card.Wrapper>
+          );
+        })}
+      </Card.Grid>
+    </>
   );
 };
 

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/components/NewEnvGroup.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const NewEnvGroup = () => {
-  return <div>NewEnvGroup</div>;
-};
-
-export default NewEnvGroup;

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/routes.tsx

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { Redirect, Route, Switch, useRouteMatch } from "react-router";
+import { Context } from "shared/Context";
+import ExpandedStack from "./ExpandedStack";
+import NewEnvGroup from "./NewEnvGroup";
+
+const routes = () => {
+  const { path } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route path={`${path}/new-env-group`} exact>
+        <NewEnvGroup />
+      </Route>
+      <Route path={`${path}/`} exact>
+        <ExpandedStack />
+      </Route>
+      <Route path={`*`}>
+        <div>Not found</div>
+      </Route>
+    </Switch>
+  );
+};
+
+export default routes;

dashboard/src/main/home/cluster-dashboard/stacks/components/NewEnvGroupForm.tsx

@@ -25,8 +25,9 @@ const NewEnvGroupForm = (props: {
     variables: ProcessedEnvVariables;
     secret_variables: ProcessedEnvVariables;
   }) => Promise<void>;
+  onCancel: () => void;
 }) => {
-  const { onSubmit } = props;
+  const { onSubmit, onCancel } = props;
 
   const [name, setName] = useState("");
   const [envVariables, setEnvVariables] = useState<KeyValueType[]>([]);
@@ -75,11 +76,9 @@ const NewEnvGroupForm = (props: {
   return (
     <>
       <TitleSection>
-        <DynamicLink to={`/stacks/launch/overview`}>
-          <BackButton>
-            <i className="material-icons">keyboard_backspace</i>
-          </BackButton>
-        </DynamicLink>
+        <BackButton onClick={onCancel}>
+          <i className="material-icons">keyboard_backspace</i>
+        </BackButton>
         <Polymer>
           <SliderIcon src={sliders} />
         </Polymer>

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

@@ -19,6 +19,10 @@ const NewEnvGroup = () => {
         pushFiltered("/stacks/launch/overview", []);
         return;
       }}
+      onCancel={() => {
+        pushFiltered("/stacks/launch/overview", []);
+        return;
+      }}
     />
   );
 };

dashboard/src/main/home/cluster-dashboard/stacks/routes.tsx

@@ -8,7 +8,7 @@ import {
 } from "react-router";
 import { Context } from "shared/Context";
 import Dashboard from "./Dashboard";
-import ExpandedStack from "./ExpandedStack/ExpandedStack";
+import ExpandedStackRoutes from "./ExpandedStack/routes";
 import LaunchRoutes from "./launch";
 
 const routes = () => {
@@ -25,7 +25,7 @@ const routes = () => {
         <LaunchRoutes />
       </Route>
       <Route path={`${path}/:namespace/:stack_id`}>
-        <ExpandedStack />
+        <ExpandedStackRoutes />
       </Route>
       <Route path={`${path}/`} exact>
         <Dashboard />