From 42e684ef5b3c4c1afe4413ad669b6189252907e8 Mon Sep 17 00:00:00 2001
From: Samantha Piatt <samantha.piatt@childrens.harvard.edu>
Date: Wed, 22 Nov 2023 16:57:26 -0500
Subject: [PATCH] Update store to set status on click to pending.

---
 .../environments-sc/ScEnvironmentsStore.js    | 10 +++++-----
 .../environments-sc/advanced/ActionButtons.js | 19 +++++++------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/addons/addon-base-raas-ui/packages/base-raas-ui/src/models/environments-sc/ScEnvironmentsStore.js b/addons/addon-base-raas-ui/packages/base-raas-ui/src/models/environments-sc/ScEnvironmentsStore.js
index f8637e77f7..8362188ced 100644
--- a/addons/addon-base-raas-ui/packages/base-raas-ui/src/models/environments-sc/ScEnvironmentsStore.js
+++ b/addons/addon-base-raas-ui/packages/base-raas-ui/src/models/environments-sc/ScEnvironmentsStore.js
@@ -112,27 +112,27 @@ const ScEnvironmentsStore = BaseStore.named('ScEnvironmentsStore')
       },
 
       async terminateScEnvironment(id) {
+        const env = self.getScEnvironment(id);
+        if (!env) return;
+        env.setStatus('TERMINATING');
         if (enableEgressStore) {
           await deleteEgressStore(id);
         }
         await deleteScEnvironment(id);
-        const env = self.getScEnvironment(id);
-        if (!env) return;
-        env.setStatus('TERMINATING');
       },
 
       async startScEnvironment(id) {
-        await startScEnvironment(id);
         const env = self.getScEnvironment(id);
         if (!env) return;
         env.setStatus('STARTING');
+        await startScEnvironment(id);
       },
 
       async stopScEnvironment(id) {
-        await stopScEnvironment(id);
         const env = self.getScEnvironment(id);
         if (!env) return;
         env.setStatus('STOPPING');
+        await stopScEnvironment(id);
       },
 
       getScEnvironmentStore(envId) {
diff --git a/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/environments-sc/advanced/ActionButtons.js b/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/environments-sc/advanced/ActionButtons.js
index 9039b6b192..9d146edbce 100644
--- a/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/environments-sc/advanced/ActionButtons.js
+++ b/addons/addon-base-raas-ui/packages/base-raas-ui/src/parts/environments-sc/advanced/ActionButtons.js
@@ -13,7 +13,7 @@
  *  permissions and limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Modal } from 'semantic-ui-react';
 
 // expected props
@@ -22,27 +22,22 @@ import { Button, Modal } from 'semantic-ui-react';
 // - enabled, as { [action]: boolean }
 // - onAction(action, id)
 export default function ActionButtons({ id, pending = false, terminationLocked, can, onAction }) {
-  const [loading, setLoading] = useState(pending);
 
   function handleAction(action, value) {
-    return async () => {
-      setLoading(true);
-      await onAction(action, value);
-      setLoading(false);
-    };
+    return () => onAction(action, value);
   }
 
   return (
     <Button.Group size="mini" className="m1">
       <Button icon="eye" onClick={handleAction('view', `/workspaces/id/${id}`)} />
-      {can.start && <Button icon="play circle" color="green" loading={loading} onClick={handleAction('start', id)} />}
-      {can.stop && <Button icon="stop circle" color="orange" loading={loading} onClick={handleAction('stop', id)} />}
+      {can.start && <Button icon="play circle" color="green" loading={pending} onClick={handleAction('start', id)} />}
+      {can.stop && <Button icon="stop circle" color="orange" loading={pending} onClick={handleAction('stop', id)} />}
       {can.terminate &&
         (terminationLocked ? (
-          <Button disabled icon="trash" color="red" loading={loading} />
+        <Button disabled icon="trash" color="red" loading={pending} />
         ) : (
           <Modal
-            trigger={<Button icon="trash" color="red" loading={loading} />}
+            trigger={<Button icon="trash" color="red" loading={pending} />}
             header="Are you sure?"
             content="This action can not be reverted."
             actions={[
@@ -61,7 +56,7 @@ export default function ActionButtons({ id, pending = false, terminationLocked,
         <Button
           icon={terminationLocked ? 'unlock' : 'lock'}
           color="teal"
-          loading={loading}
+          loading={pending}
           onClick={handleAction('toggleLock', id)}
         />
       )}