Refactor filter components

pkg/app/web/src/components/application-filter.stories.tsx

@@ -26,5 +26,5 @@ export default {
 };
 
 export const overview: React.FC = () => (
-  <ApplicationFilter open onChange={action("onChange")} />
+  <ApplicationFilter onChange={action("onChange")} />
 );

pkg/app/web/src/components/application-filter.tsx

@@ -1,12 +1,9 @@
 import {
-  Button,
   FormControl,
   InputLabel,
   makeStyles,
   MenuItem,
-  Paper,
   Select,
-  Typography,
 } from "@material-ui/core";
 import React, { FC, memo } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -25,35 +22,22 @@ import {
   ApplicationSyncStatusKey,
 } from "../modules/applications";
 import { Environment, selectAll } from "../modules/environments";
-
-const FILTER_PAPER_WIDTH = 360;
+import { FilterView } from "./filter-view";
 
 const useStyles = makeStyles((theme) => ({
-  main: {
-    display: "flex",
-  },
-  header: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
   toolbarSpacer: {
     flexGrow: 1,
   },
   formItem: {
     width: "100%",
     marginTop: theme.spacing(4),
   },
-  filterPaper: {
-    width: FILTER_PAPER_WIDTH,
-    padding: theme.spacing(3),
-  },
   select: {
     width: "100%",
   },
 }));
 
 interface Props {
-  open: boolean;
   onChange: () => void;
 }
 
@@ -62,7 +46,6 @@ const getActiveStatusText = (v: boolean): string =>
   v ? "enabled" : "disabled";
 
 export const ApplicationFilter: FC<Props> = memo(function ApplicationFilter({
-  open,
   onChange,
 }) {
   const classes = useStyles();
@@ -81,25 +64,13 @@ export const ApplicationFilter: FC<Props> = memo(function ApplicationFilter({
     onChange();
   };
 
-  if (open === false) {
-    return null;
-  }
-
   return (
-    <Paper className={classes.filterPaper} square>
-      <div className={classes.header}>
-        <Typography variant="h6">Filters</Typography>
-        <Button
-          color="primary"
-          onClick={() => {
-            dispatch(clearApplicationFilter());
-            onChange();
-          }}
-        >
-          Clear
-        </Button>
-      </div>
-
+    <FilterView
+      onClear={() => {
+        dispatch(clearApplicationFilter());
+        onChange();
+      }}
+    >
       <FormControl className={classes.formItem} variant="outlined">
         <InputLabel id="filter-env">Environment</InputLabel>
         <Select
@@ -226,6 +197,6 @@ export const ApplicationFilter: FC<Props> = memo(function ApplicationFilter({
           <MenuItem value="disabled">Disabled</MenuItem>
         </Select>
       </FormControl>
-    </Paper>
+    </FilterView>
   );
 });

pkg/app/web/src/components/deployment-filter.stories.tsx

@@ -28,5 +28,5 @@ export default {
 };
 
 export const overview: React.FC = () => (
-  <DeploymentFilter open onChange={action("onChange")} />
+  <DeploymentFilter onChange={action("onChange")} />
 );

pkg/app/web/src/components/deployment-filter.tsx

@@ -1,13 +1,10 @@
 import {
-  Button,
   FormControl,
   InputLabel,
   makeStyles,
   MenuItem,
-  Paper,
   Select,
   TextField,
-  Typography,
 } from "@material-ui/core";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import React, { FC, memo, useCallback } from "react";
@@ -29,26 +26,13 @@ import {
 } from "../modules/deployment-filter-options";
 import { DeploymentStatus, DeploymentStatusKey } from "../modules/deployments";
 import { Environment, selectAll } from "../modules/environments";
-
-const FILTER_PAPER_WIDTH = 360;
+import { FilterView } from "./filter-view";
 
 const useStyles = makeStyles((theme) => ({
-  header: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-  toolbarSpacer: {
-    flexGrow: 1,
-  },
   formItem: {
     width: "100%",
     marginTop: theme.spacing(4),
   },
-  filterPaper: {
-    width: FILTER_PAPER_WIDTH,
-    padding: theme.spacing(3),
-    height: "100%",
-  },
   select: {
     width: "100%",
   },
@@ -57,16 +41,13 @@ const useStyles = makeStyles((theme) => ({
 const ALL_VALUE = "ALL";
 
 interface Props {
-  open: boolean;
   onChange: () => void;
 }
 
 export const DeploymentFilter: FC<Props> = memo(function DeploymentFilter({
-  open,
   onChange,
 }) {
   const classes = useStyles();
-
   const dispatch = useDispatch();
   const envs = useSelector<AppState, Environment[]>((state) =>
     selectAll(state.environments)
@@ -88,25 +69,13 @@ export const DeploymentFilter: FC<Props> = memo(function DeploymentFilter({
     [dispatch, onChange]
   );
 
-  if (open === false) {
-    return null;
-  }
-
   return (
-    <Paper className={classes.filterPaper} square>
-      <div className={classes.header}>
-        <Typography variant="h6">Filters</Typography>
-        <Button
-          color="primary"
-          onClick={() => {
-            dispatch(clearDeploymentFilter());
-            onChange();
-          }}
-        >
-          Clear
-        </Button>
-      </div>
-
+    <FilterView
+      onClear={() => {
+        dispatch(clearDeploymentFilter());
+        onChange();
+      }}
+    >
       <FormControl className={classes.formItem} variant="outlined">
         <InputLabel id="filter-env">Environment</InputLabel>
         <Select
@@ -229,6 +198,6 @@ export const DeploymentFilter: FC<Props> = memo(function DeploymentFilter({
           ))}
         </Select>
       </FormControl>
-    </Paper>
+    </FilterView>
   );
 });

pkg/app/web/src/components/filter-view.stories.tsx

@@ -0,0 +1,12 @@
+import { action } from "@storybook/addon-actions";
+import React from "react";
+import { FilterView } from "./filter-view";
+
+export default {
+  title: "FilterView",
+  component: FilterView,
+};
+
+export const overview: React.FC = () => (
+  <FilterView onClear={action("onClear")}>filter</FilterView>
+);

pkg/app/web/src/components/filter-view.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from "react";
+import { Box, Button, makeStyles, Paper, Typography } from "@material-ui/core";
+import { FILTER_PAPER_WIDTH } from "../styles/size";
+
+const useStyles = makeStyles((theme) => ({
+  filterPaper: {
+    width: FILTER_PAPER_WIDTH,
+    padding: theme.spacing(3),
+    height: "100%",
+  },
+}));
+
+interface Props {
+  onClear: () => void;
+  children: React.ReactNode;
+}
+
+export const FilterView: FC<Props> = ({ onClear, children }) => {
+  const classes = useStyles();
+  return (
+    <Paper square className={classes.filterPaper}>
+      <Box display="flex" justifyContent="space-between">
+        <Typography variant="h6" component="span">
+          Filters
+        </Typography>
+        <Button color="primary" onClick={onClear}>
+          Clear
+        </Button>
+      </Box>
+
+      {children}
+    </Paper>
+  );
+};

pkg/app/web/src/components/kubernetes-state-view.test.tsx

@@ -1,6 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "../../test-utils";
+import { UI_TEXT_FILTER } from "../constants/ui-text";
 import { resourcesList } from "../__fixtures__/dummy-application-live-state";
 import { KubernetesStateView } from "./kubernetes-state-view";
 
@@ -13,7 +14,7 @@ test("render resources", () => {
 test("filter resources", () => {
   render(<KubernetesStateView resources={resourcesList} />, {});
 
-  userEvent.click(screen.getByRole("button", { name: "FILTER" }));
+  userEvent.click(screen.getByRole("button", { name: UI_TEXT_FILTER }));
   userEvent.click(screen.getByRole("checkbox", { name: "ReplicaSet" }));
   userEvent.click(screen.getByRole("button", { name: "APPLY" }));
 

pkg/app/web/src/components/piped-filter.tsx

@@ -1,31 +1,18 @@
 import {
-  Button,
   FormControl,
   InputLabel,
   makeStyles,
   MenuItem,
-  Paper,
   Select,
-  Typography,
 } from "@material-ui/core";
 import React, { FC } from "react";
-
-const FILTER_PAPER_WIDTH = 360;
+import { FilterView } from "./filter-view";
 
 const useStyles = makeStyles((theme) => ({
-  filterPaper: {
-    width: FILTER_PAPER_WIDTH,
-    padding: theme.spacing(3),
-    height: "100%",
-  },
   formItem: {
     width: "100%",
     marginTop: theme.spacing(4),
   },
-  header: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
   select: {
     width: "100%",
   },
@@ -53,21 +40,7 @@ export const PipedFilter: FC<Props> = ({ values, onChange }) => {
   const classes = useStyles();
 
   return (
-    <Paper square className={classes.filterPaper}>
-      <div className={classes.header}>
-        <Typography variant="h6" component="span">
-          Filters
-        </Typography>
-        <Button
-          color="primary"
-          onClick={() => {
-            onChange({ enabled: true });
-          }}
-        >
-          Clear
-        </Button>
-      </div>
-
+    <FilterView onClear={() => onChange({ enabled: true })}>
       <FormControl className={classes.formItem} variant="outlined">
         <InputLabel id="filter-active-status">Active Status</InputLabel>
         <Select
@@ -93,6 +66,6 @@ export const PipedFilter: FC<Props> = ({ values, onChange }) => {
           <MenuItem value="disabled">Disabled</MenuItem>
         </Select>
       </FormControl>
-    </Paper>
+    </FilterView>
   );
 };

pkg/app/web/src/components/resource-filter-popover.tsx

@@ -7,6 +7,7 @@ import {
   Popover,
 } from "@material-ui/core";
 import FilterListIcon from "@material-ui/icons/FilterList";
+import { UI_TEXT_FILTER, UI_TEXT_FILTERED } from "../constants/ui-text";
 
 interface Props {
   enables: Record<string, boolean>;
@@ -38,7 +39,7 @@ export const ResourceFilterPopover: FC<Props> = ({ enables, onChange }) => {
           color={isFiltered ? "primary" : "default"}
           onClick={() => setOpen(!open)}
         >
-          {isFiltered ? "FILTERED" : "FILTER"}
+          {isFiltered ? UI_TEXT_FILTERED : UI_TEXT_FILTER}
         </Button>
       </Box>
       <Popover open={open} anchorEl={buttonRef.current} onClose={handleClose}>

pkg/app/web/src/constants/ui-text.ts

@@ -5,3 +5,6 @@ export const UI_TEXT_EDIT = "Edit";
 export const UI_TEXT_REFRESH = "REFRESH";
 export const UI_TEXT_CLOSE = "Close";
 export const UI_TEXT_DELETE = "Delete";
+export const UI_TEXT_FILTER = "FILTER";
+export const UI_TEXT_FILTERED = "FILTERED";
+export const UI_TEXT_HIDE_FILTER = "HIDE FILTER";