feat(ui): change most of link to true link (#416)

close #413
tchiotludo · Sep 30, 2020 · 1bee944 · 1bee944
1 parent a47e4fc
commit 1bee944
Show file tree

Hide file tree

Showing 30 changed files with 137 additions and 187 deletions.
diff --git a/client/src/components/Table/Table.jsx b/client/src/components/Table/Table.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import * as constants from '../../utils/constants';
 import './styles.scss';
 import Spinner from '../Spinner';
+import {Link} from "react-router-dom";
 
 class Table extends Component {
   state = {
@@ -116,6 +117,20 @@ class Table extends Component {
     );
   }
 
+  onDoubleClick(onDetails, row) {
+    const { history } = this.props;
+
+    if (onDetails) {
+      let url = onDetails(row.id, row);
+      if (url) {
+        history.push({
+          pathname: url,
+          internal: row.internal
+        });
+      }
+    }
+  }
+
   renderRow(row, index) {
     const { actions, columns, extraRow, onExpand, noRowBackgroundChange, onDetails, handleExtraExpand, handleExtraCollapse, reduce } = this.props;
     const { extraExpanded } = this.state;
@@ -153,7 +168,7 @@ class Table extends Component {
                     actions.find(action => action === constants.TABLE_DETAILS) &&
                     !column.expand
                   ) {
-                    onDetails && onDetails(row.id, row);
+                    this.onDoubleClick(onDetails, row);
                   }
 
                   column.expand && this.handleExpand(row);
@@ -175,7 +190,7 @@ class Table extends Component {
                   actions.find(action => action === constants.TABLE_DETAILS) &&
                   !column.expand
                 ) {
-                  onDetails && onDetails(row.id, row);
+                  this.onDoubleClick(onDetails, row);
                 }
 
                 column.expand && this.handleExpand(row);
@@ -291,26 +306,22 @@ class Table extends Component {
         )}
         {actions.find(el => el === constants.TABLE_DETAILS) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Details"
+            <Link to={onDetails && onDetails(row.id, row)}
               id="details"
-              onClick={() => {
-                onDetails && onDetails(row.id, row);
-              }}
+              title="Details"
             >
               <i className="fa fa-search" />
-            </span>
+            </Link>
           </td>
         )}
         {actions.find(el => el === constants.TABLE_CONFIG) && (
           <td className="khq-row-action khq-row-action-main action-hover">
-            <span title="Config"
+            <Link to={onConfig && onConfig(row.id, row)}
               id="config"
-              onClick={() => {
-                onConfig && onConfig(row.id, row);
-              }}
+              title="Config"
             >
               <i className="fa fa-gear" />
-            </span>
+            </Link>
           </td>
         )}
         {actions.find(el => el === constants.TABLE_DELETE) && (
@@ -466,7 +477,8 @@ Table.propTypes = {
   noContent: PropTypes.any,
   handleExtraExpand: PropTypes.func,
   handleExtraCollapse: PropTypes.func,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  history: PropTypes.object
 };
 
 export default Table;
diff --git a/client/src/containers/Acl/AclDetail/AclDetails.jsx b/client/src/containers/Acl/AclDetail/AclDetails.jsx
@@ -3,6 +3,7 @@ import Header from '../../Header';
 import AclGroups from './AclGroups/AclGroups';
 import AclTopics from './AclTopics/AclTopics';
 import {getSelectedTab} from "../../../utils/functions";
+import { Link } from 'react-router-dom';
 
 class AclDetails extends Component {
   state = {
@@ -33,12 +34,6 @@ class AclDetails extends Component {
     }
   }
 
-  selectTab = tab => {
-    const { principalEncoded, clusterId } = this.state;
-    this.setState({ selectedTab: tab });
-    this.props.history.push(`/ui/${clusterId}/acls/${principalEncoded}/${tab}`);
-  };
-
   tabClassName = tab => {
     const { selectedTab } = this.state;
     return selectedTab === tab ? 'nav-link active' : 'nav-link';
@@ -65,30 +60,27 @@ class AclDetails extends Component {
   }
 
   render() {
+    const { principalEncoded, clusterId } = this.state;
     const { history } = this.props;
-    const principal = atob(this.state.principalEncoded);
+    const principal = atob(principalEncoded);
     return (
       <div>
         <Header title={`Acl: ${principal}`} history={history} />
         <div className="tabs-container">
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
-              <div
+              <Link to={`/ui/${clusterId}/acls/${principalEncoded}/topics`}
                 className={this.tabClassName('topics')}
-                onClick={() => this.selectTab('topics')}
-                role="tab"
               >
                 Topics
-              </div>
+              </Link>
             </li>
             <li className="nav-item">
-              <div
+              <Link to={`/ui/${clusterId}/acls/${principalEncoded}/groups`}
                 className={this.tabClassName('groups')}
-                onClick={() => this.selectTab('groups')}
-                role="tab"
               >
                 Groups
-              </div>
+              </Link>
             </li>
           </ul>
 

diff --git a/client/src/containers/Acl/AclDetail/AclGroups/AclGroups.jsx b/client/src/containers/Acl/AclDetail/AclGroups/AclGroups.jsx
@@ -54,6 +54,7 @@ class AclTopics extends Component {
     return (
       <Table
         loading={loading}
+        history={this.props.history}
         columns={[
           {
             id: 'group',

diff --git a/client/src/containers/Acl/AclDetail/AclTopics/AclTopics.jsx b/client/src/containers/Acl/AclDetail/AclTopics/AclTopics.jsx
@@ -54,6 +54,7 @@ class AclTopics extends Component {
     return (
       <Table
         loading={loading}
+        history={this.props.history}
         columns={[
           {
             id: 'topic',

diff --git a/client/src/containers/Acl/AclList/Acls.jsx b/client/src/containers/Acl/AclList/Acls.jsx
@@ -50,6 +50,7 @@ class Acls extends Component {
   render() {
     const { data, searchData, loading } = this.state;
     const { clusterId } = this.props.match.params;
+
     return (
       <div>
         <Header title="Acls" history={this.props.history} />
@@ -69,6 +70,7 @@ class Acls extends Component {
         </nav>
         <Table
           loading={loading}
+          history={this.props.history}
           columns={[
             {
               id: 'user',
@@ -93,12 +95,7 @@ class Acls extends Component {
               </td>
             </tr>
           }
-          onDetails={acl => {
-            this.props.history.push({
-              pathname: `/ui/${clusterId}/acls/${acl.principalEncoded}`,
-              principal: acl.user
-            });
-          }}
+          onDetails={acl => `/ui/${clusterId}/acls/${acl.principalEncoded}`}
         />
       </div>
     );

diff --git a/client/src/containers/Connect/ConnectDetail/Connect.jsx b/client/src/containers/Connect/ConnectDetail/Connect.jsx
@@ -4,6 +4,7 @@ import Header from '../../Header/Header';
 import ConnectTasks from './ConnectTasks/ConnectTasks';
 import ConnectConfigs from './ConnectConfigs/ConnectConfigs';
 import {getSelectedTab} from "../../../utils/functions";
+import {Link} from "react-router-dom";
 
 class Connect extends Component {
   state = {
@@ -31,12 +32,6 @@ class Connect extends Component {
     }
   }
 
-  selectTab = tab => {
-    const { clusterId, connectId, definitionId } = this.props.match.params;
-    this.setState({ selectedTab: tab });
-    this.props.history.push(`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/${tab}`);
-  };
-
   tabClassName = tab => {
     const { selectedTab } = this.state;
     return selectedTab === tab ? 'nav-link active' : 'nav-link';
@@ -81,30 +76,26 @@ class Connect extends Component {
   }
 
   render() {
-    const { definitionId } = this.state;
+    const { clusterId, connectId, definitionId } = this.state;
 
     return (
       <div>
         <Header title={`Connect: ${definitionId}`} history={this.props.history} />
         <div className="tabs-container">
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
-              <div
+              <Link to={`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/tasks`}
                 className={this.tabClassName('tasks')}
-                onClick={() => this.selectTab('tasks')}
-                role="tab"
               >
                 Tasks
-              </div>
+              </Link>
             </li>
             <li className="nav-item">
-              <div
+              <Link to={`/ui/${clusterId}/connect/${connectId}/definition/${definitionId}/configs`}
                 className={this.tabClassName('configs')}
-                onClick={() => this.selectTab('configs')}
-                role="tab"
               >
                 Configs
-              </div>
+              </Link>
             </li>
           </ul>
 

diff --git a/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx b/client/src/containers/Connect/ConnectDetail/ConnectTasks/ConnectTasks.jsx
@@ -182,6 +182,7 @@ class ConnectTasks extends Component {
         <div className="table-responsive">
           <Table
             loading={loading}
+            history={this.props.history}
             columns={[
               {
                 id: 'id',

diff --git a/client/src/containers/Connect/ConnectList/ConnectList.jsx b/client/src/containers/Connect/ConnectList/ConnectList.jsx
@@ -163,6 +163,7 @@ class ConnectList extends Component {
         <Header title={`Connect: ${connectId}`} history={history} />
         <Table
           loading={loading}
+          history={history}
           columns={[
             {
               id: 'id',
@@ -240,14 +241,7 @@ class ConnectList extends Component {
             this.setState({ tableData: data });
           }}
           actions={this.getTableActions()}
-          onDetails={name => {
-            history.push({
-              pathname: `/ui/${clusterId}/connect/${connectId}/definition/${name}`,
-              clusterId,
-              connectId,
-              definitionId: name
-            });
-          }}
+          onDetails={name => `/ui/${clusterId}/connect/${connectId}/definition/${name}` }
           onDelete={row => {
             this.handleOnDelete(row.id);
           }}

diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx
@@ -37,12 +37,6 @@ class ConsumerGroup extends Component {
     }
   }
 
-  selectTab = tab => {
-    const { consumerGroupId, clusterId } = this.state;
-    this.setState({ selectedTab: tab });
-    this.props.history.push(`/ui/${clusterId}/group/${consumerGroupId}/${tab}`);
-  };
-
   tabClassName = tab => {
     const { selectedTab } = this.state;
     return selectedTab === tab ? 'nav-link active' : 'nav-link';
@@ -98,32 +92,26 @@ class ConsumerGroup extends Component {
         <div className="tabs-container">
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
-              <div
+              <Link to={`/ui/${clusterId}/group/${consumerGroupId}/topics`}
                 className={this.tabClassName('topics')}
-                onClick={() => this.selectTab('topics')}
-                role="tab"
               >
                 Topics
-              </div>
+              </Link>
             </li>
             <li className="nav-item">
-              <div
+              <Link to={`/ui/${clusterId}/group/${consumerGroupId}/members`}
                 className={this.tabClassName('members')}
-                onClick={() => this.selectTab('members')}
-                role="tab"
               >
                 Members
-              </div>
+              </Link>
             </li>
             {roles.acls && roles.acls['acls/read'] && (
               <li className="nav-item">
-                <div
+                <Link to={`/ui/${clusterId}/group/${consumerGroupId}/acls`}
                   className={this.tabClassName('acls')}
-                  onClick={() => this.selectTab('acls')}
-                  role="tab"
                 >
                   ACLS
-                </div>
+                </Link>
               </li>
             )}
           </ul>

diff --git a/.../src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupAcls/ConsumerGroupAcls.jsx b/.../src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupAcls/ConsumerGroupAcls.jsx
@@ -44,6 +44,7 @@ class TopicAcls extends Component {
       <div>
         <Table
           loading={loading}
+          history={this.props.history}
           columns={[
             {
               id: 'group',

diff --git a/...ontainers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupMembers/ConsumerGroupMembers.jsx b/...ontainers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupMembers/ConsumerGroupMembers.jsx
@@ -92,6 +92,7 @@ class ConsumerGroupMembers extends Component {
       <div>
         <Table
           loading={loading}
+          history={this.props.history}
           columns={[
             {
               id: 'clientId',

diff --git a/.../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx b/.../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupTopics/ConsumerGroupTopics.jsx
@@ -52,6 +52,7 @@ class ConsumerGroupTopics extends Component {
       <div>
         <Table
           loading={loading}
+          history={this.props.history}
           columns={[
             {
               id: 'name',

diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
@@ -191,6 +191,7 @@ class ConsumerGroupList extends Component {
 
         <Table
           loading={loading}
+          history={this.props.history}
           columns={[
             {
               id: 'id',
@@ -237,9 +238,7 @@ class ConsumerGroupList extends Component {
           onDelete={group => {
             this.handleOnDelete(group);
           }}
-          onDetails={id => {
-            history.push(`/ui/${selectedCluster}/group/${id}`);
-          }}
+          onDetails={id => `/ui/${selectedCluster}/group/${id}`}
           actions={
             roles.group && roles.group['group/delete']
               ? [constants.TABLE_DELETE, constants.TABLE_DETAILS]