[ARVADOS-WORKBENCH2] created: 1.4.1-295-g88ab5c43
Git user
git at public.arvados.org
Wed Mar 4 18:10:20 UTC 2020
at 88ab5c4388e8bbe9dfa29ef5fff653a511d3096b (commit)
commit 88ab5c4388e8bbe9dfa29ef5fff653a511d3096b
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Tue Mar 3 22:37:21 2020 -0300
15951: Removes dead code, updates tests to work with component being used.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/components/data-table-filters/data-table-filters-popover.test.tsx b/src/components/data-table-filters/data-table-filters-popover.test.tsx
new file mode 100644
index 00000000..f7bd00f0
--- /dev/null
+++ b/src/components/data-table-filters/data-table-filters-popover.test.tsx
@@ -0,0 +1,24 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { mount, configure } from "enzyme";
+import { DataTableFiltersPopover } from "./data-table-filters-popover";
+import * as Adapter from 'enzyme-adapter-react-16';
+import { Checkbox, IconButton } from "@material-ui/core";
+import { getInitialProcessStatusFilters } from "~/store/resource-type-filters/resource-type-filters"
+
+configure({ adapter: new Adapter() });
+
+describe("<DataTableFiltersPopover />", () => {
+ it("renders filters according to their state", () => {
+ // 1st filter (All) is selected, the rest aren't.
+ const filters = getInitialProcessStatusFilters()
+
+ const dataTableFilter = mount(<DataTableFiltersPopover name="" filters={filters} />);
+ dataTableFilter.find(IconButton).simulate("click");
+ expect(dataTableFilter.find(Checkbox).at(0).prop("checked")).toBeTruthy();
+ expect(dataTableFilter.find(Checkbox).at(1).prop("checked")).toBeFalsy();
+ });
+});
diff --git a/src/components/data-table-filters/data-table-filters.test.tsx b/src/components/data-table-filters/data-table-filters.test.tsx
deleted file mode 100644
index dc1969f4..00000000
--- a/src/components/data-table-filters/data-table-filters.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from "react";
-import { mount, configure } from "enzyme";
-import { DataTableFilters } from "./data-table-filters";
-import * as Adapter from 'enzyme-adapter-react-16';
-import { Checkbox, ButtonBase } from "@material-ui/core";
-
-configure({ adapter: new Adapter() });
-
-describe("<DataTableFilter />", () => {
- it("renders filters according to their state", () => {
- const filters = [{
- name: "Filter 1",
- selected: true
- }, {
- name: "Filter 2",
- selected: false
- }];
- const dataTableFilter = mount(<DataTableFilters name="" filters={filters} />);
- dataTableFilter.find(ButtonBase).simulate("click");
- expect(dataTableFilter.find(Checkbox).at(0).prop("checked")).toBeTruthy();
- expect(dataTableFilter.find(Checkbox).at(1).prop("checked")).toBeFalsy();
- });
-});
diff --git a/src/components/data-table-filters/data-table-filters.tsx b/src/components/data-table-filters/data-table-filters.tsx
index a57f29aa..ed7b30e7 100644
--- a/src/components/data-table-filters/data-table-filters.tsx
+++ b/src/components/data-table-filters/data-table-filters.tsx
@@ -2,207 +2,7 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from "react";
-import {
- WithStyles,
- withStyles,
- ButtonBase,
- StyleRulesCallback,
- Theme,
- Popover,
- List,
- ListItem,
- Checkbox,
- ListItemText,
- Button,
- Card,
- CardActions,
- Typography,
- CardContent,
- Tooltip
-} from "@material-ui/core";
-import * as classnames from "classnames";
-import { DefaultTransformOrigin } from "../popover/helpers";
-import { createTree, initTreeNode, mapTree } from '~/models/tree';
-import { DataTableFilters as DataTableFiltersModel, DataTableFiltersTree } from "./data-table-filters-tree";
-import { pipe } from 'lodash/fp';
-import { setNode } from '~/models/tree';
-
-export type CssRules = "root" | "icon" | "active" | "checkbox";
-
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
- root: {
- cursor: "pointer",
- display: "inline-flex",
- justifyContent: "flex-start",
- flexDirection: "inherit",
- alignItems: "center",
- "&:hover": {
- color: theme.palette.text.primary,
- },
- "&:focus": {
- color: theme.palette.text.primary,
- },
- },
- active: {
- color: theme.palette.text.primary,
- '& $icon': {
- opacity: 1,
- },
- },
- icon: {
- marginRight: 4,
- marginLeft: 4,
- opacity: 0.7,
- userSelect: "none",
- width: 16
- },
- checkbox: {
- width: 24,
- height: 24
- }
-});
-
export interface DataTableFilterItem {
name: string;
selected: boolean;
}
-
-export interface DataTableFilterProps {
- name: string;
- filters: DataTableFilterItem[];
- onChange?: (filters: DataTableFilterItem[]) => void;
-}
-
-interface DataTableFilterState {
- anchorEl?: HTMLElement;
- filters: DataTableFilterItem[];
- prevFilters: DataTableFilterItem[];
- filtersTree: DataTableFiltersModel;
-}
-
-const filters: DataTableFiltersModel = pipe(
- createTree,
- setNode(initTreeNode({ id: 'Project', value: { name: 'Project' } })),
- setNode(initTreeNode({ id: 'Process', value: { name: 'Process' } })),
- setNode(initTreeNode({ id: 'Data collection', value: { name: 'Data collection' } })),
- setNode(initTreeNode({ id: 'General', parent: 'Data collection', value: { name: 'General' } })),
- setNode(initTreeNode({ id: 'Output', parent: 'Data collection', value: { name: 'Output' } })),
- setNode(initTreeNode({ id: 'Log', parent: 'Data collection', value: { name: 'Log' } })),
- mapTree(node => ({...node, selected: true})),
-)();
-
-export const DataTableFilters = withStyles(styles)(
- class extends React.Component<DataTableFilterProps & WithStyles<CssRules>, DataTableFilterState> {
- state: DataTableFilterState = {
- anchorEl: undefined,
- filters: [],
- prevFilters: [],
- filtersTree: filters,
- };
- icon = React.createRef<HTMLElement>();
-
- render() {
- const { name, classes, children } = this.props;
- const isActive = this.state.filters.some(f => f.selected);
- return <>
- <Tooltip title='Filters'>
- <ButtonBase
- className={classnames([classes.root, { [classes.active]: isActive }])}
- component="span"
- onClick={this.open}
- disableRipple>
- {children}
- <i className={classnames(["fas fa-filter", classes.icon])}
- data-fa-transform="shrink-3"
- ref={this.icon} />
- </ButtonBase>
- </Tooltip>
- <Popover
- anchorEl={this.state.anchorEl}
- open={!!this.state.anchorEl}
- anchorOrigin={DefaultTransformOrigin}
- transformOrigin={DefaultTransformOrigin}
- onClose={this.cancel}>
- <Card>
- <CardContent>
- <Typography variant="caption">
- {name}
- </Typography>
- </CardContent>
- <List dense>
- {this.state.filters.map((filter, index) =>
- <ListItem
- key={index}>
- <Checkbox
- onClick={this.toggleFilter(filter)}
- color="primary"
- checked={filter.selected}
- className={classes.checkbox} />
- <ListItemText>
- {filter.name}
- </ListItemText>
- </ListItem>
- )}
- </List>
- <DataTableFiltersTree
- filters={this.state.filtersTree}
- onChange={filtersTree => this.setState({ filtersTree })} />
- <CardActions>
- <Button
- color="primary"
- variant='contained'
- size="small"
- onClick={this.submit}>
- Ok
- </Button>
- <Button
- color="primary"
- variant="outlined"
- size="small"
- onClick={this.cancel}>
- Cancel
- </Button>
- </CardActions >
- </Card>
- </Popover>
- </>;
- }
-
- static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
- return props.filters !== state.prevFilters
- ? { ...state, filters: props.filters, prevFilters: props.filters }
- : state;
- }
-
- open = () => {
- this.setState({ anchorEl: this.icon.current || undefined });
- }
-
- submit = () => {
- const { onChange } = this.props;
- if (onChange) {
- onChange(this.state.filters);
- }
- this.setState({ anchorEl: undefined });
- }
-
- cancel = () => {
- this.setState(prev => ({
- ...prev,
- filters: prev.prevFilters,
- anchorEl: undefined
- }));
- }
-
- toggleFilter = (toggledFilter: DataTableFilterItem) => () => {
- this.setState(prev => ({
- ...prev,
- filters: prev.filters.map(filter =>
- filter === toggledFilter
- ? { ...filter, selected: !filter.selected }
- : filter)
- }));
- }
- }
-);
diff --git a/src/components/data-table/data-table.test.tsx b/src/components/data-table/data-table.test.tsx
index d0b83b96..3e4cc212 100644
--- a/src/components/data-table/data-table.test.tsx
+++ b/src/components/data-table/data-table.test.tsx
@@ -8,7 +8,6 @@ import { pipe } from 'lodash/fp';
import { TableHead, TableCell, Typography, TableBody, Button, TableSortLabel } from "@material-ui/core";
import * as Adapter from "enzyme-adapter-react-16";
import { DataTable, DataColumns } from "./data-table";
-import { DataTableFilters } from "~/components/data-table-filters/data-table-filters";
import { SortDirection, createDataColumn } from "./data-column";
import { DataTableFiltersPopover } from '~/components/data-table-filters/data-table-filters-popover';
import { createTree, setNode, initTreeNode } from '~/models/tree';
@@ -162,7 +161,7 @@ describe("<DataTable />", () => {
expect(onSortToggle).toHaveBeenCalledWith(columns[0]);
});
- it("does not display <DataTableFilter /> if there is no filters provided", () => {
+ it("does not display <DataTableFiltersPopover /> if there is no filters provided", () => {
const columns: DataColumns<string> = [{
name: "Column 1",
sortDirection: SortDirection.ASC,
@@ -180,7 +179,7 @@ describe("<DataTable />", () => {
onRowDoubleClick={jest.fn()}
onSortToggle={jest.fn()}
onContextMenu={jest.fn()} />);
- expect(dataTable.find(DataTableFilters)).toHaveLength(0);
+ expect(dataTable.find(DataTableFiltersPopover)).toHaveLength(0);
});
it("passes filter props to <DataTableFiltersPopover />", () => {
@@ -209,24 +208,4 @@ describe("<DataTable />", () => {
dataTable.find(DataTableFiltersPopover).prop("onChange")([]);
expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]);
});
-
- // it("shows default view if there is no items", () => {
- // const columns: DataColumns<string> = [
- // createDataColumn({
- // name: "Column 1",
- // render: () => <span />,
- // selected: true,
- // configurable: true
- // }),
- // ];
- // const dataTable = mount(<DataTable
- // columns={columns}
- // items={[]}
- // onFiltersChange={jest.fn()}
- // onRowClick={jest.fn()}
- // onRowDoubleClick={jest.fn()}
- // onContextMenu={jest.fn()}
- // onSortToggle={jest.fn()} />);
- // expect(dataTable.find(DataTableDefaultView)).toHaveLength(1);
- // });
});
commit 25b49c962890e0d54c25e7e4ed2f266a74657004
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Tue Mar 3 21:42:12 2020 -0300
15951: Hides tooltips on filter buttons after being clicked.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index 30b98d33..456d2375 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -108,7 +108,7 @@ export const DataTableFiltersPopover = withStyles(styles)(
: f.selected
);
return <>
- <Tooltip title='Filters'>
+ <Tooltip disableFocusListener title='Filters'>
<ButtonBase
className={classnames([classes.root, { [classes.active]: isActive }])}
component="span"
commit 9a1a41a402d4233e6c5b3dad870dfb13eb429df4
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Tue Mar 3 21:20:28 2020 -0300
15951: Accepts filter toggle actions when clicking on the entire row.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/components/data-table-filters/data-table-filters-tree.tsx b/src/components/data-table-filters/data-table-filters-tree.tsx
index be08743e..5f0d5e39 100644
--- a/src/components/data-table-filters/data-table-filters-tree.tsx
+++ b/src/components/data-table-filters/data-table-filters-tree.tsx
@@ -39,9 +39,12 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
useRadioButtons={this.props.mutuallyExclusive}
disableRipple
onContextMenu={noop}
- toggleItemActive={this.props.mutuallyExclusive ? this.toggleRadioButtonFilter : noop}
+ toggleItemActive={
+ this.props.mutuallyExclusive
+ ? this.toggleRadioButtonFilter
+ : this.toggleFilter
+ }
toggleItemOpen={this.toggleOpen}
- toggleItemSelection={this.toggleFilter}
/>;
}
commit fbbd14b6916d6936fd5513834c56d6fd00ece7d8
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Tue Mar 3 18:45:05 2020 -0300
15951: Makes 'mutually exclusive' filter dialog auto-submit selection on click.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index 670afa95..30b98d33 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -139,7 +139,15 @@ export const DataTableFiltersPopover = withStyles(styles)(
mutuallyExclusive={this.props.mutuallyExclusive}
onChange={filters => {
this.setState({ filters });
+ if (this.props.mutuallyExclusive) {
+ const { onChange } = this.props;
+ if (onChange) {
+ onChange(filters);
+ }
+ this.setState({ anchorEl: undefined });
+ }
}} />
+ {this.props.mutuallyExclusive ||
<CardActions>
<Button
color="primary"
@@ -156,6 +164,7 @@ export const DataTableFiltersPopover = withStyles(styles)(
Cancel
</Button>
</CardActions >
+ }
</Card>
</Popover>
</>;
diff --git a/src/components/data-table-filters/data-table-filters-tree.tsx b/src/components/data-table-filters/data-table-filters-tree.tsx
index d964012d..be08743e 100644
--- a/src/components/data-table-filters/data-table-filters-tree.tsx
+++ b/src/components/data-table-filters/data-table-filters-tree.tsx
@@ -37,10 +37,9 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
render={renderItem}
showSelection
useRadioButtons={this.props.mutuallyExclusive}
- toggleItemRadioButton={this.toggleRadioButtonFilter}
disableRipple
onContextMenu={noop}
- toggleItemActive={noop}
+ toggleItemActive={this.props.mutuallyExclusive ? this.toggleRadioButtonFilter : noop}
toggleItemOpen={this.toggleOpen}
toggleItemSelection={this.toggleFilter}
/>;
@@ -50,7 +49,7 @@ export class DataTableFiltersTree extends React.Component<DataTableFilterProps>
* Handler for when a tree item is toggled via a radio button.
* Ensures mutual exclusivity among filter tree items.
*/
- toggleRadioButtonFilter = (item: TreeItem<DataTableFilterItem>) => {
+ toggleRadioButtonFilter = (_: any, item: TreeItem<DataTableFilterItem>) => {
const { onChange = noop } = this.props;
// If the filter is already selected, do nothing.
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 67858e9b..76fbf011 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -98,15 +98,9 @@ export interface TreeProps<T> {
/**
* When set to true use radio buttons instead of checkboxes for item selection.
* This does not guarantee radio group behavior (i.e item mutual exclusivity).
- * Any item selection logic must be done in the toggleItemRadioButton callback prop.
+ * Any item selection logic must be done in the toggleItemActive callback prop.
*/
useRadioButtons?: boolean;
-
- /**
- * Called when selection of an item in the tree is toggled via a radio button.
- * Use this callback prop to implement any selection logic (i.e item mutual exclusivity).
- */
- toggleItemRadioButton?: (item: TreeItem<T>) => void;
}
export const Tree = withStyles(styles)(
@@ -151,8 +145,7 @@ export const Tree = withStyles(styles)(
<Radio
checked={it.selected}
className={classes.checkbox}
- color="primary"
- onChange={this.handleRadioButtonChange(it)} />}
+ color="primary" />}
<div className={renderContainer}>
{render(it, level)}
</div>
@@ -207,16 +200,6 @@ export const Tree = withStyles(styles)(
: undefined;
}
- handleRadioButtonChange = (item: TreeItem<T>) => {
- const { toggleItemRadioButton } = this.props;
- return toggleItemRadioButton
- ? (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
- event.stopPropagation();
- toggleItemRadioButton(item);
- }
- : undefined;
- }
-
handleToggleItemOpen = (item: TreeItem<T>) => (event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation();
this.props.toggleItemOpen(event, item);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list