adding AsyncRequestStatus enum to avoid possible gramatical issues (#2093)

kafka-ui-react-app/src/components/Topics/New/New.tsx

@@ -10,6 +10,7 @@ import { topicFormValidationSchema } from 'lib/yupExtended';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import { useAppDispatch } from 'lib/hooks/redux';
 import useAppParams from 'lib/hooks/useAppParams';
+import { AsyncRequestStatus } from 'lib/constants';
 
 enum Filters {
   NAME = 'name',
@@ -41,7 +42,7 @@ const New: React.FC = () => {
   const onSubmit = async (data: TopicFormData) => {
     const { meta } = await dispatch(createTopic({ clusterName, data }));
 
-    if (meta.requestStatus === 'fulfilled') {
+    if (meta.requestStatus === AsyncRequestStatus.fulfilled) {
       navigate(`../${data.name}`);
     }
   };

kafka-ui-react-app/src/lib/constants.ts

@@ -62,3 +62,10 @@ export const GIT_COMMIT = process.env.REACT_APP_COMMIT;
 export const BREADCRUMB_DEFINITIONS: BreadcrumbDefinitions = {
   Ksqldb: 'ksqlDB',
 };
+
+export enum AsyncRequestStatus {
+  initial = 'initial',
+  pending = 'pending',
+  fulfilled = 'fulfilled',
+  rejected = 'rejected',
+}

kafka-ui-react-app/src/redux/interfaces/loader.ts

@@ -1,13 +1,8 @@
+import { AsyncRequestStatus } from 'lib/constants';
+
 export interface LoaderState {
   [key: string]: 'notFetched' | 'fetching' | 'fetched' | 'errorFetching';
 }
-
-export type AsyncRequestStatus =
-  | 'initial'
-  | 'pending'
-  | 'fulfilled'
-  | 'rejected';
-
 export interface LoaderSliceState {
   [key: string]: AsyncRequestStatus;
 }

kafka-ui-react-app/src/redux/reducers/clusters/clustersSlice.ts

@@ -10,7 +10,7 @@ import {
   ServerStatus,
   ClusterFeaturesEnum,
 } from 'generated-sources';
-import { BASE_PARAMS } from 'lib/constants';
+import { BASE_PARAMS, AsyncRequestStatus } from 'lib/constants';
 import { RootState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 
@@ -41,7 +41,7 @@ const getClusterListFetchingStatus = createFetchingSelector(
 );
 export const getAreClustersFulfilled = createSelector(
   getClusterListFetchingStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 export const getClusterList = createSelector(
   clustersState,

kafka-ui-react-app/src/redux/reducers/connect/selectors.ts

@@ -7,6 +7,7 @@ import {
   FullConnectorInfo,
 } from 'generated-sources';
 import { sortBy } from 'lodash';
+import { AsyncRequestStatus } from 'lib/constants';
 
 import {
   deleteConnector,
@@ -27,7 +28,7 @@ const getConnectsFetchingStatus = createFetchingSelector(
 );
 export const getAreConnectsFetching = createSelector(
   getConnectsFetchingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 export const getConnects = createSelector(
@@ -40,7 +41,7 @@ const getConnectorsFetchingStatus = createFetchingSelector(
 );
 export const getAreConnectorsFetching = createSelector(
   getConnectorsFetchingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 export const getConnectors = createSelector(
@@ -73,7 +74,7 @@ const getConnectorFetchingStatus = createFetchingSelector(
 );
 export const getIsConnectorFetching = createSelector(
   getConnectorFetchingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 const getCurrentConnector = createSelector(
@@ -96,7 +97,7 @@ const getConnectorDeletingStatus = createFetchingSelector(
 );
 export const getIsConnectorDeleting = createSelector(
   getConnectorDeletingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 const getConnectorRestartingStatus = createFetchingSelector(
@@ -104,7 +105,7 @@ const getConnectorRestartingStatus = createFetchingSelector(
 );
 export const getIsConnectorRestarting = createSelector(
   getConnectorRestartingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 const getConnectorPausingStatus = createFetchingSelector(
@@ -112,7 +113,7 @@ const getConnectorPausingStatus = createFetchingSelector(
 );
 export const getIsConnectorPausing = createSelector(
   getConnectorPausingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 const getConnectorResumingStatus = createFetchingSelector(
@@ -120,7 +121,7 @@ const getConnectorResumingStatus = createFetchingSelector(
 );
 export const getIsConnectorResuming = createSelector(
   getConnectorResumingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 export const getIsConnectorActionRunning = createSelector(
@@ -135,7 +136,7 @@ const getConnectorTasksFetchingStatus = createFetchingSelector(
 );
 export const getAreConnectorTasksFetching = createSelector(
   getConnectorTasksFetchingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 export const getConnectorTasks = createSelector(
@@ -162,7 +163,7 @@ const getConnectorConfigFetchingStatus = createFetchingSelector(
 );
 export const getIsConnectorConfigFetching = createSelector(
   getConnectorConfigFetchingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 export const getConnectorConfig = createSelector(

kafka-ui-react-app/src/redux/reducers/consumerGroups/consumerGroupsSlice.ts

@@ -13,7 +13,7 @@ import {
   ConsumerGroupsPageResponse,
   SortOrder,
 } from 'generated-sources';
-import { BASE_PARAMS } from 'lib/constants';
+import { BASE_PARAMS, AsyncRequestStatus } from 'lib/constants';
 import { getResponse } from 'lib/errorHandling';
 import {
   ClusterName,
@@ -184,22 +184,22 @@ export const { selectAll, selectById } =
 
 export const getAreConsumerGroupsPagedFulfilled = createSelector(
   createFetchingSelector('consumerGroups/fetchConsumerGroupsPaged'),
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 export const getIsConsumerGroupDeleted = createSelector(
   createFetchingSelector('consumerGroups/deleteConsumerGroup'),
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 export const getAreConsumerGroupDetailsFulfilled = createSelector(
   createFetchingSelector('consumerGroups/fetchConsumerGroupDetails'),
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 export const getIsOffsetReseted = createSelector(
   createFetchingSelector('consumerGroups/resetConsumerGroupOffsets'),
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 export const getConsumerGroupsOrderBy = createSelector(

kafka-ui-react-app/src/redux/reducers/ksqlDb/selectors.ts

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 import { KsqlState } from 'redux/interfaces/ksqlDb';
+import { AsyncRequestStatus } from 'lib/constants';
 
 const ksqlDbState = ({ ksqlDb }: RootState): KsqlState => ksqlDb;
 
@@ -15,8 +16,8 @@ export const getKsqlDbTables = createSelector(
   [ksqlDbState, getKsqlDbFetchTablesAndStreamsFetchingStatus],
   (state, status) => ({
     rows: [...state.streams, ...state.tables],
-    fetched: status === 'fulfilled',
-    fetching: status === 'pending',
+    fetched: status === AsyncRequestStatus.fulfilled,
+    fetching: status === AsyncRequestStatus.pending,
     tablesCount: state.tables.length,
     streamsCount: state.streams.length,
   })
@@ -26,7 +27,7 @@ export const getKsqlExecution = createSelector(
   [ksqlDbState, getKsqlExecutionStatus],
   (state, status) => ({
     executionResult: state.executionResult,
-    fetched: status === 'fulfilled',
-    fetching: status === 'pending',
+    fetched: status === AsyncRequestStatus.fulfilled,
+    fetching: status === AsyncRequestStatus.pending,
   })
 );

kafka-ui-react-app/src/redux/reducers/loader/loaderSlice.ts

@@ -5,7 +5,7 @@ import {
   UnknownAsyncThunkRejectedAction,
 } from '@reduxjs/toolkit/dist/matchers';
 import { ClustersApi, Configuration } from 'generated-sources';
-import { BASE_PARAMS } from 'lib/constants';
+import { BASE_PARAMS, AsyncRequestStatus } from 'lib/constants';
 import { LoaderSliceState } from 'redux/interfaces';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
@@ -30,21 +30,21 @@ export const loaderSlice = createSlice({
         (action): action is UnknownAsyncThunkPendingAction =>
           action.type.endsWith('/pending'),
         (state, { type }) => {
-          state[type.replace('/pending', '')] = 'pending';
+          state[type.replace('/pending', '')] = AsyncRequestStatus.pending;
         }
       )
       .addMatcher(
         (action): action is UnknownAsyncThunkFulfilledAction =>
           action.type.endsWith('/fulfilled'),
         (state, { type }) => {
-          state[type.replace('/fulfilled', '')] = 'fulfilled';
+          state[type.replace('/fulfilled', '')] = AsyncRequestStatus.fulfilled;
         }
       )
       .addMatcher(
         (action): action is UnknownAsyncThunkRejectedAction =>
           action.type.endsWith('/rejected'),
         (state, { type }) => {
-          state[type.replace('/rejected', '')] = 'rejected';
+          state[type.replace('/rejected', '')] = AsyncRequestStatus.rejected;
         }
       );
   },

kafka-ui-react-app/src/redux/reducers/loader/selectors.ts

@@ -1,4 +1,5 @@
 import { RootState } from 'redux/interfaces';
+import { AsyncRequestStatus } from 'lib/constants';
 
 export const createFetchingSelector = (action: string) => (state: RootState) =>
-  state.loader[action] || 'initial';
+  state.loader[action] || AsyncRequestStatus.initial;

kafka-ui-react-app/src/redux/reducers/schemas/schemasSlice.ts

@@ -12,7 +12,7 @@ import {
   GetSchemasRequest,
   GetLatestSchemaRequest,
 } from 'generated-sources';
-import { BASE_PARAMS } from 'lib/constants';
+import { BASE_PARAMS, AsyncRequestStatus } from 'lib/constants';
 import { getResponse } from 'lib/errorHandling';
 import { ClusterName, RootState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
@@ -130,16 +130,16 @@ export const { schemaAdded, schemaUpdated } = schemasSlice.actions;
 
 export const getAreSchemasFulfilled = createSelector(
   createFetchingSelector(SCHEMAS_FETCH_ACTION),
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 export const getAreSchemaLatestFulfilled = createSelector(
   createFetchingSelector(SCHEMA_LATEST_FETCH_ACTION),
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 export const getAreSchemaVersionsFulfilled = createSelector(
   createFetchingSelector(SCHEMAS_VERSIONS_FETCH_ACTION),
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 export default schemasSlice.reducer;

kafka-ui-react-app/src/redux/reducers/topics/selectors.ts

@@ -19,6 +19,7 @@ import {
   updateTopicPartitionsCount,
   updateTopicReplicationFactor,
 } from 'redux/reducers/topics/topicsSlice';
+import { AsyncRequestStatus } from 'lib/constants';
 
 const topicsState = ({ topics }: RootState): TopicsState => topics;
 
@@ -32,7 +33,7 @@ const getTopicDeletingStatus = createFetchingSelector(deleteTopic.typePrefix);
 
 export const getIsTopicDeleted = createSelector(
   getTopicDeletingStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getAreTopicsFetchingStatus = createFetchingSelector(
@@ -41,11 +42,11 @@ const getAreTopicsFetchingStatus = createFetchingSelector(
 
 export const getAreTopicsFetching = createSelector(
   getAreTopicsFetchingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 export const getAreTopicsFetched = createSelector(
   getAreTopicsFetchingStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getTopicDetailsFetchingStatus = createFetchingSelector(
@@ -54,12 +55,12 @@ const getTopicDetailsFetchingStatus = createFetchingSelector(
 
 export const getIsTopicDetailsFetching = createSelector(
   getTopicDetailsFetchingStatus,
-  (status) => status === 'pending'
+  (status) => status === AsyncRequestStatus.pending
 );
 
 export const getIsTopicDetailsFetched = createSelector(
   getTopicDetailsFetchingStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getTopicConfigFetchingStatus = createFetchingSelector(
@@ -68,21 +69,21 @@ const getTopicConfigFetchingStatus = createFetchingSelector(
 
 export const getTopicConfigFetched = createSelector(
   getTopicConfigFetchingStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getTopicCreationStatus = createFetchingSelector(createTopic.typePrefix);
 
 export const getTopicCreated = createSelector(
   getTopicCreationStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getTopicUpdateStatus = createFetchingSelector(updateTopic.typePrefix);
 
 export const getTopicUpdated = createSelector(
   getTopicUpdateStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getTopicMessageSchemaFetchingStatus = createFetchingSelector(
@@ -91,7 +92,7 @@ const getTopicMessageSchemaFetchingStatus = createFetchingSelector(
 
 export const getTopicMessageSchemaFetched = createSelector(
   getTopicMessageSchemaFetchingStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getPartitionsCountIncreaseStatus = createFetchingSelector(
@@ -100,7 +101,7 @@ const getPartitionsCountIncreaseStatus = createFetchingSelector(
 
 export const getTopicPartitionsCountIncreased = createSelector(
   getPartitionsCountIncreaseStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getReplicationFactorUpdateStatus = createFetchingSelector(
@@ -109,7 +110,7 @@ const getReplicationFactorUpdateStatus = createFetchingSelector(
 
 export const getTopicReplicationFactorUpdated = createSelector(
   getReplicationFactorUpdateStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 const getTopicConsumerGroupsStatus = createFetchingSelector(
@@ -118,7 +119,7 @@ const getTopicConsumerGroupsStatus = createFetchingSelector(
 
 export const getTopicsConsumerGroupsFetched = createSelector(
   getTopicConsumerGroupsStatus,
-  (status) => status === 'fulfilled'
+  (status) => status === AsyncRequestStatus.fulfilled
 );
 
 export const getTopicList = createSelector(