condition env group path and fix environmentGroup json key (#4321)

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -215,7 +215,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             cluster_id: currentCluster?.id,
           }
         )
-        .then((res) => res?.data?.environmentGroups)
+        .then((res) => res?.data?.environment_groups)
         .catch((error) => {
           console.error("Failed to fetch environment groups:", error);
           return [];
@@ -413,7 +413,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
           repo_name: tempPorterApp.repo_name,
           git_branch: tempPorterApp.git_branch,
           buildpacks: "",
-          environmentGroups: syncedEnvGroups?.map((env) => env.name),
+          environment_groups: syncedEnvGroups?.map((env) => env.name),
           user_update: true,
           ...options,
         }

dashboard/src/main/home/app-dashboard/expanded-app/env-vars/EnvGroupModal.tsx

@@ -70,7 +70,7 @@ const EnvGroupModal: React.FC<Props> = ({
             cluster_id: currentCluster?.id,
           }
         )
-        .then((res) => res.data?.environmentGroups);
+        .then((res) => res.data?.environment_groups);
     } catch (error) {
       setLoading(false)
       setError(true);

dashboard/src/main/home/app-dashboard/expanded-app/env-vars/EnvVariablesTab.tsx

@@ -80,7 +80,7 @@ export const EnvVariablesTab: React.FC<EnvVariablesTabProps> = ({
             cluster_id: currentCluster.id,
           }
         )
-        .then((res) => res?.data?.environmentGroups);
+        .then((res) => res?.data?.environment_groups);
     } catch (error) {
       return;
     }

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -338,7 +338,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
         git_repo_id: porterApp.git_repo_id,
         build_context: porterApp.build_context,
         image_repo_uri: porterApp.image_repo_uri,
-        environmentGroups: syncedEnvGroups?.map((env: NewPopulatedEnvGroup) => env.name),
+        environment_groups: syncedEnvGroups?.map((env: NewPopulatedEnvGroup) => env.name),
         user_update: true,
       }
       if (porterApp.image_repo_uri && imageTag) {

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvGroupRow.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, {useContext, useMemo} from "react";
 import styled from "styled-components";
 
 import { useHistory } from "react-router";
@@ -12,6 +12,8 @@ import Image from "components/porter/Image";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import EnvGroupArray from "main/home/env-dashboard/EnvGroupArray";
+import {envGroupPath} from "shared/util";
+import {Context} from "shared/Context";
 
 type Props = {
   onRemove: (name: string) => void;
@@ -27,6 +29,7 @@ type Props = {
 
 // TODO: support footer for consolidation w/ app services
 const EnvGroupRow: React.FC<Props> = ({ envGroup, onRemove }) => {
+  const { currentProject } = useContext(Context);
   const history = useHistory();
 
   const variables = useMemo(() => {
@@ -68,7 +71,7 @@ const EnvGroupRow: React.FC<Props> = ({ envGroup, onRemove }) => {
           <Container row>
             <Svg 
               onClick={() => { 
-                history.push(`/environment-groups/${envGroup.name}/synced-apps`) 
+                history.push(envGroupPath(currentProject, `/${envGroup.name}/synced-apps`))
               }}
               data-testid="geist-icon" fill="none" height="27px" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" strokeLinejoin="round" stroke-width="2" viewBox="0 0 24 24" width="27px" data-darkreader-inline-stroke="" data-darkreader-inline-color=""><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></Svg>
             <Spacer inline x={.5} />

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

@@ -484,7 +484,7 @@ export const ExpandedEnvGroupFC = ({
           git_branch: newAppData?.git_branch,
           buildpacks: "",
           // full_helm_values: yaml.dump(values),
-          environmentGroups: filteredEnvGroups?.map((env) => env.name),
+          environment_groups: filteredEnvGroups?.map((env) => env.name),
           user_update: true,
         }
 

dashboard/src/main/home/env-dashboard/CreateEnvGroup.tsx

@@ -20,6 +20,7 @@ import { ControlledInput } from 'components/porter/ControlledInput';
 import Button from 'components/porter/Button';
 import EnvGroupArray, { type KeyValueType } from './EnvGroupArray';
 import axios from 'axios';
+import {envGroupPath} from "shared/util";
 
 const CreateEnvGroup: React.FC<RouteComponentProps> = ({ history }) => {
   const { currentProject, currentCluster } = useContext(Context);
@@ -143,7 +144,7 @@ const CreateEnvGroup: React.FC<RouteComponentProps> = ({ history }) => {
         }
       )
         
-      history.push(`/environment-groups/${data.name}/env-vars?created=true`);
+      history.push(envGroupPath(currentProject, `/${data.name}/env-vars?created=true`));
     } catch (err) {
       const errorMessage =
         axios.isAxiosError(err) && err.response?.data?.error
@@ -167,7 +168,7 @@ const CreateEnvGroup: React.FC<RouteComponentProps> = ({ history }) => {
     <CenterWrapper>
       <Div>
         <StyledConfigureTemplate>
-          <Back to="/environment-groups" />
+          <Back to={envGroupPath(currentProject, "")} />
           <DashboardHeader
             prefix={<Icon src={envGrad} />}
             title="Create a new env group"

dashboard/src/main/home/env-dashboard/EnvDashboard.tsx

@@ -30,6 +30,7 @@ import Image from "components/porter/Image";
 import SearchBar from "components/porter/SearchBar";
 import Toggle from "components/porter/Toggle";
 import Fieldset from "components/porter/Fieldset";
+import {envGroupPath} from "../../../shared/util";
 
 type Props = RouteComponentProps & WithAuthProps;
 
@@ -89,7 +90,7 @@ const EnvDashboard: React.FC<Props> = (props) => {
           <Spacer y={0.5} />
           <Text color={"helper"}>Get started by creating an environment group.</Text>
           <Spacer y={1} />
-          <Link to={`/environment-groups/new`}>
+          <Link to={envGroupPath(currentProject, "/new")}>
             <Button
               height="35px"
               alt
@@ -155,7 +156,7 @@ const EnvDashboard: React.FC<Props> = (props) => {
           />
           <Spacer inline x={1} />
           {isAuthorizedToAdd && (
-            <Link to={`/environment-groups/new`}>
+            <Link to={envGroupPath(currentProject, "/new")}>
               <Button
                 height="30px"
               >
@@ -187,7 +188,7 @@ const EnvDashboard: React.FC<Props> = (props) => {
             {(filteredEnvGroups ?? []).map(
               (envGroup, i: number) => {
                 return (
-                    <Block to={`/environment-groups/${envGroup.name}`} key={i}>
+                    <Block to={envGroupPath(currentProject, `/${envGroup.name}`)} key={i}>
                       <Container row>
                         <Image
                           src={envGroup.type === "doppler" ? doppler : key} 
@@ -212,7 +213,7 @@ const EnvDashboard: React.FC<Props> = (props) => {
           <List>
             {(filteredEnvGroups ?? []).map((envGroup: any, i: number) => {
               return (
-                <Row to={`/environment-groups/${envGroup.name}`} key={i}>
+                <Row to={envGroupPath(currentProject, `/${envGroup.name}`)} key={i}>
                   <Container row>
                     <Image
                       src={envGroup.type === "doppler" ? doppler : key}

dashboard/src/main/home/env-dashboard/ExpandedEnv.tsx

@@ -1,24 +1,25 @@
-import React, { useMemo, useState, useContext, useEffect } from "react";
-import styled from "styled-components";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { useHistory, useParams } from "react-router";
+import styled from "styled-components";
 import { match } from "ts-pattern";
 
+import Loading from "components/Loading";
+import Back from "components/porter/Back";
+import Container from "components/porter/Container";
+import Image from "components/porter/Image";
+import Link from "components/porter/Link";
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
+import TabSelector from "components/TabSelector";
+
 import api from "shared/api";
 import { Context } from "shared/Context";
-
-import notFound from "assets/not-found.png";
 import doppler from "assets/doppler.png";
 import key from "assets/key.svg";
+import notFound from "assets/not-found.png";
 import time from "assets/time.png";
 
-import Back from "components/porter/Back";
-import Loading from "components/Loading";
-import Container from "components/porter/Container";
-import Image from "components/porter/Image";
-import Text from "components/porter/Text";
-import Spacer from "components/porter/Spacer";
-import Link from "components/porter/Link";
-import TabSelector from "components/TabSelector";
+import { envGroupPath } from "../../../shared/util";
 import EnvVarsTab from "./tabs/EnvVarsTab";
 import SettingsTab from "./tabs/SettingsTab";
 import SyncedAppsTab from "./tabs/SyncedAppsTab";
@@ -40,7 +41,7 @@ const ExpandedEnv: React.FC = () => {
     tab: string;
   }>();
   const history = useHistory();
-  
+
   const [isLoading, setIsLoading] = useState(true);
   const [envGroup, setEnvGroup] = useState(null);
 
@@ -57,13 +58,13 @@ const ExpandedEnv: React.FC = () => {
       const res = await api.getAllEnvGroups(
         "<token>",
         {},
-        { 
+        {
           id: currentProject?.id ?? -1,
           cluster_id: currentCluster?.id ?? -1,
         }
       );
       const matchedEnvGroup = res.data.environment_groups.find((x) => {
-        return x.name === envGroupName
+        return x.name === envGroupName;
       });
       setIsLoading(false);
       setEnvGroup(matchedEnvGroup);
@@ -79,9 +80,9 @@ const ExpandedEnv: React.FC = () => {
 
   useEffect(() => {
     if (!tab) {
-      history.push(`/environment-groups/${envGroupName}/env-vars`);
+      history.push(envGroupPath(currentProject, `/${envGroupName}/env-vars`));
     }
-  }, [tab])
+  }, [tab]);
 
   return (
     <>
@@ -90,30 +91,34 @@ const ExpandedEnv: React.FC = () => {
         <Placeholder>
           <Container row>
             <Image src={notFound} size={13} opacity={0.65} />
-            <Spacer inline x={.5} />
+            <Spacer inline x={0.5} />
             <Text color="helper">
-              No env group matching &quot;{envGroupName}&quot;
-              was found.
+              No env group matching &quot;{envGroupName}&quot; was found.
             </Text>
           </Container>
           <Spacer y={1} />
-          <Link hasunderline to="/environment-groups">Return to dashboard</Link>
+          <Link hasunderline to={envGroupPath(currentProject, "")}>
+            Return to dashboard
+          </Link>
         </Placeholder>
       )}
       {!isLoading && envGroup && (
         <StyledExpandedApp>
-          <Back to="/environment-groups" />
+          <Back to={envGroupPath(currentProject, "")} />
 
           <Container row>
-            <Image src={envGroup.type === "doppler" ? doppler : key} size={28} />
+            <Image
+              src={envGroup.type === "doppler" ? doppler : key}
+              size={28}
+            />
             <Spacer inline x={1} />
             <Text size={21}>{envGroupName}</Text>
           </Container>
           <Spacer y={0.5} />
           <Container row>
-            <Spacer inline x={.2} />
+            <Spacer inline x={0.2} />
             <Image opacity={0.3} src={time} size={14} />
-            <Spacer inline x={.5} />
+            <Spacer inline x={0.5} />
             <Text color="#aaaabb66">
               Last deployed {getReadableDate(envGroup.created_at)}
             </Text>
@@ -125,17 +130,16 @@ const ExpandedEnv: React.FC = () => {
             options={tabs}
             currentTab={tab}
             setCurrentTab={(t) => {
-              history.push(`/environment-groups/${envGroupName}/${t}`);
+              history.push(
+                envGroupPath(currentProject, `/${envGroupName}/${t}`)
+              );
             }}
           />
           <Spacer y={1} />
           {match(tab)
             .with("env-vars", () => {
               return (
-                <EnvVarsTab 
-                  envGroup={envGroup}
-                  fetchEnvGroup={fetchEnvGroup}
-                />
+                <EnvVarsTab envGroup={envGroup} fetchEnvGroup={fetchEnvGroup} />
               );
             })
             .with("synced-apps", () => <SyncedAppsTab envGroup={envGroup} />)

dashboard/src/main/home/env-dashboard/tabs/SettingsTab.tsx

@@ -13,6 +13,7 @@ import Text from "components/porter/Text";
 import Container from "components/porter/Container";
 import Image from "components/porter/Image";
 import Error from "components/porter/Error";
+import {envGroupPath} from "shared/util";
 
 type Props = {
   envGroup: {
@@ -60,7 +61,7 @@ const SettingsTab: React.FC<Props> = ({ envGroup }) => {
     try {
       await deleteEnvGroup();
       setCurrentOverlay(null);
-      history.push("/environment-groups");
+      history.push(envGroupPath(currentProject, ""));
     } catch (error) {
       setIsDeleting(false);
       setButtonStatus(<Error message="Env group deletion failed" />);

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -23,6 +23,7 @@ import pr_icon from "assets/pull_request_icon.svg";
 import rocket from "assets/rocket.png";
 import settings from "assets/settings.svg";
 
+import { envGroupPath } from "../../../shared/util";
 import ClusterListContainer from "./ClusterListContainer";
 import Clusters from "./Clusters";
 import ProjectSectionContainer from "./ProjectSectionContainer";
@@ -245,9 +246,9 @@ class Sidebar extends Component<PropsType, StateType> {
               Add-ons
             </NavButton>
             <NavButton
-              path="/environment-groups"
+              path={envGroupPath(currentProject, "")}
               active={window.location.pathname.startsWith(
-                "/environment-groups"
+                envGroupPath(currentProject, "")
               )}
             >
               <Img src={sliders} />
@@ -335,9 +336,9 @@ class Sidebar extends Component<PropsType, StateType> {
             </NavButton>
 
             <NavButton
-              path="/environment-groups"
+              path={envGroupPath(currentProject, "")}
               active={window.location.pathname.startsWith(
-                "/environment-groups"
+                envGroupPath(currentProject, "")
               )}
             >
               <Container row spaced style={{ width: "100%" }}>

dashboard/src/shared/util.ts

@@ -1,5 +1,7 @@
 import { EnumQuotaIncrease } from "@porter-dev/api-contracts";
 
+import { type ProjectType } from "./types";
+
 export const isJSON = (value: string): boolean => {
   try {
     JSON.parse(value);
@@ -13,6 +15,15 @@ export function valueExists<T>(value: T | null | undefined): value is T {
   return !!value;
 }
 
+export function envGroupPath(
+  project: ProjectType | undefined,
+  subPath: string
+): string {
+  return project?.simplified_view_enabled && !project?.validate_apply_v2
+    ? `/env-groups${subPath}`
+    : `/environment-groups${subPath}`;
+}
+
 export const PREFLIGHT_MESSAGE_CONST = {
   cloudFormation: "CloudFormation stack created",
 };