[arvados-workbench2] updated: 2.4.0-370-g8e6e1833

git repository hosting git at public.arvados.org
Thu Dec 15 18:22:59 UTC 2022


Summary of changes:
 src/components/file-upload/file-upload.tsx         |  3 +-
 src/components/form-dialog/form-dialog.tsx         | 10 +++-
 .../dialog-copy/dialog-collection-partial-copy.tsx |  4 +-
 src/views-components/dialog-copy/dialog-copy.tsx   |  4 +-
 .../dialog-partial-copy-to-collection.tsx          |  4 +-
 .../file-uploader/file-uploader.tsx                |  4 +-
 .../projects-tree-picker/tree-picker-field.tsx     | 42 +++++++------
 .../inputs/directory-array-input.tsx               | 56 ++++++++++--------
 .../run-process-panel/inputs/directory-input.tsx   | 68 +++++++++++-----------
 .../run-process-panel/inputs/file-array-input.tsx  | 55 +++++++++--------
 src/views/run-process-panel/inputs/file-input.tsx  | 57 ++++++++++--------
 .../run-process-panel/inputs/project-input.tsx     | 66 +++++++++++----------
 12 files changed, 206 insertions(+), 167 deletions(-)

       via  8e6e183396531005e9c6cee19e6e79998047cabd (commit)
      from  b321c4ab41ef13dfb43c7e64aee395c4db161872 (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 8e6e183396531005e9c6cee19e6e79998047cabd
Author: Stephen Smith <stephen at curii.com>
Date:   Thu Dec 15 13:22:32 2022 -0500

    19783: Add flexbox wrappers to allow dialog content to shrink on small window height
    
    Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>

diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 54d5b5db..e6c15144 100644
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -34,7 +34,8 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         width: "100%",
         height: "200px",
         position: "relative",
-        border: "1px solid rgba(0, 0, 0, 0.42)"
+        border: "1px solid rgba(0, 0, 0, 0.42)",
+        boxSizing: 'border-box',
     },
     dropzoneBorder: {
         content: "",
diff --git a/src/components/form-dialog/form-dialog.tsx b/src/components/form-dialog/form-dialog.tsx
index 0fc799de..b50504a6 100644
--- a/src/components/form-dialog/form-dialog.tsx
+++ b/src/components/form-dialog/form-dialog.tsx
@@ -8,7 +8,7 @@ import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/
 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 import { WithDialogProps } from 'store/dialog/with-dialog';
 
-type CssRules = "button" | "lastButton" | "formContainer" | "dialogTitle" | "progressIndicator" | "dialogActions";
+type CssRules = "button" | "lastButton" | "form" | "formContainer" | "dialogTitle" | "progressIndicator" | "dialogActions";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     button: {
@@ -18,6 +18,12 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         marginLeft: theme.spacing.unit,
         marginRight: "0",
     },
+    form: {
+        display: 'flex',
+        overflowY: 'auto',
+        flexDirection: 'column',
+        flex: '0 1 auto',
+    },
     formContainer: {
         display: "flex",
         flexDirection: "column",
@@ -57,7 +63,7 @@ export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
         disableEscapeKeyDown={props.submitting}
         fullWidth
         maxWidth='md'>
-        <form data-cy='form-dialog'>
+        <form data-cy='form-dialog' className={props.classes.form}>
             <DialogTitle className={props.classes.dialogTitle}>
                 {props.dialogTitle}
             </DialogTitle>
diff --git a/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx b/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx
index 7a3c5fdd..3c584e4f 100644
--- a/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx
+++ b/src/views-components/dialog-copy/dialog-collection-partial-copy.tsx
@@ -24,8 +24,8 @@ export const DialogCollectionPartialCopy = (props: DialogCollectionPartialCopyPr
 export const CollectionPartialCopyFields = memoize(
     (pickerId: string) =>
         () =>
-            <div>
+            <>
                 <CollectionNameField />
                 <CollectionDescriptionField />
                 <CollectionProjectPickerField {...{ pickerId }} />
-            </div>);
+            </>);
diff --git a/src/views-components/dialog-copy/dialog-copy.tsx b/src/views-components/dialog-copy/dialog-copy.tsx
index 5605e6ca..a3e30119 100644
--- a/src/views-components/dialog-copy/dialog-copy.tsx
+++ b/src/views-components/dialog-copy/dialog-copy.tsx
@@ -25,7 +25,7 @@ export const DialogCopy = (props: CopyFormDialogProps & PickerIdProp) =>
 
 const CopyDialogFields = memoize((pickerId: string) =>
     () =>
-        <span>
+        <>
             <Field
                 name='name'
                 component={TextField as any}
@@ -36,4 +36,4 @@ const CopyDialogFields = memoize((pickerId: string) =>
                 component={ProjectTreePickerField}
                 validate={COPY_FILE_VALIDATION}
                 pickerId={pickerId}/>
-        </span>);
+        </>);
diff --git a/src/views-components/dialog-copy/dialog-partial-copy-to-collection.tsx b/src/views-components/dialog-copy/dialog-partial-copy-to-collection.tsx
index a79ed0bc..4e9dde6a 100644
--- a/src/views-components/dialog-copy/dialog-partial-copy-to-collection.tsx
+++ b/src/views-components/dialog-copy/dialog-partial-copy-to-collection.tsx
@@ -24,6 +24,6 @@ export const DialogCollectionPartialCopyToSelectedCollection = (props: DialogCol
 export const CollectionPartialCopyFields = memoize(
     (pickerId: string) =>
         () =>
-            <div>
+            <>
                 <CollectionPickerField {...{ pickerId }}/>
-            </div>);
+            </>);
diff --git a/src/views-components/file-uploader/file-uploader.tsx b/src/views-components/file-uploader/file-uploader.tsx
index cde286c4..be592617 100644
--- a/src/views-components/file-uploader/file-uploader.tsx
+++ b/src/views-components/file-uploader/file-uploader.tsx
@@ -36,7 +36,7 @@ const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps):
 export const FileUploader = connect(mapStateToProps, mapDispatchToProps)(FileUpload);
 
 export const FileUploaderField = (props: WrappedFieldProps & { label?: string }) =>
-    <div>
+    <>
         <Typography variant='caption'>{props.label}</Typography>
         <FileUploader disabled={false} onDrop={props.input.onChange} />
-    </div>;
+    </>;
diff --git a/src/views-components/projects-tree-picker/tree-picker-field.tsx b/src/views-components/projects-tree-picker/tree-picker-field.tsx
index d6ebb8ec..357058c5 100644
--- a/src/views-components/projects-tree-picker/tree-picker-field.tsx
+++ b/src/views-components/projects-tree-picker/tree-picker-field.tsx
@@ -11,15 +11,17 @@ import { ProjectsTreePickerItem } from 'store/tree-picker/tree-picker-middleware
 import { PickerIdProp } from 'store/tree-picker/picker-id';
 
 export const ProjectTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
-    <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
-        <ProjectsTreePicker
-            pickerId={props.pickerId}
-            toggleItemActive={handleChange(props)}
-            options={{ showOnlyOwned: false, showOnlyWritable: true }} />
-        {props.meta.dirty && props.meta.error &&
-            <Typography variant='caption' color='error'>
-                {props.meta.error}
-            </Typography>}
+    <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
+        <div style={{ flexBasis: '200px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+            <ProjectsTreePicker
+                pickerId={props.pickerId}
+                toggleItemActive={handleChange(props)}
+                options={{ showOnlyOwned: false, showOnlyWritable: true }} />
+            {props.meta.dirty && props.meta.error &&
+                <Typography variant='caption' color='error'>
+                    {props.meta.error}
+                </Typography>}
+        </div>
     </div>;
 
 const handleChange = (props: WrappedFieldProps) =>
@@ -27,14 +29,16 @@ const handleChange = (props: WrappedFieldProps) =>
         props.input.onChange(id);
 
 export const CollectionTreePickerField = (props: WrappedFieldProps & PickerIdProp) =>
-    <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
-        <ProjectsTreePicker
-            pickerId={props.pickerId}
-            toggleItemActive={handleChange(props)}
-            options={{ showOnlyOwned: false, showOnlyWritable: true }}
-            includeCollections />
-        {props.meta.dirty && props.meta.error &&
-            <Typography variant='caption' color='error'>
-                {props.meta.error}
-            </Typography>}
+    <div style={{ display: 'flex', minHeight: 0, flexDirection: 'column' }}>
+        <div style={{ flexBasis: '200px', flexShrink: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+            <ProjectsTreePicker
+                pickerId={props.pickerId}
+                toggleItemActive={handleChange(props)}
+                options={{ showOnlyOwned: false, showOnlyWritable: true }}
+                includeCollections />
+            {props.meta.dirty && props.meta.error &&
+                <Typography variant='caption' color='error'>
+                    {props.meta.error}
+                </Typography>}
+        </div>
     </div>;
diff --git a/src/views/run-process-panel/inputs/directory-array-input.tsx b/src/views/run-process-panel/inputs/directory-array-input.tsx
index 72dba752..e64dca0e 100644
--- a/src/views/run-process-panel/inputs/directory-array-input.tsx
+++ b/src/views/run-process-panel/inputs/directory-array-input.tsx
@@ -231,31 +231,17 @@ const DirectoryArrayInputComponent = connect(mapStateToProps)(
                 onBlur={this.props.input.onBlur}
                 disabled={this.props.commandInput.disabled} />
 
-        dialog = () =>
-            <Dialog
-                open={this.state.open}
-                onClose={this.closeDialog}
-                fullWidth
-                maxWidth='md' >
-                <DialogTitle>Choose collections</DialogTitle>
-                <DialogContent>
-                    <this.dialogContent />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.closeDialog}>Cancel</Button>
-                    <Button
-                        data-cy='ok-button'
-                        variant='contained'
-                        color='primary'
-                        onClick={this.submit}>Ok</Button>
-                </DialogActions>
-            </Dialog>
-
         dialogContentStyles: StyleRulesCallback<DialogContentCssRules> = ({ spacing }) => ({
             root: {
                 display: 'flex',
                 flexDirection: 'column',
-                height: `${spacing.unit * 8}vh`,
+            },
+            pickerWrapper: {
+                display: 'flex',
+                flexDirection: 'column',
+                flexBasis: `${spacing.unit * 8}vh`,
+                flexShrink: 1,
+                minHeight: 0,
             },
             tree: {
                 flex: 3,
@@ -270,11 +256,33 @@ const DirectoryArrayInputComponent = connect(mapStateToProps)(
                 padding: `${spacing.unit}px 0`,
                 overflowX: 'hidden',
             },
-        })
+        });
+
+        dialog = withStyles(this.dialogContentStyles)(
+            ({ classes }: WithStyles<DialogContentCssRules>) =>
+                <Dialog
+                    open={this.state.open}
+                    onClose={this.closeDialog}
+                    fullWidth
+                    maxWidth='md' >
+                    <DialogTitle>Choose collections</DialogTitle>
+                    <DialogContent className={classes.root}>
+                        <this.dialogContent />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.closeDialog}>Cancel</Button>
+                        <Button
+                            data-cy='ok-button'
+                            variant='contained'
+                            color='primary'
+                            onClick={this.submit}>Ok</Button>
+                    </DialogActions>
+                </Dialog>
+        );
 
         dialogContent = withStyles(this.dialogContentStyles)(
             ({ classes }: WithStyles<DialogContentCssRules>) =>
-                <div className={classes.root}>
+                <div className={classes.pickerWrapper}>
                     <div className={classes.tree}>
                         <ProjectsTreePicker
                             pickerId={this.props.commandInput.id}
@@ -298,4 +306,4 @@ const DirectoryArrayInputComponent = connect(mapStateToProps)(
 
     });
 
-type DialogContentCssRules = 'root' | 'tree' | 'divider' | 'chips';
+type DialogContentCssRules = 'root' | 'pickerWrapper' | 'tree' | 'divider' | 'chips';
diff --git a/src/views/run-process-panel/inputs/directory-input.tsx b/src/views/run-process-panel/inputs/directory-input.tsx
index 1faf7381..5348cc2b 100644
--- a/src/views/run-process-panel/inputs/directory-input.tsx
+++ b/src/views/run-process-panel/inputs/directory-input.tsx
@@ -27,7 +27,7 @@ export interface DirectoryInputProps {
     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
 }
 
-type DialogContentCssRules = 'root';
+type DialogContentCssRules = 'root' | 'pickerWrapper';
 
 export const DirectoryInput = ({ input, options }: DirectoryInputProps) =>
     <Field
@@ -78,7 +78,7 @@ const DirectoryInputComponent = connect()(
         render() {
             return <>
                 {this.renderInput()}
-                {this.renderDialog()}
+                <this.dialog />
             </>;
         }
 
@@ -119,41 +119,43 @@ const DirectoryInputComponent = connect()(
 
         dialogContentStyles: StyleRulesCallback<DialogContentCssRules> = ({ spacing }) => ({
             root: {
-                height: `${spacing.unit * 8}vh`,
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            pickerWrapper: {
+                flexBasis: `${spacing.unit * 8}vh`,
+                flexShrink: 1,
+                minHeight: 0,
             },
         });
 
-        renderDialog() {
-            return <Dialog
-                open={this.state.open}
-                onClose={this.closeDialog}
-                fullWidth
-                data-cy="choose-a-directory-dialog"
-                maxWidth='md'>
-                <DialogTitle>Choose a directory</DialogTitle>
-                <DialogContent>
-                    <this.dialogContent />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.closeDialog}>Cancel</Button>
-                    <Button
-                        disabled={!this.state.directory}
-                        variant='contained'
-                        color='primary'
-                        onClick={this.submit}>Ok</Button>
-                </DialogActions>
-            </Dialog>;
-        }
-
-        dialogContent = withStyles(this.dialogContentStyles)(
+        dialog = withStyles(this.dialogContentStyles)(
             ({ classes }: WithStyles<DialogContentCssRules>) =>
-                <div className={classes.root}>
-                    <ProjectsTreePicker
-                        pickerId={this.props.commandInput.id}
-                        includeCollections
-                        options={this.props.options}
-                        toggleItemActive={this.setDirectory} />
-                </div>
+                <Dialog
+                    open={this.state.open}
+                    onClose={this.closeDialog}
+                    fullWidth
+                    data-cy="choose-a-directory-dialog"
+                    maxWidth='md'>
+                    <DialogTitle>Choose a directory</DialogTitle>
+                    <DialogContent className={classes.root}>
+                        <div className={classes.pickerWrapper}>
+                            <ProjectsTreePicker
+                                pickerId={this.props.commandInput.id}
+                                includeCollections
+                                options={this.props.options}
+                                toggleItemActive={this.setDirectory} />
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.closeDialog}>Cancel</Button>
+                        <Button
+                            disabled={!this.state.directory}
+                            variant='contained'
+                            color='primary'
+                            onClick={this.submit}>Ok</Button>
+                    </DialogActions>
+                </Dialog>
         );
 
     });
diff --git a/src/views/run-process-panel/inputs/file-array-input.tsx b/src/views/run-process-panel/inputs/file-array-input.tsx
index 712f6418..0be8f19f 100644
--- a/src/views/run-process-panel/inputs/file-array-input.tsx
+++ b/src/views/run-process-panel/inputs/file-array-input.tsx
@@ -212,31 +212,17 @@ const FileArrayInputComponent = connect(mapStateToProps)(
                 onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined}
                 onBlur={this.props.input.onBlur} />
 
-        dialog = () =>
-            <Dialog
-                open={this.state.open}
-                onClose={this.closeDialog}
-                fullWidth
-                maxWidth='md' >
-                <DialogTitle>Choose files</DialogTitle>
-                <DialogContent>
-                    <this.dialogContent />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.closeDialog}>Cancel</Button>
-                    <Button
-                        data-cy='ok-button'
-                        variant='contained'
-                        color='primary'
-                        onClick={this.submit}>Ok</Button>
-                </DialogActions>
-            </Dialog>
-
         dialogContentStyles: StyleRulesCallback<DialogContentCssRules> = ({ spacing }) => ({
             root: {
                 display: 'flex',
                 flexDirection: 'column',
-                height: `${spacing.unit * 8}vh`,
+            },
+            pickerWrapper: {
+                display: 'flex',
+                flexDirection: 'column',
+                flexBasis: `${spacing.unit * 8}vh`,
+                flexShrink: 1,
+                minHeight: 0,
             },
             tree: {
                 flex: 3,
@@ -253,9 +239,32 @@ const FileArrayInputComponent = connect(mapStateToProps)(
             },
         })
 
+
+        dialog = withStyles(this.dialogContentStyles)(
+            ({ classes }: WithStyles<DialogContentCssRules>) =>
+                <Dialog
+                    open={this.state.open}
+                    onClose={this.closeDialog}
+                    fullWidth
+                    maxWidth='md' >
+                    <DialogTitle>Choose files</DialogTitle>
+                    <DialogContent className={classes.root}>
+                        <this.dialogContent />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.closeDialog}>Cancel</Button>
+                        <Button
+                            data-cy='ok-button'
+                            variant='contained'
+                            color='primary'
+                            onClick={this.submit}>Ok</Button>
+                    </DialogActions>
+                </Dialog>
+        );
+
         dialogContent = withStyles(this.dialogContentStyles)(
             ({ classes }: WithStyles<DialogContentCssRules>) =>
-                <div className={classes.root}>
+                <div className={classes.pickerWrapper}>
                     <div className={classes.tree}>
                         <ProjectsTreePicker
                             pickerId={this.props.commandInput.id}
@@ -280,4 +289,4 @@ const FileArrayInputComponent = connect(mapStateToProps)(
 
     });
 
-type DialogContentCssRules = 'root' | 'tree' | 'divider' | 'chips';
+type DialogContentCssRules = 'root' | 'pickerWrapper' | 'tree' | 'divider' | 'chips';
diff --git a/src/views/run-process-panel/inputs/file-input.tsx b/src/views/run-process-panel/inputs/file-input.tsx
index fd1440c3..218bf418 100644
--- a/src/views/run-process-panel/inputs/file-input.tsx
+++ b/src/views/run-process-panel/inputs/file-input.tsx
@@ -26,7 +26,7 @@ export interface FileInputProps {
     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
 }
 
-type DialogContentCssRules = 'root';
+type DialogContentCssRules = 'root' | 'pickerWrapper';
 
 export const FileInput = ({ input, options }: FileInputProps) =>
     <Field
@@ -76,7 +76,7 @@ const FileInputComponent = connect()(
         render() {
             return <>
                 {this.renderInput()}
-                {this.renderDialog()}
+                <this.dialog />
             </>;
         }
 
@@ -118,35 +118,42 @@ const FileInputComponent = connect()(
 
         dialogContentStyles: StyleRulesCallback<DialogContentCssRules> = ({ spacing }) => ({
             root: {
-                height: `${spacing.unit * 8}vh`,
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            pickerWrapper: {
+                flexBasis: `${spacing.unit * 8}vh`,
+                flexShrink: 1,
+                minHeight: 0,
             },
         });
 
-        renderDialog() {
-            return <Dialog
-                open={this.state.open}
-                onClose={this.closeDialog}
-                fullWidth
-                data-cy="choose-a-file-dialog"
-                maxWidth='md'>
-                <DialogTitle>Choose a file</DialogTitle>
-                <DialogContent>
-                    <this.dialogContent />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.closeDialog}>Cancel</Button>
-                    <Button
-                        disabled={!this.state.file}
-                        variant='contained'
-                        color='primary'
-                        onClick={this.submit}>Ok</Button>
-                </DialogActions>
-            </Dialog >;
-        }
+        dialog = withStyles(this.dialogContentStyles)(
+            ({ classes }: WithStyles<DialogContentCssRules>) =>
+                <Dialog
+                    open={this.state.open}
+                    onClose={this.closeDialog}
+                    fullWidth
+                    data-cy="choose-a-file-dialog"
+                    maxWidth='md'>
+                    <DialogTitle>Choose a file</DialogTitle>
+                    <DialogContent className={classes.root}>
+                        <this.dialogContent />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.closeDialog}>Cancel</Button>
+                        <Button
+                            disabled={!this.state.file}
+                            variant='contained'
+                            color='primary'
+                            onClick={this.submit}>Ok</Button>
+                    </DialogActions>
+                </Dialog >
+        );
 
         dialogContent = withStyles(this.dialogContentStyles)(
             ({ classes }: WithStyles<DialogContentCssRules>) =>
-                <div className={classes.root}>
+                <div className={classes.pickerWrapper}>
                     <ProjectsTreePicker
                         pickerId={this.props.commandInput.id}
                         includeCollections
diff --git a/src/views/run-process-panel/inputs/project-input.tsx b/src/views/run-process-panel/inputs/project-input.tsx
index 761cd1ed..ef6d08f4 100644
--- a/src/views/run-process-panel/inputs/project-input.tsx
+++ b/src/views/run-process-panel/inputs/project-input.tsx
@@ -28,7 +28,7 @@ export interface ProjectInputProps {
     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
 }
 
-type DialogContentCssRules = 'root';
+type DialogContentCssRules = 'root' | 'pickerWrapper';
 
 export const ProjectInput = ({ input, options }: ProjectInputProps) =>
     <Field
@@ -70,7 +70,7 @@ export const ProjectInputComponent = connect(mapStateToProps)(
         render() {
             return <>
                 {this.renderInput()}
-                {this.renderDialog()}
+                <this.dialog />
             </>;
         }
 
@@ -114,40 +114,42 @@ export const ProjectInputComponent = connect(mapStateToProps)(
 
         dialogContentStyles: StyleRulesCallback<DialogContentCssRules> = ({ spacing }) => ({
             root: {
-                height: `${spacing.unit * 8}vh`,
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            pickerWrapper: {
+                flexBasis: `${spacing.unit * 8}vh`,
+                flexShrink: 1,
+                minHeight: 0,
             },
         });
 
-        renderDialog() {
-            return this.state.open ? <Dialog
-                open={this.state.open}
-                onClose={this.closeDialog}
-                fullWidth
-                data-cy="choose-a-project-dialog"
-                maxWidth='md'>
-                <DialogTitle>Choose a project</DialogTitle>
-                <DialogContent>
-                    <this.dialogContent />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.closeDialog}>Cancel</Button>
-                    <Button
-                        disabled={this.invalid()}
-                        variant='contained'
-                        color='primary'
-                        onClick={this.submit}>Ok</Button>
-                </DialogActions>
-            </Dialog> : null;
-        }
-
-        dialogContent = withStyles(this.dialogContentStyles)(
+        dialog = withStyles(this.dialogContentStyles)(
             ({ classes }: WithStyles<DialogContentCssRules>) =>
-                <div className={classes.root}>
-                    <ProjectsTreePicker
-                        pickerId={this.props.commandInput.id}
-                        options={this.props.options}
-                        toggleItemActive={this.setProject} />
-                </div>
+                this.state.open ? <Dialog
+                    open={this.state.open}
+                    onClose={this.closeDialog}
+                    fullWidth
+                    data-cy="choose-a-project-dialog"
+                    maxWidth='md'>
+                    <DialogTitle>Choose a project</DialogTitle>
+                    <DialogContent className={classes.root}>
+                        <div className={classes.pickerWrapper}>
+                            <ProjectsTreePicker
+                                pickerId={this.props.commandInput.id}
+                                options={this.props.options}
+                                toggleItemActive={this.setProject} />
+                        </div>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.closeDialog}>Cancel</Button>
+                        <Button
+                            disabled={this.invalid()}
+                            variant='contained'
+                            color='primary'
+                            onClick={this.submit}>Ok</Button>
+                    </DialogActions>
+                </Dialog> : null
         );
 
     });

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list