Enable env gorups deletion

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

@@ -29,6 +29,7 @@ const Overview = () => {
     setStackNamespace,
     submit,
     removeAppResource,
+    removeEnvGroup,
   } = useContext(StacksLaunchContext);
   const { currentProject, currentCluster } = useContext(Context);
   const [isAuthorized] = useAuth();
@@ -185,11 +186,15 @@ const Overview = () => {
               <Card.Icon src={sliders} />
               {envGroup.name}
             </Card.Title>
-            {/* <Card.Actions>
-              <Card.ActionButton onClick={() => {}}>
+            <Card.Actions>
+              <Card.ActionButton
+                onClick={() => {
+                  removeEnvGroup(envGroup);
+                }}
+              >
                 <i className="material-icons-outlined">close</i>
               </Card.ActionButton>
-            </Card.Actions> */}
+            </Card.Actions>
           </Card.Wrapper>
         ))}
 

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

@@ -24,6 +24,8 @@ export type StacksLaunchContextType = {
 
   addEnvGroup: (envGroup: CreateStackBody["env_groups"][0]) => void;
 
+  removeEnvGroup: (envGroup: CreateStackBody["env_groups"][0]) => void;
+
   submit: () => Promise<void>;
 };
 
@@ -50,6 +52,8 @@ const defaultValues: StacksLaunchContextType = {
 
   addEnvGroup: () => {},
 
+  removeEnvGroup: (envGroup: CreateStackBody["env_groups"][0]) => {},
+
   submit: async () => {},
 };
 
@@ -139,12 +143,26 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
   const removeAppResource: StacksLaunchContextType["removeAppResource"] = (
     appResource
   ) => {
-    setNewStack((prev) => ({
-      ...prev,
-      app_resources: prev.app_resources.filter(
-        (ar) => ar.name !== appResource.name
-      ),
-    }));
+    setNewStack((prev) => {
+      const removedAppName = appResource.name;
+      const newEnvGroups = prev.env_groups.map((envGroup) => {
+        const newLinkedApplications = envGroup.linked_applications.filter(
+          (linkedApplication) => linkedApplication !== removedAppName
+        );
+        return {
+          ...envGroup,
+          linked_applications: newLinkedApplications,
+        };
+      });
+
+      return {
+        ...prev,
+        app_resources: prev.app_resources.filter(
+          (ar) => ar.name !== appResource.name
+        ),
+        env_groups: newEnvGroups,
+      };
+    });
   };
 
   const addEnvGroup: StacksLaunchContextType["addEnvGroup"] = (envGroup) => {
@@ -154,6 +172,37 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
     }));
   };
 
+  const removeEnvGroup: StacksLaunchContextType["removeEnvGroup"] = (
+    envGroup
+  ) => {
+    setNewStack((prev) => {
+      const removedEnvGroup = prev.env_groups.find(
+        (eg) => eg.name === envGroup.name
+      );
+
+      if (removedEnvGroup.linked_applications.length > 0) {
+        const formatter = new Intl.ListFormat("en", {
+          style: "long",
+          type: "conjunction",
+        });
+
+        setCurrentError(
+          `Cannot remove env group ${
+            envGroup.name
+          } because it is linked to applications: ${formatter.format(
+            removedEnvGroup.linked_applications
+          )}`
+        );
+        return prev;
+      }
+
+      return {
+        ...prev,
+        env_groups: prev.env_groups.filter((eg) => eg.name !== envGroup.name),
+      };
+    });
+  };
+
   const submit: StacksLaunchContextType["submit"] = async () => {
     try {
       await api.createStack("<token>", newStack, {
@@ -178,6 +227,7 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
         addAppResource,
         removeAppResource,
         addEnvGroup,
+        removeEnvGroup,
         submit,
       }}
     >