Przeglądaj źródła

Show updating feedback when Editing Replica

The Update button will now turn into an 'Updating ...' loading button
while the update replica request is being processed.
Sergiu Miclea 5 lat temu
rodzic
commit
dd4d8a5548

+ 9 - 5
src/components/organisms/EditReplica/EditReplica.tsx

@@ -109,6 +109,7 @@ type State = {
   destinationData: any,
   sourceData: any,
   updateDisabled: boolean,
+  updating: boolean,
   selectedNetworks: NetworkMap[],
   defaultStorage: { value: string | null, busType?: string | null } | undefined,
   storageMap: StorageMap[],
@@ -125,6 +126,7 @@ class EditReplica extends React.Component<Props, State> {
     destinationData: {},
     sourceData: {},
     updateDisabled: false,
+    updating: false,
     selectedNetworks: [],
     defaultStorage: undefined,
     storageMap: [],
@@ -505,7 +507,7 @@ class EditReplica extends React.Component<Props, State> {
   }
 
   async handleUpdateClick() {
-    this.setState({ updateDisabled: true })
+    this.setState({ updating: true })
 
     const updateData: UpdateData = {
       source: this.state.sourceData,
@@ -528,7 +530,7 @@ class EditReplica extends React.Component<Props, State> {
         this.props.onRequestClose()
         this.props.onUpdateComplete(`/replicas/${this.props.replica.id}/executions`)
       } catch (err) {
-        this.setState({ updateDisabled: false })
+        this.setState({ updating: false })
       }
     } else {
       try {
@@ -550,7 +552,7 @@ class EditReplica extends React.Component<Props, State> {
         this.props.onRequestClose()
         this.props.onUpdateComplete(`/migrations/${migration.id}/tasks`)
       } catch (err) {
-        this.setState({ updateDisabled: false })
+        this.setState({ updating: false })
       }
     }
   }
@@ -755,10 +757,12 @@ class EditReplica extends React.Component<Props, State> {
             large
             onClick={this.props.onRequestClose}
             secondary
-          >Cancel
+          >Close
           </Button>
           {this.isLoading() ? (
-            <LoadingButton>Loading ...</LoadingButton>
+            <LoadingButton large>Loading ...</LoadingButton>
+          ) : this.state.updating ? (
+            <LoadingButton large>Updating ...</LoadingButton>
           ) : (
             <Button
               large