Update bundle CTA UI. (#4210)

* Update bundle CTA UI. * Fix command margin for killed bundles. * Apply margin to command when bundle is loading. * Disable download button for run bundle that are not ready yet.
codalab · Aug 16, 2022 · 58d74fb · 58d74fb
1 parent e0fd849
commit 58d74fb
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 57 deletions.
diff --git a/frontend/src/components/CodeSnippet.jsx b/frontend/src/components/CodeSnippet.jsx
@@ -18,9 +18,10 @@ class CodeSnippet extends React.Component {
     render() {
         const { classes, code, copyMessage, expanded, href } = this.props;
         const maxHeight = expanded ? 'none' : 300;
+        const marginBottom = this.props.noMargin ? 0 : 16;
         return (
             <Grid item xs={12}>
-                <div className={classes.snippet} style={{ maxHeight }}>
+                <div className={classes.snippet} style={{ maxHeight, marginBottom }}>
                     <div>{code}</div>
                     {copyMessage && <Copy message={copyMessage} text={code} />}
                     {href && <NewWindowLink href={href} />}
@@ -40,7 +41,6 @@ const styles = (theme) => ({
         overflow: 'auto',
         whiteSpace: 'pre-wrap',
         backgroundColor: theme.color.grey.lightest,
-        marginBottom: 16,
     },
 });
 

diff --git a/frontend/src/components/worksheets/BundleDetail/BundleActions.jsx b/frontend/src/components/worksheets/BundleDetail/BundleActions.jsx
@@ -96,55 +96,35 @@ class BundleActions extends React.Component<{
             bundleInfo.state !== 'created' &&
             bundleInfo.state !== 'staged';
 
-        return isRunBundle ? (
-            <div className={classes.actionsContainer}>
-                <Button
-                    classes={{ root: classes.actionButton }}
-                    variant='outlined'
-                    color='primary'
-                    disabled={!isDownloadableRunBundle}
-                    onClick={() => {
-                        window.open(bundleDownloadUrl, '_blank');
-                    }}
-                >
-                    <span className='glyphicon glyphicon-download-alt' />
-                </Button>
-                {editPermission && (
+        return (
+            <div>
+                {isRunBundle && editPermission && (
                     <>
+                        <Snackbar
+                            classes={{ root: classes.snackbar }}
+                            open={this.state.killSnackbarIsOpen}
+                            onClose={this.handleCloseKillSnackbar}
+                            message='Executing kill command...'
+                            action={this.killSnackbarAction}
+                        />
                         <Button
-                            classes={{ root: classes.actionButton }}
-                            variant='outlined'
+                            classes={{ root: classes.killButton }}
+                            variant='text'
                             color='primary'
-                            onClick={this.rerun}
+                            disabled={!isKillableBundle}
+                            onClick={this.kill}
                         >
-                            Edit & Rerun
+                            Kill
+                        </Button>
+                        <Button variant='contained' color='primary' onClick={this.rerun}>
+                            Rerun
                         </Button>
-                        {isKillableBundle && (
-                            <>
-                                <Button
-                                    classes={{ root: classes.actionButton }}
-                                    variant='contained'
-                                    color='primary'
-                                    onClick={this.kill}
-                                >
-                                    Kill
-                                </Button>
-                                <Snackbar
-                                    classes={{ root: classes.snackbar }}
-                                    open={this.state.killSnackbarIsOpen}
-                                    onClose={this.handleCloseKillSnackbar}
-                                    message='Executing kill command...'
-                                    action={this.killSnackbarAction}
-                                />
-                            </>
-                        )}
                     </>
                 )}
-            </div>
-        ) : (
-            <div className={classes.actionsContainer}>
                 <Button
-                    classes={{ root: classes.actionButton }}
+                    classes={{ root: classes.downloadButton }}
+                    style={!isRunBundle || !editPermission ? { marginLeft: 0 } : {}}
+                    disabled={isRunBundle ? !isDownloadableRunBundle : false}
                     variant='outlined'
                     color='primary'
                     onClick={() => {
@@ -159,15 +139,12 @@ class BundleActions extends React.Component<{
 }
 
 const styles = () => ({
-    actionsContainer: {
-        padding: '0 10px',
+    killButton: {
+        minWidth: 50,
     },
-    actionButton: {
+    downloadButton: {
         minWidth: 'auto',
-        padding: '8px 10px',
-        marginLeft: '0 !important', // override default
-        marginRight: 12,
-        lineHeight: '14px',
+        padding: '10px 11px',
     },
     snackbar: {
         marginBottom: 40,

diff --git a/frontend/src/components/worksheets/BundleDetail/BundleDetail.jsx b/frontend/src/components/worksheets/BundleDetail/BundleDetail.jsx
@@ -6,7 +6,7 @@ import { findDOMNode } from 'react-dom';
 import useSWR from 'swr';
 import { apiWrapper, fetchFileSummary } from '../../../util/apiWrapper';
 
-import ConfigurationPanel from '../ConfigPanel';
+import ConfigPanel from '../ConfigPanel';
 import ErrorMessage from '../ErrorMessage';
 import MainContent from './MainContent';
 import BundleDetailSideBar from './BundleDetailSideBar';
@@ -215,7 +215,7 @@ const BundleDetail = ({
     }
 
     return (
-        <ConfigurationPanel
+        <ConfigPanel
             //  The ref is created only once, and that this is the only way to properly create the ref before componentDidMount().
             ref={(node) => scrollToNewlyOpenedDetail(node)}
             buttons={
@@ -249,7 +249,7 @@ const BundleDetail = ({
                 contentType={contentType}
                 expanded={contentExpanded}
             />
-        </ConfigurationPanel>
+        </ConfigPanel>
     );
 };
 

diff --git a/frontend/src/components/worksheets/BundleDetail/MainContent.jsx b/frontend/src/components/worksheets/BundleDetail/MainContent.jsx
@@ -104,6 +104,7 @@ class MainContent extends React.Component<{
                                     code={command}
                                     expanded={expanded}
                                     copyMessage='Command Copied!'
+                                    noMargin={!isLoading && !stdout && !stderr && !contentType}
                                 />
                             )}
                         </Grid>
@@ -161,6 +162,7 @@ class MainContent extends React.Component<{
                                                 <CodeSnippet
                                                     code={fileContents}
                                                     expanded={expanded}
+                                                    noMargin
                                                 />
                                             ) : (
                                                 <FileBrowserLite

diff --git a/frontend/src/components/worksheets/ConfigPanel/ConfigCodeInput.jsx b/frontend/src/components/worksheets/ConfigPanel/ConfigCodeInput.jsx
@@ -39,7 +39,7 @@ class ConfigCodeInput extends React.Component<{
                 autoFocus={autoFocus}
                 onFocus={this.moveFocusToEnd}
                 onKeyDown={onKeyDown}
-                margin='dense'
+                margin='none'
                 variant='filled'
                 fullWidth
                 InputProps={{

diff --git a/frontend/src/components/worksheets/ConfigPanel/ConfigLabel.jsx b/frontend/src/components/worksheets/ConfigPanel/ConfigLabel.jsx
@@ -13,8 +13,9 @@ class ConfigLabel extends React.Component<{
 }> {
     render() {
         const { classes, label, tooltip, inline, optional } = this.props;
+        const marginBottom = this.props.hasMargin ? 4 : 0;
         const contents = (
-            <span className={classes.label}>
+            <span className={classes.label} style={{ marginBottom }}>
                 <Typography variant='subtitle2' inline>
                     {label}
                 </Typography>

diff --git a/frontend/src/components/worksheets/ConfigPanel/ConfigPanel.jsx b/frontend/src/components/worksheets/ConfigPanel/ConfigPanel.jsx
@@ -75,6 +75,7 @@ const styles = (theme) => ({
         maxWidth: '100%',
     },
     content: {
+        justifyContent: 'flex-start',
         backgroundColor: 'white',
         padding: theme.spacing.larger,
         maxHeight: '100%',
@@ -92,10 +93,10 @@ const styles = (theme) => ({
     },
     buttons: {
         '& button': {
-            marginLeft: theme.spacing.larger,
+            marginLeft: 14,
         },
         paddingBottom: theme.spacing.large,
-        paddingTop: theme.spacing.larger,
+        paddingTop: 24,
         maxWidth: '90%',
     },
     border: {

diff --git a/frontend/src/components/worksheets/NewRun/NewRun.jsx b/frontend/src/components/worksheets/NewRun/NewRun.jsx
@@ -537,6 +537,7 @@ class NewRun extends React.Component<
                     label='Dependencies'
                     tooltip='Map an entire bundle or a file/directory inside to a name that
                     can be referenced in the terminal command.'
+                    hasMargin
                 />
                 <DependencyEditor
                     addDependency={(dep) => this.addDependency(dep)}
@@ -553,6 +554,7 @@ class NewRun extends React.Component<
                     tooltip='Terminal command to run within the Docker container. It can use
                     data from other bundles by referencing the aliases specified in the
                     dependencies section.'
+                    hasMargin
                 />
                 <ConfigCodeInput
                     value={this.state.command}