Merge branch 'master' of git.curoverse.com:arvados-workbench2 into 13827-structured...

refs #2
13827

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index 2b8ca83e694c62ff18cf457214f6852b363054c8..dbc77a84e942ccb18028ac8296acdc934a88b543 100644 (file)
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -21,6 +21,17 @@ export const searchBarActions = unionize({
 
 export type SearchBarActions = UnionOf<typeof searchBarActions>;
 
+export interface SearchBarAdvanceFormData {
+    type?: GroupContentsResource;
+    cluster?: string;
+    project?: string;
+    dataFrom: string;
+    dataTo: string;
+    searchQuery: string;
+}
+
+export const SEARCH_BAR_ADVANCE_FORM_NAME = 'searchBarAdvanceFormName';
+
 export const goToView = (currentView: string) => searchBarActions.SET_CURRENT_VIEW(currentView);
 
 export const saveRecentQuery = (query: string) =>

diff --git a/src/views-components/form-fields/search-bar-form-fields.tsx b/src/views-components/form-fields/search-bar-form-fields.tsx
new file mode 100644 (file)
index 0000000..2691132
--- /dev/null
+++ b/src/views-components/form-fields/search-bar-form-fields.tsx
@@ -0,0 +1,78 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { Field } from "redux-form";
+import { TextField } from "~/components/text-field/text-field";
+import { Checkbox, FormControlLabel } from '@material-ui/core';
+
+export const SearchBarTypeField = () =>
+    <Field
+        name='type'
+        component={TextField}
+        label="Type"/>;
+
+export const SearchBarClusterField = () =>
+    <Field
+        name='cluster'
+        component={TextField}
+        label="Cluster name" />;
+
+export const SearchBarProjectField = () => 
+    <Field
+        name='project'
+        component={TextField}
+        label="Project name" />;
+
+export const SearchBarTrashField = () => 
+    <FormControlLabel
+        control={
+            <Checkbox
+                checked={false}
+                value="true"
+                color="primary"
+            />
+        }
+        label="In trash" />;
+
+export const SearchBarDataFromField = () => 
+    <Field
+        name='dataFrom'
+        component={TextField}
+        label="From" />;
+
+export const SearchBarDataToField = () =>
+    <Field
+        name='dataTo'
+        component={TextField}
+        label="To" />;
+
+export const SearchBarKeyField = () => 
+    <Field
+        name='key'
+        component={TextField}
+        label="Key" />;
+
+export const SearchBarValueField = () => 
+    <Field
+        name='value'
+        component={TextField}
+        label="Value" />;
+
+export const SearchBarSaveSearchField = () => 
+    <FormControlLabel
+        control={
+            <Checkbox
+                checked={false}
+                value="true"
+                color="primary"
+            />
+        }
+        label="Save search query" />;
+
+export const SearchBarQuerySearchField = () => 
+    <Field
+        name='searchQuery'
+        component={TextField}
+        label="Search query name" />;
\ No newline at end of file

diff --git a/src/views-components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
index dde23685f57b51f9b6802d661360507780c7f926..583c9a0b12af1befacfebbaa89091d014e0c7825 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -3,33 +3,159 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Paper, StyleRulesCallback, withStyles, WithStyles, List, Button } from '@material-ui/core';
+import { reduxForm, reset, InjectedFormProps } from 'redux-form';
+import { compose, Dispatch } from 'redux';
+import { Paper, StyleRulesCallback, withStyles, WithStyles, Button, Grid, IconButton, CircularProgress } from '@material-ui/core';
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { RecentQueriesItem } from '~/views-components/search-bar/search-bar-view';
+import { SEARCH_BAR_ADVANCE_FORM_NAME, SearchBarAdvanceFormData } from '~/store/search-bar/search-bar-actions';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { CloseIcon } from '~/components/icon/icon';
+import { 
+    SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField, 
+    SearchBarDataFromField, SearchBarDataToField, SearchBarKeyField, SearchBarValueField,
+    SearchBarSaveSearchField, SearchBarQuerySearchField
+} from '~/views-components/form-fields/search-bar-form-fields';
 
-type CssRules = 'list' | 'searchView';
+type CssRules = 'form' | 'container' | 'closeIcon' | 'label' | 'buttonWrapper' | 'button' | 'circularProgress';
 
-const styles: StyleRulesCallback<CssRules> = theme => {
-    return {
-        list: {
-            padding: '0px'
-        },
-        searchView: {
-            borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
-        }
-    };
-};
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    form: {
+
+    },
+    container: {
+        padding: theme.spacing.unit * 3,
+        borderBottom: `1px solid ${theme.palette.grey["200"]}`
+    }, 
+    closeIcon: {
+        position: 'absolute',
+        top: '12px',
+        right: '12px'
+    },
+    label: {
+        color: theme.palette.grey["500"],
+        fontSize: '0.8125rem',
+        alignSelf: 'center'
+    },
+    buttonWrapper: {
+        paddingTop: '14px',
+        position: 'relative',
+    },
+    button: {
+        boxShadow: 'none'
+    },
+    circularProgress: {
+        position: 'absolute',
+        top: -9,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        margin: 'auto'
+    }
+});
+
+interface SearchBarAdvancedViewDataProps {
+    submitting: boolean;
+    invalid: boolean;
+    pristine: boolean;
+}
 
-interface SearchBarAdvancedViewProps {
+interface SearchBarAdvancedViewActionProps {
     setView: (currentView: string) => void;
 }
 
-export const SearchBarAdvancedView = withStyles(styles)(
-    ({ classes, setView }: SearchBarAdvancedViewProps & WithStyles<CssRules>) =>
-        <Paper className={classes.searchView}>
-            <List component="nav" className={classes.list}>
-                <RecentQueriesItem text='ADVANCED VIEW' />
-            </List>
-            <Button onClick={() => setView(SearchView.BASIC)}>Back</Button>
-        </Paper>
-);
\ No newline at end of file
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps 
+    & InjectedFormProps & WithStyles<CssRules>;
+
+export const SearchBarAdvancedView = compose(
+    reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
+        form: SEARCH_BAR_ADVANCE_FORM_NAME,
+        onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
+            console.log('data: ', data);
+            dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
+        }
+    }),
+    withStyles(styles))(
+        ({ classes, setView, handleSubmit, invalid, submitting, pristine }: SearchBarAdvancedViewProps) =>
+            <Paper>
+                <form onSubmit={handleSubmit} className={classes.form}>
+                    <Grid container direction="column" justify="flex-start" alignItems="flex-start">
+                        <Grid item xs={12} container className={classes.container}>
+                            <Grid item container xs={12}>
+                                <Grid item xs={2} className={classes.label}>Type</Grid>
+                                <Grid item xs={5}>
+                                    <SearchBarTypeField />
+                                </Grid>
+                            </Grid>
+                            <Grid item container xs={12}>
+                                <Grid item xs={2} className={classes.label}>Cluster</Grid>
+                                <Grid item xs={5}>
+                                    <SearchBarClusterField />
+                                </Grid>
+                            </Grid>
+                            <Grid item container xs={12}>
+                                <Grid item xs={2} className={classes.label}>Project</Grid>
+                                <Grid item xs={5}>
+                                    <SearchBarProjectField />
+                                </Grid>
+                            </Grid>
+                            <Grid item container xs={12}>
+                                <Grid item xs={2} className={classes.label} />
+                                <Grid item xs={5}>
+                                    <SearchBarTrashField />
+                                </Grid>
+                            </Grid>
+                            <IconButton onClick={() => setView(SearchView.BASIC)} className={classes.closeIcon}>
+                                <CloseIcon />
+                            </IconButton>
+                        </Grid>
+                        <Grid container item xs={12} className={classes.container}>
+                            <Grid item xs={2} className={classes.label}>Data modified</Grid>
+                            <Grid item xs={3}>
+                                <SearchBarDataFromField />
+                            </Grid>
+                            <Grid item xs={3}>
+                                <SearchBarDataToField />
+                            </Grid>
+                        </Grid>
+                        <Grid container item xs={12} className={classes.container}>
+                            <Grid container item xs={12}>
+                                <Grid item xs={2} className={classes.label}>Properties</Grid>
+                                <Grid item xs={4}>
+                                    <SearchBarKeyField />
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <SearchBarValueField />
+                                </Grid>
+                                <Grid container item xs={2} justify='flex-end' alignItems="center">
+                                    <Button className={classes.button}
+                                        color="primary"
+                                        size='small'
+                                        variant="contained">
+                                        Add
+                                    </Button>
+                                </Grid>
+                            </Grid>
+                            <Grid container item xs={12} justify="flex-start" alignItems="center">
+                                <Grid item xs={2} className={classes.label} />
+                                <Grid item xs={4}>
+                                    <SearchBarSaveSearchField />
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <SearchBarQuerySearchField />
+                                </Grid>
+                            </Grid>
+                            <Grid container item xs={12} justify='flex-end'>
+                                <div className={classes.buttonWrapper}>
+                                    <Button type="submit" className={classes.button}
+                                        color="primary"
+                                        size='small'
+                                        variant="contained">
+                                        Search
+                                    </Button>
+                                    {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
+                                </div>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </form>
+            </Paper>);

diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index b2575a8f5f3ec171c24f192ab235262aa9295334..d6facbd7bcc23619b27104f0dd78c5fd7dc59c40 100644 (file)
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -22,7 +22,7 @@ import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-
 import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
 import { ArvadosTheme } from '~/common/custom-theme';
 
-type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'searchBar';
+type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'searchBar' | 'view';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
     return {
@@ -42,6 +42,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
         },
         searchBar: {
             height: '30px'
+        },
+        view: {
+            position: 'absolute',
+            width: '100%'
         }
     };
 };
@@ -124,9 +128,11 @@ export const SearchBarView = withStyles(styles)(
                                     </Tooltip>
                                 </InputAdornment>
                             } />
-                        {open && this.getView(currentView)}
                     </form>
-                </Paper >
+                    <div className={classes.view}>
+                        {open && this.getView(currentView)}
+                    </div>
+                </Paper>
             </ClickAwayListener>;
         }
 

diff --git a/src/views/collection-panel/collection-tag-form.tsx b/src/views/collection-panel/collection-tag-form.tsx
index 75099f2cd88541557759018890c7962857163ea8..9aa881286580eefd0302c0c12f3f926fdabef6d3 100644 (file)
--- a/src/views/collection-panel/collection-tag-form.tsx
+++ b/src/views/collection-panel/collection-tag-form.tsx
@@ -72,21 +72,21 @@ export const CollectionTagForm = compose(
                 const { classes, submitting, pristine, invalid, handleSubmit } = this.props;
                 return (
                     <form onSubmit={handleSubmit} className={classes.root}>
-                        <Typography component='div' className={classes.keyField}>
+                        <div className={classes.keyField}>
                             <Field name="key"
                                 disabled={submitting}
                                 component={TextField}
                                 validate={TAG_KEY_VALIDATION}
                                 label="Key" />
-                        </Typography>
-                        <Typography component='div' className={classes.valueField}>
+                        </div>
+                        <div className={classes.valueField}>
                             <Field name="value"
                                 disabled={submitting}
                                 component={TextField}
                                 validate={TAG_VALUE_VALIDATION}
                                 label="Value" />
-                        </Typography>
-                        <Typography component='div' className={classes.buttonWrapper}>
+                        </div>
+                        <div className={classes.buttonWrapper}>
                             <Button type="submit" className={classes.saveButton}
                                 color="primary"
                                 size='small'
@@ -95,7 +95,7 @@ export const CollectionTagForm = compose(
                                 ADD
                             </Button>
                             {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
-                        </Typography>
+                        </div>
                     </form>
                 );
             }