[arvados-workbench2] updated: 2.6.0-19-g28a7883c
git repository hosting
git at public.arvados.org
Mon May 8 14:10:36 UTC 2023
Summary of changes:
.../data-table-filters-popover.tsx | 147 +++++++++------------
.../data-table-multiselect-popover.tsx | 47 ++++---
src/components/data-table/data-table.tsx | 33 +++--
3 files changed, 110 insertions(+), 117 deletions(-)
via 28a7883c373533979f2cc7c5e750221eb8f5f1ec (commit)
via f1d068a91bc746ba66eead495648214f5506557e (commit)
via 9fff947ecd25b0494e8e3c6a27a4fa4fea67668f (commit)
via 259b3769c02913cd968ab3294140f86108738e24 (commit)
via 0134919a1425efa859fd0fa205b037944c033f23 (commit)
from 76b8dd0af0db0b79cc6d12b07a138d7357e12960 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 28a7883c373533979f2cc7c5e750221eb8f5f1ec
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Mon May 8 10:09:54 2023 -0400
15768: popover styling Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index 8b4175b3..81938887 100644
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -42,6 +42,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
'&:hover': {
color: theme.palette.text.primary,
},
+ paddingBottom: '5px',
},
iconButton: {
color: theme.palette.text.primary,
@@ -50,14 +51,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
paddingBottom: 5,
},
optionsContainer: {
- paddingBottom: '3px',
+ padding: '1rem 0',
flex: 1,
},
option: {
cursor: 'pointer',
display: 'flex',
- padding: '3px 15px',
- fontSize: '1rem',
+ padding: '3px 2rem',
+ fontSize: '0.9rem',
alignItems: 'center',
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.08)',
@@ -91,7 +92,7 @@ export const DataTableMultiselectPopover = withStyles(styles)(
const { name, classes, children, options, checkedList } = this.props;
return (
<>
- <Tooltip disableFocusListener title='Multiselect Actions'>
+ <Tooltip disableFocusListener title='Multiselect Options'>
<ButtonBase className={classnames(classes.root)} component='span' onClick={this.open} disableRipple>
{children}
<IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
@@ -107,22 +108,21 @@ export const DataTableMultiselectPopover = withStyles(styles)(
onClose={this.close}
>
<Card>
- <CardContent>
- <Typography variant='caption'>{name}</Typography>
- </CardContent>
<div className={classes.optionsContainer}>
{options.length &&
options.map((option, i) => (
- <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
+ <div
+ key={i}
+ className={classes.option}
+ onClick={() => {
+ option.fn(checkedList);
+ this.close();
+ }}
+ >
{option.name}
</div>
))}
</div>
- <CardActions>
- <Button color='primary' variant='outlined' size='small' onClick={this.close}>
- Close
- </Button>
- </CardActions>
</Card>
</Popover>
<this.MountHandler />
commit f1d068a91bc746ba66eead495648214f5506557e
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Sat May 6 13:05:30 2023 -0400
15768: filtering now behaves as specified Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 57ca16e4..22131f00 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -128,14 +128,14 @@ type DataTableState = {
checkedList: Record<string, boolean>;
};
-type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
-
const multiselectOptions: DataTableMultiselectOption[] = [
{ name: 'First Option', fn: (checkedList) => console.log('one', checkedList) },
{ name: 'Second Option', fn: (checkedList) => console.log('two', checkedList) },
{ name: 'Third Option', fn: (checkedList) => console.log('three', checkedList) },
];
+type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
+
export const DataTable = withStyles(styles)(
class Component<T> extends React.Component<DataTableProps<T>> {
state: DataTableState = {
@@ -147,9 +147,15 @@ export const DataTable = withStyles(styles)(
this.initializeCheckedList(this.props.items);
}
- componentDidUpdate(prevProps: Readonly<DataTableProps<T>>) {
- if (!arraysAreCongruent(prevProps.items, this.props.items)) {
- this.initializeCheckedList(this.props.items);
+ componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
+ const { items } = this.props;
+ const { checkedList } = this.state;
+ if (!arraysAreCongruent(prevProps.items, items)) {
+ this.state.isSelected = false;
+ this.initializeCheckedList(items);
+ }
+ if (prevState.checkedList !== checkedList) {
+ window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
}
}
@@ -173,10 +179,16 @@ export const DataTable = withStyles(styles)(
initializeCheckedList = (uuids: any[]): void => {
const { checkedList } = this.state;
uuids.forEach((uuid) => {
- if (!checkedList.hasOwnProperty[uuid]) {
+ if (!checkedList.hasOwnProperty(uuid)) {
checkedList[uuid] = false;
}
});
+ for (const key in checkedList) {
+ if (!uuids.includes(key)) {
+ delete checkedList[key];
+ }
+ }
+ window.localStorage.setItem('selectedRows', JSON.stringify(checkedList));
};
handleSelectorSelect = (): void => {
@@ -208,7 +220,6 @@ export const DataTable = withStyles(styles)(
const { items, classes, working, columns } = this.props;
if (columns[0].name === this.checkBoxColumn.name) columns.shift();
columns.unshift(this.checkBoxColumn);
-
return (
<div className={classes.root}>
<div className={classes.content}>
@@ -237,7 +248,7 @@ export const DataTable = withStyles(styles)(
renderHeadCell = (column: DataColumn<T, any>, index: number) => {
const { name, key, renderHeader, filters, sort } = column;
const { onSortToggle, onFiltersChange, classes } = this.props;
- return index === 0 ? (
+ return column.name === 'checkBoxColumn' ? (
<TableCell key={key || index} className={classes.checkBoxCell}>
<div className={classes.checkBoxHead}>
<Tooltip title={this.state.isSelected ? 'Deselect All' : 'Select All'}>
commit 9fff947ecd25b0494e8e3c6a27a4fa4fea67668f
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Tue May 2 15:13:49 2023 -0400
15768: applied filter fragment fix, still not showing close button Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
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 b5187866..557abd82 100644
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -2,7 +2,7 @@
//
// SPDX-License-Identifier: AGPL-3.0
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
import {
WithStyles,
withStyles,
@@ -16,28 +16,28 @@ import {
Typography,
CardContent,
Tooltip,
- IconButton
-} from "@material-ui/core";
-import classnames from "classnames";
-import { DefaultTransformOrigin } from "components/popover/helpers";
+ IconButton,
+} from '@material-ui/core';
+import classnames from 'classnames';
+import { DefaultTransformOrigin } from 'components/popover/helpers';
import { createTree } from 'models/tree';
-import { DataTableFilters, DataTableFiltersTree } from "./data-table-filters-tree";
+import { DataTableFilters, DataTableFiltersTree } from './data-table-filters-tree';
import { getNodeDescendants } from 'models/tree';
-import debounce from "lodash/debounce";
+import debounce from 'lodash/debounce';
-export type CssRules = "root" | "icon" | "iconButton" | "active" | "checkbox";
+export type CssRules = 'root' | 'icon' | 'iconButton' | 'active' | 'checkbox';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
- cursor: "pointer",
- display: "inline-flex",
- justifyContent: "flex-start",
- flexDirection: "inherit",
- alignItems: "center",
- "&:hover": {
+ cursor: 'pointer',
+ display: 'inline-flex',
+ justifyContent: 'flex-start',
+ flexDirection: 'inherit',
+ alignItems: 'center',
+ '&:hover': {
color: theme.palette.text.primary,
},
- "&:focus": {
+ '&:focus': {
color: theme.palette.text.primary,
},
},
@@ -52,7 +52,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
userSelect: 'none',
width: 16,
height: 15,
- marginTop: 1
+ marginTop: 1,
},
iconButton: {
color: theme.palette.text.primary,
@@ -60,13 +60,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
},
checkbox: {
width: 24,
- height: 24
- }
+ height: 24,
+ },
});
enum SelectionMode {
ALL = 'all',
- NONE = 'none'
+ NONE = 'none',
}
export interface DataTableFilterProps {
@@ -103,68 +103,52 @@ export const DataTableFiltersPopover = withStyles(styles)(
render() {
const { name, classes, defaultSelection = SelectionMode.ALL, children } = this.props;
- const isActive = getNodeDescendants('')(this.state.filters)
- .some(f => defaultSelection === SelectionMode.ALL
- ? !f.selected
- : f.selected
- );
- return <>
- <Tooltip disableFocusListener title='Filters'>
- <ButtonBase
- className={classnames([classes.root, { [classes.active]: isActive }])}
- component="span"
- onClick={this.open}
- disableRipple>
- {children}
- <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
- <i className={classnames(["fas fa-filter", classes.icon])}
- data-fa-transform="shrink-3"
- ref={this.icon} />
- </IconButton>
- </ButtonBase>
- </Tooltip>
- <Popover
- anchorEl={this.state.anchorEl}
- open={!!this.state.anchorEl}
- anchorOrigin={DefaultTransformOrigin}
- transformOrigin={DefaultTransformOrigin}
- onClose={this.close}>
- <Card>
- <CardContent>
- <Typography variant="caption">
- {name}
- </Typography>
- </CardContent>
- <DataTableFiltersTree
- filters={this.state.filters}
- mutuallyExclusive={this.props.mutuallyExclusive}
- onChange={this.onChange} />
- {this.props.mutuallyExclusive ||
- <CardActions>
- <Button
- color="primary"
- variant="outlined"
- size="small"
- onClick={this.close}>
- Close
- </Button>
- </CardActions >
- }
- </Card>
- </Popover>
- <this.MountHandler />
- </>;
+ const isActive = getNodeDescendants('')(this.state.filters).some((f) => (defaultSelection === SelectionMode.ALL ? !f.selected : f.selected));
+ return (
+ <>
+ <Tooltip disableFocusListener title='Filters'>
+ <ButtonBase className={classnames([classes.root, { [classes.active]: isActive }])} component='span' onClick={this.open} disableRipple>
+ {children}
+ <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
+ <i className={classnames(['fas fa-filter', classes.icon])} data-fa-transform='shrink-3' ref={this.icon} />
+ </IconButton>
+ </ButtonBase>
+ </Tooltip>
+ <Popover
+ anchorEl={this.state.anchorEl}
+ open={!!this.state.anchorEl}
+ anchorOrigin={DefaultTransformOrigin}
+ transformOrigin={DefaultTransformOrigin}
+ onClose={this.close}
+ >
+ <Card>
+ <CardContent>
+ <Typography variant='caption'>{name}</Typography>
+ </CardContent>
+ <DataTableFiltersTree filters={this.state.filters} mutuallyExclusive={this.props.mutuallyExclusive} onChange={this.onChange} />
+ <>
+ {this.props.mutuallyExclusive || (
+ <CardActions>
+ <Button color='primary' variant='outlined' size='small' onClick={this.close}>
+ Close
+ </Button>
+ </CardActions>
+ )}
+ </>
+ </Card>
+ </Popover>
+ <this.MountHandler />
+ </>
+ );
}
static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState {
- return props.filters !== state.prevFilters
- ? { ...state, filters: props.filters, prevFilters: props.filters }
- : state;
+ return props.filters !== state.prevFilters ? { ...state, filters: props.filters, prevFilters: props.filters } : state;
}
open = () => {
this.setState({ anchorEl: this.icon.current || undefined });
- }
+ };
onChange = (filters) => {
this.setState({ filters });
@@ -179,9 +163,9 @@ export const DataTableFiltersPopover = withStyles(styles)(
// Non-mutually exclusive filters are debounced
this.submit();
}
- }
+ };
- submit = debounce (() => {
+ submit = debounce(() => {
const { onChange } = this.props;
if (onChange) {
onChange(this.state.filters);
@@ -192,17 +176,16 @@ export const DataTableFiltersPopover = withStyles(styles)(
useEffect(() => {
return () => {
this.submit.cancel();
- }
- },[]);
+ };
+ }, []);
return null;
};
close = () => {
- this.setState(prev => ({
+ this.setState((prev) => ({
...prev,
- anchorEl: undefined
+ anchorEl: undefined,
}));
- }
-
+ };
}
);
diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index 97b50a58..8b4175b3 100644
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -50,13 +50,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
paddingBottom: 5,
},
optionsContainer: {
- padding: '3px 15px',
+ paddingBottom: '3px',
flex: 1,
},
option: {
cursor: 'pointer',
display: 'flex',
- padding: '3px',
+ padding: '3px 15px',
fontSize: '1rem',
alignItems: 'center',
'&:hover': {
commit 259b3769c02913cd968ab3294140f86108738e24
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Tue May 2 12:50:27 2023 -0400
15768: cleanup Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index a23ed79f..97b50a58 100644
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -20,10 +20,8 @@ import {
} from '@material-ui/core';
import classnames from 'classnames';
import { DefaultTransformOrigin } from 'components/popover/helpers';
-import { createTree } from 'models/tree';
-import { getNodeDescendants } from 'models/tree';
import debounce from 'lodash/debounce';
-import { green, grey } from '@material-ui/core/colors';
+import { grey } from '@material-ui/core/colors';
export type CssRules = 'root' | 'icon' | 'iconButton' | 'optionsContainer' | 'option';
@@ -110,7 +108,7 @@ export const DataTableMultiselectPopover = withStyles(styles)(
>
<Card>
<CardContent>
- <Typography variant='caption'>{'Options'}</Typography>
+ <Typography variant='caption'>{name}</Typography>
</CardContent>
<div className={classes.optionsContainer}>
{options.length &&
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index b36d546e..57ca16e4 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -243,11 +243,7 @@ export const DataTable = withStyles(styles)(
<Tooltip title={this.state.isSelected ? 'Deselect All' : 'Select All'}>
<input type='checkbox' className={classes.checkBox} checked={this.state.isSelected} onChange={this.handleSelectorSelect}></input>
</Tooltip>
- <DataTableMultiselectPopover
- name={`multiselect options`}
- options={multiselectOptions}
- checkedList={this.state.checkedList}
- ></DataTableMultiselectPopover>
+ <DataTableMultiselectPopover name={`Options`} options={multiselectOptions} checkedList={this.state.checkedList}></DataTableMultiselectPopover>
</div>
</TableCell>
) : (
commit 0134919a1425efa859fd0fa205b037944c033f23
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Tue May 2 12:38:09 2023 -0400
15768: styling Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index cd9071a3..a23ed79f 100644
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -25,7 +25,7 @@ import { getNodeDescendants } from 'models/tree';
import debounce from 'lodash/debounce';
import { green, grey } from '@material-ui/core/colors';
-export type CssRules = 'root' | 'icon' | 'iconButton' | 'option';
+export type CssRules = 'root' | 'icon' | 'iconButton' | 'optionsContainer' | 'option';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
@@ -51,12 +51,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
padding: 1,
paddingBottom: 5,
},
+ optionsContainer: {
+ padding: '3px 15px',
+ flex: 1,
+ },
option: {
- // border: '1px dashed green',
cursor: 'pointer',
display: 'flex',
- padding: '3px 20px',
- fontSize: '0.875rem',
+ padding: '3px',
+ fontSize: '1rem',
alignItems: 'center',
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.08)',
@@ -109,12 +112,14 @@ export const DataTableMultiselectPopover = withStyles(styles)(
<CardContent>
<Typography variant='caption'>{'Options'}</Typography>
</CardContent>
- {options.length &&
- options.map((option, i) => (
- <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
- {option.name}
- </div>
- ))}
+ <div className={classes.optionsContainer}>
+ {options.length &&
+ options.map((option, i) => (
+ <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
+ {option.name}
+ </div>
+ ))}
+ </div>
<CardActions>
<Button color='primary' variant='outlined' size='small' onClick={this.close}>
Close
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list