Implement env group list and redirection to expanded env group

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -13,7 +13,7 @@ import EnvGroupList from "./EnvGroupList";
 import CreateEnvGroup from "./CreateEnvGroup";
 import ExpandedEnvGroup from "./ExpandedEnvGroup";
 import { RouteComponentProps, withRouter } from "react-router";
-import { pushQueryParams } from "shared/routing";
+import { getQueryParam, pushQueryParams } from "shared/routing";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 
 type PropsType = RouteComponentProps &
@@ -79,6 +79,7 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
                 namespace={this.state.namespace}
               />
               <SortSelector
+                currentView="env-groups"
                 setSortType={(sortType) => this.setState({ sortType })}
                 sortType={this.state.sortType}
               />
@@ -98,6 +99,16 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
     }
   };
 
+  closeExpanded = () => {
+    pushQueryParams(this.props, {}, ["selected_env_group"]);
+    const redirectUrlOnClose = getQueryParam(this.props, "redirect_url");
+    if (redirectUrlOnClose) {
+      this.props.history.push(redirectUrlOnClose);
+      return;
+    }
+    this.setState({ expandedEnvGroup: null });
+  };
+
   renderContents = () => {
     if (this.state.expandedEnvGroup) {
       return (
@@ -108,7 +119,7 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
           }
           currentCluster={this.props.currentCluster}
           envGroup={this.state.expandedEnvGroup}
-          closeExpanded={() => this.setState({ expandedEnvGroup: null })}
+          closeExpanded={() => this.closeExpanded()}
         />
       );
     } else {

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupList.tsx

@@ -7,8 +7,10 @@ import { ClusterType } from "shared/types";
 
 import EnvGroup from "./EnvGroup";
 import Loading from "components/Loading";
+import { getQueryParam, pushQueryParams } from "shared/routing";
+import { RouteComponentProps, withRouter } from "react-router";
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   currentCluster: ClusterType;
   namespace: string;
   sortType: string;
@@ -27,51 +29,70 @@ const dummyEnvGroups = [
   { name: "backend-production", last_updated: "7", namespace: "default" },
 ];
 
-export default class EnvGroupList extends Component<PropsType, StateType> {
+class EnvGroupList extends Component<PropsType, StateType> {
   state = {
     envGroups: [] as any[],
     loading: false,
     error: false,
   };
 
-  updateEnvGroups = () => {
-    api
-      .listEnvGroups(
-        "<token>",
-        {},
-        {
-          id: this.context.currentProject.id,
-          namespace: this.props.namespace,
-          cluster_id: this.props.currentCluster.id,
-        }
-      )
-      .then((res) => {
-        let sortedGroups = res?.data;
-        switch (this.props.sortType) {
-          case "Oldest":
-            sortedGroups.sort((a: any, b: any) =>
-              Date.parse(a.created_at) > Date.parse(b.created_at) ? 1 : -1
-            );
-            break;
-          case "Alphabetical":
-            sortedGroups.sort((a: any, b: any) => (a.name > b.name ? 1 : -1));
-            break;
-          default:
-            sortedGroups.sort((a: any, b: any) =>
-              Date.parse(a.created_at) > Date.parse(b.created_at) ? -1 : 1
-            );
-        }
-        this.setState({ envGroups: sortedGroups, loading: false });
-      })
-      .catch((err) => {
-        console.log(err);
-        this.setState({ loading: false, error: true });
-      });
+  updateEnvGroups = async () => {
+    const { currentCluster, namespace, sortType } = this.props;
+    try {
+      const envGroups = await api
+        .listEnvGroups(
+          "<token>",
+          {},
+          {
+            id: this.context.currentProject.id,
+            namespace: this.props.namespace,
+            cluster_id: this.props.currentCluster.id,
+          }
+        )
+        .then((res) => res.data);
+
+      let sortedGroups = envGroups;
+      switch (this.props.sortType) {
+        case "Oldest":
+          sortedGroups.sort((a: any, b: any) =>
+            Date.parse(a.created_at) > Date.parse(b.created_at) ? 1 : -1
+          );
+          break;
+        case "Alphabetical":
+          sortedGroups.sort((a: any, b: any) => (a.name > b.name ? 1 : -1));
+          break;
+        default:
+          sortedGroups.sort((a: any, b: any) =>
+            Date.parse(a.created_at) > Date.parse(b.created_at) ? -1 : 1
+          );
+      }
+
+      return sortedGroups;
+    } catch (error) {
+      console.log(error);
+      this.setState({ loading: false, error: true });
+    }
   };
 
   componentDidMount() {
     this.setState({ loading: true });
-    this.updateEnvGroups();
+    this.updateEnvGroups().then((envGroups) => {
+      const selectedEnvGroup = getQueryParam(this.props, "selected_env_group");
+
+      if (selectedEnvGroup) {
+        // find env group by selectedEnvGroup
+        const envGroup = envGroups.find(
+          (envGroup: any) => envGroup.name === selectedEnvGroup
+        );
+        if (envGroup) {
+          this.props.setExpandedEnvGroup(envGroup);
+          return;
+        } else {
+          pushQueryParams(this.props, {}, ["selected_env_group"]);
+        }
+      }
+      this.setState({ envGroups, loading: false });
+    });
   }
 
   componentDidUpdate(prevProps: PropsType) {
@@ -82,10 +103,32 @@ export default class EnvGroupList extends Component<PropsType, StateType> {
       prevProps.sortType !== this.props.sortType
     ) {
       (this.props.namespace || this.props.namespace === "") &&
-        this.updateEnvGroups();
+        this.updateEnvGroups().then((envGroups) => {
+          const selectedEnvGroup = getQueryParam(
+            this.props,
+            "selected_env_group"
+          );
+
+          this.setState({ envGroups, loading: false });
+
+          if (selectedEnvGroup) {
+            // find env group by selectedEnvGroup
+            const envGroup = envGroups.find(
+              (envGroup: any) => envGroup.name === selectedEnvGroup
+            );
+            if (envGroup) {
+              this.props.setExpandedEnvGroup(envGroup);
+            }
+          }
+        });
     }
   }
 
+  handleExpand = (envGroup: any) => {
+    pushQueryParams(this.props, { selected_env_group: envGroup.name }, []);
+    this.props.setExpandedEnvGroup(envGroup);
+  };
+
   renderEnvGroupList = () => {
     let { loading, error, envGroups } = this.state;
 
@@ -115,7 +158,7 @@ export default class EnvGroupList extends Component<PropsType, StateType> {
         <EnvGroup
           key={i}
           envGroup={envGroup}
-          setExpanded={() => this.props.setExpandedEnvGroup(envGroup)}
+          setExpanded={() => this.handleExpand(envGroup)}
         />
       );
     });
@@ -128,6 +171,8 @@ export default class EnvGroupList extends Component<PropsType, StateType> {
 
 EnvGroupList.contextType = Context;
 
+export default withRouter(EnvGroupList);
+
 const Placeholder = styled.div`
   width: 100%;
   display: flex;

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

@@ -23,6 +23,7 @@ import {
 } from "../components/styles";
 import { getStackStatus, getStackStatusMessage } from "../shared";
 import { FullStackRevision, Stack, StackRevision } from "../types";
+import EnvGroups from "./components/EnvGroups";
 import RevisionList from "./_RevisionList";
 import SourceConfig from "./_SourceConfig";
 
@@ -190,6 +191,16 @@ const ExpandedStack = () => {
               </>
             ),
           },
+          {
+            label: "Env groups",
+            value: "env_groups",
+            component: (
+              <>
+                <Gap></Gap>
+                <EnvGroups stack={stack} />
+              </>
+            ),
+          },
         ]}
         setCurrentTab={(tab) => {
           setCurrentTab(tab);

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

@@ -0,0 +1,82 @@
+import React, { useContext, useEffect, useState } from "react";
+import api from "shared/api";
+import { Context } from "shared/Context";
+import { Card } from "../../launch/components/styles";
+import { Stack } from "../../types";
+import sliders from "assets/sliders.svg";
+import DynamicLink from "components/DynamicLink";
+
+type PopulatedEnvGroup = {
+  applications: string[];
+  created_at: string;
+  meta_version: number;
+  name: string;
+  namespace: string;
+  variables: Record<string, string>;
+  version: number;
+};
+
+const EnvGroups = ({ stack }: { stack: Stack }) => {
+  const { currentProject, currentCluster } = useContext(Context);
+  const [envGroups, setEnvGroups] = useState<PopulatedEnvGroup[]>([]);
+
+  const getEnvGroups = async () => {
+    const stackEnvGroups = stack.latest_revision.env_groups;
+    return Promise.all(
+      stackEnvGroups.map((envGroup) =>
+        api
+          .getEnvGroup<PopulatedEnvGroup>(
+            "<token>",
+            {},
+            {
+              cluster_id: currentCluster.id,
+              id: currentProject.id,
+              name: envGroup.name,
+              namespace: stack.namespace,
+              version: envGroup.env_group_version,
+            }
+          )
+          .then((res) => res.data)
+      )
+    );
+  };
+
+  useEffect(() => {
+    getEnvGroups().then((envGroups) => {
+      setEnvGroups(envGroups);
+    });
+  }, [stack]);
+
+  return (
+    <Card.Grid>
+      {envGroups.map((envGroup) => {
+        return (
+          <Card.Wrapper>
+            <Card.Title>
+              <Card.Icon src={sliders}></Card.Icon>
+              {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>
+  );
+};
+
+export default EnvGroups;

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

@@ -7,7 +7,7 @@ import Placeholder from "components/Placeholder";
 import styled from "styled-components";
 import { Stack } from "./types";
 import { readableDate } from "shared/string_utils";
-import { CardGrid, Card } from "./launch/components/styles";
+import { Card } from "./launch/components/styles";
 import Status, { StatusProps } from "./components/Status";
 import {
   Flex,
@@ -104,7 +104,7 @@ const StackList = ({ namespace }: { namespace: string }) => {
 
   return (
     <>
-      <CardGrid>
+      <Card.Grid>
         {stacks.map((stack) => (
           <StackCard
             as={DynamicLink}
@@ -160,7 +160,7 @@ const StackList = ({ namespace }: { namespace: string }) => {
             </Flex>
           </StackCard>
         ))}
-      </CardGrid>
+      </Card.Grid>
     </>
   );
 };
@@ -221,7 +221,7 @@ const DataContainer = styled.div`
   overflow: hidden;
 `;
 
-const StackCard = styled(Card)`
+const StackCard = styled(Card.Wrapper)`
   font-size: 13px;
   font-weight: 500;
 `;

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

@@ -8,10 +8,9 @@ import useAuth from "shared/auth/useAuth";
 import { useRouting } from "shared/routing";
 import {
   AddResourceButtonStyles,
-  CardGrid,
   SubmitButton,
+  Card,
 } from "./components/styles";
-import { AppCard } from "./components/AppCard";
 import { AddResourceButton } from "./components/AddResourceButton";
 import styled from "styled-components";
 
@@ -19,7 +18,8 @@ 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";
+import { hardcodedIcons } from "shared/hardcodedNameDict";
+import sliders from "assets/sliders.svg";
 
 const Overview = () => {
   const {
@@ -28,6 +28,7 @@ const Overview = () => {
     setStackName,
     setStackNamespace,
     submit,
+    removeAppResource,
   } = useContext(StacksLaunchContext);
   const { currentProject, currentCluster } = useContext(Context);
   const [isAuthorized] = useAuth();
@@ -154,18 +155,42 @@ const Overview = () => {
         At least one application is required:
         <Required>*</Required>
       </Helper>
-      <CardGrid>
+      <Card.Grid>
         {newStack.app_resources.map((app) => (
-          <AppCard key={app.name} app={app} />
+          <Card.Wrapper>
+            <Card.Title>
+              <Card.Icon src={hardcodedIcons[app.template_name]}></Card.Icon>
+              {app.name}
+            </Card.Title>
+            <Card.Actions>
+              <Card.ActionButton
+                onClick={() => {
+                  removeAppResource(app);
+                }}
+              >
+                <i className="material-icons-outlined">close</i>
+              </Card.ActionButton>
+            </Card.Actions>
+          </Card.Wrapper>
         ))}
 
         <AddResourceButton />
-      </CardGrid>
+      </Card.Grid>
 
       <Heading>Env groups</Heading>
-      <CardGrid>
+      <Card.Grid>
         {newStack.env_groups.map((envGroup) => (
-          <EnvGroupCard key={envGroup.name} envGroup={envGroup} />
+          <Card.Wrapper variant="unclickable">
+            <Card.Title>
+              <Card.Icon src={sliders} />
+              {envGroup.name}
+            </Card.Title>
+            {/* <Card.Actions>
+              <Card.ActionButton onClick={() => {}}>
+                <i className="material-icons-outlined">close</i>
+              </Card.ActionButton>
+            </Card.Actions> */}
+          </Card.Wrapper>
         ))}
 
         <AddResourceButtonStyles.Wrapper>
@@ -177,7 +202,7 @@ const Overview = () => {
             Add a new env group
           </AddResourceButtonStyles.Flex>
         </AddResourceButtonStyles.Wrapper>
-      </CardGrid>
+      </Card.Grid>
 
       <SubmitButton
         disabled={!isValid || submitButtonStatus !== ""}

dashboard/src/main/home/cluster-dashboard/stacks/launch/components/AppCard.tsx

@@ -1,28 +0,0 @@
-import React, { useContext } from "react";
-import { StacksLaunchContext, StacksLaunchContextType } from "../Store";
-import { ButtonWithIcon, Card, Flex, Icon } from "./styles";
-import { hardcodedIcons } from "shared/hardcodedNameDict";
-
-export const AppCard = ({
-  app,
-}: {
-  app: StacksLaunchContextType["newStack"]["app_resources"][0];
-}) => {
-  const { removeAppResource } = useContext(StacksLaunchContext);
-
-  const handleDelete = () => {
-    removeAppResource(app);
-  };
-
-  return (
-    <Card variant="unclickable">
-      <Flex>
-        <Icon src={hardcodedIcons[app.template_name]} />
-        {app.name}
-      </Flex>
-      <ButtonWithIcon variant="delete" onClick={handleDelete}>
-        <i className="material-icons-outlined">close</i>
-      </ButtonWithIcon>
-    </Card>
-  );
-};

dashboard/src/main/home/cluster-dashboard/stacks/launch/components/EnvGroupCard.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { hardcodedIcons } from "shared/hardcodedNameDict";
-import { ButtonWithIcon, Card, Flex, Icon } from "./styles";
-
-const EnvGroupCard = ({
-  envGroup: { name },
-}: {
-  envGroup: { name: string };
-}) => {
-  const handleDelete = () => {
-    console.error("NOT IMPLEMENTED");
-  };
-
-  return (
-    <Card variant="unclickable">
-      <Flex>
-        <Icon src={""} />
-        {name}
-      </Flex>
-      <ButtonWithIcon variant="delete" onClick={handleDelete}>
-        <i className="material-icons-outlined">close</i>
-      </ButtonWithIcon>
-    </Card>
-  );
-};
-
-export default EnvGroupCard;

dashboard/src/main/home/cluster-dashboard/stacks/launch/components/styles.tsx

@@ -1,53 +1,95 @@
 import SaveButton from "components/SaveButton";
 import styled from "styled-components";
 
-export const CardGrid = styled.div`
-  margin-top: 32px;
-  margin-bottom: 32px;
-  display: grid;
-  grid-row-gap: 25px;
-`;
+export const Card = {
+  Grid: styled.div`
+    margin-top: 32px;
+    margin-bottom: 32px;
+    display: grid;
+    grid-row-gap: 25px;
+  `,
+  Wrapper: styled.div<{ variant?: "clickable" | "unclickable" }>`
+    display: flex;
+    color: #ffffff;
+    background: #2b2e3699;
+    justify-content: space-between;
+    border-radius: 5px;
+    height: 75px;
+    padding: 12px;
+    padding-left: 14px;
+    border: 1px solid #ffffff0f;
+    align-items: center;
 
-export const Card = styled.div<{ variant?: "clickable" | "unclickable" }>`
-  display: flex;
-  color: #ffffff;
-  background: #2b2e3699;
-  justify-content: space-between;
-  border-radius: 5px;
-  height: 75px;
-  padding: 12px;
-  padding-left: 14px;
-  border: 1px solid #ffffff0f;
-  align-items: center;
-
-  ${(props) => {
-    if (props.variant === "unclickable") {
-      return `
-      cursor: default;
-      :hover {
-        border: 1px solid #ffffff0f;
+    ${(props) => {
+      if (props.variant === "unclickable") {
+        return `
+          cursor: default;
+          :hover {
+            border: 1px solid #ffffff0f;
+          }
+        `;
       }
+
+      return `
+        cursor: pointer;
+        :hover {
+          border: 1px solid #ffffff3c;
+        }
       `;
-    }
+    }}
 
-    return `
-      cursor: pointer;
-      :hover {
-        border: 1px solid #ffffff3c;
+    animation: fadeIn 0.5s;
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
       }
-    `;
-  }}
+    }
+  `,
+
+  Title: styled.div`
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+  `,
+
+  Icon: styled.img`
+    height: 30px;
+    margin-right: 15px;
+    margin-left: 5px;
+  `,
+  Actions: styled.div`
+    margin-right: 5px;
+    display: flex;
+  `,
+  ActionButton: styled.button`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: #ffffff11;
+    border: 1px solid #ffffff22;
+    cursor: pointer;
+    color: white;
+
+    :not(:first-child) {
+      margin-left: 10px;
+    }
 
-  animation: fadeIn 0.5s;
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
+    &:hover {
+      background-color: #ffffff3c;
     }
-    to {
-      opacity: 1;
+
+    > i {
+      font-size: 18px;
     }
-  }
-`;
+  `,
+};
 
 export const SubmitButton = styled(SaveButton)`
   width: 100%;
@@ -56,7 +98,7 @@ export const SubmitButton = styled(SaveButton)`
 `;
 
 export const AddResourceButtonStyles = {
-  Wrapper: styled(Card)`
+  Wrapper: styled(Card.Wrapper)`
     align-items: center;
     position: relative;
     font-size: 14px;
@@ -140,42 +182,3 @@ export const SelectorStyles = {
     text-overflow: ellipsis;
   `,
 };
-
-export const ButtonWithIcon = styled.div<{ variant?: "normal" | "delete" }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background-color: #ffffff11;
-  border: 1px solid #ffffff22;
-  cursor: pointer;
-
-  ${({ variant }) => {
-    if (variant === "delete") {
-      return "margin-right: 5px;";
-    }
-  }}
-
-  &:hover {
-    background-color: #ffffff3c;
-  }
-
-  > i {
-    font-size: 18px;
-  }
-`;
-
-export const Flex = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-`;
-
-export const Icon = styled.img`
-  height: 30px;
-  margin-right: 15px;
-  margin-left: 5px;
-`;