Build Settings Tab Initial Improvements (#2903)

Co-authored-by: Soham Dessai <sohamdessai@sohams-mbp.mynetworksettings.com>

dashboard/src/components/repo-selector/BranchList.tsx

@@ -20,6 +20,13 @@ const BranchList: React.FC<Props> = ({
   actionConfig,
   currentBranch,
 }) => {
+  const sortBranches = (branches: string[]) => {
+    if (!currentBranch) return branches;
+    return [
+      currentBranch,
+      ...branches.filter((branch) => branch !== currentBranch),
+    ];
+  };
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   const [branches, setBranches] = useState<string[]>([]);
@@ -99,7 +106,7 @@ const BranchList: React.FC<Props> = ({
               .toLowerCase()
               .includes(searchFilter.toLowerCase() || "");
           })
-        : branches.slice(0, 10);
+        : sortBranches(branches).slice(0, 10);
 
     if (results.length == 0) {
       return <LoadingWrapper>No matching Branches found.</LoadingWrapper>;

dashboard/src/main/home/cluster-dashboard/expanded-chart/build-settings/BuildSettingsTab.tsx

@@ -18,6 +18,7 @@ import BranchList from "components/repo-selector/BranchList";
 import Banner from "components/Banner";
 import { UpdateBuildconfigResponse } from "./types";
 import BuildpackConfigSection from "./_BuildpackConfigSection";
+import InputRow from "components/form-components/InputRow";
 
 type Props = {
   chart: ChartTypeWithExtendedConfig;
@@ -49,6 +50,12 @@ const BuildSettingsTab: React.FC<Props> = ({
   const [currentBranch, setCurrentBranch] = useState(
     () => chart?.git_action_config?.git_branch
   );
+  const [gitHubSettingsExpanded, setGitHubSettingsExpanded] = useState(true);
+  const [envVariablesExpanded, setEnvVariablesExpanded] = useState(false);
+  const [branchSelectionExpanded, setBranchSelectionExpanded] = useState(false);
+  const [buildpackSettingsExpanded, setBuildpackSettingsExpanded] = useState(
+    false
+  );
 
   const buildpackConfigRef = useRef<{
     isLoading: boolean;
@@ -329,40 +336,126 @@ const BuildSettingsTab: React.FC<Props> = ({
           </AlertCardAction>
         </AlertCard>
       ) : null} */}
-        <Heading isAtTop>Build environment variables</Heading>
-        <KeyValueArray
-          values={envVariables}
-          envLoader
-          externalValues={{
-            namespace: chart.namespace,
-            clusterId: currentCluster.id,
-          }}
-          setValues={(values) => {
-            setEnvVariables(values);
-          }}
-        ></KeyValueArray>
-
-        <Heading>Select default branch</Heading>
-        <Helper>
-          Change the default branch the deployments will be made from.
-        </Helper>
-        <Banner>
-          You must also update the deploy branch in your GitHub Action file.
-        </Banner>
-        <BranchList
-          actionConfig={currentActionConfig}
-          setBranch={setCurrentBranch}
-          currentBranch={currentBranch}
-        />
+        <Heading isAtTop>
+          <ExpandHeader
+            onClick={() => setGitHubSettingsExpanded(!gitHubSettingsExpanded)}
+            isExpanded={!gitHubSettingsExpanded}
+          >
+            Github Settings
+            <i className="material-icons">arrow_drop_down</i>
+          </ExpandHeader>
+        </Heading>
+        {gitHubSettingsExpanded && (
+          <div>
+            <InputRow
+              disabled={true}
+              label="Git repository"
+              type="text"
+              width="100%"
+              value={chart.git_action_config?.git_repo}
+            />
+            <InputRow
+              disabled={true}
+              label="Branch"
+              type="text"
+              width="100%"
+              value={currentBranch}
+            />
+            {chart.git_action_config.dockerfile_path && (
+              <InputRow
+                disabled={true}
+                label="Dockerfile path"
+                type="text"
+                width="100%"
+                value={chart.git_action_config.dockerfile_path}
+              />
+            )}
+            {!chart.git_action_config.dockerfile_path && (
+              <InputRow
+                disabled={true}
+                label="Dockerfile path"
+                type="text"
+                width="100%"
+                value={chart.git_action_config.folder_path}
+              />
+            )}
+          </div>
+        )}
+        <Heading>
+          <ExpandHeader
+            onClick={() => setEnvVariablesExpanded(!envVariablesExpanded)}
+            isExpanded={!envVariablesExpanded}
+          >
+            Build environment variables
+            <i className="material-icons">arrow_drop_down</i>
+          </ExpandHeader>
+        </Heading>
+
+        {envVariablesExpanded && (
+          <div>
+            <KeyValueArray
+              values={envVariables}
+              envLoader
+              externalValues={{
+                namespace: chart.namespace,
+                clusterId: currentCluster.id,
+              }}
+              setValues={(values) => {
+                setEnvVariables(values);
+              }}
+            ></KeyValueArray>
+          </div>
+        )}
+
+        <Heading>
+          <ExpandHeader
+            onClick={() => setBranchSelectionExpanded(!branchSelectionExpanded)}
+            isExpanded={!branchSelectionExpanded}
+          >
+            Select default branch
+            <i className="material-icons">arrow_drop_down</i>
+          </ExpandHeader>
+        </Heading>
+        {branchSelectionExpanded && (
+          <div>
+            {/* Select default branch content */}
+            <Helper>
+              Change the default branch the deployments will be made from.
+            </Helper>
+            <Banner>
+              You must also update the deploy branch in your GitHub Action file.
+            </Banner>
+            <BranchList
+              actionConfig={currentActionConfig}
+              setBranch={setCurrentBranch}
+              currentBranch={currentBranch}
+            />
+          </div>
+        )}
 
         {!chart.git_action_config.dockerfile_path ? (
           <>
-            <Heading>Buildpack settings</Heading>
-            <BuildpackConfigSection
-              ref={buildpackConfigRef}
-              currentChart={chart}
-              actionConfig={currentActionConfig}
-            />
+            <Heading>
+              <ExpandHeader
+                onClick={() =>
+                  setBuildpackSettingsExpanded(!buildpackSettingsExpanded)
+                }
+                isExpanded={!buildpackSettingsExpanded}
+              >
+                Buildpacks settings
+                <i className="material-icons">arrow_drop_down</i>
+              </ExpandHeader>
+            </Heading>
+            {buildpackSettingsExpanded &&
+              !chart.git_action_config.dockerfile_path && (
+                <div>
+                  <BuildpackConfigSection
+                    ref={buildpackConfigRef}
+                    currentChart={chart}
+                    actionConfig={currentActionConfig}
+                  />
+                </div>
+              )}
           </>
         ) : null}
         <SaveButtonWrapper>
@@ -485,3 +578,17 @@ const AlertCardAction = styled.button`
     cursor: pointer;
   }
 `;
+
+const ExpandHeader = styled.div<{ isExpanded: boolean }>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  > i {
+    margin-left: 10px;
+    transform: ${(props) => (props.isExpanded ? "rotate(180deg)" : "")};
+  }
+`;
+const DarkMatter = styled.div`
+  width: 100%;
+  margin-bottom: -28px;
+`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/build-settings/_BuildpackConfigSection.tsx

@@ -134,67 +134,71 @@ const BuildpackConfigSection = forwardRef<
 
     detectBuildpack()
       .then(({ data }) => {
-        const builders = data;
-
-        const defaultBuilder = builders.find((builder) =>
-          builder.builders.find((stack) => stack === currentBuildConfig.builder)
-        );
+        {
+          console.log(data);
+          const builders = data;
 
-        const nonSelectedBuilder = builders.find(
-          (builder) =>
-            !builder.builders.find(
+          const defaultBuilder = builders.find((builder) =>
+            builder.builders.find(
               (stack) => stack === currentBuildConfig.builder
             )
-        );
-
-        const fullDetectedBuildpacks = [
-          ...defaultBuilder.detected,
-          ...defaultBuilder.others,
-        ];
-
-        const userSelectedBuildpacks = populateBuildpacks(
-          currentBuildConfig.buildpacks,
-          fullDetectedBuildpacks
-        ).filter((b) => b.buildpack);
-
-        const availableBuildpacks = differenceBy(
-          fullDetectedBuildpacks,
-          userSelectedBuildpacks,
-          "buildpack"
-        );
-
-        const defaultStack = defaultBuilder.builders.find((stack) => {
-          return stack === currentBuildConfig.builder;
-        });
-
-        populateState(
-          defaultBuilder.name.toLowerCase(),
-          defaultStack,
-          userSelectedBuildpacks,
-          availableBuildpacks
-        );
-
-        populateState(
-          nonSelectedBuilder.name.toLowerCase(),
-          nonSelectedBuilder.builders[0],
-          nonSelectedBuilder.others,
-          nonSelectedBuilder.detected
-        );
-
-        setBuilders(builders);
-        setSelectedBuilder(defaultBuilder.name.toLowerCase());
-
-        setStacks(defaultBuilder.builders);
-        setSelectedStack(defaultStack);
-        if (!Array.isArray(userSelectedBuildpacks)) {
-          setSelectedBuildpacks([]);
-        } else {
-          setSelectedBuildpacks(userSelectedBuildpacks);
-        }
-        if (!Array.isArray(availableBuildpacks)) {
-          setAvailableBuildpacks([]);
-        } else {
-          setAvailableBuildpacks(availableBuildpacks);
+          );
+
+          const nonSelectedBuilder = builders.find(
+            (builder) =>
+              !builder.builders.find(
+                (stack) => stack === currentBuildConfig.builder
+              )
+          );
+
+          const fullDetectedBuildpacks = [
+            ...(defaultBuilder.detected ?? []),
+            ...(defaultBuilder.others ?? []),
+          ];
+          const userSelectedBuildpacks = populateBuildpacks(
+            currentBuildConfig.buildpacks,
+            fullDetectedBuildpacks
+          ).filter((b) => b.buildpack);
+
+          const availableBuildpacks = differenceBy(
+            fullDetectedBuildpacks,
+            userSelectedBuildpacks,
+            "buildpack"
+          );
+
+          const defaultStack = defaultBuilder.builders.find((stack) => {
+            return stack === currentBuildConfig.builder;
+          });
+
+          populateState(
+            defaultBuilder.name.toLowerCase(),
+            defaultStack,
+            userSelectedBuildpacks,
+            availableBuildpacks
+          );
+
+          populateState(
+            nonSelectedBuilder.name.toLowerCase(),
+            nonSelectedBuilder.builders[0],
+            nonSelectedBuilder.others,
+            nonSelectedBuilder.detected
+          );
+
+          setBuilders(builders);
+          setSelectedBuilder(defaultBuilder.name.toLowerCase());
+
+          setStacks(defaultBuilder.builders);
+          setSelectedStack(defaultStack);
+          if (!Array.isArray(userSelectedBuildpacks)) {
+            setSelectedBuildpacks([]);
+          } else {
+            setSelectedBuildpacks(userSelectedBuildpacks);
+          }
+          if (!Array.isArray(availableBuildpacks)) {
+            setAvailableBuildpacks([]);
+          } else {
+            setAvailableBuildpacks(availableBuildpacks);
+          }
         }
       })
       .catch((err) => {