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

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 4 лет назад
Родитель
Сommit
221f24b3ac

+ 2 - 0
.githooks/pre-commit

@@ -5,6 +5,8 @@
 
 printf "\nRunning TSC:\n"
 
+PATH=$PATH:/usr/local/bin:/usr/local/sbin
+
 yarn tsc
 
 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 Palette from '../../styleUtils/Palette'
+import StatusIcon from '../../atoms/StatusIcon/StatusIcon'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -60,6 +61,7 @@ export type Action = {
   disabled?: boolean,
   hidden?: boolean,
   title?: string | null,
+  loading?: boolean
 }
 export type Props = {
   label: string,
@@ -175,7 +177,7 @@ class ActionDropdown extends React.Component<Props, State> {
             title={action.title}
             large={this.props.largeItems}
           >
-            {action.label}
+            {action.label}{action.loading ? <StatusIcon style={{ marginLeft: '4px', opacity: 0.3 }} status="RUNNING" /> : ''}
           </ListItem>
         ))}
       </ListItems>

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

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