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] 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}