From e1ea85cd93daa8b63dc5ab4fd5bf6dbdc902764d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Tue, 16 Jun 2020 09:53:44 +0200
Subject: [PATCH] Clean up Register plugin (#1291)

* Clean up Register plugin

* Fix test

* Update RegisterComponentPage.tsx
---
 .../RegisterComponentForm.test.tsx                   |  4 ++--
 .../RegisterComponentForm/RegisterComponentForm.tsx  |  6 +++---
 .../RegisterComponentPage/RegisterComponentPage.tsx  | 12 ++++++++++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx
index e8b0c3b76e..01402ca19b 100644
--- a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx
+++ b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.test.tsx
@@ -37,7 +37,7 @@ describe('RegisterComponentForm', () => {
     const { rendered } = setup();
     expect(
       await rendered.findByText(
-        'Enter the full path to the service-info.yaml file in GitHub to start tracking your component. It must be in a public repo.',
+        'Enter the full path to the component.yaml file in GitHub to start tracking your component. It must be in a public repo.',
       ),
     ).toBeInTheDocument();
 
@@ -51,7 +51,7 @@ describe('RegisterComponentForm', () => {
     await act(async () => {
       // react-hook-form uses `input` event for changes
       fireEvent.input(input, {
-        target: { value: 'https://example.com/blob/master/service.yaml' },
+        target: { value: 'https://example.com/blob/master/component.yaml' },
       });
     });
     const submit = (await rendered.getByRole('button')) as HTMLButtonElement;
diff --git a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx
index d9fb88e44b..c1ea9c454d 100644
--- a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx
+++ b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx
@@ -64,14 +64,14 @@ const RegisterComponentForm: FC<Props> = ({ onSubmit, submitting }) => {
         <TextField
           id="registerComponentInput"
           variant="outlined"
-          label="Component service file URL"
+          label="Component file URL"
           data-testid="componentLocationInput"
           error={hasErrors}
-          placeholder="https://example.com/user/some-service/blob/master/service-info.yaml"
+          placeholder="https://example.com/user/some-service/blob/master/component.yaml"
           name="componentLocation"
           required
           margin="normal"
-          helperText="Enter the full path to the service-info.yaml file in GitHub to start tracking your component. It must be in a public repo."
+          helperText="Enter the full path to the component.yaml file in GitHub to start tracking your component. It must be in a public repo."
           inputRef={register({
             required: true,
             validate: ComponentIdValidators,
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
index 27654d2080..85d63fe2cb 100644
--- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
+++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
@@ -24,6 +24,8 @@ import {
   useApi,
   errorApiRef,
   Header,
+  SupportButton,
+  ContentHeader,
 } from '@backstage/core';
 import RegisterComponentForm from '../RegisterComponentForm';
 import { catalogApiRef } from '@backstage/plugin-catalog';
@@ -94,12 +96,18 @@ const RegisterComponentPage: FC<{}> = () => {
   };
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page theme={pageTheme.home}>
       <Header title="Register existing component" />
       <Content>
+        <ContentHeader title="Start tracking your component in Backstage">
+          <SupportButton>
+            Start tracking your component in Backstage. TODO: Add more
+            information about what this is.
+          </SupportButton>
+        </ContentHeader>
         <Grid container spacing={3} direction="column">
           <Grid item>
-            <InfoCard title="Start tracking your component in Backstage">
+            <InfoCard>
               <RegisterComponentForm
                 onSubmit={handleSubmit}
                 submitting={formState === FormStates.Submitting}