From 22e0b4fce4ccedd49e4745fd6324d85c8a8f056d Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Wed, 14 Jul 2021 12:09:58 +0200
Subject: [PATCH] Move Filter in a Button with Icon

Fix SupportButton flex layout

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../SupportButton/SupportButton.tsx           |  5 +-
 .../layout/ContentHeader/ContentHeader.tsx    |  2 +-
 .../components/CatalogPage/CatalogPage.tsx    | 10 ++--
 .../CatalogPage/CatalogPageHeader.tsx         | 50 -------------------
 .../FilteredTableLayout/FilterContainer.tsx   |  3 ++
 .../FilteredTableLayout.tsx                   | 39 +++++++++++++--
 6 files changed, 45 insertions(+), 64 deletions(-)
 delete mode 100644 plugins/catalog/src/components/CatalogPage/CatalogPageHeader.tsx

diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx
index 2ffef89878..53c9b20273 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.tsx
+++ b/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
diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
index 5c773770be..c7e34ebb20 100644
--- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
+++ b/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) => (
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 3df46ff0c0..5da46eec97 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/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 />
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPageHeader.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPageHeader.tsx
deleted file mode 100644
index f628aef596..0000000000
--- a/plugins/catalog/src/components/CatalogPage/CatalogPageHeader.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx b/plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx
index 3dd673fa8d..a394393f64 100644
--- a/plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx
+++ b/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
diff --git a/plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx b/plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx
index a0debe618f..3616a01f21 100644
--- a/plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx
+++ b/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>
   );
 };