fix(organizations): allow custom git branch selection

libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.spec.tsx

@@ -1,27 +1,55 @@
 import { wrapWithReactHookForm } from '__tests__/utils/wrap-with-react-hook-form'
-import { renderWithProviders } from '@qovery/shared/util-tests'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { GitBranchSettings } from './git-branch-settings'
 
+let mockBranches: { name: string }[] = [
+  {
+    name: 'main',
+  },
+]
+
 jest.mock('../hooks/use-branches/use-branches', () => {
   return {
     ...jest.requireActual('../hooks/use-branches/use-branches'),
     useBranches: () => ({
       isLoading: false,
       isRefetching: false,
-      data: [
-        {
-          name: 'main',
-        },
-      ],
+      data: mockBranches,
     }),
   }
 })
 
 describe('GitBranchSettings', () => {
+  beforeEach(() => {
+    mockBranches = [
+      {
+        name: 'main',
+      },
+    ]
+  })
+
   it('should match snapshot', () => {
     const { baseElement } = renderWithProviders(
       wrapWithReactHookForm(<GitBranchSettings organizationId="org-1" gitProvider="GITHUB" />)
     )
     expect(baseElement).toMatchSnapshot()
   })
+
+  it('should display the selected branch when it is not part of returned branches', () => {
+    mockBranches = [
+      {
+        name: 'develop',
+      },
+    ]
+
+    renderWithProviders(
+      wrapWithReactHookForm(<GitBranchSettings organizationId="org-1" gitProvider="GITHUB" />, {
+        defaultValues: {
+          branch: 'main',
+        },
+      })
+    )
+
+    expect(screen.getByText('main')).toBeInTheDocument()
+  })
 })

libs/domains/organizations/feature/src/lib/git-branch-settings/git-branch-settings.tsx

@@ -1,4 +1,5 @@
 import { type GitProviderEnum } from 'qovery-typescript-axios'
+import { useMemo } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import { InputSelect, InputText, LoaderSpinner } from '@qovery/shared/ui'
 import { useBranches } from '../hooks/use-branches/use-branches'
@@ -40,6 +41,25 @@ export function GitBranchSettings({
     enabled: !disabled,
   })
 
+  const branchOptionsWithSelectedValue = useMemo(() => {
+    const branchOptions = branches.map((branch) => ({
+      label: branch.name,
+      value: branch.name,
+    }))
+
+    if (disabled || !watchFieldBranch || branchOptions.some((branch) => branch.value === watchFieldBranch)) {
+      return branchOptions
+    }
+
+    return [
+      ...branchOptions,
+      {
+        label: watchFieldBranch,
+        value: watchFieldBranch,
+      },
+    ]
+  }, [branches, disabled, watchFieldBranch])
+
   if (isError) {
     return null
   }
@@ -71,16 +91,14 @@ export function GitBranchSettings({
                       value: watchFieldBranch ?? '',
                     },
                   ]
-                : branches.map((branch) => ({
-                    label: branch.name,
-                    value: branch.name,
-                  }))
+                : branchOptionsWithSelectedValue
             }
             onChange={field.onChange}
             value={field.value}
             error={error?.message}
             disabled={disabled}
             isSearchable
+            isCreatable
           />
         )}
       />