Add all frontend changes

Author: polegkashti

frontend/.env

@@ -1 +1 @@
-# 
+VITE_DEV_PROXY= http://localhost:8080 # your API server

frontend/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Favicons -->
+    <script src="<%= PUBLIC_PATH %>/env.js"></script>
     <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="<%= PUBLIC_PATH %>/favicon/apple-touch-icon.png" />
     <link rel="manifest" href="<%= PUBLIC_PATH %>/manifest.json" />

frontend/public/env.js

@@ -0,0 +1,3 @@
+window._env_ = {
+    REACT_APP_SUPPORT_URL: "https://chatgpt.com"
+};

frontend/src/components/ACLPage/Form/ForConsumers/Form.tsx

@@ -57,7 +57,7 @@ const ForConsumersForm: FC<AclDetailedFormProps> = ({ formRef }) => {
       const data = { ...formData }; // Create a copy of formData
 
       const selectedTopics = data.topics || [];
-      const { topicsPrefix: topicsPrefix} = data;
+      const { topicsPrefix } = data;
       const allTopicsSelected = selectedTopics.length === topics.length && topics.length !== 0;
 
       const { consumerGroups: selectedConsumerGroup } = data;

frontend/src/components/ACLPage/Form/ForProducers/Form.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext, useState, useEffect } from 'react';
+import React, { FC, useContext, useState } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useCreateProducerAcl } from 'lib/hooks/api/acl';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -63,7 +63,7 @@ const ForProducersForm: FC<AclDetailedFormProps> = ({ formRef }) => {
       const data = { ...formData }; // Create a copy of formData
 
       const selectedTopics = data.topics || [];
-      const topicsPrefix = data.topicsPrefix;
+      const { topicsPrefix } = data;
       const allTopicsSelected = selectedTopics.length === topics.length && selectedTopics.length !== 0;
 
       if (selectedTopics.length === 0 && !addAllTopicsChecked && !topicsPrefix) {

frontend/src/components/ACLPage/Form/Form.tsx

@@ -4,11 +4,12 @@ import Heading from 'components/common/heading/Heading.styled';
 import CloseIcon from 'components/common/Icons/CloseIcon';
 import { Button } from 'components/common/Button/Button';
 
+import PageLoader from 'components/common/PageLoader/PageLoader';
 import { ACLFormProps, ACLType, AclDetailedFormProps } from './types';
 import { ACLTypeOptions } from './constants';
 import * as S from './Form.styled';
+
 import ACLFormContext from './AclFormContext';
-import PageLoader from 'components/common/PageLoader/PageLoader';
 
 const DETAILED_FORM_COMPONENTS: Record<
   keyof typeof ACLType,

frontend/src/components/ACLPage/List/List.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ColumnDef, Row } from '@tanstack/react-table';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import Table from 'components/common/NewTable';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useAcls, useDeleteAcl } from 'lib/hooks/api/acl';
 import { ClusterName } from 'lib/interfaces/cluster';
+import { useSearchParams } from 'react-router-dom';
 import {
   Action,
   KafkaAcl,
@@ -14,18 +15,30 @@ import {
   ResourceType,
 } from 'generated-sources';
 import useBoolean from 'lib/hooks/useBoolean';
+import { PER_PAGE } from 'lib/constants';
 import ACLForm from 'components/ACLPage/Form/Form';
 import DeleteIcon from 'components/common/Icons/DeleteIcon';
 import { useTheme } from 'styled-components';
 import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import ActionButton from 'components/common/ActionComponent/ActionButton/ActionButton';
+import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
+import Search from 'components/common/Search/Search';
 
 import * as S from './List.styled';
 
 const ACList: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
-  const { data: aclList } = useAcls(clusterName);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Set default values for pagination
+  const page = 1; // or fetch from state/context
+  const perPage = 1; // or a constant from your constants file
+  const [search, setSearch] = useState(searchParams.get('q') || '');
+
+
+  const { data: aclList } = useAcls({ clusterName, search });
+
   const { deleteResource } = useDeleteAcl(clusterName);
   const modal = useConfirm(true);
   const theme = useTheme();
@@ -36,6 +49,12 @@ const ACList: React.FC = () => {
   } = useBoolean();
   const [rowId, setRowId] = React.useState('');
 
+
+  // Set the search params to the url based on the localStorage value
+  useEffect(() => {
+    setSearch(searchParams.get('q') || '');
+  }, [searchParams]);
+
   const handleDeleteClick = (acl: KafkaAcl | null) => {
     if (acl) {
       modal('Are you sure want to delete this ACL record?', () =>
@@ -162,6 +181,9 @@ const ACList: React.FC = () => {
           <PlusIcon /> Create ACL
         </ActionButton>
       </PageHeading>
+      <ControlPanelWrapper hasInput>
+        <Search placeholder="Search by Principle Name" />
+      </ControlPanelWrapper>
       <Table
         columns={columns}
         data={aclList ?? []}

frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/styled.ts

@@ -16,7 +16,7 @@ export const Value = styled.span`
   text-overflow: ellipsis;
   max-width: 400px;
   overflow: hidden;
-  white-space: nowrap;
+  white-space: pre;
 `;
 
 export const ButtonsWrapper = styled.div`

frontend/src/components/ConsumerGroups/BatchActionsBar.tsx

@@ -0,0 +1,91 @@
+import React, { useMemo } from 'react';
+import { Row } from '@tanstack/react-table';
+import { Action, ConsumerGroupState, ConsumerGroup, ResourceType } from 'generated-sources';
+import useAppParams from 'lib/hooks/useAppParams';
+import { ClusterName } from 'lib/interfaces/cluster';
+import { useConfirm } from 'lib/hooks/useConfirm';
+import { ActionCanButton } from 'components/common/ActionComponent';
+import { isPermitted } from 'lib/permissions';
+import { useUserInfo } from 'lib/hooks/useUserInfo';
+import {  showServerError, showAlert } from 'lib/errorHandling';
+import { useDeleteMultipleConsumerGroupsMutation } from 'lib/hooks/api/consumers';
+
+interface BatchActionsbarProps {
+  rows: Row<ConsumerGroup>[];  // Ensure that each row's original contains `groupId` and `state`
+  resetRowSelection(): void;
+}
+
+const BatchActionsbar: React.FC<BatchActionsbarProps> = ({
+  rows,
+  resetRowSelection,
+}) => {
+  const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
+  const confirm = useConfirm();
+  const { roles, rbacFlag } = useUserInfo();
+
+  // Map to include both groupId and state
+  const selectedConsumerGroups = rows.map(({ original }) => ({
+    groupId: original.groupId,
+    state: original.state as ConsumerGroupState,
+  }));
+
+  const deleteMultipleConsumerGroupsMutation = useDeleteMultipleConsumerGroupsMutation();
+
+  const deleteConsumerGroupsHandler = () => {
+    const nonEmptyGroups = selectedConsumerGroups.filter(
+      (group: ConsumerGroup) => group.state !== ConsumerGroupState.EMPTY
+    );
+
+    if (nonEmptyGroups.length > 0) {
+      showAlert('error', {
+        title: 'Deletion Failed',
+        message: 'All selected consumer groups must be in EMPTY state to be deleted.',
+      });
+      return;
+    }
+
+    confirm(
+      'Are you sure you want to delete the selected consumer groups?',
+      async () => {
+        try {
+            await deleteMultipleConsumerGroupsMutation.mutateAsync({
+                clusterName,
+                consumerGroups: selectedConsumerGroups.map(group => group.groupId),
+            });
+            resetRowSelection();
+        } catch (e) {
+          // do nothing
+        }
+      }
+    );
+  };
+
+  const canDeleteSelectedConsumerGroups = useMemo(() => {
+    return selectedConsumerGroups.every((value) =>
+      isPermitted({
+        roles,
+        resource: ResourceType.CONSUMER,
+        action: Action.DELETE,
+        value: value.groupId,
+        clusterName,
+        rbacFlag,
+      })
+    );
+  }, [selectedConsumerGroups, clusterName, roles]);
+
+  return (
+    <>
+      <ActionCanButton
+        buttonSize="M"
+        buttonType="secondary"
+        onClick={deleteConsumerGroupsHandler}
+        disabled={!selectedConsumerGroups.length}
+        canDoAction={canDeleteSelectedConsumerGroups}
+      >
+        Delete selected consumer groups
+      </ActionCanButton>
+    </>
+  );
+};
+
+export default BatchActionsbar;

frontend/src/components/ConsumerGroups/List.tsx

@@ -16,6 +16,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { CONSUMER_GROUP_STATE_TOOLTIPS, PER_PAGE } from 'lib/constants';
 import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
+import BatchActionsBar from './BatchActionsBar'; // Import the new batch actions bar
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -33,62 +34,55 @@ const List = () => {
     search: searchParams.get('q') || '',
   });
 
-  const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(
-    () => [
-      {
-        id: ConsumerGroupOrdering.NAME,
-        header: 'Group ID',
-        accessorKey: 'groupId',
-        // eslint-disable-next-line react/no-unstable-nested-components
-        cell: ({ getValue }) => (
-          <LinkCell
-            value={`${getValue<string | number>()}`}
-            to={encodeURIComponent(`${getValue<string | number>()}`)}
+  const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(() => [
+    {
+      id: ConsumerGroupOrdering.NAME,
+      header: 'Group ID',
+      accessorKey: 'groupId',
+      cell: ({ getValue }) => (
+        <LinkCell
+          value={`${getValue<string | number>()}`}
+          to={encodeURIComponent(`${getValue<string | number>()}`)}
+        />
+      ),
+    },
+    {
+      id: ConsumerGroupOrdering.MEMBERS,
+      header: 'Num Of Members',
+      accessorKey: 'members',
+    },
+    {
+      id: ConsumerGroupOrdering.TOPIC_NUM,
+      header: 'Num Of Topics',
+      accessorKey: 'topics',
+    },
+    {
+      id: ConsumerGroupOrdering.MESSAGES_BEHIND,
+      header: 'Consumer Lag',
+      accessorKey: 'consumerLag',
+      cell: (args) => args.getValue() || 'N/A',
+    },
+    {
+      header: 'Coordinator',
+      accessorKey: 'coordinator.id',
+      enableSorting: false,
+    },
+    {
+      id: ConsumerGroupOrdering.STATE,
+      header: 'State',
+      accessorKey: 'state',
+      cell: (args) => {
+        const value = args.getValue() as ConsumerGroupState;
+        return (
+          <Tooltip
+            value={<TagCell {...args} />}
+            content={CONSUMER_GROUP_STATE_TOOLTIPS[value]}
+            placement="bottom-end"
           />
-        ),
+        );
       },
-      {
-        id: ConsumerGroupOrdering.MEMBERS,
-        header: 'Num Of Members',
-        accessorKey: 'members',
-      },
-      {
-        id: ConsumerGroupOrdering.TOPIC_NUM,
-        header: 'Num Of Topics',
-        accessorKey: 'topics',
-      },
-      {
-        id: ConsumerGroupOrdering.MESSAGES_BEHIND,
-        header: 'Consumer Lag',
-        accessorKey: 'consumerLag',
-        cell: (args) => {
-          return args.getValue() || 'N/A';
-        },
-      },
-      {
-        header: 'Coordinator',
-        accessorKey: 'coordinator.id',
-        enableSorting: false,
-      },
-      {
-        id: ConsumerGroupOrdering.STATE,
-        header: 'State',
-        accessorKey: 'state',
-        // eslint-disable-next-line react/no-unstable-nested-components
-        cell: (args) => {
-          const value = args.getValue() as ConsumerGroupState;
-          return (
-            <Tooltip
-              value={<TagCell {...args} />}
-              content={CONSUMER_GROUP_STATE_TOOLTIPS[value]}
-              placement="bottom-end"
-            />
-          );
-        },
-      },
-    ],
-    []
-  );
+    },
+  ], []);
 
   return (
     <>
@@ -100,22 +94,18 @@ const List = () => {
         columns={columns}
         pageCount={consumerGroups.data?.pageCount || 0}
         data={consumerGroups.data?.consumerGroups || []}
-        emptyMessage={
-          consumerGroups.isSuccess
-            ? 'No active consumer groups found'
-            : 'Loading...'
-        }
+        emptyMessage={consumerGroups.isSuccess ? 'No active consumer groups found' : 'Loading...'}
         serverSideProcessing
         enableSorting
+        enableRowSelection
+        batchActionsBar={BatchActionsBar}
         onRowClick={({ original }) =>
-          navigate(
-            clusterConsumerGroupDetailsPath(clusterName, original.groupId)
-          )
+          navigate(clusterConsumerGroupDetailsPath(clusterName, original.groupId))
         }
         disabled={consumerGroups.isFetching}
       />
     </>
   );
 };
 
-export default List;
+export default List;