diff --git a/dashboard/src/lib/porter-apps/index.ts b/dashboard/src/lib/porter-apps/index.ts
index bc273086f0..61ec52c117 100644
--- a/dashboard/src/lib/porter-apps/index.ts
+++ b/dashboard/src/lib/porter-apps/index.ts
@@ -265,7 +265,7 @@ const clientBuildFromProto = (proto?: Build): BuildOptions | undefined => {
method: b.method,
context: b.context,
buildpacks: b.buildpacks.map((b) => ({
- name: BUILDPACK_TO_NAME[b],
+ name: BUILDPACK_TO_NAME[b] ?? b,
buildpack: b,
})),
builder: b.builder,
diff --git a/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx b/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx
index a7ce4ffaa5..3a05d12f23 100644
--- a/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx
+++ b/dashboard/src/main/home/app-dashboard/app-view/AppDataContainer.tsx
@@ -13,10 +13,7 @@ import TabSelector from "components/TabSelector";
import { useHistory } from "react-router";
import { match } from "ts-pattern";
import Overview from "./tabs/Overview";
-import {
- AppValidationResult,
- useAppValidation,
-} from "lib/hooks/useAppValidation";
+import { useAppValidation } from "lib/hooks/useAppValidation";
import api from "shared/api";
import { useQueryClient } from "@tanstack/react-query";
import Settings from "./tabs/Settings";
diff --git a/dashboard/src/main/home/app-dashboard/app-view/tabs/BuildSettings.tsx b/dashboard/src/main/home/app-dashboard/app-view/tabs/BuildSettings.tsx
index 5b20ff0397..8399d1445f 100644
--- a/dashboard/src/main/home/app-dashboard/app-view/tabs/BuildSettings.tsx
+++ b/dashboard/src/main/home/app-dashboard/app-view/tabs/BuildSettings.tsx
@@ -23,6 +23,8 @@ const BuildSettings: React.FC = () => {
}
if (Object.keys(errors).length > 0) {
+ // TODO: remove console.log once rollout is stable
+ console.log(errors);
return ;
}
diff --git a/dashboard/src/main/home/app-dashboard/create-app/RepoSettings.tsx b/dashboard/src/main/home/app-dashboard/create-app/RepoSettings.tsx
index c817a394e5..3231a771a3 100644
--- a/dashboard/src/main/home/app-dashboard/create-app/RepoSettings.tsx
+++ b/dashboard/src/main/home/app-dashboard/create-app/RepoSettings.tsx
@@ -127,7 +127,7 @@ const RepoSettings: React.FC = ({
label="GitHub repository:"
width="100%"
value={source.git_repo_name}
- setValue={() => {}}
+ setValue={() => { }}
placeholder=""
/>
{!appExists && (
@@ -176,7 +176,7 @@ const RepoSettings: React.FC = ({
type="text"
width="100%"
value={source.git_branch}
- setValue={() => {}}
+ setValue={() => { }}
placeholder=""
/>
= ({
projectId={projectId}
build={b}
source={source}
- autoDetectionDisabled={appExists}
+ populateBuildValuesOnceAfterDetection={!appExists}
/>
))
.exhaustive()}
@@ -345,7 +345,7 @@ const StyledAdvancedBuildSettings = styled.div`
cursor: pointer;
border-radius: 20px;
transform: ${(props: { showSettings: boolean; isCurrent: boolean }) =>
- props.showSettings ? "" : "rotate(-90deg)"};
+ props.showSettings ? "" : "rotate(-90deg)"};
}
`;
diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackConfigurationModal.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackConfigurationModal.tsx
index 2e26f80717..6945cbeee7 100644
--- a/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackConfigurationModal.tsx
+++ b/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackConfigurationModal.tsx
@@ -35,7 +35,6 @@ const BuildpackConfigurationModal: React.FC = ({
setAvailableBuildpacks,
isDetectingBuildpacks,
detectBuildpacksError,
- detectAndSetBuildPacks,
}) => {
const { control } = useFormContext();
const { append } = useFieldArray({
@@ -49,15 +48,6 @@ const BuildpackConfigurationModal: React.FC = ({
Builder:
- {!build.builder && (
- <>
-
-
- No builder detected. Click 'Detect buildpacks' below to scan your
- repository for available builders and buildpacks.
-
- >
- )}
{!!build.builder && (
= ({
append(bp);
}}
/>
-
-
);
};
@@ -129,7 +105,7 @@ const Scrollable = styled.div`
const FooterButtons = styled.div`
display: flex;
- justify-content: space-between;
+ justify-content: flex-end;
`;
const Footer = styled.div`
diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackList.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackList.tsx
index 5fd0c1f66b..213534d9a1 100644
--- a/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackList.tsx
+++ b/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackList.tsx
@@ -9,6 +9,7 @@ import { Buildpack } from "main/home/app-dashboard/types/buildpack";
import { useFieldArray, useFormContext } from "react-hook-form";
import { PorterAppFormData } from "lib/porter-apps";
import { BuildOptions } from "lib/porter-apps/build";
+import Container from "components/porter/Container";
interface Props {
build: BuildOptions & {
@@ -77,7 +78,12 @@ const BuildpackList: React.FC = ({
const renderAvailableBuildpacks = () => {
if (isDetectingBuildpacks) {
- return ;
+ return (
+
+ Detecting buildpacks in your repo from path {build.context}
+
+
+ );
}
if (detectBuildpacksError) {
diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackSettings.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackSettings.tsx
index 3cca7bcf1e..a9cd0cb037 100644
--- a/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackSettings.tsx
+++ b/dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackSettings.tsx
@@ -27,21 +27,19 @@ type Props = {
method: "pack";
};
source: SourceOptions & { type: "github" };
- autoDetectionDisabled?: boolean;
+ populateBuildValuesOnceAfterDetection?: boolean;
};
const BuildpackSettings: React.FC = ({
projectId,
build,
source,
- autoDetectionDisabled,
+ populateBuildValuesOnceAfterDetection,
}) => {
- const [enableAutoDetection, setEnableAutoDetection] = useState(
- !autoDetectionDisabled
- );
- const [stackOptions, setStackOptions] = useState<
+ const [builderOptions, setBuilderOptions] = useState<
{ label: string; value: string }[]
- >([]);
+ >(build.builder ? [{ label: build.builder, value: build.builder }] : []);
+ const [populateBuild, setPopulateBuild] = useState(populateBuildValuesOnceAfterDetection ?? false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [availableBuildpacks, setAvailableBuildpacks] = useState(
[]
@@ -59,6 +57,7 @@ const BuildpackSettings: React.FC = ({
source.git_repo_name,
source.git_branch,
build.context,
+ isModalOpen,
],
async () => {
const detectBuildPackRes = await api.detectBuildpack(
@@ -83,7 +82,9 @@ const BuildpackSettings: React.FC = ({
return detectedBuildpacks;
},
{
- enabled: enableAutoDetection,
+ enabled: populateBuild || isModalOpen,
+ retry: 0,
+ refetchOnWindowFocus: false,
}
);
@@ -96,84 +97,65 @@ const BuildpackSettings: React.FC = ({
);
useEffect(() => {
- if (!enableAutoDetection) {
- // in this case, we are not detecting buildpacks, so we just populate based on the DB
- if (build.builder) {
- setValue("app.build.builder", build.builder);
- setStackOptions([{ label: build.builder, value: build.builder }]);
- }
- if (build.buildpacks.length) {
- const bps = build.buildpacks.map((bp) => ({
- name: BUILDPACK_TO_NAME[bp.buildpack] ?? bp.buildpack,
- buildpack: bp.buildpack,
- }));
- replace(bps);
- }
- } else {
- if (!data) {
- return;
- }
-
- if (data.length === 0) {
- return;
- }
- setStackOptions(
- data
- .flatMap((builder) => {
- return builder.builders.map((stack) => ({
- label: `${builder.name} - ${stack}`,
- value: stack.toLowerCase(),
- }));
- })
- .sort((a, b) => {
- if (a.label < b.label) {
- return -1;
- }
- if (a.label > b.label) {
- return 1;
- }
- return 0;
- })
- );
-
- const defaultBuilder =
- data.find(
- (builder) => builder.name.toLowerCase() === DEFAULT_BUILDER_NAME
- ) ?? data[0];
-
- const allBuildpacks = defaultBuilder.others.concat(
- defaultBuilder.detected
- );
+ if (!data || data.length === 0) {
+ return;
+ }
+ setBuilderOptions(
+ data
+ .flatMap((builder) => {
+ return builder.builders.map((stack) => ({
+ label: `${builder.name} - ${stack}`,
+ value: stack.toLowerCase(),
+ }));
+ })
+ .sort((a, b) => {
+ if (a.label < b.label) {
+ return -1;
+ }
+ if (a.label > b.label) {
+ return 1;
+ }
+ return 0;
+ })
+ );
+
+ const defaultBuilder =
+ data.find(
+ (builder) => builder.name.toLowerCase() === DEFAULT_BUILDER_NAME
+ ) ?? data[0];
+
+ const allBuildpacks = defaultBuilder.others.concat(
+ defaultBuilder.detected
+ );
+
+ setAvailableBuildpacks(
+ allBuildpacks.filter(
+ (bp) => !build.buildpacks.some((b) => b.buildpack === bp.buildpack)
+ )
+ );
+
+ if (populateBuild) {
let detectedBuilder: string;
if (
defaultBuilder.builders.length &&
defaultBuilder.builders.includes(DEFAULT_HEROKU_STACK)
) {
- setValue("app.build.builder", DEFAULT_HEROKU_STACK);
detectedBuilder = DEFAULT_HEROKU_STACK;
} else {
- setValue("app.build.builder", defaultBuilder.builders[0]);
detectedBuilder = defaultBuilder.builders[0];
}
- if (enableAutoDetection) {
- setValue("app.build.builder", detectedBuilder);
- replace(
- defaultBuilder.detected.map((bp) => ({
- name: bp.name,
- buildpack: bp.buildpack,
- }))
- );
- setAvailableBuildpacks(defaultBuilder.others);
- } else {
- setValue("app.build.builder", detectedBuilder);
- setAvailableBuildpacks(
- allBuildpacks.filter(
- (bp) => !build.buildpacks.some((b) => b.buildpack === bp.buildpack)
- )
- );
- }
+ setValue("app.build.builder", detectedBuilder);
+ // set buildpacks as well
+ replace(
+ defaultBuilder.detected.map((bp) => ({
+ name: bp.name,
+ buildpack: bp.buildpack,
+ }))
+ );
+ // we only want to change the form values once
+ setPopulateBuild(false);
}
}, [data]);
@@ -196,31 +178,29 @@ const BuildpackSettings: React.FC = ({
/>
>
)}
- {enableAutoDetection && status === "error" && (
+ {errorMessage && (
<>
>
)}
{isModalOpen && (
{
- setEnableAutoDetection(false);
setIsModalOpen(false);
}}
- sortedStackOptions={stackOptions}
+ sortedStackOptions={builderOptions}
availableBuildpacks={availableBuildpacks}
setAvailableBuildpacks={setAvailableBuildpacks}
isDetectingBuildpacks={status === "loading"}