Wrap catalog filters in accordion for smaller screens

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

plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2020 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 {
+  EntityKindPicker,
+  EntityLifecyclePicker,
+  EntityOwnerPicker,
+  EntityTagPicker,
+  EntityTypePicker,
+  UserListFilterKind,
+  UserListPicker,
+} from '@backstage/plugin-catalog-react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Grid,
+  isWidthDown,
+  Typography,
+  withWidth,
+} from '@material-ui/core';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import React, { PropsWithChildren } from 'react';
+
+interface IProps {
+  initiallySelectedFilter?: UserListFilterKind;
+}
+
+const CatalogFilterWrapper = withWidth()(
+  ({ width, children }: PropsWithChildren<{ width: Breakpoint }>) =>
+    isWidthDown('md', width) ? (
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMore />}>
+          <Typography>Filters</Typography>
+        </AccordionSummary>
+        <AccordionDetails>{children}</AccordionDetails>
+      </Accordion>
+    ) : (
+      <React.Fragment>{children}</React.Fragment>
+    ),
+);
+
+export const CatalogFilter = ({
+  initiallySelectedFilter = 'owned',
+}: IProps) => (
+  <CatalogFilterWrapper>
+    <Grid container alignContent="flex-start">
+      <Grid item xs={12} sm={4} lg={12}>
+        <EntityKindPicker initialFilter="component" hidden />
+        <EntityTypePicker />
+      </Grid>
+      <Grid item xs={12} sm={4} lg={12}>
+        <UserListPicker initialFilter={initiallySelectedFilter} />
+      </Grid>
+      <Grid item xs={12} sm={4} lg={12}>
+        <EntityOwnerPicker />
+        <EntityLifecyclePicker />
+        <EntityTagPicker />
+      </Grid>
+    </Grid>
+  </CatalogFilterWrapper>
+);

plugins/catalog/src/components/CatalogFilter/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 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.
+ */
+
+export { CatalogFilter } from './CatalogFilter';

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

@@ -15,16 +15,10 @@
  */
 
 import React from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, withWidth } from '@material-ui/core';
 import {
-  EntityKindPicker,
-  EntityLifecyclePicker,
   EntityListProvider,
-  EntityOwnerPicker,
-  EntityTagPicker,
-  EntityTypePicker,
   UserListFilterKind,
-  UserListPicker,
 } from '@backstage/plugin-catalog-react';
 import { CatalogTable } from '../CatalogTable';
 
@@ -38,6 +32,7 @@ import {
   TableColumn,
   TableProps,
 } from '@backstage/core-components';
+import { CatalogFilter } from '../CatalogFilter';
 
 export type CatalogPageProps = {
   initiallySelectedFilter?: UserListFilterKind;
@@ -45,40 +40,29 @@ export type CatalogPageProps = {
   actions?: TableProps<EntityRow>['actions'];
 };
 
-export const CatalogPage = ({
-  initiallySelectedFilter = 'owned',
-  columns,
-  actions,
-}: CatalogPageProps) => (
-  <CatalogLayout>
-    <Content>
-      <ContentHeader title="Components">
-        <CreateComponentButton />
-        <SupportButton>All your software catalog entities</SupportButton>
-      </ContentHeader>
-      <Grid container spacing={2}>
-        <EntityListProvider>
-          <Grid item sm={12} lg={2} alignContent="flex-start">
-            <Grid container>
-              <Grid item xs={12} sm={4} lg={12}>
-                <EntityKindPicker initialFilter="component" hidden />
-                <EntityTypePicker />
+export const CatalogPage = withWidth()(
+  ({ columns, actions, initiallySelectedFilter }: CatalogPageProps) => {
+    return (
+      <CatalogLayout>
+        <Content>
+          <ContentHeader title="Components">
+            <CreateComponentButton />
+            <SupportButton>All your software catalog entities</SupportButton>
+          </ContentHeader>
+          <Grid container spacing={2}>
+            <EntityListProvider>
+              <Grid item xs={12} sm={12} lg={2}>
+                <CatalogFilter
+                  initiallySelectedFilter={initiallySelectedFilter}
+                />
               </Grid>
-              <Grid item xs={12} sm={4} lg={12}>
-                <UserListPicker initialFilter={initiallySelectedFilter} />
+              <Grid item xs={12} sm={12} lg={10}>
+                <CatalogTable columns={columns} actions={actions} />
               </Grid>
-              <Grid item xs={12} sm={4} lg={12}>
-                <EntityOwnerPicker />
-                <EntityLifecyclePicker />
-                <EntityTagPicker />
-              </Grid>
-            </Grid>
+            </EntityListProvider>
           </Grid>
-          <Grid item xs={12} sm={12} lg={10}>
-            <CatalogTable columns={columns} actions={actions} />
-          </Grid>
-        </EntityListProvider>
-      </Grid>
-    </Content>
-  </CatalogLayout>
+        </Content>
+      </CatalogLayout>
+    );
+  },
 );