feat: fall back on DefaultRepoBranchPicker if host is not bitbucket

Signed-off-by: Benjamin Janssens <benji.janssens@gmail.com>
2024-06-19 16:37:33 +02:00
parent 80738256c3
commit 37d52e4f28
5 changed files with 160 additions and 24 deletions
@@ -36,11 +36,13 @@ export const BitbucketRepoBranchPicker = ({
  state,
  rawErrors,
  accessToken,
+  required,
 }: {
  onChange: (state: RepoBranchPickerState) => void;
  state: RepoBranchPickerState;
  rawErrors: string[];
  accessToken?: string;
+  required?: boolean;
 }) => {
  const { host, workspace, repository, branch } = state;

@@ -79,7 +81,7 @@ export const BitbucketRepoBranchPicker = ({
  return (
    <FormControl
      margin="normal"
-      required
+      required={required}
      error={rawErrors?.length > 0 && !branch}
    >
      <Autocomplete
@@ -89,7 +91,7 @@ export const BitbucketRepoBranchPicker = ({
        }}
        options={availableBranches}
        renderInput={params => (
-          <TextField {...params} label="Branch" required />
+          <TextField {...params} label="Branch" required={required} />
        )}
        freeSolo
        autoSelect
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { DefaultRepoBranchPicker } from './DefaultRepoBranchPicker';
+
+describe('DefaultRepoBranchPicker', () => {
+  it('renders an input field', () => {
+    const { getByRole } = render(
+      <DefaultRepoBranchPicker
+        onChange={jest.fn()}
+        state={{ branch: 'main' }}
+        rawErrors={[]}
+      />,
+    );
+
+    expect(getByRole('textbox')).toBeInTheDocument();
+    expect(getByRole('textbox')).toHaveValue('main');
+  });
+
+  it('calls onChange when the input field changes', () => {
+    const onChange = jest.fn();
+
+    const { getByRole } = render(
+      <DefaultRepoBranchPicker
+        onChange={onChange}
+        state={{ branch: 'main' }}
+        rawErrors={[]}
+      />,
+    );
+
+    const input = getByRole('textbox');
+
+    fireEvent.change(input, {
+      target: { value: 'develop' },
+    });
+
+    expect(onChange).toHaveBeenCalledWith({ branch: 'develop' });
+  });
+});
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import FormControl from '@material-ui/core/FormControl';
+import React from 'react';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+
+import { RepoBranchPickerState } from './types';
+
+/**
+ * The underlying component that is rendered in the form for the `DefaultRepoBranchPicker`
+ * field extension.
+ *
+ * @public
+ *
+ */
+export const DefaultRepoBranchPicker = ({
+  onChange,
+  state,
+  rawErrors,
+  required,
+}: {
+  onChange: (state: RepoBranchPickerState) => void;
+  state: RepoBranchPickerState;
+  rawErrors: string[];
+  required?: boolean;
+}) => {
+  const { branch } = state;
+
+  return (
+    <FormControl
+      margin="normal"
+      required={required}
+      error={rawErrors?.length > 0 && !branch}
+    >
+      <InputLabel htmlFor="branchInput">Branch</InputLabel>
+      <Input
+        id="branchInput"
+        onChange={e => onChange({ branch: e.target.value })}
+        value={branch}
+      />
+      <FormHelperText>The branch of the repository</FormHelperText>
+    </FormControl>
+  );
+};
@@ -70,9 +70,7 @@ describe('RepoBranchPicker', () => {
              }}
              onSubmit={onSubmit}
              formContext={{
-                formData: {
-                  repoUrl: 'bitbucket.org',
-                },
+                formData: {},
              }}
            />
          </SecretsContextProvider>
@@ -82,11 +80,7 @@ describe('RepoBranchPicker', () => {
      const input = getByRole('textbox');
      const submitButton = getByRole('button');

-      act(() => {
-        input.focus();
-        fireEvent.change(input, { target: { value: 'branch1' } });
-        input.blur();
-      });
+      fireEvent.change(input, { target: { value: 'branch1' } });

      fireEvent.click(submitButton);

@@ -25,10 +25,11 @@ import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
 import Box from '@material-ui/core/Box';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
-import { BitbucketRepoBranchPicker } from './BitbucketRepoBranchPicker';

 import { RepoBranchPickerProps } from './schema';
 import { RepoBranchPickerState } from './types';
+import { BitbucketRepoBranchPicker } from './BitbucketRepoBranchPicker';
+import { DefaultRepoBranchPicker } from './DefaultRepoBranchPicker';

 /**
 * The underlying component that is rendered in the form for the `RepoBranchPicker`
@@ -37,8 +38,15 @@ import { RepoBranchPickerState } from './types';
 * @public
 */
 export const RepoBranchPicker = (props: RepoBranchPickerProps) => {
-  const { uiSchema, onChange, rawErrors, formData, schema, formContext } =
-    props;
+  const {
+    uiSchema,
+    onChange,
+    rawErrors,
+    formData,
+    schema,
+    formContext,
+    required,
+  } = props;
  const {
    formData: { repoUrl },
  } = formContext;
@@ -111,6 +119,33 @@ export const RepoBranchPicker = (props: RepoBranchPickerProps) => {

  const hostType = (host && integrationApi.byHost(host)?.type) ?? null;

+  const renderRepoBranchPicker = () => {
+    switch (hostType) {
+      case 'bitbucket':
+        return (
+          <BitbucketRepoBranchPicker
+            onChange={updateLocalState}
+            state={state}
+            rawErrors={rawErrors}
+            accessToken={
+              uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&
+              secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]
+            }
+            required={required}
+          />
+        );
+      default:
+        return (
+          <DefaultRepoBranchPicker
+            onChange={updateLocalState}
+            state={state}
+            rawErrors={rawErrors}
+            required={required}
+          />
+        );
+    }
+  };
+
  return (
    <>
      {schema.title && (
@@ -122,17 +157,7 @@ export const RepoBranchPicker = (props: RepoBranchPickerProps) => {
      {schema.description && (
        <Typography variant="body1">{schema.description}</Typography>
      )}
-      {hostType === 'bitbucket' && (
-        <BitbucketRepoBranchPicker
-          onChange={updateLocalState}
-          state={state}
-          rawErrors={rawErrors}
-          accessToken={
-            uiSchema?.['ui:options']?.requestUserCredentials?.secretsKey &&
-            secrets[uiSchema['ui:options'].requestUserCredentials.secretsKey]
-          }
-        />
-      )}
+      {renderRepoBranchPicker()}
    </>
  );
 };