rename to envs

dashboard/src/lib/porter-apps/index.ts

@@ -193,6 +193,36 @@ export const porterAppFormValidator = basePorterAppFormValidator
   );
 export type PorterAppFormData = z.infer<typeof porterAppFormValidator>;
 
+export const APP_CREATE_FORM_DEFAULTS = {
+  app: {
+    name: {
+      value: "",
+      readOnly: false,
+    },
+    build: {
+      method: "pack" as const,
+      context: "./",
+      builder: "",
+      buildpacks: [],
+    },
+    env: [],
+    efsStorage: {
+      enabled: false,
+    },
+  },
+  source: {
+    git_repo_name: "",
+    git_branch: "",
+    porter_yaml_path: "",
+  },
+  deletions: {
+    serviceNames: [],
+    envGroupNames: [],
+    predeploy: [],
+    initialDeploy: [],
+  },
+};
+
 // serviceOverrides is used to generate the services overrides for an app from porter.yaml
 // this method is only called when a porter.yaml is present and has services defined
 export function serviceOverrides({

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -346,7 +346,7 @@ const Apps: React.FC = () => {
                 }}
               >
                 <div>
-                  {currentDeploymentTarget?.namespace ?? "Preview Apps"}
+                  {currentDeploymentTarget?.namespace ?? "Preview Environments"}
                 </div>
                 <Badge>Preview</Badge>
               </div>

dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx

@@ -34,6 +34,7 @@ import { useIntercom } from "lib/hooks/useIntercom";
 import { usePorterYaml } from "lib/hooks/usePorterYaml";
 import { checkIfProjectHasPayment } from "lib/hooks/useStripe";
 import {
+  APP_CREATE_FORM_DEFAULTS,
   porterAppFormValidator,
   type PorterAppFormData,
   type SourceOptions,
@@ -139,35 +140,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
   const porterAppFormMethods = useForm<PorterAppFormData>({
     resolver: zodResolver(porterAppFormValidator),
     reValidateMode: "onSubmit",
-    defaultValues: {
-      app: {
-        name: {
-          value: "",
-          readOnly: false,
-        },
-        build: {
-          method: "pack",
-          context: "./",
-          builder: "",
-          buildpacks: [],
-        },
-        env: [],
-        efsStorage: {
-          enabled: false,
-        },
-      },
-      source: {
-        git_repo_name: "",
-        git_branch: "",
-        porter_yaml_path: "",
-      },
-      deletions: {
-        serviceNames: [],
-        envGroupNames: [],
-        predeploy: [],
-        initialDeploy: [],
-      },
-    },
+    defaultValues: APP_CREATE_FORM_DEFAULTS,
   });
   const {
     register,
@@ -437,7 +410,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
       let stringifiedJson = "unable to stringify errors";
       try {
         stringifiedJson = JSON.stringify(errors);
-      } catch (e) { }
+      } catch (e) {}
       void updateAppStep({
         step: "stack-launch-failure",
         errorMessage: `Form validation error (visible to user): ${errorMessage}. Stringified JSON errors (invisible to user): ${stringifiedJson}`,
@@ -546,8 +519,8 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                     <Text
                       color={
                         isNameHighlight &&
-                          porterAppFormMethods.getValues("app.name.value")
-                            .length > 0
+                        porterAppFormMethods.getValues("app.name.value")
+                          .length > 0
                           ? "#FFCC00"
                           : "helper"
                       }
@@ -682,8 +655,9 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
                             }
                           >
                             {detectedServices.count > 0
-                              ? `Detected ${detectedServices.count} service${detectedServices.count > 1 ? "s" : ""
-                              } from porter.yaml.`
+                              ? `Detected ${detectedServices.count} service${
+                                  detectedServices.count > 1 ? "s" : ""
+                                } from porter.yaml.`
                               : `Could not detect any services from porter.yaml. Make sure it exists in the root of your repo.`}
                           </Text>
                         </AppearingDiv>
@@ -778,16 +752,18 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
           }}
         />
       )}
-      {currentProject?.sandbox_enabled && currentProject?.billing_enabled && !hasPaymentEnabled && (
-        <BillingModal
-          back={() => {
-            history.push("/apps");
-          }}
-          onCreate={async () => {
-            history.push("/apps/new/app");
-          }}
-        />
-      )}
+      {currentProject?.sandbox_enabled &&
+        currentProject?.billing_enabled &&
+        !hasPaymentEnabled && (
+          <BillingModal
+            back={() => {
+              history.push("/apps");
+            }}
+            onCreate={async () => {
+              history.push("/apps/new/app");
+            }}
+          />
+        )}
     </CenterWrapper>
   );
 };

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentList.tsx

@@ -1,27 +1,29 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import { Context } from "shared/Context";
-import api from "shared/api";
-import styled from "styled-components";
-import Loading from "components/Loading";
 import _ from "lodash";
-import DeploymentCard from "./DeploymentCard";
-import { Environment, PRDeployment, PullRequest } from "../types";
-import { useRouting } from "shared/routing";
 import { useHistory, useLocation, useParams } from "react-router";
-import { deployments, pull_requests } from "../mocks";
+import styled from "styled-components";
+
 import DynamicLink from "components/DynamicLink";
-import DashboardHeader from "../../DashboardHeader";
-import RadioFilter from "components/RadioFilter";
+import Loading from "components/Loading";
 import Placeholder from "components/Placeholder";
 import Banner from "components/porter/Banner";
+import RadioFilter from "components/RadioFilter";
 
-import pullRequestIcon from "assets/pull_request_icon.svg";
+import api from "shared/api";
+import { Context } from "shared/Context";
+import { useRouting } from "shared/routing";
+import { search } from "shared/search";
 import filterOutline from "assets/filter-outline.svg";
+import pullRequestIcon from "assets/pull_request_icon.svg";
 import sort from "assets/sort.svg";
-import { search } from "shared/search";
-import { getPRDeploymentList, validatePorterYAML } from "../utils";
-import { PorterYAMLErrors } from "../errors";
+
+import DashboardHeader from "../../DashboardHeader";
 import PorterYAMLErrorsModal from "../components/PorterYAMLErrorsModal";
+import { PorterYAMLErrors } from "../errors";
+import { deployments, pull_requests } from "../mocks";
+import { Environment, type PRDeployment, type PullRequest } from "../types";
+import { getPRDeploymentList, validatePorterYAML } from "../utils";
+import DeploymentCard from "./DeploymentCard";
 
 const AvailableStatusFilters = [
   "all",
@@ -32,7 +34,7 @@ const AvailableStatusFilters = [
   "updating",
 ];
 
-type AvailableStatusFiltersType = typeof AvailableStatusFilters[number];
+type AvailableStatusFiltersType = (typeof AvailableStatusFilters)[number];
 
 const DeploymentList = () => {
   const [sortOrder, setSortOrder] = useState("Newest");
@@ -47,14 +49,11 @@ const DeploymentList = () => {
     string[]
   >([]);
 
-  const [
-    statusSelectorVal,
-    setStatusSelectorVal,
-  ] = useState<AvailableStatusFiltersType>("all");
+  const [statusSelectorVal, setStatusSelectorVal] =
+    useState<AvailableStatusFiltersType>("all");
 
-  const { currentProject, currentCluster, setCurrentError } = useContext(
-    Context
-  );
+  const { currentProject, currentCluster, setCurrentError } =
+    useContext(Context);
   const { getQueryParam, pushQueryParams } = useRouting();
   const location = useLocation();
   const history = useHistory();
@@ -66,8 +65,8 @@ const DeploymentList = () => {
 
   const selectedRepo = `${repo_owner}/${repo_name}`;
 
-  const getEnvironment = () => {
-    return api.getEnvironment(
+  const getEnvironment = async () => {
+    return await api.getEnvironment(
       "<token>",
       {},
       {
@@ -241,7 +240,7 @@ const DeploymentList = () => {
       return (
         <Placeholder height="calc(100vh - 400px)">
           No preview developments have been found. Open a PR to create a new
-          preview app.
+          preview environment.
         </Placeholder>
       );
     }
@@ -279,7 +278,9 @@ const DeploymentList = () => {
     <>
       <PorterYAMLErrorsModal
         errors={expandedPorterYAMLErrors}
-        onClose={() => setExpandedPorterYAMLErrors([])}
+        onClose={() => {
+          setExpandedPorterYAMLErrors([]);
+        }}
         repo={selectedRepo}
       />
 
@@ -380,15 +381,13 @@ const DeploymentList = () => {
 
 export default DeploymentList;
 
-const mockRequest = () =>
-  new Promise((res) => {
-    setTimeout(
-      () =>
-        res({
-          data: { deployments: deployments, pull_requests: pull_requests },
-        }),
-      1000
-    );
+const mockRequest = async () =>
+  await new Promise((res) => {
+    setTimeout(() => {
+      res({
+        data: { deployments, pull_requests },
+      });
+    }, 1000);
   });
 
 const LoadingWrapper = styled.div`

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/EnvTemplateContextProvider.tsx

@@ -15,7 +15,11 @@ import { z } from "zod";
 
 import { Error as ErrorComponent } from "components/porter/Error";
 import { clientAddonToProto, clientAddonValidator } from "lib/addons";
-import { basePorterAppFormValidator, clientAppToProto } from "lib/porter-apps";
+import {
+  APP_CREATE_FORM_DEFAULTS,
+  basePorterAppFormValidator,
+  clientAppToProto,
+} from "lib/porter-apps";
 
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -95,33 +99,7 @@ export const EnvTemplateContextProvider: React.FC<{
     reValidateMode: "onSubmit",
     resolver: zodResolver(appTemplateClientValidator),
     defaultValues: {
-      app: {
-        name: {
-          value: "",
-          readOnly: false,
-        },
-        build: {
-          method: "pack",
-          context: "./",
-          builder: "",
-          buildpacks: [],
-        },
-        env: [],
-        efsStorage: {
-          enabled: false,
-        },
-      },
-      source: {
-        git_repo_name: "",
-        git_branch: "",
-        porter_yaml_path: "",
-      },
-      deletions: {
-        serviceNames: [],
-        envGroupNames: [],
-        predeploy: [],
-        initialDeploy: [],
-      },
+      ...APP_CREATE_FORM_DEFAULTS,
       addons: [],
     },
   });

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx

@@ -56,7 +56,7 @@ const PreviewEnvs: React.FC = () => {
       return (
         <DashboardPlaceholder>
           <Text size={16}>
-            Preview apps are coming soon to the Porter Cloud
+            Preview environments are coming soon to the Porter Cloud
           </Text>
           <Spacer y={0.5} />
           <Text color={"helper"}>
@@ -76,15 +76,18 @@ const PreviewEnvs: React.FC = () => {
     if (!currentProject?.preview_envs_enabled) {
       return (
         <DashboardPlaceholder>
-          <Text size={16}>Preview apps are not enabled for this project</Text>
+          <Text size={16}>
+            Preview environments are not enabled for this project
+          </Text>
           <Spacer y={0.5} />
           <Text color={"helper"}>
-            Reach out to the Porter team to enable preview apps on your project.
+            Reach out to the Porter team to enable preview environments on your
+            project.
           </Text>
           <Spacer y={1} />
           <ShowIntercomButton
             alt
-            message="I would like to enable preview apps on my project"
+            message="I would like to enable preview environments on my project"
             height="35px"
           >
             Request to enable
@@ -122,13 +125,13 @@ const PreviewEnvs: React.FC = () => {
         image={prGrad}
         title={
           <Container row>
-            Preview apps
+            Preview environments
             <Spacer inline x={1} />
             <Badge>Beta</Badge>
           </Container>
         }
         capitalize={false}
-        description="Preview apps are created for each pull request. They are automatically deleted when the pull request is closed."
+        description="Preview environments are created for each pull request. They are automatically deleted when the pull request is closed."
         disableLineBreak
       />
       {renderContents()}

dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/Addons.tsx

@@ -24,9 +24,9 @@ export const Addons: React.FC<Props> = ({ buttonStatus }) => {
       <Text size={16}>Add-ons</Text>
       <Spacer y={0.5} />
       <Text color="helper">
-        Include any add-ons you would like to be created with your preview app.
-        These are also ephemeral and will only be accessible for the lifetime of
-        the preview app.
+        Include any add-ons you would like to be created with your preview
+        environment. These are also ephemeral and will only be accessible for
+        the lifetime of the preview environment.
       </Text>
       <Spacer y={0.5} />
       <AddonsList />