Merge pull request #6635 from tudi2d/catalog-fully-responsive

ContentHeader responsiveness

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx

@@ -17,6 +17,7 @@
 import {
   Content,
   ContentHeader,
+  CreateButton,
   PageWithHeader,
   SupportButton,
   TableColumn,
@@ -39,9 +40,7 @@ import {
   UserListFilterKind,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import { Button } from '@material-ui/core';
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import { createComponentRouteRef } from '../../routes';
 
 const defaultColumns: TableColumn<CatalogTableRow>[] = [
@@ -63,11 +62,11 @@ export const ApiExplorerPage = ({
   initiallySelectedFilter = 'all',
   columns,
 }: ApiExplorerPageProps) => {
-  const createComponentLink = useRouteRef(createComponentRouteRef);
   const configApi = useApi(configApiRef);
   const generatedSubtitle = `${
     configApi.getOptionalString('organization.name') ?? 'Backstage'
   } API Explorer`;
+  const createComponentLink = useRouteRef(createComponentRouteRef);
 
   return (
     <PageWithHeader
@@ -78,16 +77,10 @@ export const ApiExplorerPage = ({
     >
       <Content>
         <ContentHeader title="">
-          {createComponentLink && (
-            <Button
-              variant="contained"
-              color="primary"
-              component={RouterLink}
-              to={createComponentLink()}
-            >
-              Register Existing API
-            </Button>
-          )}
+          <CreateButton
+            title="Register Existing API"
+            to={createComponentLink?.()}
+          />
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <EntityListProvider>

plugins/catalog/api-report.md

@@ -160,11 +160,6 @@ export type CatalogTableRow = {
   };
 };
 
-// Warning: (ae-missing-release-tag) "CreateComponentButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export const CreateComponentButton: () => JSX.Element | null;
-
 // Warning: (ae-missing-release-tag) "createMetadataDescriptionColumn" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -17,12 +17,13 @@
 import {
   Content,
   ContentHeader,
+  CreateButton,
   PageWithHeader,
   SupportButton,
   TableColumn,
   TableProps,
 } from '@backstage/core-components';
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   EntityKindPicker,
   EntityLifecyclePicker,
@@ -34,9 +35,9 @@ import {
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
+import { createComponentRouteRef } from '../../routes';
 import { CatalogTable } from '../CatalogTable';
 import { EntityRow } from '../CatalogTable/types';
-import { CreateComponentButton } from '../CreateComponentButton';
 import {
   FilteredEntityLayout,
   EntityListContainer,
@@ -56,12 +57,16 @@ export const CatalogPage = ({
 }: CatalogPageProps) => {
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
+  const createComponentLink = useRouteRef(createComponentRouteRef);
 
   return (
     <PageWithHeader title={`${orgName} Catalog`} themeId="home">
       <Content>
         <ContentHeader title="Components">
-          <CreateComponentButton />
+          <CreateButton
+            title="Create Component"
+            to={createComponentLink && createComponentLink()}
+          />
           <SupportButton>All your software catalog entities</SupportButton>
         </ContentHeader>
         <EntityListProvider>

plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx

@@ -1,36 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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 React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Button } from '@material-ui/core';
-import { createComponentRouteRef } from '../../routes';
-import { useRouteRef } from '@backstage/core-plugin-api';
-
-export const CreateComponentButton = () => {
-  const createComponentLink = useRouteRef(createComponentRouteRef);
-
-  return createComponentLink ? (
-    <Button
-      component={RouterLink}
-      variant="contained"
-      color="primary"
-      to={createComponentLink()}
-    >
-      Create Component
-    </Button>
-  ) : null;
-};

plugins/catalog/src/components/CreateComponentButton/index.ts

@@ -1,17 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * 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.
- */
-
-export { CreateComponentButton } from './CreateComponentButton';

plugins/catalog/src/index.ts

@@ -20,7 +20,6 @@ export * from './components/CatalogResultListItem';
 export { CatalogTable } from './components/CatalogTable';
 export type { EntityRow as CatalogTableRow } from './components/CatalogTable';
 export * from './components/CatalogTable/columns';
-export * from './components/CreateComponentButton';
 export * from './components/EntityLayout';
 export * from './components/EntityOrphanWarning';
 export * from './components/EntityProcessingErrorsPanel';

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

@@ -17,6 +17,7 @@
 import {
   Content,
   ContentHeader,
+  CreateButton,
   Header,
   Lifecycle,
   Page,
@@ -30,9 +31,8 @@ import {
   EntityTagPicker,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import { Button, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import { registerComponentRouteRef } from '../../routes';
 import { TemplateList } from '../TemplateList';
 import { TemplateTypePicker } from '../TemplateTypePicker';
@@ -64,16 +64,10 @@ export const ScaffolderPageContents = () => {
       />
       <Content>
         <ContentHeader title="Available Templates">
-          {registerComponentLink && (
-            <Button
-              component={RouterLink}
-              variant="contained"
-              color="primary"
-              to={registerComponentLink()}
-            >
-              Register Existing Component
-            </Button>
-          )}
+          <CreateButton
+            title="Register Existing Component"
+            to={registerComponentLink && registerComponentLink()}
+          />
           <SupportButton>
             Create new software components using standard templates. Different
             templates create different kinds of components (services, websites,