Implement branch list instead of a selector

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

@@ -19,6 +19,7 @@ import { AxiosError } from "axios";
 import { AddCustomBuildpackForm } from "components/repo-selector/BuildpackSelection";
 import { DeviconsNameList } from "assets/devicons-name-list";
 import Selector from "components/Selector";
+import BranchList from "components/repo-selector/BranchList";
 
 type Buildpack = {
   name: string;
@@ -73,6 +74,12 @@ const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
     "loading" | "successful" | string
   >("");
 
+  const [currentBranch, setCurrentBranch] = useState(
+    () => chart?.git_action_config?.git_branch
+  );
+
+  const saveNewBranch = async (newBranch: string) => {};
+
   const saveBuildConfig = async (config: BuildConfig) => {
     if (config === null) {
       return;
@@ -298,9 +305,13 @@ const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
         ></KeyValueArray>
 
         <Heading>Select default branch</Heading>
-        <BranchSelector
-          actionConfig={getActionConfig()}
-          onChange={console.log}
+        <Helper>
+          Change the default branch the deployments will be made from.
+        </Helper>
+        <BranchList
+          actionConfig={currentActionConfig}
+          setBranch={setCurrentBranch}
+          currentBranch={currentBranch}
         />
 
         {!chart.git_action_config.dockerfile_path ? (
@@ -718,66 +729,6 @@ const BuildpackConfigSection: React.FC<{
   );
 };
 
-const BranchSelector: React.FC<{
-  actionConfig: FullActionConfigType;
-  onChange: (buildConfig: string) => void;
-}> = ({ actionConfig, onChange }) => {
-  const { currentProject } = useContext(Context);
-
-  const [branches, setBranches] = useState<string[]>([]);
-
-  const [currentBranch, setCurrentBranch] = useState<string>(
-    () => actionConfig.git_branch
-  );
-
-  const handleBranchChange = (newBranch: string) => {
-    setCurrentBranch(newBranch);
-    onChange(newBranch);
-  };
-
-  useEffect(() => {
-    if (actionConfig.kind === "gitlab") {
-      return;
-    }
-
-    api
-      .getBranches(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          git_repo_id: actionConfig.git_repo_id,
-          kind: "github",
-          owner: actionConfig?.git_repo?.split("/")[0],
-          name: actionConfig?.git_repo?.split("/")[1],
-        }
-      )
-      .then((res) => {
-        const newBranches = res.data;
-
-        setBranches(newBranches);
-      });
-  }, []);
-
-  const branchOptions = branches.map((branch) => ({
-    value: branch,
-    label: branch,
-  }));
-
-  return (
-    <>
-      <Selector
-        activeValue={currentBranch}
-        options={branchOptions}
-        setActiveValue={handleBranchChange}
-        width="90%"
-        dropdownLabel={`Branches available on ${actionConfig.git_repo}`}
-        dropdownMaxHeight={"200px"}
-      />
-    </>
-  );
-};
-
 const DisabledOverlay = styled.div`
   position: absolute;
   width: 100%;