Explorar el Código

Show loading icon in replica details actions menu

The loading animation is shown next to the Edit link while the replica
info is being loaded and the Edit link is disabled.
Sergiu Miclea hace 4 años
padre
commit
221f24b3ac

+ 2 - 0
.githooks/pre-commit

@@ -5,6 +5,8 @@
 
 
 printf "\nRunning TSC:\n"
 printf "\nRunning TSC:\n"
 
 
+PATH=$PATH:/usr/local/bin:/usr/local/sbin
+
 yarn tsc
 yarn tsc
 
 
 if [[ "$?" == 0 ]]; then
 if [[ "$?" == 0 ]]; then

+ 3 - 1
src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -23,6 +23,7 @@ import { List, ListItems, Tip } from '../DropdownLink/DropdownLink'
 
 
 import StyleProps from '../../styleUtils/StyleProps'
 import StyleProps from '../../styleUtils/StyleProps'
 import Palette from '../../styleUtils/Palette'
 import Palette from '../../styleUtils/Palette'
+import StatusIcon from '../../atoms/StatusIcon/StatusIcon'
 
 
 const Wrapper = styled.div<any>`
 const Wrapper = styled.div<any>`
   position: relative;
   position: relative;
@@ -60,6 +61,7 @@ export type Action = {
   disabled?: boolean,
   disabled?: boolean,
   hidden?: boolean,
   hidden?: boolean,
   title?: string | null,
   title?: string | null,
+  loading?: boolean
 }
 }
 export type Props = {
 export type Props = {
   label: string,
   label: string,
@@ -175,7 +177,7 @@ class ActionDropdown extends React.Component<Props, State> {
             title={action.title}
             title={action.title}
             large={this.props.largeItems}
             large={this.props.largeItems}
           >
           >
-            {action.label}
+            {action.label}{action.loading ? <StatusIcon style={{ marginLeft: '4px', opacity: 0.3 }} status="RUNNING" /> : ''}
           </ListItem>
           </ListItem>
         ))}
         ))}
       </ListItems>
       </ListItems>

+ 4 - 1
src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.tsx

@@ -69,6 +69,7 @@ type State = {
   confirmationItem?: ReplicaItemDetails | null | Execution | null,
   confirmationItem?: ReplicaItemDetails | null | Execution | null,
   showCancelConfirmation: boolean,
   showCancelConfirmation: boolean,
   isEditable: boolean,
   isEditable: boolean,
+  isEditableLoading: boolean,
   pausePolling: boolean,
   pausePolling: boolean,
   initialLoading: boolean,
   initialLoading: boolean,
 }
 }
@@ -85,6 +86,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     showCancelConfirmation: false,
     showCancelConfirmation: false,
     showForceCancelConfirmation: false,
     showForceCancelConfirmation: false,
     isEditable: false,
     isEditable: false,
+    isEditableLoading: true,
     pausePolling: false,
     pausePolling: false,
     initialLoading: true,
     initialLoading: true,
   }
   }
@@ -206,7 +208,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
       && !!targetProviderTypes.types.find(t => t === providerTypes.TARGET_UPDATE)
       && !!targetProviderTypes.types.find(t => t === providerTypes.TARGET_UPDATE)
       : false
       : false
 
 
-    this.setState({ isEditable })
+    this.setState({ isEditable, isEditableLoading: false })
   }
   }
 
 
   async loadReplicaWithInstances(options: {
   async loadReplicaWithInstances(options: {
@@ -570,6 +572,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
         title: editTitle,
         title: editTitle,
         action: () => { this.handleReplicaEditClick() },
         action: () => { this.handleReplicaEditClick() },
         disabled: !this.state.isEditable,
         disabled: !this.state.isEditable,
+        loading: this.state.isEditableLoading,
       },
       },
       {
       {
         label: 'Delete Disks',
         label: 'Delete Disks',