Nuke All redux related code

Author: Mgrdich

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

@@ -7,10 +7,10 @@ import Input from 'components/common/Input/Input';
 import ControlledSelect from 'components/common/Select/ControlledSelect';
 import { matchTypeOptions } from 'components/ACLPage/Form/constants';
 import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterName } from 'redux/interfaces';
 import * as S from 'components/ACLPage/Form/Form.styled';
 import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
 import { AclDetailedFormProps } from 'components/ACLPage/Form/types';
+import { ClusterName } from 'lib/interfaces/cluster';
 
 import formSchema from './schema';
 import { FormValues } from './types';

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

@@ -1,7 +1,7 @@
 import React, { FC, useContext } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { useCreateConsumersAcl } from 'lib/hooks/api/acl';
 import useAppParams from 'lib/hooks/useAppParams';
 import ControlledMultiSelect from 'components/common/MultiSelect/ControlledMultiSelect';

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

@@ -1,7 +1,7 @@
 import React, { FC, useContext } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { useCreateStreamAppAcl } from 'lib/hooks/api/acl';
 import useAppParams from 'lib/hooks/useAppParams';
 import Input from 'components/common/Input/Input';

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

@@ -3,7 +3,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useCreateProducerAcl } from 'lib/hooks/api/acl';
 import { FormProvider, useForm } from 'react-hook-form';
 import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import Input from 'components/common/Input/Input';
 import ControlledMultiSelect from 'components/common/MultiSelect/ControlledMultiSelect';
 import Checkbox from 'components/common/Checkbox/Checkbox';

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

@@ -5,7 +5,7 @@ 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 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import {
   KafkaAcl,
   KafkaAclNamePatternType,

frontend/src/components/Brokers/BrokersList/BrokersList.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { useNavigate } from 'react-router-dom';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';

frontend/src/components/ConsumerGroups/Details/ListItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ConsumerGroupTopicPartition } from 'generated-sources';
 import { Link } from 'react-router-dom';
-import { ClusterName } from 'redux/interfaces/cluster';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { clusterTopicPath } from 'lib/paths';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';

frontend/src/components/Schemas/Edit/Form.tsx

@@ -12,7 +12,7 @@ import {
   ClusterSubjectParam,
 } from 'lib/paths';
 import yup from 'lib/yupExtended';
-import { NewSchemaSubjectRaw } from 'redux/interfaces';
+import { NewSchemaSubjectRaw } from 'lib/interfaces/schema';
 import Editor from 'components/common/Editor/Editor';
 import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';

frontend/src/components/Schemas/New/New.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NewSchemaSubjectRaw } from 'redux/interfaces';
+import { NewSchemaSubjectRaw } from 'lib/interfaces/schema';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 import {

frontend/src/components/Topics/List/BatchActionsBar.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Row } from '@tanstack/react-table';
 import { Action, Topic, ResourceType } from 'generated-sources';
 import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import {
   topicKeys,
   useClearTopicMessages,

frontend/src/components/Topics/List/TopicTable.tsx

@@ -3,7 +3,7 @@ import { SortOrder, Topic, TopicColumnsToSort } from 'generated-sources';
 import { ColumnDef } from '@tanstack/react-table';
 import Table, { SizeCell } from 'components/common/NewTable';
 import useAppParams from 'lib/hooks/useAppParams';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { useSearchParams } from 'react-router-dom';
 import ClusterContext from 'components/contexts/ClusterContext';
 import { useTopics } from 'lib/hooks/api/topics';

frontend/src/components/Topics/List/__tests__/TopicTable.spec.tsx

@@ -16,11 +16,6 @@ import { clusterTopicsPath } from 'lib/paths';
 
 const clusterName = 'test-cluster';
 
-jest.mock('lib/hooks/redux', () => ({
-  ...jest.requireActual('lib/hooks/redux'),
-  useAppDispatch: jest.fn(),
-}));
-
 const getButtonByName = (name: string) => screen.getByRole('button', { name });
 
 jest.mock('lib/hooks/api/topics', () => ({

frontend/src/components/Topics/New/New.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TopicFormData } from 'redux/interfaces';
 import { FormProvider, useForm } from 'react-hook-form';
 import { ClusterNameRoute, clusterTopicsPath } from 'lib/paths';
 import TopicForm from 'components/Topics/shared/Form/TopicForm';
@@ -9,6 +8,7 @@ import { topicFormValidationSchema } from 'lib/yupExtended';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useCreateTopic } from 'lib/hooks/api/topics';
+import { TopicFormData } from 'lib/interfaces/topic';
 
 enum Filters {
   NAME = 'name',

frontend/src/components/Topics/Topic/Edit/Edit.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TopicConfigByName, TopicFormData } from 'redux/interfaces';
 import { useForm, FormProvider } from 'react-hook-form';
 import TopicForm from 'components/Topics/shared/Form/TopicForm';
 import { RouteParamsClusterTopic } from 'lib/paths';
@@ -16,6 +15,7 @@ import {
 } from 'lib/hooks/api/topics';
 import DangerZone from 'components/Topics/Topic/Edit/DangerZone/DangerZone';
 import { ConfigSource } from 'generated-sources';
+import { TopicConfigByName, TopicFormData } from 'lib/interfaces/topic';
 
 export const TOPIC_EDIT_FORM_DEFAULT_PROPS = {
   partitions: 1,

frontend/src/components/Topics/Topic/__test__/Topic.spec.tsx

@@ -22,7 +22,6 @@ import {
   useRecreateTopic,
   useTopicDetails,
 } from 'lib/hooks/api/topics';
-import { useAppDispatch } from 'lib/hooks/redux';
 
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -39,11 +38,6 @@ jest.mock('lib/hooks/api/topics', () => ({
 const unwrapMock = jest.fn();
 const clearTopicMessages = jest.fn();
 
-jest.mock('lib/hooks/redux', () => ({
-  ...jest.requireActual('lib/hooks/redux'),
-  useAppDispatch: jest.fn(),
-}));
-
 jest.mock('components/Topics/Topic/Overview/Overview', () => () => (
   <>OverviewMock</>
 ));
@@ -105,9 +99,6 @@ describe('Details', () => {
     (useClearTopicMessages as jest.Mock).mockImplementation(() => ({
       mutateAsync: clearTopicMessages,
     }));
-    (useAppDispatch as jest.Mock).mockImplementation(() => () => ({
-      unwrap: unwrapMock,
-    }));
   });
   describe('Action Bar', () => {
     describe('when it has readonly flag', () => {

frontend/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx

@@ -2,7 +2,6 @@ import React, { useRef } from 'react';
 import { ErrorMessage } from '@hookform/error-message';
 import { TOPIC_CUSTOM_PARAMS } from 'lib/constants';
 import { FieldArrayWithId, useFormContext, Controller } from 'react-hook-form';
-import { TopicConfigParams, TopicFormData } from 'redux/interfaces';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import { FormError } from 'components/common/Input/Input.styled';
 import Select from 'components/common/Select/Select';
@@ -11,6 +10,7 @@ import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
 import * as C from 'components/Topics/shared/Form/TopicForm.styled';
 import { ConfigSource } from 'generated-sources';
+import { TopicConfigParams, TopicFormData } from 'lib/interfaces/topic';
 
 import * as S from './CustomParams.styled';
 

frontend/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { TopicConfigParams, TopicFormData } from 'redux/interfaces';
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import { Button } from 'components/common/Button/Button';
 import { TOPIC_CUSTOM_PARAMS_PREFIX } from 'lib/constants';
 import PlusIcon from 'components/common/Icons/PlusIcon';
+import { TopicConfigParams, TopicFormData } from 'lib/interfaces/topic';
 
 import CustomParamField from './CustomParamField';
 import * as S from './CustomParams.styled';

frontend/src/components/Topics/shared/Form/TopicForm.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import { NOT_SET, BYTES_IN_GB } from 'lib/constants';
-import { ClusterName, TopicConfigParams, TopicName } from 'redux/interfaces';
 import { ErrorMessage } from '@hookform/error-message';
 import Select from 'components/common/Select/Select';
 import Input from 'components/common/Input/Input';
@@ -12,6 +11,7 @@ import { StyledForm } from 'components/common/Form/Form.styled';
 import { clusterTopicPath } from 'lib/paths';
 import { useNavigate } from 'react-router-dom';
 import useAppParams from 'lib/hooks/useAppParams';
+import { TopicConfigParams, TopicName } from 'lib/interfaces/topic';
 
 import CustomParams from './CustomParams/CustomParams';
 import TimeToRetain from './TimeToRetain';

frontend/src/index.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { Provider } from 'react-redux';
 import { ThemeModeProvider } from 'components/contexts/ThemeModeContext';
 import App from 'components/App';
-import { store } from 'redux/store';
 import 'lib/constants';
 import 'theme/index.scss';
 
@@ -13,11 +11,9 @@ const container =
 const root = createRoot(container);
 
 root.render(
-  <Provider store={store}>
-    <BrowserRouter basename={window.basePath || '/'}>
-      <ThemeModeProvider>
-        <App />
-      </ThemeModeProvider>
-    </BrowserRouter>
-  </Provider>
+  <BrowserRouter basename={window.basePath || '/'}>
+    <ThemeModeProvider>
+      <App />
+    </ThemeModeProvider>
+  </BrowserRouter>
 );

frontend/src/lib/hooks/api/__tests__/schema.spec.ts

@@ -0,0 +1,8 @@
+import { expectQueryWorks, renderQueryHook } from 'lib/testHelpers';
+
+// TODO should be written
+describe('schema hooks', () => {
+  it('should ', () => {
+    console.log(expectQueryWorks, renderQueryHook);
+  });
+});

frontend/src/lib/hooks/api/__tests__/topics.spec.ts

@@ -7,8 +7,8 @@ import {
 import * as hooks from 'lib/hooks/api/topics';
 import fetchMock from 'fetch-mock';
 import { externalTopicPayload, topicConfigPayload } from 'lib/fixtures/topics';
-import { TopicFormData, TopicFormDataRaw } from 'redux/interfaces';
 import { CreateTopicMessage } from 'generated-sources';
+import { TopicFormData, TopicFormDataRaw } from 'lib/interfaces/topic';
 
 const clusterName = 'test-cluster';
 const topicName = 'test-topic';

frontend/src/lib/hooks/api/acl.ts

@@ -5,7 +5,7 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { showSuccessAlert } from 'lib/errorHandling';
 import {
   CreateConsumerAcl,

frontend/src/lib/hooks/api/brokers.ts

@@ -1,6 +1,6 @@
 import { brokersApiClient as api } from 'lib/api';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { BrokerConfigItem } from 'generated-sources';
 
 interface UpdateBrokerConfigProps {

frontend/src/lib/hooks/api/clusters.ts

@@ -1,6 +1,6 @@
 import { clustersApiClient as api } from 'lib/api';
 import { useQuery } from '@tanstack/react-query';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 
 export function useClusters() {
   return useQuery(['clusters'], () => api.getClusters(), { suspense: false });

frontend/src/lib/hooks/api/consumers.ts

@@ -1,6 +1,6 @@
 import { consumerGroupsApiClient as api } from 'lib/api';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import {
   ConsumerGroup,
   ConsumerGroupOffsetsReset,

frontend/src/lib/hooks/api/kafkaConnect.ts

@@ -7,7 +7,7 @@ import {
 import { kafkaConnectApiClient as api } from 'lib/api';
 import sortBy from 'lodash/sortBy';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { showSuccessAlert } from 'lib/errorHandling';
 
 interface UseConnectorProps {

frontend/src/lib/hooks/api/ksqlDb.tsx

@@ -1,6 +1,6 @@
 import { ksqlDbApiClient as api } from 'lib/api';
 import { useMutation, useQueries } from '@tanstack/react-query';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 import { BASE_PARAMS } from 'lib/constants';
 import React from 'react';
 import { fetchEventSource } from '@microsoft/fetch-event-source';

frontend/src/lib/hooks/api/schemas.ts

@@ -18,7 +18,7 @@ import {
   UpdateSchemaCompatibilityLevelRequest,
 } from 'generated-sources';
 import { schemasApiClient } from 'lib/api';
-import { ClusterName } from 'redux/interfaces';
+import { ClusterName } from 'lib/interfaces/cluster';
 
 export function useGetLatestSchema(param: GetLatestSchemaRequest) {
   return useQuery<SchemaSubject>({

frontend/src/lib/hooks/api/topicMessages.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { BASE_PARAMS, MESSAGES_PER_PAGE } from 'lib/constants';
-import { ClusterName, TopicName } from 'redux/interfaces';
 import {
   GetSerdesRequest,
   PollingMode,
@@ -17,6 +16,8 @@ import { useSearchParams } from 'react-router-dom';
 import { MessagesFilterKeys } from 'lib/hooks/useMessagesFilters';
 import { convertStrToPollingMode } from 'lib/hooks/filterUtils';
 import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
+import { TopicName } from 'lib/interfaces/topic';
+import { ClusterName } from 'lib/interfaces/cluster';
 
 interface UseTopicMessagesProps {
   clusterName: ClusterName;

frontend/src/lib/hooks/api/topics.ts

@@ -5,12 +5,6 @@ import {
   messagesApiClient,
 } from 'lib/api';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  ClusterName,
-  TopicFormData,
-  TopicFormDataRaw,
-  TopicFormFormattedParams,
-} from 'redux/interfaces';
 import {
   CreateTopicMessage,
   GetTopicDetailsRequest,
@@ -21,6 +15,12 @@ import {
   TopicUpdate,
 } from 'generated-sources';
 import { showServerError, showSuccessAlert } from 'lib/errorHandling';
+import { ClusterName } from 'lib/interfaces/cluster';
+import {
+  TopicFormData,
+  TopicFormDataRaw,
+  TopicFormFormattedParams,
+} from 'lib/interfaces/topic';
 
 export const topicKeys = {
   all: (clusterName: ClusterName) =>

frontend/src/lib/hooks/redux.ts

@@ -50,11 +50,3 @@ export interface TopicFormData {
     value: string;
   }[];
 }
-
-export interface TopicMessagesState {
-  messages: TopicMessage[];
-  phase?: string;
-  meta: TopicMessageConsuming;
-  messageEventType?: string;
-  isFetching: boolean;
-}

frontend/src/redux/interfaces/cluster.ts renamed to frontend/src/lib/interfaces/cluster.ts

@@ -1,8 +1,10 @@
 import { Broker, Connect, Connector } from 'generated-sources';
-import { ClusterName, SchemaName, TopicName } from 'redux/interfaces';
 
 import { GIT_REPO_LINK } from './constants';
 import { ConsumerGroupID } from './hooks/api/consumers';
+import { ClusterName } from './interfaces/cluster';
+import { SchemaName } from './interfaces/schema';
+import { TopicName } from './interfaces/topic';
 
 export const gitCommitPath = (commit: string) =>
   `${GIT_REPO_LINK}/commit/${commit}`;