Move Filter in a Button with Icon

Fix SupportButton flex layout

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

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

@@ -100,9 +100,8 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => {
         color="primary"
         onClick={onClickHandler}
       >
-        <Box marginRight={1}>
-          <HelpIcon />
-        </Box>
+        <HelpIcon />
+        <Box mr={1} />
         Support
       </Button>
       <Popover

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

@@ -62,7 +62,7 @@ type DefaultTitleProps = {
   className?: string;
 };
 
-export const ContentHeaderTitle = ({
+const ContentHeaderTitle = ({
   title = 'Unknown page',
   className,
 }: DefaultTitleProps) => (

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

@@ -16,6 +16,7 @@
 
 import {
   Content,
+  ContentHeader,
   PageWithHeader,
   SupportButton,
   TableColumn,
@@ -41,7 +42,6 @@ import {
   TableContainer,
   FilterContainer,
 } from '../FilteredTableLayout';
-import { CatalogPageHeader } from './CatalogPageHeader';
 
 export type CatalogPageProps = {
   initiallySelectedFilter?: UserListFilterKind;
@@ -60,11 +60,11 @@ export const CatalogPage = ({
   return (
     <PageWithHeader title={`${orgName} Catalog`} themeId="home">
       <Content>
+        <ContentHeader title="Components">
+          <CreateComponentButton />
+          <SupportButton>All your software catalog entities</SupportButton>
+        </ContentHeader>
         <EntityListProvider>
-          <CatalogPageHeader>
-            <CreateComponentButton />
-            <SupportButton>All your software catalog entities</SupportButton>
-          </CatalogPageHeader>
           <FilteredTableLayout>
             <FilterContainer>
               <EntityKindPicker initialFilter="component" hidden />

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

@@ -1,50 +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 { ContentHeader, ContentHeaderTitle } from '@backstage/core-components';
-import { useEntityListProvider } from '@backstage/plugin-catalog-react';
-import { BackstageTheme } from '@backstage/theme';
-import { Box, IconButton, useMediaQuery } from '@material-ui/core';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import React from 'react';
-
-const CatalogPageHeaderAction = () => {
-  const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('md'),
-  );
-  const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider();
-
-  return isMidSizeScreen ? (
-    <Box display="flex" alignItems="center">
-      <ContentHeaderTitle title="Components" />
-      <IconButton onClick={() => toggleFiltersDrawer(!showFiltersDrawer)}>
-        <FilterListIcon />
-      </IconButton>
-    </Box>
-  ) : (
-    <ContentHeaderTitle title="Components" />
-  );
-};
-
-export const CatalogPageHeader = ({
-  children,
-}: React.PropsWithChildren<{}>) => {
-  return (
-    <ContentHeader titleComponent={() => <CatalogPageHeaderAction />}>
-      {children}
-    </ContentHeader>
-  );
-};

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

@@ -31,6 +31,9 @@ export const FilterContainer = ({ children }: React.PropsWithChildren<{}>) => {
       onClose={() => {
         toggleFiltersDrawer(false);
       }}
+      PaperProps={{
+        style: { width: '300px' },
+      }}
       elevation={0}
       anchor="left"
       disableAutoFocus

plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx

@@ -14,17 +14,46 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Grid } from '@material-ui/core';
+import { useEntityListProvider } from '@backstage/plugin-catalog-react';
+import { BackstageTheme } from '@backstage/theme';
+import {
+  Box,
+  Button,
+  Grid,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@material-ui/core';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import React, { Fragment } from 'react';
 
 interface IProps {}
 
 export const FilteredTableLayout = ({
   children,
 }: React.PropsWithChildren<IProps>) => {
+  const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.down('md'),
+  );
+  const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider();
+  const theme = useTheme<BackstageTheme>();
+
   return (
-    <Grid container style={{ position: 'relative' }}>
-      {children}
-    </Grid>
+    <Fragment>
+      {isMidSizeScreen && (
+        <Button
+          style={{ paddingLeft: 0, marginBottom: theme.spacing(1) }}
+          onClick={() => toggleFiltersDrawer(!showFiltersDrawer)}
+        >
+          <Box display="flex" alignItems="center">
+            <FilterListIcon style={{ marginRight: theme.spacing(1) }} />
+            Filters
+          </Box>
+        </Button>
+      )}
+      <Grid container style={{ position: 'relative' }}>
+        {children}
+      </Grid>
+    </Fragment>
   );
 };