Merge "fix: Fix refresh data in detail page after finishing action"

src/containers/BaseDetail/index.jsx

@@ -16,7 +16,7 @@ import React from 'react';
 import classnames from 'classnames';
 import Card from 'components/DetailCard';
 import { toJS } from 'mobx';
-import { has, isEmpty } from 'lodash';
+import { has } from 'lodash';
 import { isAdminPage } from 'utils/index';
 import styles from './index.less';
 
@@ -78,24 +78,23 @@ export default class BaseDetail extends React.Component {
     return isAdminPage(pathname);
   }
 
+  get shouldFetchDetail() {
+    return false;
+  }
+
   getUrl(path, adminStr) {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
 
-  getDetailData = () => {
-    const { detail } = this.props;
-    if (!detail || isEmpty(detail)) {
-      this.fetchData();
-    }
-  };
-
   fetchData = (params) => {
-    this.store
+    if (this.shouldFetchDetail && this.store.fetchDetail) {
-      .fetchDetail({
+      this.store
-        id: this.id,
+        .fetchDetail({
-        ...params,
+          id: this.id,
-      })
+          ...params,
-      .catch(this.catch);
+        })
+        .catch(this.catch);
+    }
   };
 
   init() {

src/containers/List/index.jsx

@@ -85,6 +85,20 @@ export default class BaseList extends React.Component {
     });
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.isInDetailPage) {
+      const { detail: oldDetail } = prevProps;
+      const { detail: newDetail } = this.props;
+      if (
+        !isEmpty(oldDetail) &&
+        !isEmpty(newDetail) &&
+        !isEqual(oldDetail, newDetail)
+      ) {
+        this.handleRefresh(true);
+      }
+    }
+  }
+
   componentWillUnmount() {
     this.unsubscribe && this.unsubscribe();
     this.disposer && this.disposer();

src/containers/TabDetail/index.jsx

@@ -170,6 +170,11 @@ export default class DetailBase extends React.Component {
     return [];
   }
 
+  // After the operation, the refreshed Tab needs to be forced to load
+  get forceLoadingTabs() {
+    return [];
+  }
+
   handleDetailInfo = () => {
     const { collapsed } = this.state;
     this.setState(
@@ -238,8 +243,8 @@ export default class DetailBase extends React.Component {
     this.fetchDataWithPolicy(true);
   };
 
-  refreshDetailByAction = () => {
+  refreshDetailByAction = (silence) => {
-    this.fetchDataWithPolicy(true);
+    this.fetchDataWithPolicy(silence);
   };
 
   catch = (e) => {
@@ -276,7 +281,8 @@ export default class DetailBase extends React.Component {
     if (success && isDelete) {
       this.goBack();
     } else {
-      this.refreshDetailByAction();
+      const silence = !this.forceLoadingTabs.includes(this.tab.key);
+      this.refreshDetailByAction(silence);
     }
   };
 

src/pages/compute/containers/BareMetalNode/Detail/BaseDetail.jsx

@@ -14,17 +14,12 @@
 
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { IronicStore } from 'stores/ironic/ironic';
 import Base from 'containers/BaseDetail';
 import SimpleTable from 'components/Tables/SimpleTable';
 
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new IronicStore();
-  }
-
   get leftCards() {
     const cards = [
       this.baseInfoCard,

src/pages/compute/containers/Flavor/Detail/BaseDetail.jsx

@@ -14,7 +14,6 @@
 
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { FlavorStore } from 'stores/nova/flavor';
 import Base from 'containers/BaseDetail';
 import {
   categoryHasIOPS,
@@ -30,10 +29,6 @@ import {
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new FlavorStore();
-  }
-
   get leftCards() {
     const { category, disk, usbType } = this.detailData;
     const isGPUType = isGpuCategory(category);

src/pages/compute/containers/Image/Detail/BaseDetail.jsx

@@ -15,7 +15,6 @@
 import React from 'react';
 import { toJS } from 'mobx';
 import { inject, observer } from 'mobx-react';
-import { ImageStore } from 'stores/glance/image';
 import { imageProperties, imageVisibility, imageOS } from 'resources/image';
 import Base from 'containers/BaseDetail';
 import { isObject, isArray } from 'lodash';
@@ -24,10 +23,6 @@ import { Link } from 'react-router-dom';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new ImageStore();
-  }
-
   get isImageDetail() {
     const { pathname } = this.props.location;
     return pathname.indexOf('image') >= 0;

src/pages/compute/containers/Image/actions/ManageMetadata.jsx

@@ -34,7 +34,7 @@ export default class ManageMetadata extends ModalAction {
   }
 
   get name() {
-    return t('Manage host');
+    return t('Manage Metadata');
   }
 
   static get modalSize() {

src/pages/compute/containers/Keypair/Detail/BaseDetail.jsx

@@ -13,16 +13,11 @@
 // limitations under the License.
 
 import { inject, observer } from 'mobx-react';
-import { KeypairStore } from 'stores/nova/keypair';
 import Base from 'containers/BaseDetail';
 
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new KeypairStore();
-  }
-
   get leftCards() {
     return [this.keypairInfoCard];
   }

src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx

@@ -14,17 +14,12 @@
 
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { MetadataStore } from 'stores/glance/metadata';
 import Base from 'containers/BaseDetail';
 import styles from './styles.less';
 
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new MetadataStore();
-  }
-
   get leftCards() {
     return [this.baseInfoCard, this.resourceCard];
   }

src/pages/configuration/containers/Metadata/actions/Edit.jsx

@@ -33,6 +33,10 @@ export default class Edit extends ModalAction {
     return t('Edit metadata');
   }
 
+  get instanceName() {
+    return this.item.display_name;
+  }
+
   static policy = 'modify_metadef_namespace';
 
   static allowed = () => Promise.resolve(true);

src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/BaseDetail.jsx

@@ -15,15 +15,10 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
-import { NeutronAgentStore } from 'stores/neutron/agent';
 
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new NeutronAgentStore();
-  }
-
   get leftCards() {
     return [this.baseCard];
   }

src/pages/heat/containers/Stack/Detail/BaseDetail.jsx

@@ -20,8 +20,6 @@ import { rollbackTip } from 'resources/stack';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  fetchData = () => Promise.resolve(true);
-
   get leftCards() {
     return [this.startCard, this.outputCard];
   }

src/pages/identity/containers/Project/Detail/index.jsx

@@ -47,6 +47,10 @@ export default class InstanceDetail extends Base {
     this.store = new ProjectStore();
   }
 
+  get forceLoadingTabs() {
+    return ['quota'];
+  }
+
   get detailInfos() {
     return [
       {

src/pages/identity/containers/Project/actions/Create.jsx

@@ -68,10 +68,6 @@ class CreateForm extends ModalAction {
     return data;
   }
 
-  get listUrl() {
-    return this.getUrl('/identity/project');
-  }
-
   get domainList() {
     const {
       rootStore: { baseDomains },

src/pages/identity/containers/Project/actions/Edit.jsx

@@ -52,10 +52,6 @@ class EditForm extends ModalAction {
     return {};
   }
 
-  get listUrl() {
-    return this.getUrl('/identity/project');
-  }
-
   checkName = (rule, value) => {
     if (!value) {
       return Promise.reject(t('Please input'));

src/pages/identity/containers/User/actions/Edit.jsx

@@ -56,10 +56,6 @@ class EditForm extends ModalAction {
     return Promise.resolve(true);
   }
 
-  get listUrl() {
-    return this.getUrl('/identity/user');
-  }
-
   get domainList() {
     return (this.userGroupStore.list.data || []).map((it) => ({
       label: it.name,

src/pages/identity/containers/UserGroup/actions/Create.jsx

@@ -92,10 +92,6 @@ class CreateForm extends ModalAction {
     return data;
   }
 
-  get listUrl() {
-    return '/identity/user-group-admin';
-  }
-
   get domainList() {
     const { domains } = this.domainStore;
     return (domains || []).map((it) => ({

src/pages/network/containers/LoadBalancers/Listener/Detail/BaseDetail.jsx

@@ -28,6 +28,10 @@ export default class BaseDetail extends Base {
     }
   }
 
+  get shouldFetchDetail() {
+    return true;
+  }
+
   init() {
     this.store = globalListenerStore;
     this.healthmonitorStore = new HealthMonitorStore();

src/pages/network/containers/Network/Detail/Detail.jsx

@@ -18,8 +18,6 @@ import Base from 'containers/BaseDetail';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  fetchData = () => {};
-
   get leftCards() {
     const cards = [this.baseInfoCard];
     return cards;

src/pages/network/containers/QoSPolicy/Detail/BaseDetail.jsx

@@ -18,8 +18,6 @@ import Base from 'containers/BaseDetail';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  fetchData = () => Promise.resolve(true);
-
   get leftCards() {
     return [...this.BandwidthCard, this.DSCPMarkingCard];
   }

src/pages/network/containers/Router/Detail/BaseDetail.jsx

@@ -14,16 +14,11 @@
 
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { RouterStore } from 'stores/neutron/router';
 import Base from 'containers/BaseDetail';
 
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new RouterStore();
-  }
-
   get leftCards() {
     const cards = [this.aZoneCard];
     return cards;

src/pages/network/containers/Router/Port/Detail/BaseDetail.jsx

@@ -14,7 +14,6 @@
 
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { PortStore } from 'stores/neutron/port';
 import Base from 'containers/BaseDetail';
 import { bindingTypes } from 'resources/port';
 import { isEmpty } from 'lodash';
@@ -22,10 +21,6 @@ import { isEmpty } from 'lodash';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new PortStore();
-  }
-
   get leftCards() {
     const cards = [this.portInfo];
     const {

src/pages/network/containers/VirtualAdapter/Detail/BaseDetail/index.jsx

@@ -21,8 +21,6 @@ import { bindingTypes } from 'resources/port';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  componentDidMount() {}
-
   get leftCards() {
     return [this.baseInfoCard];
   }

src/pages/storage/containers/Backup/Detail/BaseDetail.jsx

@@ -20,8 +20,6 @@ import { Link } from 'react-router-dom';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  fetchData = () => Promise.resolve(true);
-
   get leftCards() {
     const cards = [this.volumeCard];
     return cards;

src/pages/storage/containers/Snapshot/Detail/BaseDetail.jsx

@@ -20,8 +20,6 @@ import Base from 'containers/BaseDetail';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  fetchData = () => Promise.resolve(true);
-
   get leftCards() {
     return [this.volumeCard];
   }

src/pages/storage/containers/Volume/Detail/BaseDetail.jsx

@@ -20,8 +20,6 @@ import Base from 'containers/BaseDetail';
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  fetchData = () => Promise.resolve(true);
-
   get leftCards() {
     const cards = [this.attachmentsCard];
     if (this.detailData.volume_image_metadata) {

src/pages/storage/containers/VolumeType/VolumeType/Detail/BaseDetail.jsx

@@ -13,17 +13,12 @@
 // limitations under the License.
 
 import { inject, observer } from 'mobx-react';
-import { VolumeTypeStore } from 'stores/cinder/volume-type';
 import Base from 'containers/BaseDetail';
 import { controls } from 'resources/volume-type';
 
 @inject('rootStore')
 @observer
 export default class BaseDetail extends Base {
-  init() {
-    this.store = new VolumeTypeStore();
-  }
-
   get leftCards() {
     return [this.encryptionInfo];
   }