Repository: codalab/codalab-worksheets (language: python)

Issue:
Remove jQuery .show() and .hide()
Remove jQuery .show() and .hide() functions, this is one of the steps to remove jQuery completely.
Related to fixes #1037 


Discussion / hints:

Fix patch:
diff --git a/frontend/src/components/FileBrowser/FileBrowser.js b/frontend/src/components/FileBrowser/FileBrowser.js
index 0960995b5..f12a1852d 100644
--- a/frontend/src/components/FileBrowser/FileBrowser.js
+++ b/frontend/src/components/FileBrowser/FileBrowser.js
@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import * as $ from 'jquery';
 import Paper from '@material-ui/core/Paper';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -44,6 +43,7 @@ export class FileBrowser extends React.Component<
             currentWorkingDirectory: '',
             fileBrowserData: {},
             isVisible: !this.props.startCollapsed,
+            hidden: true,
         };
     }
 
@@ -85,16 +85,14 @@ export class FileBrowser extends React.Component<
         this.setState({ currentWorkingDirectory: folder_path });
         const callback = (data) => {
             if (data.data.type === 'directory') {
-                this.setState({ fileBrowserData: data.data });
-                $('.file-browser').show();
+                this.setState({ fileBrowserData: data.data, hidden: false });
             } else {
-                $('.file-browser').hide();
+                this.setState({ hidden: true });
             }
         };
         const errorHandler = (error) => {
             console.error(error);
-            this.setState({ fileBrowserData: {} });
-            $('.file-browser').hide();
+            this.setState({ fileBrowserData: {}, hidden: true });
         };
         apiWrapper
             .updateFileBrowser(this.props.uuid, folder_path)
@@ -236,16 +234,18 @@ export class FileBrowser extends React.Component<
             checkbox = null;
         }
         return (
-            <div className='file-browser'>
-                {checkbox}
-                {header}
-                <div className={content_class_name}>
-                    <div className='panel panel-default'>
-                        {bread_crumbs}
-                        <div className='panel-body'>{file_browser}</div>
+            !this.state.hidden && (
+                <div className='file-browser'>
+                    {checkbox}
+                    {header}
+                    <div className={content_class_name}>
+                        <div className='panel panel-default'>
+                            {bread_crumbs}
+                            <div className='panel-body'>{file_browser}</div>
+                        </div>
                     </div>
                 </div>
-            </div>
+            )
         );
     }
 }
@@ -467,13 +467,14 @@ class FileBrowserItemLite extends React.Component<{
 export const FileBrowserLite = ({ uuid, startCollapsed, isRunningBundle, bundle_name }) => {
     const [currentWorkingDirectory, setCurrentWorkingDirectory] = useState('');
     const [fileBrowserData, setFileBrowserData] = useState({});
+    const [hidden, setHidden] = useState(true);
 
     const displayFileBrowser = (data) => {
         if (data.data.type === 'directory') {
             setFileBrowserData(data.data);
-            $('.file-browser').show();
+            setHidden(false);
         } else {
-            $('.file-browser').hide();
+            setHidden(true);
         }
     };
 
@@ -509,7 +510,7 @@ export const FileBrowserLite = ({ uuid, startCollapsed, isRunningBundle, bundle_
             })
             .catch(() => {
                 setFileBrowserData({});
-                $('.file-browser').hide();
+                setHidden(true);
             });
 
     const url =
@@ -584,10 +585,12 @@ export const FileBrowserLite = ({ uuid, startCollapsed, isRunningBundle, bundle_
             );
     });
     return (
-        <Paper>
-            <Table style={{ backgroundColor: 'white' }}>
-                <TableBody>{items}</TableBody>
-            </Table>
-        </Paper>
+        hidden || (
+            <Paper>
+                <Table style={{ backgroundColor: 'white' }}>
+                    <TableBody>{items}</TableBody>
+                </Table>
+            </Paper>
+        )
     );
 };
diff --git a/frontend/src/components/worksheets/Worksheet/Worksheet.js b/frontend/src/components/worksheets/Worksheet/Worksheet.js
index 9fdfa698c..dfafa122f 100644
--- a/frontend/src/components/worksheets/Worksheet/Worksheet.js
+++ b/frontend/src/components/worksheets/Worksheet/Worksheet.js
@@ -103,6 +103,9 @@ class Worksheet extends React.Component {
                 showMessage: false,
                 messageContent: null,
             },
+            showUpdateProgress: false,
+            showWorksheetContent: false,
+            showWorksheetContainer: true,
         };
         this.copyCallbacks = [];
         this.showContentCallbacks = [];
@@ -142,11 +145,10 @@ class Worksheet extends React.Component {
 
     saveWorksheet(props) {
         if (this.state.ws.info === undefined) return;
-        $('#update_progress').show();
+        this.setState({ showUpdateProgress: true });
         props = props || {};
         props.success = props.success || function(data) {};
         props.error = props.error || function(xhr, status, err) {};
-        $('#save_error').hide();
         apiWrapper
             .saveWorksheet(this.state.ws.uuid, this.state.ws.info.source.join('\n'))
             .then((data) => {
@@ -160,8 +162,7 @@ class Worksheet extends React.Component {
 
     deleteWorksheet(props) {
         if (this.state.ws.info === undefined) return;
-        $('#update_progress').show();
-        $('#save_error').hide();
+        this.setState({ showUpdateProgress: true });
         apiWrapper
             .deleteWorksheet(this.state.ws.info.uuid)
             .then((data) => {
@@ -472,7 +473,8 @@ class Worksheet extends React.Component {
     };
 
     moveFocusToBottom = () => {
-        $('#worksheet_container').scrollTop($('#worksheet_container')[0].scrollHeight);
+        const container = document.querySelector('#worksheet_container');
+        container.scrollTop = container.scrollHeight;
         this.setFocus(this.state.ws.info.blocks.length - 1, 'end');
     };
 
@@ -789,11 +791,11 @@ class Worksheet extends React.Component {
         this.fetch({
             brief: true,
             success: function(data) {
-                $('#worksheet_content').show();
                 this.setState({
                     updating: false,
                     version: this.state.version + 1,
                     numOfBundles: this.getNumOfBundles(),
+                    showWorksheetContent: true,
                 });
                 // Fix out of bounds.
             }.bind(this),
@@ -1223,8 +1225,8 @@ class Worksheet extends React.Component {
                 this.setState({
                     openedDialog: DIALOG_TYPES.OPEN_ERROR_DIALOG,
                     errorDialogMessage: error,
+                    showWorksheetContainer: false,
                 });
-                $('#worksheet_container').hide();
             });
     };
 
@@ -1396,8 +1398,7 @@ class Worksheet extends React.Component {
         } = {},
     ) => {
         if (partialUpdateItems === undefined) {
-            $('#update_progress').show();
-            this.setState({ updating: true });
+            this.setState({ updating: true, showUpdateProgress: true });
             this.fetch({
                 brief: true,
                 success: function(data) {
@@ -1408,8 +1409,7 @@ class Worksheet extends React.Component {
                         });
                         return false;
                     }
-                    $('#update_progress').hide();
-                    $('#worksheet_content').show();
+                    this.setState({ showUpdateProgress: false, showWorksheetContent: true });
                     var items = this.state.ws.info.blocks;
                     var numOfBundles = this.getNumOfBundles();
                     var focus = this.state.focusIndex;
@@ -1531,8 +1531,7 @@ class Worksheet extends React.Component {
                         openedDialog: DIALOG_TYPES.OPEN_ERROR_DIALOG,
                         errorDialogMessage: xhr.responseText,
                     });
-                    $('#update_progress').hide();
-                    $('#worksheet_container').hide();
+                    this.setState({ showUpdateProgress: false, showWorksheetContainer: false });
                 }.bind(this),
             });
         } else {
@@ -1591,9 +1590,7 @@ class Worksheet extends React.Component {
                 this.reloadWorksheet(undefined, rawIndex);
             }.bind(this),
             error: function(error) {
-                this.setState({ updating: false });
-                $('#update_progress').hide();
-                $('#save_error').show();
+                this.setState({ updating: false, showUpdateProgress: false });
                 this.setState({
                     openedDialog: DIALOG_TYPES.OPEN_ERROR_DIALOG,
                     errorDialogMessage: error,
@@ -1612,9 +1609,7 @@ class Worksheet extends React.Component {
                 window.location = '/users';
             }.bind(this),
             error: function(xhr, status, err) {
-                this.setState({ updating: false });
-                $('#update_progress').hide();
-                $('#save_error').show();
+                this.setState({ updating: false, showUpdateProgress: false });
                 this.setState({
                     openedDialog: DIALOG_TYPES.OPEN_ERROR_DIALOG,
                     errorDialogMessage: xhr.responseText,
@@ -1734,8 +1729,16 @@ class Worksheet extends React.Component {
     };
 
     render() {
+        console.log(this.state);
         const { classes } = this.props;
-        const { anchorEl, uploadAnchor } = this.state;
+        const {
+            anchorEl,
+            uploadAnchor,
+            showUpdateProgress,
+            showInformationModal,
+            showWorksheetContent,
+            showWorksheetContainer,
+        } = this.state;
 
         this.setupEventHandlers();
         let info = this.state.ws.info;
@@ -1949,57 +1952,61 @@ class Worksheet extends React.Component {
                     rtl={false}
                     pauseOnVisibilityChange
                 />
-                <div id='worksheet_container'>
-                    <div id='worksheet' className={searchClassName}>
-                        <div
-                            className={classes.worksheetDesktop}
-                            onClick={this.handleClickForDeselect}
-                        >
+                {showWorksheetContainer && (
+                    <div id='worksheet_container'>
+                        <div id='worksheet' className={searchClassName}>
                             <div
-                                className={classes.worksheetOuter}
+                                className={classes.worksheetDesktop}
                                 onClick={this.handleClickForDeselect}
-                                style={{ width: this.state.worksheetWidthPercentage }}
                             >
-                                {this.state.focusIndex === -1 ? (
-                                    <div
-                                        className={classes.worksheetDummyHeader}
-                                        id='worksheet_dummy_header'
-                                    />
-                                ) : (
-                                    <div style={{ height: 8 }} />
-                                )}
                                 <div
-                                    className={classes.worksheetInner}
+                                    className={classes.worksheetOuter}
                                     onClick={this.handleClickForDeselect}
+                                    style={{ width: this.state.worksheetWidthPercentage }}
                                 >
+                                    {this.state.focusIndex === -1 ? (
+                                        <div
+                                            className={classes.worksheetDummyHeader}
+                                            id='worksheet_dummy_header'
+                                        />
+                                    ) : (
+                                        <div style={{ height: 8 }} />
+                                    )}
                                     <div
-                                        id='worksheet_content'
-                                        className={editableClassName + ' worksheet_content'}
+                                        className={classes.worksheetInner}
+                                        onClick={this.handleClickForDeselect}
                                     >
-                                        {worksheetDisplay}
-                                        {/* Show error dialog if bulk bundle execution failed*/}
-                                        {this.state.BulkBundleDialog}
+                                        {showWorksheetContent && (
+                                            <div
+                                                id='worksheet_content'
+                                                className={editableClassName + ' worksheet_content'}
+                                            >
+                                                {worksheetDisplay}
+                                                {/* Show error dialog if bulk bundle execution failed*/}
+                                                {this.state.BulkBundleDialog}
+                                            </div>
+                                        )}
                                     </div>
+                                    <Button
+                                        onClick={this.moveFocusToBottom}
+                                        color='primary'
+                                        variant='contained'
+                                        style={{
+                                            borderRadius: '400px',
+                                            position: 'fixed',
+                                            bottom: '50px',
+                                            right: '30px',
+                                            backgroundColor: '00BFFF',
+                                            zIndex: 10,
+                                        }}
+                                    >
+                                        <ExpandMoreIcon size='medium' />
+                                    </Button>
                                 </div>
-                                <Button
-                                    onClick={this.moveFocusToBottom}
-                                    color='primary'
-                                    variant='contained'
-                                    style={{
-                                        borderRadius: '400px',
-                                        position: 'fixed',
-                                        bottom: '50px',
-                                        right: '30px',
-                                        backgroundColor: '00BFFF',
-                                        zIndex: 10,
-                                    }}
-                                >
-                                    <ExpandMoreIcon size='medium' />
-                                </Button>
                             </div>
                         </div>
                     </div>
-                </div>
+                )}
                 <WorksheetDialogs
                     openedDialog={this.state.openedDialog}
                     closeDialog={() => {
@@ -2017,7 +2024,8 @@ class Worksheet extends React.Component {
                     showBundleContentCallback={this.showBundleContentCallback}
                 />
                 <InformationModal
-                    showInformationModal={this.state.showInformationModal}
+                    showUpdateProgress={showUpdateProgress}
+                    showInformationModal={showInformationModal}
                     toggleInformationModal={this.toggleInformationModal}
                 />
                 <Popover
diff --git a/frontend/src/components/worksheets/Worksheet/Worksheet.scss b/frontend/src/components/worksheets/Worksheet/Worksheet.scss
index 038e4f67e..484d7374f 100644
--- a/frontend/src/components/worksheets/Worksheet/Worksheet.scss
+++ b/frontend/src/components/worksheets/Worksheet/Worksheet.scss
@@ -2,7 +2,6 @@
     margin-top: 24px;
     margin-bottom: 24px;
     line-height: 1.2;
-    display: none;
   }
   .worksheet_content hr {
     margin: 12px 0;


Test patch:
diff --git a/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap b/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap
index 06e9139ab..01d6be13a 100644
--- a/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap
+++ b/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap
@@ -128,7 +128,7 @@ Object {
                           Text
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                       <span>
@@ -165,7 +165,7 @@ Object {
                             Upload
                           </span>
                           <span
-                            class="MuiTouchRipple-root-238"
+                            class="MuiTouchRipple-root-237"
                           />
                         </button>
                       </span>
@@ -196,7 +196,7 @@ Object {
                           Run
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                       <button
@@ -228,7 +228,7 @@ Object {
                           Paste bundles
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                       <button
@@ -260,7 +260,7 @@ Object {
                           Schema
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                       <button
@@ -295,7 +295,7 @@ Object {
                           Image
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                     </div>
@@ -335,7 +335,7 @@ Object {
                           Edit Source
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                       <button
@@ -367,7 +367,7 @@ Object {
                           SHOW TERMINAL
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                       <button
@@ -397,7 +397,7 @@ Object {
                           </svg>
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                     </div>
@@ -432,7 +432,7 @@ Object {
                         </svg>
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </a>
                     <a
@@ -463,7 +463,7 @@ Object {
                         </svg>
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </a>
                   </div>
@@ -671,7 +671,7 @@ Object {
                                 </svg>
                               </span>
                               <span
-                                class="MuiTouchRipple-root-238"
+                                class="MuiTouchRipple-root-237"
                               />
                             </button>
                               
@@ -701,7 +701,7 @@ Object {
                                 </svg>
                               </span>
                               <span
-                                class="MuiTouchRipple-root-238"
+                                class="MuiTouchRipple-root-237"
                               />
                             </button>
                           </div>
@@ -757,7 +757,7 @@ Object {
                   </svg>
                 </span>
                 <span
-                  class="MuiTouchRipple-root-238"
+                  class="MuiTouchRipple-root-237"
                 />
               </button>
             </div>
@@ -784,31 +784,31 @@ Object {
     >
       <div
         aria-hidden="true"
-        class="MuiBackdrop-root-189 MuiBackdrop-invisible-190"
+        class="MuiBackdrop-root-188 MuiBackdrop-invisible-189"
         style="opacity: 0;"
       />
       <div
-        class="MuiPaper-root-191 MuiMenu-paper-153 MuiPaper-elevation0-193 MuiPaper-rounded-192 MuiPopover-paper-154"
+        class="MuiPaper-root-190 MuiMenu-paper-153 MuiPaper-elevation0-192 MuiPaper-rounded-191 MuiPopover-paper-154"
         role="document"
         style="opacity: 0; transform: scale(0.75, 0.5625);"
         tabindex="-1"
       >
         <ul
-          class="MuiList-root-218 MuiList-padding-219"
+          class="MuiList-root-217 MuiList-padding-218"
           role="menu"
         >
           <li
-            class="MuiButtonBase-root-141 MuiListItem-root-226 MuiListItem-default-229 MuiListItem-gutters-234 MuiListItem-button-235 MuiMenuItem-root-223 WithStyles-MenuItem--root-222 MuiMenuItem-gutters-224"
+            class="MuiButtonBase-root-141 MuiListItem-root-225 MuiListItem-default-228 MuiListItem-gutters-233 MuiListItem-button-234 MuiMenuItem-root-222 WithStyles-MenuItem--root-221 MuiMenuItem-gutters-223"
             role="menuitem"
             style="position: absolute; overflow: hidden; height: 1px; width: 1px; margin: -1px; padding: 0px; border: 0px;"
             tabindex="0"
           >
             <span
-              class="MuiTouchRipple-root-238"
+              class="MuiTouchRipple-root-237"
             />
           </li>
           <li
-            class="MuiButtonBase-root-141 MuiListItem-root-226 MuiListItem-default-229 MuiListItem-gutters-234 MuiListItem-button-235 MuiMenuItem-root-223 WithStyles-MenuItem--root-222 MuiMenuItem-gutters-224"
+            class="MuiButtonBase-root-141 MuiListItem-root-225 MuiListItem-default-228 MuiListItem-gutters-233 MuiListItem-button-234 MuiMenuItem-root-222 WithStyles-MenuItem--root-221 MuiMenuItem-gutters-223"
             role="menuitem"
             tabindex="-1"
           >
@@ -819,11 +819,11 @@ Object {
               File(s) Upload
             </label>
             <span
-              class="MuiTouchRipple-root-238"
+              class="MuiTouchRipple-root-237"
             />
           </li>
           <li
-            class="MuiButtonBase-root-141 MuiListItem-root-226 MuiListItem-default-229 MuiListItem-gutters-234 MuiListItem-button-235 MuiMenuItem-root-223 WithStyles-MenuItem--root-222 MuiMenuItem-gutters-224"
+            class="MuiButtonBase-root-141 MuiListItem-root-225 MuiListItem-default-228 MuiListItem-gutters-233 MuiListItem-button-234 MuiMenuItem-root-222 WithStyles-MenuItem--root-221 MuiMenuItem-gutters-223"
             role="menuitem"
             tabindex="-1"
           >
@@ -834,7 +834,7 @@ Object {
               Folder Upload
             </label>
             <span
-              class="MuiTouchRipple-root-238"
+              class="MuiTouchRipple-root-237"
             />
           </li>
         </ul>
@@ -963,7 +963,7 @@ Object {
                         Text
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                     <span>
@@ -1000,7 +1000,7 @@ Object {
                           Upload
                         </span>
                         <span
-                          class="MuiTouchRipple-root-238"
+                          class="MuiTouchRipple-root-237"
                         />
                       </button>
                     </span>
@@ -1031,7 +1031,7 @@ Object {
                         Run
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                     <button
@@ -1063,7 +1063,7 @@ Object {
                         Paste bundles
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                     <button
@@ -1095,7 +1095,7 @@ Object {
                         Schema
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                     <button
@@ -1130,7 +1130,7 @@ Object {
                         Image
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                   </div>
@@ -1170,7 +1170,7 @@ Object {
                         Edit Source
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                     <button
@@ -1202,7 +1202,7 @@ Object {
                         SHOW TERMINAL
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                     <button
@@ -1232,7 +1232,7 @@ Object {
                         </svg>
                       </span>
                       <span
-                        class="MuiTouchRipple-root-238"
+                        class="MuiTouchRipple-root-237"
                       />
                     </button>
                   </div>
@@ -1267,7 +1267,7 @@ Object {
                       </svg>
                     </span>
                     <span
-                      class="MuiTouchRipple-root-238"
+                      class="MuiTouchRipple-root-237"
                     />
                   </a>
                   <a
@@ -1298,7 +1298,7 @@ Object {
                       </svg>
                     </span>
                     <span
-                      class="MuiTouchRipple-root-238"
+                      class="MuiTouchRipple-root-237"
                     />
                   </a>
                 </div>
@@ -1506,7 +1506,7 @@ Object {
                               </svg>
                             </span>
                             <span
-                              class="MuiTouchRipple-root-238"
+                              class="MuiTouchRipple-root-237"
                             />
                           </button>
                             
@@ -1536,7 +1536,7 @@ Object {
                               </svg>
                             </span>
                             <span
-                              class="MuiTouchRipple-root-238"
+                              class="MuiTouchRipple-root-237"
                             />
                           </button>
                         </div>
@@ -1592,7 +1592,7 @@ Object {
                 </svg>
               </span>
               <span
-                class="MuiTouchRipple-root-238"
+                class="MuiTouchRipple-root-237"
               />
             </button>
           </div>