feat: replace branch text field with search select dropdown

Fetch available branches from the platform API after credential validation
and display them in an Autocomplete dropdown. Users can select from existing
branches or type a custom name. The dropdown only appears when branching is
enabled on the project.

Author: dkrizan

src/popup/TolgeeDetector.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
+  Autocomplete,
   Box,
   Button,
   CircularProgress,
@@ -26,7 +27,9 @@ export const TolgeeDetector = () => {
     libConfig,
     tolgeePresent,
     credentialsCheck,
+    branches,
   } = state;
+  const [branchOpen, setBranchOpen] = useState(false);
 
   const handleApplyChange = async () => {
     if (appliedValues) {
@@ -129,20 +132,73 @@ export const TolgeeDetector = () => {
         </FormControl>
         {typeof credentialsCheck === 'object' &&
           credentialsCheck?.branchingEnabled && (
-            <TextField
-              label="Branch"
-              variant="outlined"
-              value={values?.branch || ''}
-              onChange={(e: any) =>
+            <Autocomplete
+              style={{ marginBottom: branchOpen ? 150 : 0 }}
+              open={branchOpen}
+              onOpen={() => setBranchOpen(true)}
+              onClose={() => setBranchOpen(false)}
+              freeSolo
+              size="small"
+              disablePortal
+              slotProps={{
+                popper: {
+                  placement: 'bottom',
+                  modifiers: [
+                    { name: 'flip', enabled: false },
+                  ],
+                },
+              }}
+              ListboxProps={{ style: { maxHeight: 150 } }}
+              options={branches ?? []}
+              getOptionLabel={(option) =>
+                typeof option === 'string' ? option : option.name
+              }
+              value={
+                branches?.find((b) => b.name === values?.branch) ??
+                values?.branch ??
+                null
+              }
+              onChange={(_e: any, newValue: any) => {
                 dispatch({
                   type: 'CHANGE_VALUES',
-                  payload: { branch: e.target.value },
-                })
-              }
-              onKeyDown={handleKeyDown}
-              size="small"
-              placeholder={libConfig?.config?.branch || 'Default branch'}
-              helperText="Leave empty to use the branch from SDK config"
+                  payload: {
+                    branch:
+                      typeof newValue === 'string'
+                        ? newValue
+                        : newValue?.name ?? '',
+                  },
+                });
+              }}
+              onInputChange={(_e: any, newInput: string, reason: string) => {
+                if (reason === 'input') {
+                  dispatch({
+                    type: 'CHANGE_VALUES',
+                    payload: { branch: newInput },
+                  });
+                }
+              }}
+              renderOption={(props, option) => (
+                <li {...props}>
+                  {option.name}
+                  {option.isDefault && (
+                    <span style={{ color: '#999', marginLeft: 6 }}>
+                      default
+                    </span>
+                  )}
+                </li>
+              )}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Branch"
+                  variant="outlined"
+                  placeholder={
+                    libConfig?.config?.branch || 'Default branch'
+                  }
+                  helperText="Leave empty to use the branch from SDK config"
+                  onKeyDown={handleKeyDown}
+                />
+              )}
             />
           )}
         <Box

src/popup/useDetectorForm.tsx

@@ -11,6 +11,7 @@ import { RuntimeMessage } from '../content/Messages';
 
 type ProjectInfo = {
   projectName: string;
+  projectId: number;
   scopes: string[];
   userFullName: string;
   branchingEnabled: boolean;
@@ -19,6 +20,11 @@ type ProjectInfo = {
 type CredentialsCheck = null | 'loading' | 'invalid' | ProjectInfo;
 type TolgeePresent = 'loading' | 'present' | 'not_present' | 'legacy';
 
+type BranchOption = {
+  name: string;
+  isDefault: boolean;
+};
+
 const initialState = {
   values: null as Values | null,
   storedValues: null as Values | null,
@@ -28,6 +34,7 @@ const initialState = {
   libConfig: null as LibConfig | null,
   error: null as string | null,
   frameId: null as number | null,
+  branches: null as BranchOption[] | null,
 };
 
 type State = typeof initialState;
@@ -44,7 +51,8 @@ type Action =
   | { type: 'APPLY_VALUES' }
   | { type: 'CLEAR_ALL' }
   | { type: 'STORE_VALUES' }
-  | { type: 'LOAD_VALUES' };
+  | { type: 'LOAD_VALUES' }
+  | { type: 'SET_BRANCHES'; payload: BranchOption[] | null };
 
 export const useDetectorForm = () => {
   const { applyRequired, apply } = useApplier();
@@ -148,6 +156,11 @@ export const useDetectorForm = () => {
           appliedValues: state.storedValues,
           values: state.storedValues,
         };
+      case 'SET_BRANCHES':
+        return {
+          ...state,
+          branches: action.payload,
+        };
       default:
         // @ts-expect-error action type is type uknown
         throw new Error(`Unknown action ${action.type}`);
@@ -271,6 +284,7 @@ export const useDetectorForm = () => {
             data &&
             setCredentialsCheck({
               projectName: data.projectName,
+              projectId: data.projectId,
               scopes: data.scopes,
               userFullName: data.userFullName,
               branchingEnabled: data.branchingEnabled ?? false,
@@ -284,5 +298,45 @@ export const useDetectorForm = () => {
     };
   }, [checkableValues?.apiUrl, checkableValues?.apiKey]);
 
+  // fetch branches when credentials are valid and branching is enabled
+  useEffect(() => {
+    let cancelled = false;
+    const check = state.credentialsCheck;
+    if (
+      typeof check === 'object' &&
+      check?.branchingEnabled &&
+      validateValues(checkableValues)
+    ) {
+      const url = normalizeUrl(checkableValues!.apiUrl);
+      fetch(
+        `${url}/v2/projects/${check.projectId}/branches?ak=${
+          checkableValues!.apiKey
+        }&size=100`
+      )
+        .then((r) => (r.ok ? r.json() : null))
+        .then((data) => {
+          if (!cancelled && data?._embedded?.branches) {
+            dispatch({
+              type: 'SET_BRANCHES',
+              payload: data._embedded.branches.map((b: any) => ({
+                name: b.name,
+                isDefault: b.isDefault,
+              })),
+            });
+          }
+        })
+        .catch(() => {
+          if (!cancelled) {
+            dispatch({ type: 'SET_BRANCHES', payload: null });
+          }
+        });
+    } else {
+      dispatch({ type: 'SET_BRANCHES', payload: null });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [state.credentialsCheck]);
+
   return [state, dispatch] as const;
 };