feat(gitops): add "create new source" button to GitSourceSelector [BE-13054] (#2960)

Co-authored-by: Claude <noreply@anthropic.com>

app/react/portainer/gitops/sources/GitSourceSelector.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { server } from '@/setup-tests/server';
+
+import { Source } from './types';
+import { GitSourceSelector } from './GitSourceSelector';
+
+function renderComponent({
+  value,
+  sources = [],
+}: {
+  value?: Source['id'];
+  sources?: Array<Pick<Source, 'id' | 'name'>>;
+} = {}) {
+  server.use(
+    http.get('/api/gitops/sources', () =>
+      HttpResponse.json(sources, {
+        headers: {
+          'x-total-count': String(sources.length),
+          'x-total-available': String(sources.length),
+        },
+      })
+    )
+  );
+
+  const Wrapped = withTestQueryProvider(
+    withTestRouter(() => <GitSourceSelector value={value} onChange={vi.fn()} />)
+  );
+
+  return render(<Wrapped />);
+}
+
+describe('GitSourceSelector', () => {
+  it('renders the source selector', async () => {
+    renderComponent();
+
+    expect(await screen.findByLabelText('Source')).toBeInTheDocument();
+  });
+
+  it('shows the create new source button', async () => {
+    renderComponent();
+
+    expect(
+      await screen.findByTestId('create-source-button')
+    ).toBeInTheDocument();
+  });
+});

app/react/portainer/gitops/sources/GitSourceSelector.tsx

@@ -1,3 +1,4 @@
+import { AddButton } from '@@/buttons';
 import { FormControl } from '@@/form-components/FormControl';
 import { Select } from '@@/form-components/ReactSelect';
 
@@ -23,20 +24,30 @@ export function GitSourceSelector({
     <div className="form-group">
       <div className="col-sm-12">
         <FormControl label="Source" inputId="source-selector" errors={error}>
-          <Select
+          <div className="flex items-center gap-2">
-            placeholder="Select a source"
+            <div className="flex-1">
-            value={selectedSource ?? null}
+              <Select
-            options={sources}
+                placeholder="Select a source"
-            getOptionLabel={(s) => s.name}
+                value={selectedSource ?? null}
-            getOptionValue={(s) => String(s.id)}
+                options={sources}
-            onChange={onChange}
+                getOptionLabel={(s) => s.name}
-            isClearable
+                getOptionValue={(s) => String(s.id)}
-            isLoading={sourcesQuery.isLoading}
+                onChange={onChange}
-            noOptionsMessage={() => 'No git sources available'}
+                isClearable
-            inputId="source-selector"
+                isLoading={sourcesQuery.isLoading}
-            data-cy="source-selector"
+                noOptionsMessage={() => 'No git sources available'}
-            isDisabled={readOnly}
+                inputId="source-selector"
-          />
+                data-cy="source-selector"
+                isDisabled={readOnly}
+              />
+            </div>
+            <AddButton
+              to="portainer.gitops.sources.new"
+              data-cy="create-source-button"
+            >
+              Create new source
+            </AddButton>
+          </div>
         </FormControl>
       </div>
     </div>