fix(xo-web/sortedTable): for collapsed actions disable action during …

…action time
vatesfr · May 12, 2023 · aea19fd · aea19fd
1 parent 470c9bb
commit aea19fd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -7,11 +7,13 @@
 
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
+
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
 
 - [Import/VM/From VMware] Fix `Property description must be an object: undefined` [Forum#61834](https://xcp-ng.org/forum/post/61834) [Forum#61900](https://xcp-ng.org/forum/post/61900)
+- [Sorted table] In collapsed actions, a spinner is displayed during the action time
 
 ### Packages to release
 
@@ -31,5 +33,6 @@
 
 - @vates/task patch
 - xo-server minor
+- xo-web patch
 
 <!--packages-end-->
diff --git a/packages/xo-web/src/common/sorted-table/index.js b/packages/xo-web/src/common/sorted-table/index.js
@@ -168,8 +168,12 @@ const handleFnProps = (prop, items, userData) => (typeof prop === 'function' ? p
 const CollapsedActions = decorate([
   withRouter,
   provideState({
+    initialState: () => ({
+      runningActions: [],
+    }),
     effects: {
       async execute(state, { handler, label, redirectOnSuccess }) {
+        this.state.runningActions = [...this.state.runningActions, label]
         try {
           await handler()
           ifDef(redirectOnSuccess, this.props.router.push)
@@ -183,18 +187,26 @@ const CollapsedActions = decorate([
               _error(label, defined(error.message, String(error)))
             }
           }
+        } finally {
+          this.state.runningActions = this.state.runningActions.filter(action => action !== label)
         }
       },
     },
     computed: {
+      wrappedActions: ({ runningActions }, { actions }) => {
+        actions.forEach((action, index) => {
+          actions[index].isRunning = runningActions.includes(action.label)
+        })
+        return [...actions]
+      },
       dropdownId: generateId,
-      actions: (_, { actions, items, userData }) =>
-        actions.map(({ disabled, grouped, handler, icon, label, level, redirectOnSuccess }) => {
+      actions: ({ wrappedActions: actions }, { items, userData }) =>
+        actions.map(({ disabled, grouped, handler, icon, isRunning, label, level, redirectOnSuccess }) => {
           const actionItems = Array.isArray(items) || !grouped ? items : [items]
           return {
-            disabled: handleFnProps(disabled, actionItems, userData),
+            disabled: isRunning || handleFnProps(disabled, actionItems, userData),
             handler: () => handler(actionItems, userData),
-            icon: handleFnProps(icon, actionItems, userData),
+            icon: isRunning ? 'loading' : handleFnProps(icon, actionItems, userData),
             label: handleFnProps(label, actionItems, userData),
             level: handleFnProps(level, actionItems, userData),
             redirectOnSuccess: handleFnProps(redirectOnSuccess, actionItems, userData),