Skip to content

Commit

Permalink
add back name to dependency dir and fix linter (#3919)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianedwards
ianedwards authored Nov 2, 2023
1 parent 4a343af commit 40391d4
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 83 deletions.
14 changes: 13 additions & 1 deletion dashboard/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,18 @@
}
],
"@typesecript-eslint/consistent-type-imports": "off",
"@typescript-eslint/strict-boolean-expressions": "off"
"@typescript-eslint/strict-boolean-expressions": "off",
"@typescript-eslint/no-misused-promises": [
"error",
{
"checksVoidReturn": false
}
],
"@typescript-eslint/no-floating-promises": [
"error",
{
"ignoreVoid": true
}
]
}
}
170 changes: 88 additions & 82 deletions dashboard/src/main/home/app-dashboard/create-app/CreateApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,57 @@
import React, { useCallback, useContext, useEffect, useMemo } from "react";
import { RouteComponentProps, withRouter } from "react-router";
import web from "assets/web.png";
import AnimateHeight from "react-animate-height";
import axios from "axios";
import { zodResolver } from "@hookform/resolvers/zod";

import { type PorterApp } from "@porter-dev/api-contracts";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import AnimateHeight from "react-animate-height";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { withRouter, type RouteComponentProps } from "react-router";
import styled from "styled-components";
import { useForm, Controller, FormProvider } from "react-hook-form";
import { z } from "zod";

import Back from "components/porter/Back";
import VerticalSteps from "components/porter/VerticalSteps";
import Text from "components/porter/Text";
import Spacer from "components/porter/Spacer";
import Button from "components/porter/Button";
import Container from "components/porter/Container";
import { ControlledInput } from "components/porter/ControlledInput";
import Error from "components/porter/Error";
import Link from "components/porter/Link";

import { Context } from "shared/Context";
import Spacer from "components/porter/Spacer";
import Text from "components/porter/Text";
import VerticalSteps from "components/porter/VerticalSteps";
import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
import { useAppAnalytics } from "lib/hooks/useAppAnalytics";
import { useAppValidation } from "lib/hooks/useAppValidation";
import { useDefaultDeploymentTarget } from "lib/hooks/useDeploymentTarget";
import { useIntercom } from "lib/hooks/useIntercom";
import { usePorterYaml } from "lib/hooks/usePorterYaml";
import {
PorterAppFormData,
SourceOptions,
porterAppFormValidator,
clientAppValidator,
type PorterAppFormData,
type SourceOptions,
} from "lib/porter-apps";
import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
import SourceSelector from "../new-app-flow/SourceSelector";
import Button from "components/porter/Button";
import RepoSettings from "./RepoSettings";
import Container from "components/porter/Container";
import ServiceList from "../validate-apply/services-settings/ServiceList";
import {
defaultSerialized,
deserializeService,
} from "lib/porter-apps/services";
import { usePorterYaml } from "lib/hooks/usePorterYaml";
import { valueExists } from "shared/util";

import api from "shared/api";
import { PorterApp } from "@porter-dev/api-contracts";
import { useClusterResources } from "shared/ClusterResourcesContext";
import { Context } from "shared/Context";
import { valueExists } from "shared/util";
import web from "assets/web.png";
import ImageSettings from "../image-settings/ImageSettings";
import GithubActionModal from "../new-app-flow/GithubActionModal";
import { useDefaultDeploymentTarget } from "lib/hooks/useDeploymentTarget";
import Error from "components/porter/Error";
import { useAppAnalytics } from "lib/hooks/useAppAnalytics";
import { useAppValidation } from "lib/hooks/useAppValidation";
import { useQuery } from "@tanstack/react-query";
import { z } from "zod";
import SourceSelector from "../new-app-flow/SourceSelector";
import EnvSettings from "../validate-apply/app-settings/EnvSettings";
import {
PopulatedEnvGroup,
populatedEnvGroup,
type PopulatedEnvGroup,
} from "../validate-apply/app-settings/types";
import EnvSettings from "../validate-apply/app-settings/EnvSettings";
import ImageSettings from "../image-settings/ImageSettings";
import { useClusterResources } from "shared/ClusterResourcesContext";
import ServiceList from "../validate-apply/services-settings/ServiceList";
import PorterYamlModal from "./PorterYamlModal";
import { useIntercom } from "lib/hooks/useIntercom";
import RepoSettings from "./RepoSettings";

type CreateAppProps = {} & RouteComponentProps;
type CreateAppProps = RouteComponentProps;

const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
const { currentProject, currentCluster } = useContext(Context);
Expand All @@ -73,10 +72,8 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {

const { showIntercomWithMessage } = useIntercom();

const [
validatedAppProto,
setValidatedAppProto,
] = React.useState<PorterApp | null>(null);
const [validatedAppProto, setValidatedAppProto] =
React.useState<PorterApp | null>(null);
const [isDeploying, setIsDeploying] = React.useState(false);
const [deployError, setDeployError] = React.useState("");
const [{ variables, secrets }, setFinalizedAppEnv] = React.useState<{
Expand All @@ -91,7 +88,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
["getPorterApps", currentProject?.id, currentCluster?.id],
async () => {
if (!currentProject?.id || !currentCluster?.id) {
return Promise.resolve([]);
return await Promise.resolve([]);
}

const res = await api.getPorterApps(
Expand Down Expand Up @@ -131,13 +128,13 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
}
);

const { environment_groups } = await z
const { environment_groups: environmentGroups } = await z
.object({
environment_groups: z.array(populatedEnvGroup).default([]),
})
.parseAsync(res.data);

return environment_groups;
return environmentGroups;
}
);

Expand All @@ -159,7 +156,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
env: [],
efsStorage: {
enabled: false,
}
},
},
source: {
git_repo_name: "",
Expand Down Expand Up @@ -207,7 +204,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
});
const { currentClusterResources } = useClusterResources();

const resetAllExceptName = () => {
const resetAllExceptName = (): void => {
setIsNameHighlight(true);

// Get the current name value before the reset
Expand Down Expand Up @@ -262,7 +259,10 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
}) => {
setIsDeploying(true);
// log analytics event that we started form submission
updateAppStep({ step: "stack-launch-complete", appName: name.value });
void updateAppStep({
step: "stack-launch-complete",
appName: name.value,
});

try {
if (!currentProject?.id || !currentCluster?.id) {
Expand All @@ -278,7 +278,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
{
...source,
name: app.name,
deployment_target_id: deploymentTarget.deployment_target_id
deployment_target_id: deploymentTarget.deployment_target_id,
},
{
project_id: currentProject.id,
Expand All @@ -302,7 +302,10 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
);

// log analytics event that we successfully deployed
updateAppStep({ step: "stack-launch-success", appName: name.value });
void updateAppStep({
step: "stack-launch-success",
appName: name.value,
});

if (source.type === "docker-registry") {
history.push(`/apps/${app.name}`);
Expand All @@ -315,7 +318,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
});

if (axios.isAxiosError(err) && err.response?.data?.error) {
updateAppStep({
void updateAppStep({
step: "stack-launch-failure",
errorMessage: err.response?.data?.error,
appName: name.value,
Expand All @@ -326,7 +329,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {

const msg =
"An error occurred while deploying your application. Please try again.";
updateAppStep({
void updateAppStep({
step: "stack-launch-failure",
errorMessage: msg,
appName: name.value,
Expand All @@ -337,7 +340,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
setIsDeploying(false);
}
},
[currentProject?.id, currentCluster?.id, deploymentTarget]
[currentProject?.id, currentCluster?.id, deploymentTarget, name.value]
);

useEffect(() => {
Expand All @@ -358,7 +361,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {

// set step to 2 if source is filled out
if (source?.type && source.type === "docker-registry") {
if (image && image.tag) {
if (image?.tag) {
setStep((prev) => Math.max(prev, 2));
}
}
Expand Down Expand Up @@ -412,16 +415,14 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
message: "I am running into an issue launching an application.",
});

updateAppStep({
void updateAppStep({
step: "stack-launch-failure",
errorMessage: `Form validation error: ${errorMessage}`,
appName: name.value,
});

return <Error message={errorMessage} maxWidth="600px" />;
}

return;
}, [isValidating, isDeploying, deployError, errors]);

const submitDisabled = useMemo(() => {
Expand Down Expand Up @@ -520,7 +521,7 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
<Text size={16}>Application name</Text>
<Spacer y={0.5} />
<Text color={isNameHighlight ? "#FFCC00" : "helper"}>
Lowercase letters, numbers, and "-" only.
Lowercase letters, numbers, and &quot;-&quot; only.
</Text>
<Spacer y={0.5} />
<ControlledInput
Expand Down Expand Up @@ -580,11 +581,11 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
control={control}
render={({ field: { onChange, value } }) => (
<PorterYamlModal
close={() =>
close={() => {
setUserHasSeenNoPorterYamlFoundModal(
true
)
}
);
}}
setPorterYamlPath={(porterYamlPath) => {
onChange(porterYamlPath);
}}
Expand All @@ -607,23 +608,23 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
<ImageSettings
projectId={currentProject.id}
imageUri={image?.repository ?? ""}
setImageUri={(uri: string) =>
setImageUri={(uri: string) => {
setValue("source.image", {
...image,
repository: uri,
})
}
});
}}
imageTag={image?.tag ?? ""}
setImageTag={(tag: string) =>
setValue("source.image", { ...image, tag })
}
resetImageInfo={() =>
setImageTag={(tag: string) => {
setValue("source.image", { ...image, tag });
}}
resetImageInfo={() => {
setValue("source.image", {
...image,
repository: "",
tag: "",
})
}
});
}}
/>
)
) : null}
Expand All @@ -649,8 +650,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>
Expand Down Expand Up @@ -696,15 +698,17 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
/>
</>
),
<Button
type="submit"
status={submitBtnStatus}
loadingText={"Deploying..."}
width={"120px"}
disabled={submitDisabled}
>
Deploy app
</Button>,
<>
<Button
type="submit"
status={submitBtnStatus}
loadingText={"Deploying..."}
width={"120px"}
disabled={submitDisabled}
>
Deploy app
</Button>
</>,
].filter((x) => x)}
/>
</form>
Expand All @@ -714,16 +718,18 @@ const CreateApp: React.FC<CreateAppProps> = ({ history }) => {
</Div>
{showGHAModal && source?.type === "github" && (
<GithubActionModal
closeModal={() => setShowGHAModal(false)}
closeModal={() => {
setShowGHAModal(false);
}}
githubAppInstallationID={source.git_repo_id}
githubRepoOwner={source.git_repo_name.split("/")[0]}
githubRepoName={source.git_repo_name.split("/")[1]}
branch={source.git_branch}
stackName={name.value}
projectId={currentProject.id}
clusterId={currentCluster.id}
deployPorterApp={() =>
createAndApply({
deployPorterApp={async () =>
await createAndApply({
app: validatedAppProto,
source,
variables,
Expand Down Expand Up @@ -783,7 +789,7 @@ const AppearingDiv = styled.div<{ color?: string }>`
animation-fill-mode: forwards;
display: flex;
align-items: center;
color: ${(props) => props.color || "#ffffff44"};
color: ${(props) => props.color ?? "#ffffff44"};
margin-left: 10px;
@keyframes floatIn {
from {
Expand Down

0 comments on commit 40391d4

Please sign in to comment.