From 26e4d916d594a70afbb07d86b3c25cb50d7d26a6 Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Wed, 11 Oct 2023 11:37:35 +0200
Subject: [PATCH 1/6] fix: title and description are now correctly displayed

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .changeset/rude-penguins-press.md                     |  5 +++++
 .../components/fields/RepoUrlPicker/RepoUrlPicker.tsx | 11 +++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rude-penguins-press.md

diff --git a/.changeset/rude-penguins-press.md b/.changeset/rude-penguins-press.md
new file mode 100644
index 0000000000..967b04bc19
--- /dev/null
+++ b/.changeset/rude-penguins-press.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Title and description in RepoUrlPicker are now correctly displayed.
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
index 57cebb3d96..29a2e86ea5 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
@@ -31,6 +31,7 @@ import { RepoUrlPickerProps } from './schema';
 import { RepoUrlPickerState } from './types';
 import useDebounce from 'react-use/lib/useDebounce';
 import { useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
+import { Box, Divider, Typography } from '@material-ui/core';
 
 export { RepoUrlPickerSchema } from './schema';
 
@@ -41,7 +42,7 @@ export { RepoUrlPickerSchema } from './schema';
  * @public
  */
 export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
-  const { uiSchema, onChange, rawErrors, formData } = props;
+  const { uiSchema, onChange, rawErrors, formData, schema } = props;
   const [state, setState] = useState<RepoUrlPickerState>(
     parseRepoPickerUrl(formData),
   );
@@ -157,9 +158,15 @@ export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
 
   const hostType =
     (state.host && integrationApi.byHost(state.host)?.type) ?? null;
-
   return (
     <>
+      {schema.title && (
+        <Box my="8px">
+          <Typography variant="h5">{schema.title}</Typography>
+          <Divider />
+        </Box>
+      )}
+      {schema.description && <p>{schema.description}</p>}
       <RepoUrlPickerHost
         host={state.host}
         hosts={allowedHosts}

From a484e6c23c21104125137a108171d56951c194da Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Wed, 11 Oct 2023 11:56:45 +0200
Subject: [PATCH 2/6] fix: p tag to typography

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .../src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
index 29a2e86ea5..80a07fdbd7 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
@@ -166,7 +166,9 @@ export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
           <Divider />
         </Box>
       )}
-      {schema.description && <p>{schema.description}</p>}
+      {schema.description && (
+        <Typography variant="body1">{schema.description}</Typography>
+      )}
       <RepoUrlPickerHost
         host={state.host}
         hosts={allowedHosts}

From e0e93f8a2d341555d8b01508e945e2f3336c960c Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Wed, 18 Oct 2023 15:20:40 +0200
Subject: [PATCH 3/6] fix: responsive margin

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .../src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
index 80a07fdbd7..7fc71d8338 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx
@@ -161,7 +161,7 @@ export const RepoUrlPicker = (props: RepoUrlPickerProps) => {
   return (
     <>
       {schema.title && (
-        <Box my="8px">
+        <Box my={1}>
           <Typography variant="h5">{schema.title}</Typography>
           <Divider />
         </Box>

From 9ab1955dd8927cf3c4dcd3490fd5bb23296782d0 Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Tue, 24 Oct 2023 09:32:42 +0100
Subject: [PATCH 4/6] feat: add unit test

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .../RepoUrlPicker/RepoUrlPicker.test.tsx      | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
index da86e6e4b8..8cab279738 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
@@ -132,6 +132,35 @@ describe('RepoUrlPicker', () => {
         getByRole('option', { name: 'dev.azure.com' }),
       ).toBeInTheDocument();
     });
+
+    it('should render properly with title and description', async () => {
+      const { getByText } = await renderInTestApp(
+        <TestApiProvider
+          apis={[
+            [scmIntegrationsApiRef, mockIntegrationsApi],
+            [scmAuthApiRef, {}],
+            [scaffolderApiRef, mockScaffolderApi],
+          ]}
+        >
+          <SecretsContextProvider>
+            <Form
+              schema={{
+                type: 'string',
+                title: 'test title',
+                description: 'test description',
+              }}
+              uiSchema={{
+                'ui:field': 'RepoUrlPicker',
+              }}
+              fields={{ RepoUrlPicker: RepoUrlPicker }}
+            />
+          </SecretsContextProvider>
+        </TestApiProvider>,
+      );
+
+      expect(getByText('test title')).toBeInTheDocument();
+      expect(getByText('test description')).toBeInTheDocument();
+    });
   });
 
   describe('requestUserCredentials', () => {

From 2e51886bf725df28c489f4ab1b4b0926a7846257 Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Tue, 24 Oct 2023 09:41:01 +0100
Subject: [PATCH 5/6] fix: unit test

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .../src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
index 8cab279738..d2d92867be 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
@@ -151,6 +151,7 @@ describe('RepoUrlPicker', () => {
               }}
               uiSchema={{
                 'ui:field': 'RepoUrlPicker',
+                'ui:options': { allowedHosts: ['dev.azure.com'] },
               }}
               fields={{ RepoUrlPicker: RepoUrlPicker }}
             />

From 538f8af95d97df6020cf92d65abd9d8a9e128f8f Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Tue, 24 Oct 2023 11:14:40 +0100
Subject: [PATCH 6/6] fix: cast error and add validator

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .../components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
index d2d92867be..fb0b478556 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
@@ -144,6 +144,7 @@ describe('RepoUrlPicker', () => {
         >
           <SecretsContextProvider>
             <Form
+              validator={validator}
               schema={{
                 type: 'string',
                 title: 'test title',
@@ -151,9 +152,10 @@ describe('RepoUrlPicker', () => {
               }}
               uiSchema={{
                 'ui:field': 'RepoUrlPicker',
-                'ui:options': { allowedHosts: ['dev.azure.com'] },
               }}
-              fields={{ RepoUrlPicker: RepoUrlPicker }}
+              fields={{
+                RepoUrlPicker: RepoUrlPicker as ScaffolderRJSFField<string>,
+              }}
             />
           </SecretsContextProvider>
         </TestApiProvider>,