feat: Add administrator link in header in user center page

1. Add administrator link in header in user center page
2. Refactor overview component in user center
3. Refactor HeaderRightContent component
4. Add isUserCenterPage prop in containers

Change-Id: I03357e70d4fbe860740c3663f35aef63457835bb

src/components/Layout/GlobalHeader/AvatarDropdown.jsx

@@ -152,13 +152,8 @@ class AvatarDropdown extends React.Component {
             shape="circle"
             icon={<UserOutlined />}
             className={styles.avatar}
-            onClick={() => {
-              const { rootStore } = this.props;
-              rootStore.routing.push('/user/center');
-            }}
+            href="/user/center"
           />
-          {/* <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" /> */}
-          {/* <span className={styles.name}>{currentUser.name}</span> */}
         </div>
       </HeaderDropdown>
     );

src/components/Layout/GlobalHeader/RightContent.jsx

@@ -12,42 +12,43 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { Button, Col, Row } from 'antd';
-import { isUserCenterPage } from 'utils';
 import Avatar from './AvatarDropdown';
 import styles from './index.less';
 
-// eslint-disable-next-line no-unused-vars
-const gotoConsole = (type, props) => {
-  const { rootStore } = props;
-  rootStore.clearData();
-  if (type === 0) {
-    rootStore.routing.push('/base/overview');
-  } else {
-    rootStore.routing.push('/base/overview-admin');
+export class GlobalHeaderRight extends PureComponent {
+  get isAdminPage() {
+    const { isAdminPage = false } = this.props;
+    return isAdminPage;
   }
-};
 
-const GlobalHeaderRight = (props) => {
-  const {
-    isAdminPage = false,
-    rootStore: { hasAdminPageRole = false } = {},
-    location: { pathname },
-  } = props;
-  let linkRender = null;
-  if (isAdminPage || isUserCenterPage(pathname)) {
-    linkRender = (
-      <Button
-        type="link"
-        href="/base/overview"
-        className={styles['single-link']}
-      >
-        {t('Console')}
-      </Button>
-    );
-  } else if (hasAdminPageRole) {
-    linkRender = (
+  get isUserCenterPage() {
+    const { isUserCenterPage = false } = this.props;
+    return isUserCenterPage;
+  }
+
+  renderConsole() {
+    if (this.isAdminPage || this.isUserCenterPage) {
+      return (
+        <Button
+          type="link"
+          href="/base/overview"
+          className={styles['single-link']}
+        >
+          {t('Console')}
+        </Button>
+      );
+    }
+    return null;
+  }
+
+  renderAdministrator() {
+    const { rootStore: { hasAdminPageRole = false } = {} } = this.props;
+    if (!hasAdminPageRole || this.isAdminPage) {
+      return null;
+    }
+    return (
       <Button
         type="link"
         href="/base/overview-admin"
@@ -58,21 +59,26 @@ const GlobalHeaderRight = (props) => {
     );
   }
 
-  return (
-    <div className={styles.right}>
-      <Row
-        justify="space-between"
-        align="middle"
-        gutter={10}
-        // wrap={false}
-      >
-        <Col>{linkRender}</Col>
-        <Col>
-          <Avatar menu />
-        </Col>
-      </Row>
-    </div>
-  );
-};
+  renderExtra() {
+    return null;
+  }
+
+  render() {
+    return (
+      <div className={styles.right}>
+        <Row justify="space-between" align="middle" gutter={10}>
+          <Col>
+            {this.renderConsole()}
+            {this.renderAdministrator()}
+          </Col>
+          {this.renderExtra()}
+          <Col>
+            <Avatar menu />
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
 
 export default GlobalHeaderRight;

src/layouts/Base/index.jsx

@@ -44,6 +44,11 @@ export class BaseLayout extends Component {
     return isAdminPage(pathname);
   }
 
+  get isUserCenterPage() {
+    const { pathname } = this.props.location;
+    return isUserCenterPage(pathname);
+  }
+
   get rootStore() {
     return this.props.rootStore;
   }
@@ -65,11 +70,8 @@ export class BaseLayout extends Component {
   }
 
   get originMenu() {
-    const {
-      location: { pathname },
-    } = this.props;
     let ret = [];
-    if (isUserCenterPage(pathname)) {
+    if (this.isUserCenterPage) {
       ret = renderUserMenu(i18n.t);
     } else if (this.isAdminPage) {
       ret = renderAdminMenu(i18n.t);
@@ -223,7 +225,11 @@ export class BaseLayout extends Component {
   }
 
   renderHeader = () => (
-    <GlobalHeader {...this.props} isAdminPage={this.isAdminPage} />
+    <GlobalHeader
+      {...this.props}
+      isAdminPage={this.isAdminPage}
+      isUserCenterPage={this.isUserCenterPage}
+    />
   );
 
   render() {

src/pages/user-center/containers/UserCenter/index.jsx

@@ -19,7 +19,7 @@ import globalUserStore from 'stores/keystone/user';
 import ProfileIcon from 'asset/image/profile.svg';
 import styles from './styles.less';
 
-class Index extends Component {
+export class Overview extends Component {
   componentDidMount() {
     this.fetchData();
   }
@@ -34,7 +34,7 @@ class Index extends Component {
   renderInfoItem(item) {
     return (
       <Row className={styles.user_info_detail_item}>
-        <Col span={6}>{t(item.label)}</Col>
+        <Col span={6}>{item.label}</Col>
         <Col span={18}>{item.value}</Col>
       </Row>
     );
@@ -75,13 +75,18 @@ class Index extends Component {
     );
   }
 
+  renderExtra() {
+    return null;
+  }
+
   render() {
     return (
       <Layout.Content className={styles.content}>
         <Row className={styles.user_info_card}>{this.renderUserInfo()}</Row>
+        {this.renderExtra()}
       </Layout.Content>
     );
   }
 }
 
-export default inject('rootStore')(observer(Index));
+export default inject('rootStore')(observer(Overview));