From a5a44f2cce3843d92a70d74f5b2bc2fc26ea6287 Mon Sep 17 00:00:00 2001 From: Ryo Narita Date: Wed, 6 Jan 2021 18:51:59 +0900 Subject: [PATCH] Refactor filter components * Create a shared component for filter view * Extract constants --- .../components/application-filter.stories.tsx | 2 +- .../web/src/components/application-filter.tsx | 45 ++++-------------- .../components/deployment-filter.stories.tsx | 2 +- .../web/src/components/deployment-filter.tsx | 47 ++++--------------- .../src/components/filter-view.stories.tsx | 12 +++++ pkg/app/web/src/components/filter-view.tsx | 34 ++++++++++++++ .../components/kubernetes-state-view.test.tsx | 3 +- pkg/app/web/src/components/piped-filter.tsx | 33 ++----------- .../components/resource-filter-popover.tsx | 3 +- pkg/app/web/src/constants/ui-text.ts | 3 ++ pkg/app/web/src/pages/applications/index.tsx | 16 +++---- pkg/app/web/src/pages/deployments/index.tsx | 16 ++++--- pkg/app/web/src/pages/settings/piped.tsx | 3 +- pkg/app/web/src/styles/size.ts | 1 + 14 files changed, 95 insertions(+), 125 deletions(-) create mode 100644 pkg/app/web/src/components/filter-view.stories.tsx create mode 100644 pkg/app/web/src/components/filter-view.tsx create mode 100644 pkg/app/web/src/styles/size.ts diff --git a/pkg/app/web/src/components/application-filter.stories.tsx b/pkg/app/web/src/components/application-filter.stories.tsx index ad6b226003..859c3a6b51 100644 --- a/pkg/app/web/src/components/application-filter.stories.tsx +++ b/pkg/app/web/src/components/application-filter.stories.tsx @@ -26,5 +26,5 @@ export default { }; export const overview: React.FC = () => ( - + ); diff --git a/pkg/app/web/src/components/application-filter.tsx b/pkg/app/web/src/components/application-filter.tsx index b0fe751b62..1e916e6780 100644 --- a/pkg/app/web/src/components/application-filter.tsx +++ b/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,17 +22,9 @@ 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, }, @@ -43,17 +32,12 @@ const useStyles = makeStyles((theme) => ({ 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 = memo(function ApplicationFilter({ - open, onChange, }) { const classes = useStyles(); @@ -81,25 +64,13 @@ export const ApplicationFilter: FC = memo(function ApplicationFilter({ onChange(); }; - if (open === false) { - return null; - } - return ( - -
- Filters - -
- + { + dispatch(clearApplicationFilter()); + onChange(); + }} + > Environment - + ); }); diff --git a/pkg/app/web/src/components/deployment-filter.stories.tsx b/pkg/app/web/src/components/deployment-filter.stories.tsx index 2f26100150..81b400e239 100644 --- a/pkg/app/web/src/components/deployment-filter.stories.tsx +++ b/pkg/app/web/src/components/deployment-filter.stories.tsx @@ -28,5 +28,5 @@ export default { }; export const overview: React.FC = () => ( - + ); diff --git a/pkg/app/web/src/components/deployment-filter.tsx b/pkg/app/web/src/components/deployment-filter.tsx index 31ff6650a7..f19a2d5660 100644 --- a/pkg/app/web/src/components/deployment-filter.tsx +++ b/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 = memo(function DeploymentFilter({ - open, onChange, }) { const classes = useStyles(); - const dispatch = useDispatch(); const envs = useSelector((state) => selectAll(state.environments) @@ -88,25 +69,13 @@ export const DeploymentFilter: FC = memo(function DeploymentFilter({ [dispatch, onChange] ); - if (open === false) { - return null; - } - return ( - -
- Filters - -
- + { + dispatch(clearDeploymentFilter()); + onChange(); + }} + > Environment - + ); }); diff --git a/pkg/app/web/src/components/filter-view.stories.tsx b/pkg/app/web/src/components/filter-view.stories.tsx new file mode 100644 index 0000000000..61b59d6a46 --- /dev/null +++ b/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 = () => ( + filter +); diff --git a/pkg/app/web/src/components/filter-view.tsx b/pkg/app/web/src/components/filter-view.tsx new file mode 100644 index 0000000000..e7693ad0a0 --- /dev/null +++ b/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 = ({ onClear, children }) => { + const classes = useStyles(); + return ( + + + + Filters + + + + + {children} + + ); +}; diff --git a/pkg/app/web/src/components/kubernetes-state-view.test.tsx b/pkg/app/web/src/components/kubernetes-state-view.test.tsx index de1dc1a489..519e0d2b9d 100644 --- a/pkg/app/web/src/components/kubernetes-state-view.test.tsx +++ b/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(, {}); - 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" })); diff --git a/pkg/app/web/src/components/piped-filter.tsx b/pkg/app/web/src/components/piped-filter.tsx index 0f8ea1d5c6..71bd0f69b7 100644 --- a/pkg/app/web/src/components/piped-filter.tsx +++ b/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 = ({ values, onChange }) => { const classes = useStyles(); return ( - -
- - Filters - - -
- + onChange({ enabled: true })}> Active Status - + ); }; diff --git a/pkg/app/web/src/components/resource-filter-popover.tsx b/pkg/app/web/src/components/resource-filter-popover.tsx index 7a52caf897..42e31d951b 100644 --- a/pkg/app/web/src/components/resource-filter-popover.tsx +++ b/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; @@ -38,7 +39,7 @@ export const ResourceFilterPopover: FC = ({ enables, onChange }) => { color={isFiltered ? "primary" : "default"} onClick={() => setOpen(!open)} > - {isFiltered ? "FILTERED" : "FILTER"} + {isFiltered ? UI_TEXT_FILTERED : UI_TEXT_FILTER} diff --git a/pkg/app/web/src/constants/ui-text.ts b/pkg/app/web/src/constants/ui-text.ts index f3bd45dcba..4638a019d2 100644 --- a/pkg/app/web/src/constants/ui-text.ts +++ b/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"; diff --git a/pkg/app/web/src/pages/applications/index.tsx b/pkg/app/web/src/pages/applications/index.tsx index b7a7855f43..703ee258ee 100644 --- a/pkg/app/web/src/pages/applications/index.tsx +++ b/pkg/app/web/src/pages/applications/index.tsx @@ -21,6 +21,7 @@ import { AppState } from "../../modules"; import { fetchApplications } from "../../modules/applications"; import { clearTemplateTarget } from "../../modules/deployment-configs"; import { AppDispatch } from "../../store"; +import { UI_TEXT_FILTER, UI_TEXT_HIDE_FILTER } from "../../constants/ui-text"; const useStyles = makeStyles((theme) => ({ main: { @@ -45,7 +46,7 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() { const classes = useStyles(); const dispatch = useDispatch(); const [openAddForm, setOpenAddForm] = useState(false); - const [isOpenFilter, setIsOpenFilter] = useState(false); + const [openFilter, setOpenFilter] = useState(false); const [isLoading, isAdding] = useSelector( (state) => [state.applications.loading, state.applications.adding] ); @@ -94,10 +95,10 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() { @@ -105,10 +106,9 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
- + {openFilter && ( + + )}
({ @@ -95,7 +99,7 @@ export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() { const dispatch = useDispatch(); const listRef = useRef(null); const [status, hasMore, groupedDeployments] = useGroupedDeployments(); - const [isOpenFilter, setIsOpenFilter] = useState(false); + const [openFilter, setOpenFilter] = useState(false); const [ref, inView] = useInView({ rootMargin: "400px", root: listRef.current, @@ -140,10 +144,10 @@ export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() { @@ -179,7 +183,7 @@ export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() { ))} {status === "succeeded" &&
} - + {openFilter && } ); diff --git a/pkg/app/web/src/pages/settings/piped.tsx b/pkg/app/web/src/pages/settings/piped.tsx index 7d3af52b87..460bc8ba46 100644 --- a/pkg/app/web/src/pages/settings/piped.tsx +++ b/pkg/app/web/src/pages/settings/piped.tsx @@ -32,6 +32,7 @@ import { useDispatch, useSelector } from "react-redux"; import { AddPipedDrawer } from "../../components/add-piped-drawer"; import { EditPipedDrawer } from "../../components/edit-piped-drawer"; import { PipedFilter, FilterValues } from "../../components/piped-filter"; +import { UI_TEXT_FILTER, UI_TEXT_HIDE_FILTER } from "../../constants/ui-text"; import { AppState } from "../../modules"; import { clearRegisteredPipedInfo, @@ -177,7 +178,7 @@ export const SettingsPipedPage: FC = memo(function SettingsPipedPage() { startIcon={openFilter ? : } onClick={() => setOpenFilter(!openFilter)} > - {openFilter ? "HIDE FILTER" : "FILTER"} + {openFilter ? UI_TEXT_HIDE_FILTER : UI_TEXT_FILTER} diff --git a/pkg/app/web/src/styles/size.ts b/pkg/app/web/src/styles/size.ts new file mode 100644 index 0000000000..c4d2e0c69f --- /dev/null +++ b/pkg/app/web/src/styles/size.ts @@ -0,0 +1 @@ +export const FILTER_PAPER_WIDTH = 360;