fix: Fix refresh data in detail page after finishing action

1. Fix edit metadata success hint
2. Fix manage image metadata success hint
3. Fix create/edit project modal top padding
4. Fix edit user modal top padding
5. Fix create user group modal top padding
6. Fix refresh list page in detail after finishing action in detail page
7. Remove useless fetch in base detail page

Change-Id: I80fe346cc0be4bdb8607088578fa2acb446cf084

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];
   }