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}
>
-
-
-
+
+
Support
(
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 (
+
+
+ All your software catalog entities
+
-
-
- All your software catalog entities
-
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(theme =>
- theme.breakpoints.down('md'),
- );
- const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider();
-
- return isMidSizeScreen ? (
-
-
- toggleFiltersDrawer(!showFiltersDrawer)}>
-
-
-
- ) : (
-
- );
-};
-
-export const CatalogPageHeader = ({
- children,
-}: React.PropsWithChildren<{}>) => {
- return (
- }>
- {children}
-
- );
-};
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) => {
+ const isMidSizeScreen = useMediaQuery(theme =>
+ theme.breakpoints.down('md'),
+ );
+ const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider();
+ const theme = useTheme();
+
return (
-
- {children}
-
+
+ {isMidSizeScreen && (
+
+ )}
+
+ {children}
+
+
);
};