Minor tweaks, button fixes

Signed-off-by: Tim Hansen <timbonicus@gmail.com>

.changeset/green-lies-hammer.md

@@ -5,6 +5,4 @@
 '@backstage/plugin-catalog': patch
 ---
 
-Changing the layout of the Catalog & API page to use responsive wrappers for table & filters. The goal is to enforce a responsive layout & that the Catalog & API page are better useable on smaller screens by showing more of the main content. To apply this changes to your custom catalog page, you can add the wrappers following the updated documentation on catalog customization.
-
-Additionally, the tests for Material UI breakpoints were adjusted & used to test the responsive wrappers.
+Updated the layout of catalog and API index pages to handle smaller screen sizes. This adds responsive wrappers to the entity tables, and switches filters to a drawer when width-constrained. If you have created a custom catalog or API index page, you will need to update the page structure to match the updated [catalog customization](https://backstage.io/docs/features/software-catalog/catalog-customization) documentation.

docs/features/software-catalog/catalog-customization.md

@@ -27,7 +27,11 @@ default catalog page and create a component in a
 ```tsx
 // imports, etc omitted for brevity. for full source see:
 // https://github.com/backstage/backstage/blob/master/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
-export const CustomCatalogPage = () => {
+export const CustomCatalogPage = ({
+  columns,
+  actions,
+  initiallySelectedFilter = 'owned',
+}: CatalogPageProps) => {
   return (
     <PageWithHeader title={`${orgName} Catalog`} themeId="home">
       <Content>
@@ -139,23 +143,27 @@ export const EntitySecurityTierPicker = () => {
 Now we can add the component to `CustomCatalogPage`:
 
 ```diff
-export const CustomCatalogPage = () => {
+export const CustomCatalogPage = ({
+  columns,
+  actions,
+  initiallySelectedFilter = 'owned',
+}: CatalogPageProps) => {
   return (
     ...
-          <EntityListProvider>
-            <FilteredEntityLayout>
-              <FilterContainer>
-                <EntityKindPicker initialFilter="component" hidden />
-                <EntityTypePicker />
-                <UserListPicker />
-+               <EntitySecurityTierPicker />
-                <EntityTagPicker />
-              <FilterContainer>
-              <EntityListContainer>
-                <CatalogTable />
-              </EntityListContainer>
-            </FilteredEntityLayout>
-          </EntityListProvider>
+        <EntityListProvider>
+          <FilteredEntityLayout>
+            <FilterContainer>
+              <EntityKindPicker initialFilter="component" hidden />
+              <EntityTypePicker />
+              <UserListPicker initialFilter={initiallySelectedFilter} />
++             <EntitySecurityTierPicker />
+              <EntityTagPicker />
+            <FilterContainer>
+            <EntityListContainer>
+              <CatalogTable columns={columns} actions={actions} />
+            </EntityListContainer>
+          </FilteredEntityLayout>
+        </EntityListProvider>
     ...
 };
 ```

packages/core-components/src/components/SupportButton/SupportButton.tsx

@@ -28,7 +28,7 @@ import {
   makeStyles,
   Popover,
 } from '@material-ui/core';
-import React, { Fragment, MouseEventHandler, useState } from 'react';
+import React, { MouseEventHandler, useState } from 'react';
 import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks';
 import { Link } from '../Link';
 
@@ -94,17 +94,17 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => {
   };
 
   return (
-    <Fragment>
-      <Button
-        data-testid="support-button"
-        color="primary"
-        onClick={onClickHandler}
-      >
-        <Box mr={1} height={24}>
-          <HelpIcon />
-        </Box>
-        Support
-      </Button>
+    <>
+      <Box ml={1}>
+        <Button
+          data-testid="support-button"
+          color="primary"
+          onClick={onClickHandler}
+          startIcon={<HelpIcon />}
+        >
+          Support
+        </Button>
+      </Box>
       <Popover
         data-testid="support-button-popover"
         open={popoverOpen}
@@ -141,6 +141,6 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => {
           </Button>
         </DialogActions>
       </Popover>
-    </Fragment>
+    </>
   );
 };

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -18,7 +18,7 @@
  * TODO favoriteable capability
  */
 
-import React, { ComponentType, Fragment, PropsWithChildren } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { Typography, makeStyles } from '@material-ui/core';
 import { Helmet } from 'react-helmet';
 
@@ -98,7 +98,7 @@ export const ContentHeader = ({
     <ContentHeaderTitle title={title} className={classes.title} />
   );
   return (
-    <Fragment>
+    <>
       <Helmet title={title} />
       <div className={classes.container}>
         <div className={classes.leftItemsBox}>
@@ -111,6 +111,6 @@ export const ContentHeader = ({
         </div>
         <div className={classes.rightItemsBox}>{children}</div>
       </div>
-    </Fragment>
+    </>
   );
 };

plugins/catalog/api-report.md

@@ -104,6 +104,11 @@ 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

@@ -36,7 +36,7 @@ import {
 import React from 'react';
 import { CatalogTable } from '../CatalogTable';
 import { EntityRow } from '../CatalogTable/types';
-import { CreateComponentButton } from '../CreateComponentButton/CreateComponentButton';
+import { CreateComponentButton } from '../CreateComponentButton';
 import {
   FilteredEntityLayout,
   EntityListContainer,

plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx

@@ -32,27 +32,21 @@ export const FilterContainer = ({ children }: PropsWithChildren<{}>) => {
     theme.breakpoints.down('md'),
   );
   const theme = useTheme<BackstageTheme>();
-  const [showFiltersDrawer, toggleFiltersDrawer] = useState<boolean>(false);
+  const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);
 
   return isMidSizeScreen ? (
     <>
       <Button
         style={{ marginTop: theme.spacing(1), marginLeft: theme.spacing(1) }}
-        onClick={() => toggleFiltersDrawer(!showFiltersDrawer)}
+        onClick={() => setFilterDrawerOpen(true)}
+        startIcon={<FilterListIcon />}
       >
-        <Box display="flex" alignItems="center">
-          <FilterListIcon style={{ marginRight: theme.spacing(1) }} />
-          Filters
-        </Box>
+        Filters
       </Button>
       <Drawer
-        title="Filters"
         data-testid="entity-filters-drawer"
-        open={showFiltersDrawer}
-        onClose={() => {
-          toggleFiltersDrawer(false);
-        }}
-        elevation={0}
+        open={filterDrawerOpen}
+        onClose={() => setFilterDrawerOpen(false)}
         anchor="left"
         disableAutoFocus
         keepMounted

plugins/catalog/src/index.ts

@@ -15,13 +15,16 @@
  */
 
 export * from './components/AboutCard';
-export { CatalogResultListItem } from './components/CatalogResultListItem';
+export * from './components/CatalogResultListItem';
 export { CatalogTable } from './components/CatalogTable';
 export type { EntityRow as CatalogTableRow } from './components/CatalogTable';
-export { EntityLayout } from './components/EntityLayout';
+export * from './components/CatalogTable/columns';
+export * from './components/CreateComponentButton';
+export * from './components/EntityLayout';
 export * from './components/EntityOrphanWarning';
-export { EntityPageLayout } from './components/EntityPageLayout';
+export * from './components/EntityPageLayout';
 export * from './components/EntitySwitch';
+export * from './components/FilteredEntityLayout';
 export { Router } from './components/Router';
 export {
   CatalogEntityPage,
@@ -39,5 +42,3 @@ export {
   EntityLinksCard,
   EntitySystemDiagramCard,
 } from './plugin';
-export * from './components/CatalogTable/columns';
-export * from './components/FilteredEntityLayout';