EnvVarFix

dashboard/src/main/home/cluster-dashboard/DashboardRouter.tsx

@@ -8,11 +8,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { WithAuthProps, withAuth } from "shared/auth/AuthorizationHoc";
 import { ClusterType } from "shared/types";
-import { 
-  getQueryParam,
-  PorterUrl,
-  pushQueryParams,
-} from "shared/routing";
+import { getQueryParam, PorterUrl, pushQueryParams } from "shared/routing";
 
 import Loading from "components/Loading";
 import ExpandedChartWrapper from "./expanded-chart/ExpandedChartWrapper";
@@ -22,6 +18,7 @@ import AppDashboard from "./apps/AppDashboard";
 import JobDashboard from "./jobs/JobDashboard";
 import ExpandedEnvGroupDashboard from "./env-groups/ExpandedEnvGroupDashboard";
 import EnvGroupDashboard from "./env-groups/EnvGroupDashboard";
+import { EnvContextProvider } from "./env-groups/EnvGroupContext";
 
 const LazyDatabasesRoutes = loadable(
   // @ts-ignore
@@ -47,11 +44,12 @@ const LazyStackRoutes = loadable(
   }
 );
 
-type Props = RouteComponentProps & WithAuthProps & {
-  currentCluster: ClusterType;
-  setSidebar: (x: boolean) => void;
-  currentView: PorterUrl;
-};
+type Props = RouteComponentProps &
+  WithAuthProps & {
+    currentCluster: ClusterType;
+    setSidebar: (x: boolean) => void;
+    currentView: PorterUrl;
+  };
 
 // TODO: should try to maintain single source of truth b/w router and context/state (ex: namespace -> being managed in parallel right now so highly inextensible and routing is fragile)
 const DashboardRouter: React.FC<Props> = ({
@@ -73,14 +71,15 @@ const DashboardRouter: React.FC<Props> = ({
     if (!cluster) {
       pushQueryParams(props, { cluster: currentCluster.name });
     }
-    api.getPrometheusIsInstalled(
-      "<token>",
-      {},
-      {
-        id: currentProject.id,
-        cluster_id: currentCluster.id,
-      }
-    )
+    api
+      .getPrometheusIsInstalled(
+        "<token>",
+        {},
+        {
+          id: currentProject.id,
+          cluster_id: currentCluster.id,
+        }
+      )
       .then((res) => {
         setIsMetricsInstalled(true);
       })
@@ -119,7 +118,9 @@ const DashboardRouter: React.FC<Props> = ({
 
   return (
     <Switch>
-      <Route path={"/stacks"}><LazyStackRoutes /></Route>
+      <Route path={"/stacks"}>
+        <LazyStackRoutes />
+      </Route>
       <Route path={"/preview-environments"}>
         <LazyPreviewEnvironmentsRoutes />
       </Route>
@@ -162,9 +163,9 @@ const DashboardRouter: React.FC<Props> = ({
         resource=""
         verb={["get", "list"]}
       >
-        <ExpandedEnvGroupDashboard
-          currentCluster={currentCluster}
-        />
+        <EnvContextProvider>
+          <ExpandedEnvGroupDashboard currentCluster={currentCluster} />
+        </EnvContextProvider>
       </GuardedRoute>
       <GuardedRoute
         path={"/env-groups"}
@@ -186,5 +187,4 @@ const DashboardRouter: React.FC<Props> = ({
 
 export default withRouter(withAuth(DashboardRouter));
 
-const StyledTemplateComponent = styled.div`
-`;
+const StyledTemplateComponent = styled.div``;

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

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+
+import {
+  CapabilityType,
+  ClusterType,
+  ContextProps,
+  ProjectType,
+  UsageData,
+} from "shared/types";
+
+import { pushQueryParams } from "shared/routing";
+import api from "shared/api";
+export type KeyValueType = {
+  key: string;
+  value: string;
+  hidden: boolean;
+  locked: boolean;
+  deleted: boolean;
+};
+
+export type EnvGroupData = {
+  name: string;
+  namespace: string;
+  created_at?: string;
+  version: number;
+};
+const EnvContext = React.createContext<Partial<ContextProps>>(null);
+
+const { Provider } = EnvContext;
+const EnvContextConsumer = EnvContext.Consumer;
+type PropsType = {
+  createdEnvGroup?: EnvGroupData[];
+  children?: React.ReactNode;
+};
+type StateType = EnvContextType;
+export interface EnvContextType {
+  currentEnvGroup: EnvGroupData;
+  setCurrentEnvGroup: (currentEnvGroup: EnvGroupData) => void;
+  envGrouping: any[];
+  setEnvGroups: (envGroups: EnvGroupData[]) => void;
+}
+class EnvContextProvider extends Component<PropsType, StateType> {
+  state: EnvContextType = {
+    currentEnvGroup: null,
+    envGrouping: null,
+    setCurrentEnvGroup: (currentEnvGroup: EnvGroupData) => {
+      this.setState({ currentEnvGroup });
+    },
+    setEnvGroups: (envGrouping: EnvGroupData[]) => {
+      this.setState({ envGrouping });
+    },
+  };
+  render() {
+    return <Provider value={{ ...this.state }}>{this.props.children}</Provider>;
+  }
+}
+
+export { EnvContext, EnvContextProvider, EnvContextConsumer };

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

@@ -14,7 +14,8 @@ import { useQuery } from "@tanstack/react-query";
 import api from "shared/api";
 import Loading from "components/Loading";
 import Placeholder from "components/Placeholder";
-
+import { EnvContext } from "./EnvGroupContext";
+import { cmp } from "semver";
 type PropsType = RouteComponentProps &
   WithAuthProps & {
     currentCluster: ClusterType;
@@ -25,6 +26,12 @@ const EnvGroupDashboard = (props: PropsType) => {
   const params = useParams<{ name: string }>();
   const { currentProject } = useContext(Context);
   const [expandedEnvGroup, setExpandedEnvGroup] = useState<any>();
+  const {
+    currentEnvGroup,
+    setCurrentEnvGroup,
+    envGrouping,
+    setEnvGroups,
+  } = useContext(EnvContext);
 
   const {
     data: envGroups,
@@ -47,7 +54,8 @@ const EnvGroupDashboard = (props: PropsType) => {
             cluster_id: props.currentCluster.id,
           }
         );
-
+        setEnvGroups(res.data);
+        console.log(envGrouping);
         return res.data;
       } catch (err) {
         throw err;

dashboard/src/shared/types.tsx

@@ -243,15 +243,15 @@ export interface FormElement {
 export type RepoType = {
   FullName: string;
 } & (
-    | {
+  | {
       Kind: "github";
       GHRepoID: number;
     }
-    | {
+  | {
       Kind: "gitlab";
       GitIntegrationId: number;
     }
-  );
+);
 
 export interface FileType {
   path: string;
@@ -309,15 +309,15 @@ export type ActionConfigType = {
   image_repo_uri: string;
   dockerfile_path?: string;
 } & (
-    | {
+  | {
       kind: "gitlab";
       gitlab_integration_id: number;
     }
-    | {
+  | {
       kind: "github";
       git_repo_id: number;
     }
-  );
+);
 
 export type GithubActionConfigType = ActionConfigType & {
   kind: "github";
@@ -337,6 +337,13 @@ export type FullGithubActionConfigType = GithubActionConfigType & {
   should_create_workflow: boolean;
 };
 
+export type EnvGroupData = {
+  name: string;
+  namespace: string;
+  created_at?: string;
+  version: number;
+};
+
 export interface CapabilityType {
   github: boolean;
   provisioner: boolean;
@@ -385,6 +392,10 @@ export interface ContextProps {
   setEnableGitlab: (enableGitlab: boolean) => void;
   shouldRefreshClusters: boolean;
   setShouldRefreshClusters: (shouldRefreshClusters: boolean) => void;
+  currentEnvGroup?: EnvGroupData;
+  setCurrentEnvGroup?: (currentEnvGroup: EnvGroupData) => void;
+  envGrouping?: EnvGroupData[];
+  setEnvGroups?: (envGroups: EnvGroupData[]) => void;
 }
 
 export enum JobStatusType {