Add loading state to Export VM Inventory button

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

Author: mihaelabalutoiu

src/components/modules/EndpointModule/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -23,6 +23,7 @@ import { Region } from "@src/@types/Region";
 import EndpointLogos from "@src/components/modules/EndpointModule/EndpointLogos";
 import { ThemePalette, ThemeProps } from "@src/components/Theme";
 import Button from "@src/components/ui/Button";
+import LoadingButton from "@src/components/ui/LoadingButton";
 import CopyMultilineValue from "@src/components/ui/CopyMultilineValue";
 import CopyValue from "@src/components/ui/CopyValue";
 import PasswordValue from "@src/components/ui/PasswordValue";
@@ -100,6 +101,7 @@ type Props = {
   transfers: TransferItem[];
   connectionInfoSchema: FieldType[];
   supportsInventoryExport?: boolean;
+  exportingInventoryCsv?: boolean;
   onDeleteClick: () => void;
   onValidateClick: () => void;
   onExportInventoryCsvClick?: () => void;
@@ -199,11 +201,14 @@ class EndpointDetailsContent extends React.Component<Props> {
             Validate Endpoint
           </Button>
         </MainButtons>
-        {this.props.supportsInventoryExport && (
-          <Button onClick={this.props.onExportInventoryCsvClick}>
-            Export VM Inventory
-          </Button>
-        )}
+        {this.props.supportsInventoryExport &&
+          (this.props.exportingInventoryCsv ? (
+            <LoadingButton>Export VM Inventory</LoadingButton>
+          ) : (
+            <Button onClick={this.props.onExportInventoryCsvClick}>
+              Export VM Inventory
+            </Button>
+          ))}
         <DeleteButton>
           <Button hollow alert onClick={this.props.onDeleteClick}>
             Delete Endpoint

src/components/smart/EndpointDetailsPage/EndpointDetailsPage.tsx

@@ -302,6 +302,8 @@ class EndpointDetailsPage extends React.Component<Props, State> {
               action: () => {
                 this.handleExportInventoryCsvClick();
               },
+              loading: endpointStore.exportingInventoryCsv,
+              disabled: endpointStore.exportingInventoryCsv,
             },
           ]
         : []),
@@ -347,6 +349,7 @@ class EndpointDetailsPage extends React.Component<Props, State> {
               connectionInfo={endpointStore.connectionInfo}
               connectionInfoSchema={providerStore.connectionInfoSchema}
               supportsInventoryExport={this.supportsInventoryExport}
+              exportingInventoryCsv={endpointStore.exportingInventoryCsv}
               onDeleteClick={() => {
                 this.handleDeleteEndpointClick();
               }}

src/stores/EndpointStore.ts

@@ -66,6 +66,8 @@ class EndpointStore {
 
   @observable multiValidation: MultiValidationItem[] = [];
 
+  @observable exportingInventoryCsv = false;
+
   @action async getEndpoints(options?: {
     showLoading?: boolean;
     skipLog?: boolean;
@@ -199,14 +201,21 @@ class EndpointStore {
   }
 
   @action async exportInventoryCsv(endpoint: Endpoint): Promise<void> {
-    const csvContent = await EndpointSource.exportInventoryCsv(endpoint.id);
-    const now = new Date();
-    const pad = (n: number) => String(n).padStart(2, "0");
-    const d =
-      `${now.getFullYear()}-${pad(now.getMonth() + 1)}` +
-      `-${pad(now.getDate())}_${pad(now.getHours())}` +
-      `:${pad(now.getMinutes())}`;
-    DomUtils.download(csvContent, `vm_inventory_${endpoint.name}_${d}.csv`);
+    this.exportingInventoryCsv = true;
+    try {
+      const csvContent = await EndpointSource.exportInventoryCsv(endpoint.id);
+      const now = new Date();
+      const pad = (n: number) => String(n).padStart(2, "0");
+      const d =
+        `${now.getFullYear()}-${pad(now.getMonth() + 1)}` +
+        `-${pad(now.getDate())}_${pad(now.getHours())}` +
+        `:${pad(now.getMinutes())}`;
+      DomUtils.download(csvContent, `vm_inventory_${endpoint.name}_${d}.csv`);
+    } finally {
+      runInAction(() => {
+        this.exportingInventoryCsv = false;
+      });
+    }
   }
 
   @action async exportToJson(endpoint: Endpoint): Promise<void> {