[POR-1834] [POR-1912] misc build settings refactoring in v2 (#3815)

dashboard/src/components/porter/Select.tsx

@@ -5,6 +5,7 @@ type Props = {
   width?: string;
   options: { label: string; value: string }[];
   label?: string | React.ReactNode;
+  labelColor?: string;
   height?: string;
   error?: string;
   children?: React.ReactNode;
@@ -17,6 +18,7 @@ const Select: React.FC<Props> = ({
   width,
   options,
   label,
+  labelColor,
   height,
   error,
   children,
@@ -26,7 +28,7 @@ const Select: React.FC<Props> = ({
 }) => {
   return (
     <Block width={width}>
-      {label && <Label>{label}</Label>}
+      {label && <Label color={labelColor}>{label}</Label>}
       <SelectWrapper>
         <i className="material-icons">arrow_drop_down</i>
         <StyledSelect
@@ -69,9 +71,9 @@ const Block = styled.div<{
   width: ${(props) => props.width || "200px"};
 `;
 
-const Label = styled.div`
+const Label = styled.div<{color?: string}>`
   font-size: 13px;
-  color: #aaaabb;
+  color: ${({color = "#aaaabb"}) => color};
   margin-bottom: 10px;
 `;
 

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

@@ -94,9 +94,12 @@ const RepoSettings: React.FC<Props> = ({
     <div>
       <Text size={16}>Build settings</Text>
       <Spacer y={0.5} />
-      <Text color="helper">Specify your GitHub repository.</Text>
-      <Spacer y={0.5} />
-
+      {!appExists && 
+        <>
+          <Text color="helper">Specify your GitHub repository.</Text>
+          <Spacer y={0.5} />
+        </>
+      } 
       {!source.git_repo_name && (
         <Controller
           name="source.git_repo_name"
@@ -117,12 +120,11 @@ const RepoSettings: React.FC<Props> = ({
                 />
               </ExpandedWrapper>
               <DarkMatter antiHeight="-4px" />
-              <Spacer y={0.3} />
+              <Spacer y={0.5} />
             </>
           )}
         />
       )}
-
       {!!source.git_repo_name && (
         <>
           <Input
@@ -156,8 +158,12 @@ const RepoSettings: React.FC<Props> = ({
             </>
           )}
           <Spacer y={0.5} />
-          <Text color="helper">Specify your GitHub branch.</Text>
-          <Spacer y={0.5} />
+          {!appExists && 
+            <>
+              <Text color="helper">Specify your GitHub branch.</Text>
+              <Spacer y={0.5} />
+            </>
+          }
           {!source.git_branch && (
             <Controller
               name="source.git_branch"
@@ -205,13 +211,18 @@ const RepoSettings: React.FC<Props> = ({
                 </>
               }
               <Spacer y={0.5} />
-              <Text color="helper">Specify your application root path.</Text>
-              <Spacer y={0.5} />
+              {!appExists &&
+                <>
+                  <Text color="helper">Specify your application root path.</Text>
+                  <Spacer y={0.5} />
+                </>
+              }
               <ControlledInput
                 placeholder="ex: ./"
                 width="100%"
                 type="text"
                 {...register("app.build.context")}
+                label={"Application root path:"}
               />
               <Spacer y={1} />
               {isLoading && !appExists ?
@@ -263,6 +274,7 @@ const RepoSettings: React.FC<Props> = ({
                           }
                         }}
                         label="Build method"
+                        labelColor="#DFDFE1"
                       />
                     )}
                   />
@@ -284,12 +296,15 @@ const RepoSettings: React.FC<Props> = ({
                       </>
                     ))
                     .with({ method: "pack" }, (b) => (
-                      <BuildpackSettings
-                        projectId={projectId}
-                        build={b}
-                        source={source}
-                        populateBuildValuesOnceAfterDetection={!appExists}
-                      />
+                      <>
+                        <Spacer y={0.5} />
+                        <BuildpackSettings
+                          projectId={projectId}
+                          build={b}
+                          source={source}
+                          populateBuildValuesOnceAfterDetection={!appExists}
+                        />
+                      </>
                     ))
                     .exhaustive()}
                 </StyledSourceBox>
@@ -343,7 +358,7 @@ const BackButton = styled.div`
 `;
 
 const StyledAdvancedBuildSettings = styled.div`
-  color: ${({ showSettings }) => (showSettings ? "white" : "#aaaabb")};
+  color: ${({ showSettings }) => (showSettings ? "#DFDFE1" : "#aaaabb")};
   background: ${({ theme }) => theme.fg};
   border: 1px solid #494b4f;
   :hover {

dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackConfigurationModal.tsx

@@ -3,14 +3,11 @@ import Text from "components/porter/Text";
 import React from "react";
 import BuildpackList from "./BuildpackList";
 import AddCustomBuildpackComponent from "./AddCustomBuildpack";
-import Icon from "components/porter/Icon";
 import Button from "components/porter/Button";
 import Modal from "components/porter/Modal";
 import styled from "styled-components";
-import Select from "components/porter/Select";
-import stars from "assets/stars-white.svg";
 import { Buildpack } from "main/home/app-dashboard/types/buildpack";
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import {  useFieldArray, useFormContext } from "react-hook-form";
 import { PorterAppFormData } from "lib/porter-apps";
 import { BuildOptions } from "lib/porter-apps/build";
 
@@ -19,7 +16,6 @@ type Props = {
     method: "pack";
   };
   closeModal: () => void;
-  sortedStackOptions: { value: string; label: string }[];
   availableBuildpacks: Buildpack[];
   setAvailableBuildpacks: (buildpacks: Buildpack[]) => void;
   isDetectingBuildpacks: boolean;
@@ -29,7 +25,6 @@ type Props = {
 const BuildpackConfigurationModal: React.FC<Props> = ({
   build,
   closeModal,
-  sortedStackOptions,
   availableBuildpacks,
   setAvailableBuildpacks,
   isDetectingBuildpacks,
@@ -44,28 +39,7 @@ const BuildpackConfigurationModal: React.FC<Props> = ({
   return (
     <Modal closeModal={closeModal}>
       <Text size={16}>Buildpack Configuration</Text>
-      <Spacer y={1} />
       <Scrollable>
-        <Text>Builder:</Text>
-        {!!build.builder && (
-          <Controller
-            control={control}
-            name="app.build.builder"
-            render={({ field: { onChange } }) => (
-              <>
-                <Spacer y={0.5} />
-                <Select
-                  value={build.builder}
-                  width="300px"
-                  options={sortedStackOptions}
-                  setValue={(val) => {
-                    onChange(val);
-                  }}
-                />
-              </>
-            )}
-          />
-        )}
         <BuildpackList
           build={build}
           availableBuildpacks={availableBuildpacks}
@@ -87,8 +61,17 @@ const BuildpackConfigurationModal: React.FC<Props> = ({
           onAdd={(bp) => {
             append(bp);
           }}
-        />
+        />        
+        <Spacer y={2} />
       </Scrollable>
+      <Footer>
+        <Shade />
+        <FooterButtons>
+          <Button onClick={closeModal} width={"75px"}>
+            Close
+          </Button>
+        </FooterButtons>
+      </Footer>
     </Modal>
   );
 };

dashboard/src/main/home/app-dashboard/validate-apply/build-settings/buildpacks/BuildpackSettings.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
 import styled, { keyframes } from "styled-components";
-import Helper from "components/form-components/Helper";
 import Error from "components/porter/Error";
 import { useQuery } from "@tanstack/react-query";
 import api from "shared/api";
@@ -16,9 +15,11 @@ import Spacer from "components/porter/Spacer";
 import Button from "components/porter/Button";
 import BuildpackList from "./BuildpackList";
 import BuildpackConfigurationModal from "./BuildpackConfigurationModal";
-import { useFieldArray, useFormContext } from "react-hook-form";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { PorterAppFormData, SourceOptions } from "lib/porter-apps";
 import { BuildOptions } from "lib/porter-apps/build";
+import Select from "components/porter/Select";
+import Text from "components/porter/Text";
 
 type Props = {
   projectId: number;
@@ -98,7 +99,7 @@ const BuildpackSettings: React.FC<Props> = ({
       status === "error"
         ? `Unable to detect buildpacks at path: ${build.context}. Please make sure your repo, branch, and application root path are all set correctly and attempt to detect again.`
         : "",
-    [build.context]
+    [build.context, status]
   );
 
   const builderOptions = useMemo(() => {
@@ -159,12 +160,40 @@ const BuildpackSettings: React.FC<Props> = ({
 
   return (
     <BuildpackConfigurationContainer>
+      {!!build.builder && (
+        <Controller
+          control={control}
+          name="app.build.builder"
+          render={({ field: { onChange } }) => (
+            <>
+              <Select
+                value={build.builder}
+                width="300px"
+                options={builderOptions}
+                setValue={(val) => {
+                  onChange(val);
+                }}
+                label={"Builder"}
+                labelColor="#DFDFE1"
+              />
+            </>
+          )}
+        />
+      )}
+      <Spacer y={0.5} />
+      <Text>Buildpacks</Text>
       {build.buildpacks.length > 0 && (
         <>
-          <Helper>
-            The following buildpacks were automatically detected. You can also
-            manually add, remove, or re-order buildpacks here.
-          </Helper>
+          <Spacer y={0.5} />
+          {populateBuildValuesOnceAfterDetection && 
+            <>
+              <Text color="helper">
+                The following buildpacks were detected at your application's root path. You can also
+                manually add, remove, or re-order buildpacks here.
+              </Text>
+              <Spacer y={0.5} />
+            </>
+          }
           <BuildpackList
             build={build}
             availableBuildpacks={availableBuildpacks}
@@ -176,6 +205,14 @@ const BuildpackSettings: React.FC<Props> = ({
           />
         </>
       )}
+      {build.buildpacks.length === 0 && !errorMessage && (
+        <>
+          <Spacer y={0.5} />
+          <Text color="helper">
+            No buildpacks have been specified. Click the button below to add buildpacks detected at your application's root path.
+          </Text>
+        </>
+      )}
       {errorMessage && (
         <>
           <Spacer y={1} />
@@ -198,7 +235,6 @@ const BuildpackSettings: React.FC<Props> = ({
           closeModal={() => {
             setIsModalOpen(false);
           }}
-          sortedStackOptions={builderOptions}
           availableBuildpacks={availableBuildpacks}
           setAvailableBuildpacks={setAvailableBuildpacks}
           isDetectingBuildpacks={status === "loading"}