Просмотр исходного кода

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 4 лет назад
Родитель
Сommit
dd4d8a5548
1 измененных файлов с 9 добавлено и 5 удалено
  1. 9 5
      src/components/organisms/EditReplica/EditReplica.tsx

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

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