From 792c5309288e09cf71aa08fffd8d538dc522a60b Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Wed, 20 Apr 2022 11:33:34 +0800
Subject: [PATCH] fix: fix token storage after switch project

1. Remove useless code in switch project
2. Fix token change for requests after switch project

Change-Id: Ib8757fc918c3068be0a6b9a0d08921f2dc8817fd
---
 .../Layout/GlobalHeader/ProjectDropdown.jsx   | 133 ++----------------
 .../Layout/GlobalHeader/ProjectTable.jsx      |  10 +-
 src/layouts/Base/Right.jsx                    |  12 +-
 src/stores/root.js                            |   5 +-
 4 files changed, 32 insertions(+), 128 deletions(-)

diff --git a/src/components/Layout/GlobalHeader/ProjectDropdown.jsx b/src/components/Layout/GlobalHeader/ProjectDropdown.jsx
index 53bef4a0..bf5dd78e 100644
--- a/src/components/Layout/GlobalHeader/ProjectDropdown.jsx
+++ b/src/components/Layout/GlobalHeader/ProjectDropdown.jsx
@@ -14,10 +14,8 @@
 
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { toJS } from 'mobx';
-import { Menu, Input, Spin, Divider, Dropdown } from 'antd';
+import { Spin, Divider } from 'antd';
 import { AppstoreOutlined, SwapOutlined } from '@ant-design/icons';
-// import HeaderDropdown from '../HeaderDropdown';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
 import styles from './index.less';
 import ProjectSelect from './ProjectTable';
@@ -25,13 +23,6 @@ import ProjectSelect from './ProjectTable';
 @inject('rootStore')
 @observer
 export default class ProjectDropdown extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      projectName: '',
-    };
-  }
-
   get user() {
     const { user } = this.props.rootStore;
     return user;
@@ -52,62 +43,6 @@ export default class ProjectDropdown extends React.Component {
     };
   }
 
-  get projects() {
-    const { projects = {} } = this.user || {};
-    const { projectName } = this.state;
-    const items = Object.keys(toJS(projects) || {})
-      .map((key) => {
-        const { name, domain_id } = projects[key];
-        return {
-          projectId: key,
-          name,
-          domain_id,
-        };
-      })
-      .filter((it) => {
-        if (!projectName) {
-          return true;
-        }
-        return (
-          it.name.toLowerCase().indexOf(projectName.toLowerCase()) >= 0 ||
-          it.projectId.toLowerCase().indexOf(projectName.toLowerCase()) >= 0
-        );
-      });
-    return items;
-  }
-
-  onClick = async ({ key }) => {
-    if (key === 'search' || key === 'title') {
-      return;
-    }
-    const { projectId } = this.project;
-    if (key === projectId) {
-      return;
-    }
-    const item = this.projects.find((it) => it.projectId === key);
-    const { domain_id: domainId } = item || {};
-    const { rootStore } = this.props;
-    await rootStore.switchProject(key, domainId);
-    // window.location.reload();
-  };
-
-  stop = (e) => {
-    if (e && e.stopPropagation) {
-      e.stopPropagation();
-    }
-  };
-
-  onClickInput = (e) => {
-    this.stop(e);
-  };
-
-  onInputChange = (e) => {
-    this.setState({
-      projectName: e.target.value,
-    });
-    this.stop(e);
-  };
-
   render() {
     if (!this.user) {
       return (
@@ -121,61 +56,19 @@ export default class ProjectDropdown extends React.Component {
         />
       );
     }
-    const { projectId, projectName, userDomainName } = this.project;
-    const items = this.projects.map((item) => (
-      <Menu.Item key={item.projectId}>
-        {item.projectId}: {item.name}
-      </Menu.Item>
-    ));
-    const menuHeaderDropdown = (
-      <Menu
-        className={styles['project-menu']}
-        selectedKeys={[projectId]}
-        onClick={this.onClick}
-      >
-        <Menu.Item key="title" className={styles.title} disabled>
-          <span
-            style={{
-              fontWeight: 'bold',
-              marginRight: 8,
-              color: 'rgba(0,0,0,0.65)',
-            }}
-          >
-            {t('Projects')}
-          </span>
-        </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item key="search" className={styles.search} disabled>
-          <Input
-            placeholder={t('Filter Project')}
-            onClick={this.onClickInput}
-            onChange={this.onInputChange}
-            allowClear
-          />
-        </Menu.Item>
-        <Menu.Divider />
-        {items}
-      </Menu>
-    );
-    // return currentUser && currentUser.name ? menuHeaderDropdown : null;
+    const { projectName, userDomainName } = this.project;
     return (
-      <Dropdown
-        overlay={menuHeaderDropdown}
-        trigger={['click']}
-        visible={false}
-      >
-        <div className={styles.project} id="project-switch">
-          <ItemActionButtons
-            actions={{ moreActions: [{ action: ProjectSelect }] }}
-          />
-          <AppstoreOutlined style={{ marginRight: 10 }} />
-          {/* style={{ display: 'inline-block', width: '115px' }} */}
-          <span>{projectName}</span>
-          <SwapOutlined style={{ color: '#A3A3A3', marginLeft: 24 }} />
-          <Divider type="vertical" />
-          <span className={styles.domain}>{userDomainName}</span>
-        </div>
-      </Dropdown>
+      <div className={styles.project} id="project-switch">
+        <ItemActionButtons
+          actions={{ moreActions: [{ action: ProjectSelect }] }}
+        />
+        <AppstoreOutlined style={{ marginRight: 10 }} />
+        {/* style={{ display: 'inline-block', width: '115px' }} */}
+        <span>{projectName}</span>
+        <SwapOutlined style={{ color: '#A3A3A3', marginLeft: 24 }} />
+        <Divider type="vertical" />
+        <span className={styles.domain}>{userDomainName}</span>
+      </div>
     );
   }
 }
diff --git a/src/components/Layout/GlobalHeader/ProjectTable.jsx b/src/components/Layout/GlobalHeader/ProjectTable.jsx
index 60744911..72f50ce8 100644
--- a/src/components/Layout/GlobalHeader/ProjectTable.jsx
+++ b/src/components/Layout/GlobalHeader/ProjectTable.jsx
@@ -155,7 +155,13 @@ export default class ProjectSelect extends ModalAction {
     const item = this.projects.find((it) => it.id === key);
     const { domain_id: domainId } = item || {};
     const { rootStore } = this.props;
-    this.routing.push('/base/overview');
-    await rootStore.switchProject(key, domainId);
+    try {
+      await rootStore.switchProject(key, domainId);
+      this.routing.push('/base/overview');
+      return Promise.resolve();
+    } catch (e) {
+      console.log(e);
+      return Promise.reject(e);
+    }
   };
 }
diff --git a/src/layouts/Base/Right.jsx b/src/layouts/Base/Right.jsx
index 2a6ec1b5..ddcdcffe 100644
--- a/src/layouts/Base/Right.jsx
+++ b/src/layouts/Base/Right.jsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, { Component, Suspense } from 'react';
-import { Layout, Breadcrumb } from 'antd';
+import { Layout, Breadcrumb, Skeleton } from 'antd';
 import { Link } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -168,9 +168,13 @@ class Right extends Component {
       sliderCollapsed: collapsed,
       isAdminPage,
     };
-    const children = user
-      ? this.renderChildren(mainBreadcrumbClass, mainTabClass, extraProps)
-      : null;
+    const children = user ? (
+      this.renderChildren(mainBreadcrumbClass, mainTabClass, extraProps)
+    ) : (
+      <div style={{ margin: '44px' }}>
+        <Skeleton />
+      </div>
+    );
     return (
       <Layout
         className={classnames(
diff --git a/src/stores/root.js b/src/stores/root.js
index 57edf39c..04396eec 100644
--- a/src/stores/root.js
+++ b/src/stores/root.js
@@ -227,9 +227,10 @@ export class RootStore {
   @action
   async switchProject(projectId, domainId) {
     this.user = null;
-    await this.client.switchProject(projectId, domainId);
-    // this.updateUser(result);
+    const result = await this.client.switchProject(projectId, domainId);
     this.clearData();
+    const { keystone_token } = result;
+    setLocalStorageItem('keystone_token', keystone_token);
     return this.getUserProfileAndPolicy();
   }