fix(ui): handle consumer group with slash (#1143)

close #1101
tchiotludo · Jul 7, 2022 · 4ca8698 · 4ca8698
1 parent 9a4d4a6
commit 4ca8698
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroup.jsx
@@ -88,7 +88,7 @@ class ConsumerGroup extends Component {
     const roles = this.state.roles || {};
     return (
       <div>
-        <Header title={`Consumer Group: ${consumerGroupId}`} history={this.props.history} />
+        <Header title={`Consumer Group: ${decodeURIComponent(consumerGroupId)}`} history={this.props.history} />
         <div className="tabs-container">
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">

diff --git a/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx b/client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
@@ -154,7 +154,7 @@ class ConsumerGroupList extends Root {
   deleteConsumerGroup = () => {
     const { selectedCluster, groupToDelete } = this.state;
 
-    this.removeApi(uriConsumerGroupDelete(selectedCluster, groupToDelete.id))
+    this.removeApi(uriConsumerGroupDelete(selectedCluster, encodeURIComponent(groupToDelete.id)))
       .then(() => {
         toast.success(`Consumer Group '${groupToDelete.id}' is deleted`);
         this.setState({ showDeleteModal: false, groupToDelete: {} }, () => this.getConsumerGroup());
@@ -243,7 +243,7 @@ class ConsumerGroupList extends Root {
           onDelete={group => {
             this.handleOnDelete(group);
           }}
-          onDetails={id => `/ui/${selectedCluster}/group/${id}`}
+          onDetails={id => `/ui/${selectedCluster}/group/${encodeURIComponent(id)}`}
           actions={
             roles.group && roles.group['group/delete']
               ? [constants.TABLE_DELETE, constants.TABLE_DETAILS]

diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -261,7 +261,7 @@ class TopicList extends Root {
           return (
             <Link
               key={consumerGroup.id}
-              to={`/ui/${this.state.selectedCluster}/group/${consumerGroup.id}`}
+              to={`/ui/${this.state.selectedCluster}/group/${encodeURIComponent(consumerGroup.id)}`}
               className={className}
               onClick={noPropagation}
             >