Apply catalog-import code review comments

plugins/catalog-import/package.json

@@ -30,6 +30,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
     "@octokit/rest": "^18.0.6",
+    "git-url-parse": "^11.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hook-form": "^6.6.0",

plugins/catalog-import/src/api/CatalogImportApi.ts

@@ -23,16 +23,13 @@ export const catalogImportApiRef = createApiRef<CatalogImportApi>({
 });
 
 export interface CatalogImportApi {
-  submitPRToRepo(options: {
-    token: string;
+  submitPrToRepo(options: {
+    oAuthToken: string;
     owner: string;
     repo: string;
     fileContent: string;
-  }): Promise<{ link: string }>;
-  createRepositoryLocation(options: {
-    owner: string;
-    repo: string;
-  }): Promise<void>;
+  }): Promise<{ link: string; location: string }>;
+  createRepositoryLocation(options: { location: string }): Promise<void>;
   generateEntityDefinitions(options: {
     repo: string;
   }): Promise<PartialEntity[]>;

plugins/catalog-import/src/api/CatalogImportClient.ts

@@ -20,8 +20,6 @@ import { CatalogImportApi } from './CatalogImportApi';
 import { AnalyzeLocationResponse } from '@backstage/plugin-catalog-backend';
 import { PartialEntity } from '../util/types';
 
-export const API_BASE_URL = '/api/catalog/locations';
-
 export class CatalogImportClient implements CatalogImportApi {
   private readonly discoveryApi: DiscoveryApi;
 
@@ -59,11 +57,9 @@ export class CatalogImportClient implements CatalogImportApi {
   }
 
   async createRepositoryLocation({
-    owner,
-    repo,
+    location,
   }: {
-    owner: string;
-    repo: string;
+    location: string;
   }): Promise<void> {
     const response = await fetch(
       `${await this.discoveryApi.getBaseUrl('catalog')}/locations`,
@@ -74,7 +70,7 @@ export class CatalogImportClient implements CatalogImportApi {
         method: 'POST',
         body: JSON.stringify({
           type: 'github',
-          target: `https://github.com/${owner}/${repo}/blob/master/catalog-info.yaml`,
+          target: location,
           presence: 'optional',
         }),
       },
@@ -86,19 +82,19 @@ export class CatalogImportClient implements CatalogImportApi {
     }
   }
 
-  async submitPRToRepo({
-    token,
+  async submitPrToRepo({
+    oAuthToken,
     owner,
     repo,
     fileContent,
   }: {
-    token: string;
+    oAuthToken: string;
     owner: string;
     repo: string;
     fileContent: string;
-  }): Promise<{ link: string }> {
+  }): Promise<{ link: string; location: string }> {
     const octo = new Octokit({
-      auth: token,
+      auth: oAuthToken,
     });
 
     const branchName = 'backstage-integration';
@@ -176,7 +172,10 @@ export class CatalogImportClient implements CatalogImportApi {
         );
       });
 
-    return { link: pullRequestRespone.data.html_url };
+    return {
+      link: pullRequestRespone.data.html_url,
+      location: `https://github.com/${owner}/${repo}/blob/${repoData.data.default_branch}/${fileName}`,
+    };
   }
 }
 

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

@@ -27,18 +27,18 @@ type Props = {
   savePRLink: (PRLink: string) => void;
 };
 
-const ComponentConfigDisplay: React.FC<Props> = ({
+const ComponentConfigDisplay = ({
   nextStep,
   configFile,
   savePRLink,
-}) => {
+}: Props) => {
   const [submitting, setSubmitting] = useState(false);
   const errorApi = useApi(errorApiRef);
-  const { submitPRToRepo } = useGithubRepos();
+  const { submitPrToRepo } = useGithubRepos();
   const onNext = useCallback(async () => {
     try {
       setSubmitting(true);
-      const result = await submitPRToRepo(configFile);
+      const result = await submitPrToRepo(configFile);
       savePRLink(result.link);
       setSubmitting(false);
       nextStep();
@@ -46,7 +46,7 @@ const ComponentConfigDisplay: React.FC<Props> = ({
       setSubmitting(false);
       errorApi.post(e);
     }
-  }, [submitPRToRepo, configFile, nextStep, savePRLink, errorApi]);
+  }, [submitPrToRepo, configFile, nextStep, savePRLink, errorApi]);
 
   return (
     <Grid container direction="column" spacing={1}>

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

@@ -63,10 +63,9 @@ export const RegisterComponentForm = ({ nextStep, saveConfig }: Props) => {
     try {
       if (!isMounted()) return;
 
-      const repo = target.split('/').slice(-2).join('/');
-      const config = await generateEntityDefinitions(repo);
+      const config = await generateEntityDefinitions(target);
       saveConfig({
-        repo,
+        repo: target,
         config,
       });
       nextStep();

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

@@ -38,7 +38,7 @@ type Props = {
   PRLink: string;
 };
 
-export const ImportFinished: React.FC<Props> = ({ nextStep, PRLink }) => {
+export const ImportFinished = ({ nextStep, PRLink }: Props) => {
   const classes = useStyles();
   return (
     <Grid container direction="column" spacing={1}>

plugins/catalog-import/src/util/useGithubRepos.ts

@@ -23,16 +23,13 @@ export function useGithubRepos() {
   const api = useApi(catalogImportApiRef);
   const auth = useApi(githubAuthApiRef);
 
-  const submitPRToRepo = async (selectedRepo: ConfigSpec) => {
+  const submitPrToRepo = async (selectedRepo: ConfigSpec) => {
     const token = await auth.getAccessToken(['repo']);
 
-    const [ownerName, repoName] = [
-      selectedRepo.repo.split('/')[0],
-      selectedRepo.repo.split('/')[1],
-    ];
+    const [ownerName, repoName] = selectedRepo.repo.split('/').slice(-2);
     const submitPRResponse = await api
-      .submitPRToRepo({
-        token,
+      .submitPrToRepo({
+        oAuthToken: token,
         owner: ownerName,
         repo: repoName,
         fileContent: selectedRepo.config
@@ -45,8 +42,7 @@ export function useGithubRepos() {
 
     await api
       .createRepositoryLocation({
-        owner: selectedRepo.repo.split('/')[0],
-        repo: selectedRepo.repo.split('/')[1],
+        location: submitPRResponse.location,
       })
       .catch(e => {
         throw new Error(`Failed to create repository location:\n${e.message}`);
@@ -56,7 +52,7 @@ export function useGithubRepos() {
   };
 
   return {
-    submitPRToRepo,
+    submitPrToRepo,
     generateEntityDefinitions: (repo: string) =>
       api.generateEntityDefinitions({ repo }),
   };

plugins/catalog-import/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src", "dev"],
-  "compilerOptions": {}
-}