From c29e331f6d014d47ef6dd759034be965c7821920 Mon Sep 17 00:00:00 2001 From: Ian Edwards Date: Wed, 15 May 2024 17:21:58 -0400 Subject: [PATCH] rename to envs --- dashboard/src/lib/porter-apps/index.ts | 30 ++++++++ .../src/main/home/app-dashboard/apps/Apps.tsx | 2 +- .../app-dashboard/create-app/CreateApp.tsx | 64 ++++++----------- .../deployments/DeploymentList.tsx | 69 +++++++++---------- .../v2/EnvTemplateContextProvider.tsx | 34 ++------- .../preview-environments/v2/PreviewEnvs.tsx | 15 ++-- .../v2/setup-app/Addons.tsx | 6 +- .../v2/setup-app/CreateTemplate.tsx | 6 +- .../v2/setup-app/SetupApp.tsx | 4 +- dashboard/src/main/home/sidebar/Sidebar.tsx | 4 +- 10 files changed, 111 insertions(+), 123 deletions(-) diff --git a/dashboard/src/lib/porter-apps/index.ts b/dashboard/src/lib/porter-apps/index.ts index e99099816b..cec14f6dc2 100644 --- a/dashboard/src/lib/porter-apps/index.ts +++ b/dashboard/src/lib/porter-apps/index.ts @@ -193,6 +193,36 @@ export const porterAppFormValidator = basePorterAppFormValidator ); export type PorterAppFormData = z.infer; +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({ diff --git a/dashboard/src/main/home/app-dashboard/apps/Apps.tsx b/dashboard/src/main/home/app-dashboard/apps/Apps.tsx index df8613f938..79ddc3a547 100644 --- a/dashboard/src/main/home/app-dashboard/apps/Apps.tsx +++ b/dashboard/src/main/home/app-dashboard/apps/Apps.tsx @@ -346,7 +346,7 @@ const Apps: React.FC = () => { }} >
- {currentDeploymentTarget?.namespace ?? "Preview Apps"} + {currentDeploymentTarget?.namespace ?? "Preview Environments"}
Preview diff --git a/dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx b/dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx index fa7be5a6f0..0690ef9726 100644 --- a/dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx +++ b/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 = ({ history }) => { const porterAppFormMethods = useForm({ 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 = ({ 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 = ({ history }) => { 0 + porterAppFormMethods.getValues("app.name.value") + .length > 0 ? "#FFCC00" : "helper" } @@ -682,8 +655,9 @@ const CreateApp: React.FC = ({ 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.`} @@ -778,16 +752,18 @@ const CreateApp: React.FC = ({ history }) => { }} /> )} - {currentProject?.sandbox_enabled && currentProject?.billing_enabled && !hasPaymentEnabled && ( - { - history.push("/apps"); - }} - onCreate={async () => { - history.push("/apps/new/app"); - }} - /> - )} + {currentProject?.sandbox_enabled && + currentProject?.billing_enabled && + !hasPaymentEnabled && ( + { + history.push("/apps"); + }} + onCreate={async () => { + history.push("/apps/new/app"); + }} + /> + )} ); }; diff --git a/dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentList.tsx b/dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentList.tsx index 5ce5ad8ad8..799cffec2a 100644 --- a/dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/DeploymentList.tsx +++ b/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("all"); + const [statusSelectorVal, setStatusSelectorVal] = + useState("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( "", {}, { @@ -241,7 +240,7 @@ const DeploymentList = () => { return ( No preview developments have been found. Open a PR to create a new - preview app. + preview environment. ); } @@ -279,7 +278,9 @@ const DeploymentList = () => { <> 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` diff --git a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/EnvTemplateContextProvider.tsx b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/EnvTemplateContextProvider.tsx index 33f0d145be..32adb33e25 100644 --- a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/EnvTemplateContextProvider.tsx +++ b/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: [], }, }); diff --git a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx index f491b29dc4..25cb37d2a0 100644 --- a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx +++ b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/PreviewEnvs.tsx @@ -56,7 +56,7 @@ const PreviewEnvs: React.FC = () => { return ( - Preview apps are coming soon to the Porter Cloud + Preview environments are coming soon to the Porter Cloud @@ -76,15 +76,18 @@ const PreviewEnvs: React.FC = () => { if (!currentProject?.preview_envs_enabled) { return ( - Preview apps are not enabled for this project + + Preview environments are not enabled for this project + - 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. Request to enable @@ -122,13 +125,13 @@ const PreviewEnvs: React.FC = () => { image={prGrad} title={ - Preview apps + Preview environments Beta } 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()} diff --git a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/Addons.tsx b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/Addons.tsx index 1d2f5c6de5..e35bc4ebca 100644 --- a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/Addons.tsx +++ b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/Addons.tsx @@ -24,9 +24,9 @@ export const Addons: React.FC = ({ buttonStatus }) => { Add-ons - 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. diff --git a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/CreateTemplate.tsx b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/CreateTemplate.tsx index 1fdecf0ad3..447b12cbfa 100644 --- a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/CreateTemplate.tsx +++ b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/CreateTemplate.tsx @@ -102,7 +102,7 @@ export const CreateTemplate: React.FC = () => { return ( <> - + } title="Create a new preview template" @@ -127,7 +127,8 @@ export const CreateTemplate: React.FC = () => { Datastore Addons - Ephemeral datastores will be created for each preview app + Ephemeral datastores will be created for each preview + environment @@ -189,6 +190,7 @@ export const CreateTemplate: React.FC = () => { , ].filter((x) => x)} /> + ); diff --git a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/SetupApp.tsx b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/SetupApp.tsx index 95dd6991e3..446214460b 100644 --- a/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/SetupApp.tsx +++ b/dashboard/src/main/home/cluster-dashboard/preview-environments/v2/setup-app/SetupApp.tsx @@ -101,8 +101,8 @@ const SetupApp: React.FC = ({ location }) => { } - title={`Preview apps for ${appName}`} - description="Set preview specific configuration for this app below. Any newly created preview apps will use these settings." + title={`Preview environments for ${appName}`} + description="Set preview specific configuration for this app below. Any newly created preview environments will use these settings." capitalize={false} disableLineBreak /> diff --git a/dashboard/src/main/home/sidebar/Sidebar.tsx b/dashboard/src/main/home/sidebar/Sidebar.tsx index f7fc2592b6..abb167ce1d 100644 --- a/dashboard/src/main/home/sidebar/Sidebar.tsx +++ b/dashboard/src/main/home/sidebar/Sidebar.tsx @@ -276,7 +276,7 @@ class Sidebar extends Component { - Preview apps + Preview environments {(currentProject.sandbox_enabled || !currentProject.preview_envs_enabled) && ( @@ -374,7 +374,7 @@ class Sidebar extends Component { - Preview apps + Preview environments {!currentProject.preview_envs_enabled && Beta}