Merge pull request #3542 from adamdmharvey/catalog-import-instructions

add(catalog-import): Add some end-user Catalog import instructions

.changeset/grumpy-toys-live.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-import': patch
+---
+
+Add register existing component instructions

plugins/catalog-import/src/components/ImportComponentForm.tsx

@@ -99,7 +99,7 @@ export const RegisterComponentForm = ({ nextStep, saveConfig }: Props) => {
           variant="outlined"
           label="Repository URL"
           error={hasErrors}
-          placeholder="https://github.com/spotify/backstage"
+          placeholder="https://github.com/backstage/backstage"
           name="componentLocation"
           required
           margin="normal"

plugins/catalog-import/src/components/ImportComponentPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useState } from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, Typography } from '@material-ui/core';
 import {
   InfoCard,
   Page,
@@ -57,14 +57,41 @@ export const ImportComponentPage = ({
     <Page themeId="home">
       <Header title="Register an existing component" />
       <Content>
-        <ContentHeader title="Start tracking your component on backstage">
+        <ContentHeader title="Start tracking your component in Backstage">
           <SupportButton>
-            Start tracking your component in Backstage. TODO: Add more
-            information about what this is.
+            Start tracking your component in Backstage by adding it to the
+            software catalog.
           </SupportButton>
         </ContentHeader>
-        <Grid container spacing={3} direction="column">
-          <Grid item>
+        <Grid container spacing={3} direction="row-reverse">
+          <Grid item xs={6}>
+            <InfoCard
+              deepLink={{
+                title: 'Learn more about the Software Catalog',
+                link:
+                  'https://backstage.io/docs/features/software-catalog/software-catalog-overview',
+              }}
+            >
+              <Typography variant="body2" paragraph>
+                There are two ways to register an existing component.
+              </Typography>
+              <Typography variant="h6">GitHub Repo</Typography>
+              <Typography variant="body2" paragraph>
+                If you already have code in a GitHub repository, enter the full
+                URL to your repo and a new pull request with a sample Backstage
+                metadata Entity File (<code>catalog-info.yaml</code>) will be
+                opened for you.
+              </Typography>
+              <Typography variant="h6">
+                GitHub Repo &amp; Entity File
+              </Typography>
+              <Typography variant="body2" paragraph>
+                If you've already created a Backstage metadata file and put it
+                in your repo, you can enter the full URL to that Entity File.
+              </Typography>
+            </InfoCard>
+          </Grid>
+          <Grid item xs={6}>
             <InfoCard>
               <ImportStepper
                 steps={[