feat: Add profile ssh_key pages (#287)

src/components/Base/Tooltip/index.jsx

@@ -43,7 +43,10 @@ export default class Tooltip extends React.Component {
     this.setState({ visible: false }, this.props.onVisibleChange(false, this.target));
   };
 
-  handleTogglePopper = () => {
+  handleTogglePopper = e => {
+    if (e.stopPropagation) {
+      e.stopPropagation();
+    }
     this.state.visible ? this.hidePopper() : this.showPopper();
   };
 

src/components/Header/index.jsx

@@ -40,6 +40,9 @@ class Header extends Component {
         <li>
           <NavLink to="/dashboard">{t('Dashboard')}</NavLink>
         </li>
+        <li>
+          <NavLink to="/profile">{t('Profile')}</NavLink>
+        </li>
         <li>
           <a href="/logout">{t('Log out')}</a>
         </li>

src/components/Layout/Card/index.jsx

@@ -6,8 +6,10 @@ import Panel from '../Panel';
 
 import styles from './index.scss';
 
-const Card = ({ className, children }) => (
-  <Panel className={classnames(styles.card, className)}>{children}</Panel>
+const Card = ({ className, children, ...others }) => (
+  <Panel className={classnames(styles.card, className)} {...others}>
+    {children}
+  </Panel>
 );
 
 Card.propTypes = {

src/components/Layout/index.jsx

@@ -22,7 +22,8 @@ export default class Layout extends React.Component {
     isLoading: PropTypes.bool,
     loadClass: PropTypes.string,
     sockMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    listenToJob: PropTypes.func
+    listenToJob: PropTypes.func,
+    isProfile: PropTypes.bool
   };
 
   static defaultProps = {
@@ -31,7 +32,8 @@ export default class Layout extends React.Component {
     noNotification: false,
     backBtn: null,
     sockMessage: '',
-    listenToJob: noop
+    listenToJob: noop,
+    isProfile: false
   };
 
   constructor(props) {
@@ -48,11 +50,13 @@ export default class Layout extends React.Component {
     }
   }
 
-  renderTabs() {
+  renderTabs(isProfile) {
     const loginRole = getSessInfo('role', this.props.sessInfo);
     const normalLinks = [{ '': 'overview' }, 'apps', 'clusters', 'runtimes'];
-
-    if (loginRole === 'normal') {
+    if (isProfile) {
+      this.linkPrefix = '/profile';
+      this.availableLinks = [{ '': 'profile' }, { sshkeys: 'SSH Keys' }];
+    } else if (loginRole === 'normal') {
       this.availableLinks = [...normalLinks];
       this.availableLinks.splice(1, 1);
     } else if (loginRole === 'developer') {
@@ -90,12 +94,13 @@ export default class Layout extends React.Component {
       children,
       isLoading,
       loadClass,
-      backBtn
+      backBtn,
+      isProfile
     } = this.props;
 
     return (
       <div className={classnames(styles.layout, className, { [styles.noTabs]: noTabs })}>
-        {noTabs ? null : this.renderTabs()}
+        {noTabs ? null : this.renderTabs(isProfile)}
         {noNotification ? null : <Notification />}
         {backBtn}
         {this.renderSocketMessage()}

src/components/TabsNav/index.jsx

@@ -25,8 +25,12 @@ const normalizeLink = (link, prefix = '') => {
 
 const isLinkActive = (curLink, match, location) => {
   const { pathname } = location;
+
   if (curLink === '/dashboard') {
     return curLink === pathname;
+  }
+  if (curLink === '/profile') {
+    return curLink === pathname;
   } else {
     let try_match = pathname.indexOf(curLink) === 0;
     if (!try_match) {
@@ -38,22 +42,28 @@ const isLinkActive = (curLink, match, location) => {
   }
 };
 
-const LinkItem = ({ link, label }) => (
-  <I18n>
-    {t => (
-      <li>
-        <NavLink
-          to={link}
-          activeClassName={styles.active}
-          exact
-          isActive={isLinkActive.bind(null, link)}
-        >
-          {t(capitalize(label))}
-        </NavLink>
-      </li>
-    )}
-  </I18n>
-);
+const LinkItem = ({ link, label }) => {
+  if (link.indexOf('/profile/sshkeys') === -1) {
+    label = capitalize(label);
+  }
+
+  return (
+    <I18n>
+      {t => (
+        <li>
+          <NavLink
+            to={link}
+            activeClassName={styles.active}
+            exact
+            isActive={isLinkActive.bind(null, link)}
+          >
+            {t(label)}
+          </NavLink>
+        </li>
+      )}
+    </I18n>
+  );
+};
 
 LinkItem.propTypes = {
   link: PropTypes.string.isRequired,