Repository: provectus/kafka-ui
Issue: Deleting a consumer hangs the page 
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed


https://user-images.githubusercontent.com/1494347/194282581-2387ac9f-bee4-4d09-a42a-3fdd312ffb2d.mov



Issue comments:
Hey, @Haarolean I will be working on this issue. I think there is some problem with the middleware. Request you to assign me. Thank You!
@spike-spiegel-21 sure, go ahead :)
Hey, @Haarolean Currently I am able to run the [kafka-ui-react-app](https://github.com/provectus/kafka-ui/tree/master/kafka-ui-react-app) but I don't know how to create consumer group. Could you please help me?
@spike-spiegel-21 
you can install any KC connector which does consume messages.
Here's a bunch of [examples](https://github.com/provectus/kafka-ui/tree/master/documentation/compose/connectors), e.g. s3-sink will consume messages and post them to AWS S3, you can configure that one for example.
Here's a [compose file](https://github.com/provectus/kafka-ui/blob/master/documentation/compose/e2e-tests.yaml) which does install connectors for you.
@spike-spiegel-21 any luck?
Hey @Haarolean Sorry for being, was busy with some university stuff. I haven't tried it since prev comment. I will surely complete this task in the upcoming week. Thank you.
Hello @Haarolean I was trying to run [kafka-ui.yaml](https://github.com/provectus/kafka-ui/blob/master/documentation/compose/kafka-ui.yaml) with `sudo docker-compose -f docker-compose.yml up` and encounterd these warnings and errors:

1. `kafka0                        | ERROR: Did you forget the update_run.sh file that came with this docker-compose.yml file?
kafka1                        | ERROR: Did you forget the update_run.sh file that came with this docker-compose.yml file?
kafka0 exited with code 1
kafka1 exited with code 1
`
2. `WARN org.apache.kafka.clients.ClientUtils  - Couldn't resolve server kafka1:29092 from bootstrap.servers as DNS resolution failed for kafka1
`
Could you please help me resolve this, or should I create custom docker-compose file?
@spike-spiegel-21 which OS are you on? Did you run the docker-compose from the project directory or created your own? Do you have `update_run.sh` available at the path specified in volume binds list?

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
index 961410ffd2f..098a487081a 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@@ -18,10 +18,9 @@ import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeader
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import {
   deleteConsumerGroup,
+  selectById,
   fetchConsumerGroupDetails,
   getAreConsumerGroupDetailsFulfilled,
-  getIsConsumerGroupDeleted,
-  selectById,
 } from 'redux/reducers/consumerGroups/consumerGroupsSlice';
 import getTagColor from 'components/common/Tag/getTagColor';
 import { Dropdown } from 'components/common/Dropdown';
@@ -41,23 +40,19 @@ const Details: React.FC = () => {
   const consumerGroup = useAppSelector((state) =>
     selectById(state, consumerGroupID)
   );
-  const isDeleted = useAppSelector(getIsConsumerGroupDeleted);
   const isFetched = useAppSelector(getAreConsumerGroupDetailsFulfilled);
 
   React.useEffect(() => {
     dispatch(fetchConsumerGroupDetails({ clusterName, consumerGroupID }));
   }, [clusterName, consumerGroupID, dispatch]);
 
-  const onDelete = () => {
-    dispatch(deleteConsumerGroup({ clusterName, consumerGroupID }));
+  const onDelete = async () => {
+    const res = await dispatch(
+      deleteConsumerGroup({ clusterName, consumerGroupID })
+    ).unwrap();
+    if (res) navigate('../');
   };
 
-  React.useEffect(() => {
-    if (isDeleted) {
-      navigate('../');
-    }
-  }, [clusterName, navigate, isDeleted]);
-
   const onResetOffsets = () => {
     navigate(clusterConsumerGroupResetRelativePath);
   };
diff --git a/kafka-ui-react-app/src/redux/reducers/consumerGroups/consumerGroupsSlice.ts b/kafka-ui-react-app/src/redux/reducers/consumerGroups/consumerGroupsSlice.ts
index 2b7709b0099..91420f04043 100644
--- a/kafka-ui-react-app/src/redux/reducers/consumerGroups/consumerGroupsSlice.ts
+++ b/kafka-ui-react-app/src/redux/reducers/consumerGroups/consumerGroupsSlice.ts
@@ -195,11 +195,6 @@ export const getAreConsumerGroupsPagedFulfilled = createSelector(
   (status) => status === AsyncRequestStatus.fulfilled
 );
 
-export const getIsConsumerGroupDeleted = createSelector(
-  createFetchingSelector('consumerGroups/deleteConsumerGroup'),
-  (status) => status === AsyncRequestStatus.fulfilled
-);
-
 export const getAreConsumerGroupDetailsFulfilled = createSelector(
   createFetchingSelector('consumerGroups/fetchConsumerGroupDetails'),
   (status) => status === AsyncRequestStatus.fulfilled


Test patch: