Merge pull request #4014 from backstage/freben/import-url-type

catalog-import: Improve how URLs are analyzed for add/import

.changeset/eighty-rats-smash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-import': patch
+---
+
+Improve how URLs are analyzed for add/import

app-config.yaml

@@ -213,6 +213,7 @@ scaffolder:
         $env: BITBUCKET_USERNAME
       token:
         $env: BITBUCKET_TOKEN
+
 auth:
   environment: development
   ### Providing an auth.session.secret will enable session support in the auth-backend

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

@@ -33,13 +33,13 @@ import {
   StructuredMetadataTable,
   useApi,
 } from '@backstage/core';
-import parseGitUri from 'git-url-parse';
 import { PartialEntity } from '../util/types';
 import { generatePath, resolvePath } from 'react-router';
 import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
 import { Link as RouterLink } from 'react-router-dom';
 import * as YAML from 'yaml';
+import { urlType } from '../util/urls';
 
 const getEntityCatalogPath = ({
   entity,
@@ -81,7 +81,7 @@ const ComponentConfigDisplay = ({
   const onNext = useCallback(async () => {
     try {
       setSubmitting(true);
-      if (!parseGitUri(configFile.location).filepathtype) {
+      if (urlType(configFile.location) === 'tree') {
         const result = await submitPrToRepo(configFile);
         savePRLink(result.link);
         setSubmitting(false);
@@ -100,7 +100,7 @@ const ComponentConfigDisplay = ({
 
   return (
     <Grid container direction="column" spacing={1}>
-      {!parseGitUri(configFile.location).filepathtype ? (
+      {urlType(configFile.location) === 'tree' ? (
         <Typography>
           Following config object will be submitted in a pull request to the
           repository{' '}
@@ -127,7 +127,7 @@ const ComponentConfigDisplay = ({
       )}
 
       <Grid item>
-        {!parseGitUri(configFile.location).filepathtype ? (
+        {urlType(configFile.location) === 'tree' ? (
           <pre>{YAML.stringify(configFile.config)}</pre>
         ) : (
           <List>

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

@@ -26,11 +26,11 @@ import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useMountedState } from 'react-use';
-import parseGitUri from 'git-url-parse';
 import { ComponentIdValidators } from '../util/validate';
 import { useGithubRepos } from '../util/useGithubRepos';
 import { ConfigSpec } from './ImportComponentPage';
 import { catalogApiRef } from '@backstage/plugin-catalog';
+import { urlType } from '../util/urls';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   form: {
@@ -65,9 +65,9 @@ export const RegisterComponentForm = ({ nextStep, saveConfig }: Props) => {
     const { componentLocation: target } = formData;
     try {
       if (!isMounted()) return;
-      const type = !parseGitUri(target).filepathtype ? 'repo' : 'file';
+      const type = urlType(target);
 
-      if (type === 'repo') {
+      if (type === 'tree') {
         saveConfig({
           type,
           location: target,

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

@@ -32,7 +32,7 @@ import { ImportFinished } from './ImportFinished';
 import { PartialEntity } from '../util/types';
 
 export type ConfigSpec = {
-  type: 'repo' | 'file';
+  type: 'tree' | 'file';
   location: string;
   config: PartialEntity[];
 };
@@ -44,7 +44,7 @@ export const ImportComponentPage = ({
 }) => {
   const [activeStep, setActiveStep] = useState(0);
   const [configFile, setConfigFile] = useState<ConfigSpec>({
-    type: 'repo',
+    type: 'tree',
     location: '',
     config: [],
   });

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

@@ -19,7 +19,7 @@ import { Alert } from '@material-ui/lab';
 import { Button, Grid, Link } from '@material-ui/core';
 
 type Props = {
-  type: 'repo' | 'file';
+  type: 'tree' | 'file';
   nextStep: (options?: { reset: boolean }) => void;
   PRLink: string;
 };
@@ -29,13 +29,13 @@ export const ImportFinished = ({ nextStep, PRLink, type }: Props) => {
     <Grid container direction="column" spacing={1}>
       <Grid item>
         <Alert severity="success">
-          {type === 'repo'
+          {type === 'tree'
             ? 'Pull requests have been successfully opened. You can start again to import more repositories'
             : 'Entity added to catalog successfully'}
         </Alert>
       </Grid>
       <Grid item>
-        {type === 'repo' ? (
+        {type === 'tree' ? (
           <Link
             href={PRLink}
             style={{ marginRight: '8px' }}

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import parseGitUri from 'git-url-parse';
+
+export type UrlType = 'file' | 'tree';
+
+export function urlType(url: string): UrlType {
+  const { filepathtype, filepath } = parseGitUri(url);
+
+  if (filepathtype === 'tree' || filepathtype === 'file') {
+    return filepathtype;
+  } else if (filepath?.match(/\.ya?ml$/)) {
+    return 'file';
+  }
+
+  return 'tree';
+}