feat: allow specifying breakpoint for catalog filters

This feature allows app developers to specify breakpoint when catalog
filters are moved under drawer instead having hard-coded 'md' breakpoint
for that.

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.changeset/sour-hats-kick.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Allow specifying screen size when catalog filters are hidden in drawer

plugins/catalog-react/api-report.md

@@ -63,7 +63,13 @@ export const catalogApiRef: ApiRef<CatalogApi>;
 // @public (undocumented)
 export const CatalogFilterLayout: {
   (props: { children: React_2.ReactNode }): JSX.Element;
-  Filters: (props: { children: React_2.ReactNode }) => JSX.Element;
+  Filters: (props: {
+    children: React_2.ReactNode;
+    options?: {
+      drawerBreakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+      drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';
+    };
+  }) => JSX.Element;
   Content: (props: { children: React_2.ReactNode }) => JSX.Element;
 };
 

plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx

@@ -28,14 +28,20 @@ import FilterListIcon from '@material-ui/icons/FilterList';
 import { BackstageTheme } from '@backstage/theme';
 
 /** @public */
-export const Filters = (props: { children: React.ReactNode }) => {
-  const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('md'),
+export const Filters = (props: {
+  children: React.ReactNode;
+  options?: {
+    drawerBreakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';
+  };
+}) => {
+  const isScreenSmallerThanBreakpoint = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
   );
   const theme = useTheme<BackstageTheme>();
   const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);
 
-  return isMidSizeScreen ? (
+  return isScreenSmallerThanBreakpoint ? (
     <>
       <Button
         style={{ marginTop: theme.spacing(1), marginLeft: theme.spacing(1) }}
@@ -47,7 +53,7 @@ export const Filters = (props: { children: React.ReactNode }) => {
       <Drawer
         open={filterDrawerOpen}
         onClose={() => setFilterDrawerOpen(false)}
-        anchor="left"
+        anchor={props.options?.drawerAnchor ?? 'left'}
         disableAutoFocus
         keepMounted
         variant="temporary"

plugins/catalog/api-report.md

@@ -413,7 +413,22 @@ export interface EntitySwitchProps {
 }
 
 // @public @deprecated (undocumented)
-export const FilterContainer: (props: { children: ReactNode }) => JSX.Element;
+export const FilterContainer: (props: {
+  children: ReactNode;
+  options?:
+    | {
+        drawerBreakpoint?:
+          | number
+          | 'xs'
+          | 'sm'
+          | 'md'
+          | 'lg'
+          | 'xl'
+          | undefined;
+        drawerAnchor?: 'left' | 'top' | 'bottom' | 'right' | undefined;
+      }
+    | undefined;
+}) => JSX.Element;
 
 // @public @deprecated (undocumented)
 export const FilteredEntityLayout: (props: {