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

Issue:
Update deleting bundle text to be clearer
When deleting a bundle, it says “4 bundles deleting…”  Should be “Deleting 4 bundles…”


Discussion / hints:

Fix patch:
diff --git a/frontend/src/components/worksheets/Worksheet/Worksheet.js b/frontend/src/components/worksheets/Worksheet/Worksheet.js
index d103502cc..447440425 100644
--- a/frontend/src/components/worksheets/Worksheet/Worksheet.js
+++ b/frontend/src/components/worksheets/Worksheet/Worksheet.js
@@ -280,20 +280,6 @@ class Worksheet extends React.Component {
         }
     };
 
-    _getToastMsg = (command, state, count) => {
-        // Creates a toast message for a given command.
-        // count is the number of bundles on which this command was performed, if applicable.
-        // state can take the value of 0 or 1
-        // 0 represents the command is being executed
-        // 1 represents the command has already been executed
-        const cmdMsgMap: { string: string } = { rm: ['deleting', 'deleted'] };
-        let toastMsg =
-            (command in cmdMsgMap
-                ? count + (count === 1 ? ' bundle ' : ' bundles ') + cmdMsgMap[command][state]
-                : (state === 0 ? 'Executing ' : 'Executed ') + command + ' command') +
-            (state === 0 ? '...' : '!');
-        return toastMsg;
-    };
     handleSelectedBundleCommand = (cmd, worksheet_uuid = this.state.ws.uuid) => {
         // This function runs the command for bulk bundle operations
         // The uuid are recorded by handleCheckBundle
@@ -303,7 +289,7 @@ class Worksheet extends React.Component {
         this.setState({ updating: true });
         const bundleCount: number = Object.keys(this.state.uuidBundlesCheckedCount).length;
         // This toast info is used for showing a message when a command is being performed
-        const toastId = toast.info(this._getToastMsg(cmd, 0, bundleCount), {
+        const toastId = toast.info(getToastMsg(cmd, 0, bundleCount), {
             position: 'top-right',
             hideProgressBar: false,
             closeOnClick: true,
@@ -323,7 +309,7 @@ class Worksheet extends React.Component {
                 this.clearCheckedBundles(() => {
                     // This toast info is used for showing a message when a command has finished executing
                     toast.update(toastId, {
-                        render: this._getToastMsg(cmd, 1, bundleCount),
+                        render: getToastMsg(cmd, 1, bundleCount),
                         type: toast.TYPE.SUCCESS,
                         position: 'top-right',
                         autoClose: 2000,
@@ -339,6 +325,7 @@ class Worksheet extends React.Component {
                 this.reloadWorksheet(undefined, undefined, param);
             })
             .catch((e) => {
+                toast.dismiss();
                 this.setState({
                     openedDialog: DIALOG_TYPES.OPEN_ERROR_DIALOG,
                     errorDialogMessage: e,
@@ -2119,4 +2106,29 @@ Mousetrap.stopCallback = function(e, element, combo) {
     );
 };
 
+export const getToastMsg = (command, state, count) => {
+    // Creates a toast message for a given command.
+    // count is the number of bundles on which this command was performed, if applicable.
+    // state can take the value of 0 or 1
+    // 0 represents the command is being executed
+    // 1 represents the command has already been executed
+    const cmdMsgMap = { rm: ['Deleting', 'deleted'] };
+    const bundleCount = count + (count === 1 ? ' bundle' : ' bundles');
+    const cmdMsg = cmdMsgMap[command] ?? ['Executing', 'executed'];
+    let toastMsg;
+    if (command in cmdMsgMap) {
+        // We want the toasts to be "Deleting x bundles..." and "x bundles deleted!"
+        toastMsg =
+            state === 0 ? cmdMsg[state] + ' ' + bundleCount : bundleCount + ' ' + cmdMsg[state];
+    } else {
+        // Default text for unrecognized commands.
+        toastMsg =
+            state === 0
+                ? cmdMsg[state] + ' ' + command + ' command'
+                : command + ' command' + ' ' + cmdMsg[state];
+    }
+    toastMsg += state === 0 ? '...' : '!';
+    return toastMsg;
+};
+
 export default withStyles(styles)(Worksheet);


Test patch:
diff --git a/frontend/src/__tests__/Worksheet.test.js b/frontend/src/__tests__/Worksheet.test.js
index af404152b..cc09d0ce8 100644
--- a/frontend/src/__tests__/Worksheet.test.js
+++ b/frontend/src/__tests__/Worksheet.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import nock from 'nock';
 import { render, waitFor, screen } from '../utils/test-utils';
-import Worksheet from '../components/worksheets/Worksheet/Worksheet';
+import Worksheet, { getToastMsg } from '../components/worksheets/Worksheet/Worksheet';
 
 describe('render simple worksheet', () => {
     beforeEach(() => {
@@ -95,4 +95,13 @@ describe('render simple worksheet', () => {
         expect(nock.isDone());
         expect(comp).toMatchSnapshot();
     });
+
+    test('getToastMsg', () => {
+        expect(getToastMsg('rm', 0, 1)).toEqual('Deleting 1 bundle...');
+        expect(getToastMsg('rm', 0, 2)).toEqual('Deleting 2 bundles...');
+        expect(getToastMsg('rm', 1, 1)).toEqual('1 bundle deleted!');
+        expect(getToastMsg('rm', 1, 2)).toEqual('2 bundles deleted!');
+        expect(getToastMsg('random', 0, 2)).toEqual('Executing random command...');
+        expect(getToastMsg('random', 1, 2)).toEqual('random command executed!');
+    });
 });