Merge "feat: Add administrator link in header in user center page"

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,32 +12,25 @@
 // 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 = (
+  get isUserCenterPage() {
+    const { isUserCenterPage = false } = this.props;
+    return isUserCenterPage;
+  }
+
+  renderConsole() {
+    if (this.isAdminPage || this.isUserCenterPage) {
+      return (
         <Button
           type="link"
           href="/base/overview"
@@ -46,8 +39,16 @@ const GlobalHeaderRight = (props) => {
           {t('Console')}
         </Button>
       );
-  } else if (hasAdminPageRole) {
-    linkRender = (
+    }
+    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) => {
     );
   }
 
+  renderExtra() {
+    return null;
+  }
+
+  render() {
     return (
       <div className={styles.right}>
-      <Row
-        justify="space-between"
-        align="middle"
-        gutter={10}
-        // wrap={false}
-      >
-        <Col>{linkRender}</Col>
+        <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));