Merge branch 'catalog-filter-accordion' of github.com:tudi2d/backstage into catalog-filter-accordion

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

plugins/catalog/api-report.md

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

@@ -16,13 +16,14 @@
 
 export { CatalogClientWrapper } from './CatalogClientWrapper';
 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 * from './components/CatalogTable/columns';
-export { EntityLayout } from './components/EntityLayout';
+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';