[ARVADOS-WORKBENCH2] created: 2.3.0-27-g91fdf9e2
Git user
git at public.arvados.org
Thu Dec 2 21:14:34 UTC 2021
at 91fdf9e2d937de38309f1464b30cb699df4f6389 (commit)
commit 91fdf9e2d937de38309f1464b30cb699df4f6389
Author: Daniel Kutyła <daniel.kutyla at contractors.roche.com>
Date: Thu Dec 2 22:12:59 2021 +0100
17579: Added search input clear after project change
Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla at contractors.roche.com>
diff --git a/cypress/integration/project.spec.js b/cypress/integration/project.spec.js
index 1c175952..4d77d3a5 100644
--- a/cypress/integration/project.spec.js
+++ b/cypress/integration/project.spec.js
@@ -194,4 +194,27 @@ describe('Project tests', function() {
cy.contains(testRootProject.uuid).should('exist');
});
});
+
+ it('clears search input when changing project', () => {
+ cy.createGroup(activeUser.token, {
+ name: `Test root project ${Math.floor(Math.random() * 999999)}`,
+ group_class: 'project',
+ }).as('testProject1');
+ cy.createGroup(activeUser.token, {
+ name: `Test root project ${Math.floor(Math.random() * 999999)}`,
+ group_class: 'project',
+ }).as('testProject2');
+
+ cy.getAll('@testProject1', '@testProject2').then(function([testProject1, testProject2]) {
+ cy.loginAs(activeUser);
+
+ cy.get('[data-cy=side-panel-tree]').contains(testProject1.name).click();
+
+ cy.get('[data-cy=search-input] input').type('test123');
+
+ cy.get('[data-cy=side-panel-tree]').contains('Projects').click();
+
+ cy.get('[data-cy=search-input] input').should('not.have.value', 'test123');
+ });
+ });
});
\ No newline at end of file
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index a7001a61..97ec3bf9 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -463,7 +463,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
</IconButton>
</Tooltip>
<div className={path.length > 1 ? classes.searchWrapper : classes.searchWrapperHidden}>
- <SearchInput label="Search" value={leftSearch} onSearch={setLeftSearch} />
+ <SearchInput selfClearProp={leftKey} label="Search" value={leftSearch} onSearch={setLeftSearch} />
</div>
<div className={classes.dataWrapper}>
{
@@ -510,7 +510,7 @@ export const CollectionPanelFiles = withStyles(styles)(connect((state: RootState
</div>
<div className={classes.rightPanel}>
<div className={classes.searchWrapper}>
- <SearchInput label="Search" value={rightSearch} onSearch={setRightSearch} />
+ <SearchInput selfClearProp={rightKey} label="Search" value={rightSearch} onSearch={setRightSearch} />
</div>
{
isWritable &&
diff --git a/src/components/collection-panel-files/collection-panel-files2.tsx b/src/components/collection-panel-files/collection-panel-files2.tsx
index 41182482..481844d9 100644
--- a/src/components/collection-panel-files/collection-panel-files2.tsx
+++ b/src/components/collection-panel-files/collection-panel-files2.tsx
@@ -83,6 +83,7 @@ export const CollectionPanelFilesComponent = ({ onItemMenuOpen, onSearchChange,
<div className={classes.cardHeaderContent}>
<span className={classes.cardHeaderContentTitle}>Files</span>
<SearchInput
+ selfClearProp={''}
value={searchValue}
label='Search files'
onSearch={setSearchValue} />
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index d272e870..5f396bb4 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -82,12 +82,19 @@ interface DataExplorerActionProps<T> {
type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules>;
export const DataExplorer = withStyles(styles)(
- class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
+ class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>, { currentItemUuid: string }> {
+ constructor(props) {
+ super(props);
+ this.state = {
+ currentItemUuid: props.currentItemUuid
+ };
+ }
componentDidMount() {
if (this.props.onSetColumns) {
this.props.onSetColumns(this.props.columns);
}
}
+
render() {
const {
columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey,
@@ -96,6 +103,7 @@ export const DataExplorer = withStyles(styles)(
dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
paperKey, fetchMode, currentItemUuid, title
} = this.props;
+
return <Paper className={classes.root} {...paperProps} key={paperKey}>
{title && <div className={classes.title}>{title}</div>}
{(!hideColumnSelector || !hideSearchInput) && <Toolbar className={title ? classes.toolbarUnderTitle : classes.toolbar}>
@@ -104,6 +112,7 @@ export const DataExplorer = withStyles(styles)(
{!hideSearchInput && <SearchInput
label={searchLabel}
value={searchValue}
+ selfClearProp={currentItemUuid}
onSearch={onSearch} />}
</div>
{actions}
diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index 5d5a9a22..955cf5e5 100644
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -35,6 +35,7 @@ const styles: StyleRulesCallback<CssRules> = theme => {
interface SearchInputDataProps {
value: string;
label?: string;
+ selfClearProp: string;
}
interface SearchInputActionProps {
@@ -47,6 +48,7 @@ type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyl
interface SearchInputState {
value: string;
label: string;
+ selfClearProp: string;
}
export const DEFAULT_SEARCH_DEBOUNCE = 1000;
@@ -55,7 +57,8 @@ export const SearchInput = withStyles(styles)(
class extends React.Component<SearchInputProps> {
state: SearchInputState = {
value: "",
- label: ""
+ label: "",
+ selfClearProp: ""
};
timeout: number;
@@ -66,6 +69,7 @@ export const SearchInput = withStyles(styles)(
<InputLabel>{this.state.label}</InputLabel>
<Input
type="text"
+ data-cy="search-input"
value={this.state.value}
onChange={this.handleChange}
endAdornment={
@@ -93,6 +97,10 @@ export const SearchInput = withStyles(styles)(
if (nextProps.value !== this.props.value) {
this.setState({ value: nextProps.value });
}
+ if (nextProps.selfClearProp !== this.state.selfClearProp) {
+ this.props.onSearch('');
+ this.setState({ selfClearProp: nextProps.selfClearProp });
+ }
}
componentWillUnmount() {
diff --git a/src/views/run-process-panel/run-process-first-step.tsx b/src/views/run-process-panel/run-process-first-step.tsx
index 906d3a37..ed6d5640 100644
--- a/src/views/run-process-panel/run-process-first-step.tsx
+++ b/src/views/run-process-panel/run-process-first-step.tsx
@@ -59,7 +59,7 @@ export const RunProcessFirstStep = withStyles(styles)(
<Grid container spacing={16}>
<Grid container item xs={6} className={classes.root}>
<Grid item xs={12} className={classes.searchGrid}>
- <SearchInput value='' onSearch={onSearch} />
+ <SearchInput selfClearProp={JSON.stringify(selectedWorkflow)} value='' onSearch={onSearch} />
</Grid>
<Grid item xs={12}>
<List className={classes.list}>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list