diff --git a/kafka-ui-react-app/src/components/Topics/New/New.tsx b/kafka-ui-react-app/src/components/Topics/New/New.tsx index 6fb48ca6bc..7346820afc 100644 --- a/kafka-ui-react-app/src/components/Topics/New/New.tsx +++ b/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}`); } }; diff --git a/kafka-ui-react-app/src/lib/constants.ts b/kafka-ui-react-app/src/lib/constants.ts index ba70329e7b..37aea99b51 100644 --- a/kafka-ui-react-app/src/lib/constants.ts +++ b/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', +} diff --git a/kafka-ui-react-app/src/redux/interfaces/loader.ts b/kafka-ui-react-app/src/redux/interfaces/loader.ts index eff97881b4..650d121f86 100644 --- a/kafka-ui-react-app/src/redux/interfaces/loader.ts +++ b/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; } diff --git a/kafka-ui-react-app/src/redux/reducers/clusters/clustersSlice.ts b/kafka-ui-react-app/src/redux/reducers/clusters/clustersSlice.ts index e1d40eebeb..0a3e589bab 100644 --- a/kafka-ui-react-app/src/redux/reducers/clusters/clustersSlice.ts +++ b/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, diff --git a/kafka-ui-react-app/src/redux/reducers/connect/selectors.ts b/kafka-ui-react-app/src/redux/reducers/connect/selectors.ts index c11f7ac2e8..32f654ec79 100644 --- a/kafka-ui-react-app/src/redux/reducers/connect/selectors.ts +++ b/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( 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 88023d4e93..d34d4594de 100644 --- a/kafka-ui-react-app/src/redux/reducers/consumerGroups/consumerGroupsSlice.ts +++ b/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( diff --git a/kafka-ui-react-app/src/redux/reducers/ksqlDb/selectors.ts b/kafka-ui-react-app/src/redux/reducers/ksqlDb/selectors.ts index 0d55d9d86e..6f8bbcd61b 100644 --- a/kafka-ui-react-app/src/redux/reducers/ksqlDb/selectors.ts +++ b/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, }) ); diff --git a/kafka-ui-react-app/src/redux/reducers/loader/loaderSlice.ts b/kafka-ui-react-app/src/redux/reducers/loader/loaderSlice.ts index c843166886..47950d4559 100644 --- a/kafka-ui-react-app/src/redux/reducers/loader/loaderSlice.ts +++ b/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; } ); }, diff --git a/kafka-ui-react-app/src/redux/reducers/loader/selectors.ts b/kafka-ui-react-app/src/redux/reducers/loader/selectors.ts index 937db022de..2decd34468 100644 --- a/kafka-ui-react-app/src/redux/reducers/loader/selectors.ts +++ b/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; diff --git a/kafka-ui-react-app/src/redux/reducers/schemas/schemasSlice.ts b/kafka-ui-react-app/src/redux/reducers/schemas/schemasSlice.ts index eef2a7b3f6..899cdc64a6 100644 --- a/kafka-ui-react-app/src/redux/reducers/schemas/schemasSlice.ts +++ b/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; diff --git a/kafka-ui-react-app/src/redux/reducers/topics/selectors.ts b/kafka-ui-react-app/src/redux/reducers/topics/selectors.ts index bd47f08a41..031d86a0fb 100644 --- a/kafka-ui-react-app/src/redux/reducers/topics/selectors.ts +++ b/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(