Merge pull request #5240 from goober/feature/use-external-route-ref-for-scaffolder

Expose the register-component route as an external route from the scaffolder

.changeset/loud-apricots-fix.md

@@ -0,0 +1,31 @@
+---
+'@backstage/create-app': patch
+'@backstage/plugin-scaffolder': minor
+---
+
+Expose the catalog-import route as an external route from the scaffolder.
+
+This will make it possible to hide the "Register Existing Component" button
+when you for example are running backstage with `catalog.readonly=true`.
+
+As a consequence of this change you need add a new binding to your createApp call to
+keep the button visible. However, if you instead want to hide the button you can safely
+ignore the following example.
+
+To bind the external route from the catalog-import plugin to the scaffolder template
+index page, make sure you have the appropriate imports and add the following
+to the createApp call:
+
+```typescript
+import { catalogImportPlugin } from '@backstage/plugin-catalog-import';
+
+const app = createApp({
+  // ...
+  bindRoutes({ bind }) {
+    // ...
+    bind(scaffolderPlugin.externalRoutes, {
+      registerComponent: catalogImportPlugin.routes.importPage,
+    });
+  },
+});
+```

packages/app/src/App.tsx

@@ -27,7 +27,11 @@ import {
   CatalogIndexPage,
   catalogPlugin,
 } from '@backstage/plugin-catalog';
-import { CatalogImportPage } from '@backstage/plugin-catalog-import';
+
+import {
+  CatalogImportPage,
+  catalogImportPlugin,
+} from '@backstage/plugin-catalog-import';
 import {
   CostInsightsLabelDataflowInstructionsPage,
   CostInsightsPage,
@@ -82,6 +86,9 @@ const app = createApp({
     bind(explorePlugin.externalRoutes, {
       catalogEntity: catalogPlugin.routes.catalogEntity,
     });
+    bind(scaffolderPlugin.externalRoutes, {
+      registerComponent: catalogImportPlugin.routes.importPage,
+    });
   },
 });
 

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -12,7 +12,7 @@ import {
   CatalogIndexPage,
   catalogPlugin,
 } from '@backstage/plugin-catalog';
-import { CatalogImportPage } from '@backstage/plugin-catalog-import';
+import {CatalogImportPage, catalogImportPlugin} from '@backstage/plugin-catalog-import';
 import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
 import { SearchPage } from '@backstage/plugin-search';
 import { TechRadarPage } from '@backstage/plugin-tech-radar';
@@ -33,6 +33,9 @@ const app = createApp({
     bind(apiDocsPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,
     });
+    bind(scaffolderPlugin.externalRoutes, {
+      registerComponent: catalogImportPlugin.routes.importPage,
+    });
   },
 });
 

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -26,6 +26,7 @@ import {
   Progress,
   SupportButton,
   useApi,
+  useRouteRef,
   WarningPanel,
 } from '@backstage/core';
 import { useStarredEntities } from '@backstage/plugin-catalog-react';
@@ -39,6 +40,7 @@ import { ScaffolderFilter } from '../ScaffolderFilter';
 import { ButtonGroup } from '../ScaffolderFilter/ScaffolderFilter';
 import SearchToolbar from '../SearchToolbar/SearchToolbar';
 import { TemplateCard, TemplateCardProps } from '../TemplateCard';
+import { registerComponentRouteRef } from '../../routes';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -108,6 +110,8 @@ export const ScaffolderPageContents = () => {
     `${metadata.title}`.toLocaleUpperCase('en-US').includes(query) ||
     metadata.tags?.join('').toLocaleUpperCase('en-US').indexOf(query) !== -1;
 
+  const registerComponentLink = useRouteRef(registerComponentRouteRef);
+
   useEffect(() => {
     if (search.length === 0) {
       return setMatchingEntities(filteredEntities);
@@ -132,14 +136,16 @@ export const ScaffolderPageContents = () => {
       />
       <Content>
         <ContentHeader title="Available Templates">
-          <Button
-            variant="contained"
-            color="primary"
-            component={RouterLink}
-            to="/catalog-import"
-          >
-            Register Existing Component
-          </Button>
+          {registerComponentLink && (
+            <Button
+              component={RouterLink}
+              variant="contained"
+              color="primary"
+              to={registerComponentLink()}
+            >
+              Register Existing Component
+            </Button>
+          )}
           <SupportButton>
             Create new software components using standard templates. Different
             templates create different kinds of components (services, websites,

plugins/scaffolder/src/plugin.ts

@@ -23,7 +23,7 @@ import {
 } from '@backstage/core';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 import { scaffolderApiRef, ScaffolderClient } from './api';
-import { rootRouteRef } from './routes';
+import { rootRouteRef, registerComponentRouteRef } from './routes';
 
 export const scaffolderPlugin = createPlugin({
   id: 'scaffolder',
@@ -42,6 +42,9 @@ export const scaffolderPlugin = createPlugin({
   routes: {
     root: rootRouteRef,
   },
+  externalRoutes: {
+    registerComponent: registerComponentRouteRef,
+  },
 });
 
 export const ScaffolderPage = scaffolderPlugin.provide(

plugins/scaffolder/src/routes.ts

@@ -13,7 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createRouteRef } from '@backstage/core';
+import { createExternalRouteRef, createRouteRef } from '@backstage/core';
+
+export const registerComponentRouteRef = createExternalRouteRef({
+  id: 'register-component',
+  optional: true,
+});
 
 export const rootRouteRef = createRouteRef({
   title: 'Create new entity',