[CHORE] Post Prettier update cleanup.

kafka-ui-react-app/package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/error-message": "0.0.5",
-    "ace-builds": "^1.4.12",
     "@rooks/use-outside-click-ref": "^4.10.1",
+    "ace-builds": "^1.4.12",
     "bulma": "^0.9.2",
     "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",

kafka-ui-react-app/src/components/Schemas/List/ListContainer.tsx

@@ -18,9 +18,8 @@ const mapStateToProps = (state: RootState) => ({
   isFetching: getIsSchemaListFetching(state),
   schemas: getSchemaList(state),
   globalSchemaCompatibilityLevel: getGlobalSchemaCompatibilityLevel(state),
-  isGlobalSchemaCompatibilityLevelFetched: getGlobalSchemaCompatibilityLevelFetched(
-    state
-  ),
+  isGlobalSchemaCompatibilityLevelFetched:
+    getGlobalSchemaCompatibilityLevelFetched(state),
 });
 
 const mapDispatchToProps = {

kafka-ui-react-app/src/components/Topics/List/ListItem.tsx

@@ -23,10 +23,8 @@ const ListItem: React.FC<ListItemProps> = ({
   clusterName,
   clearTopicMessages,
 }) => {
-  const [
-    isDeleteTopicConfirmationVisible,
-    setDeleteTopicConfirmationVisible,
-  ] = React.useState(false);
+  const [isDeleteTopicConfirmationVisible, setDeleteTopicConfirmationVisible] =
+    React.useState(false);
 
   const outOfSyncReplicas = React.useMemo(() => {
     if (partitions === undefined || partitions.length === 0) {

kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx

@@ -31,10 +31,8 @@ const Details: React.FC<Props> = ({
 }) => {
   const history = useHistory();
   const { isReadOnly } = React.useContext(ClusterContext);
-  const [
-    isDeleteTopicConfirmationVisible,
-    setDeleteTopicConfirmationVisible,
-  ] = React.useState(false);
+  const [isDeleteTopicConfirmationVisible, setDeleteTopicConfirmationVisible] =
+    React.useState(false);
   const deleteTopicHandler = React.useCallback(() => {
     deleteTopic(clusterName, topicName);
     history.push(clusterTopicsPath(clusterName));

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Messages.tsx

@@ -50,9 +50,8 @@ const Messages: React.FC<Props> = ({
   fetchTopicMessages,
 }) => {
   const [searchQuery, setSearchQuery] = React.useState<string>('');
-  const [searchTimestamp, setSearchTimestamp] = React.useState<Date | null>(
-    null
-  );
+  const [searchTimestamp, setSearchTimestamp] =
+    React.useState<Date | null>(null);
   const [filterProps, setFilterProps] = React.useState<FilterProps[]>([]);
   const [selectedSeekType, setSelectedSeekType] = React.useState<SeekType>(
     SeekType.OFFSET

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx

@@ -39,12 +39,11 @@ const CustomParamSelect: React.FC<CustomParamSelectProps> = ({
     return valid || 'Custom Parameter must be unique';
   };
 
-  const onChange = (inputName: string) => (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    trigger(inputName);
-    onNameChange(index, event.target.value);
-  };
+  const onChange =
+    (inputName: string) => (event: React.ChangeEvent<HTMLSelectElement>) => {
+      trigger(inputName);
+      onNameChange(index, event.target.value);
+    };
 
   return (
     <>

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx

@@ -35,13 +35,11 @@ const CustomParams: React.FC<Props> = ({ isSubmitting, config }) => {
       )
     : {};
 
-  const [
-    formCustomParams,
-    setFormCustomParams,
-  ] = React.useState<TopicFormCustomParams>({
-    byIndex,
-    allIndexes: Object.keys(byIndex),
-  });
+  const [formCustomParams, setFormCustomParams] =
+    React.useState<TopicFormCustomParams>({
+      byIndex,
+      allIndexes: Object.keys(byIndex),
+    });
 
   const onAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();

kafka-ui-react-app/src/redux/actions/thunks/brokers.ts

@@ -6,30 +6,29 @@ import * as actions from 'redux/actions/actions';
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const brokersApiClient = new BrokersApi(apiClientConf);
 
-export const fetchBrokers = (
-  clusterName: ClusterName
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.fetchBrokersAction.request());
-  try {
-    const payload = await brokersApiClient.getBrokers({ clusterName });
-    dispatch(actions.fetchBrokersAction.success(payload));
-  } catch (e) {
-    dispatch(actions.fetchBrokersAction.failure());
-  }
-};
+export const fetchBrokers =
+  (clusterName: ClusterName): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.fetchBrokersAction.request());
+    try {
+      const payload = await brokersApiClient.getBrokers({ clusterName });
+      dispatch(actions.fetchBrokersAction.success(payload));
+    } catch (e) {
+      dispatch(actions.fetchBrokersAction.failure());
+    }
+  };
 
-export const fetchBrokerMetrics = (
-  clusterName: ClusterName,
-  brokerId: BrokerId
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.fetchBrokerMetricsAction.request());
-  try {
-    const payload = await brokersApiClient.getBrokersMetrics({
-      clusterName,
-      id: brokerId,
-    });
-    dispatch(actions.fetchBrokerMetricsAction.success(payload));
-  } catch (e) {
-    dispatch(actions.fetchBrokerMetricsAction.failure());
-  }
-};
+export const fetchBrokerMetrics =
+  (clusterName: ClusterName, brokerId: BrokerId): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.fetchBrokerMetricsAction.request());
+    try {
+      const payload = await brokersApiClient.getBrokersMetrics({
+        clusterName,
+        id: brokerId,
+      });
+      dispatch(actions.fetchBrokerMetricsAction.success(payload));
+    } catch (e) {
+      dispatch(actions.fetchBrokerMetricsAction.failure());
+    }
+  };

kafka-ui-react-app/src/redux/actions/thunks/clusters.ts

@@ -16,26 +16,28 @@ export const fetchClustersList = (): PromiseThunkResult => async (dispatch) => {
   }
 };
 
-export const fetchClusterStats = (
-  clusterName: ClusterName
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.fetchClusterStatsAction.request());
-  try {
-    const payload = await clustersApiClient.getClusterStats({ clusterName });
-    dispatch(actions.fetchClusterStatsAction.success(payload));
-  } catch (e) {
-    dispatch(actions.fetchClusterStatsAction.failure());
-  }
-};
+export const fetchClusterStats =
+  (clusterName: ClusterName): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.fetchClusterStatsAction.request());
+    try {
+      const payload = await clustersApiClient.getClusterStats({ clusterName });
+      dispatch(actions.fetchClusterStatsAction.success(payload));
+    } catch (e) {
+      dispatch(actions.fetchClusterStatsAction.failure());
+    }
+  };
 
-export const fetchClusterMetrics = (
-  clusterName: ClusterName
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.fetchClusterMetricsAction.request());
-  try {
-    const payload = await clustersApiClient.getClusterMetrics({ clusterName });
-    dispatch(actions.fetchClusterMetricsAction.success(payload));
-  } catch (e) {
-    dispatch(actions.fetchClusterMetricsAction.failure());
-  }
-};
+export const fetchClusterMetrics =
+  (clusterName: ClusterName): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.fetchClusterMetricsAction.request());
+    try {
+      const payload = await clustersApiClient.getClusterMetrics({
+        clusterName,
+      });
+      dispatch(actions.fetchClusterMetricsAction.success(payload));
+    } catch (e) {
+      dispatch(actions.fetchClusterMetricsAction.failure());
+    }
+  };

kafka-ui-react-app/src/redux/actions/thunks/connectors.ts

@@ -11,76 +11,77 @@ import { getResponse } from 'lib/errorHandling';
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const kafkaConnectApiClient = new KafkaConnectApi(apiClientConf);
 
-export const fetchConnects = (
-  clusterName: ClusterName
-): PromiseThunkResult<void> => async (dispatch, getState) => {
-  dispatch(actions.fetchConnectsAction.request());
-  try {
-    const connects = await kafkaConnectApiClient.getConnects({ clusterName });
-    const state = getState().connect;
-    dispatch(actions.fetchConnectsAction.success({ ...state, connects }));
-  } catch (error) {
-    const response = await getResponse(error);
-    const alert: FailurePayload = {
-      subject: 'connects',
-      title: `Kafka Connect`,
-      response,
-    };
-    dispatch(actions.fetchConnectsAction.failure({ alert }));
-  }
-};
+export const fetchConnects =
+  (clusterName: ClusterName): PromiseThunkResult<void> =>
+  async (dispatch, getState) => {
+    dispatch(actions.fetchConnectsAction.request());
+    try {
+      const connects = await kafkaConnectApiClient.getConnects({ clusterName });
+      const state = getState().connect;
+      dispatch(actions.fetchConnectsAction.success({ ...state, connects }));
+    } catch (error) {
+      const response = await getResponse(error);
+      const alert: FailurePayload = {
+        subject: 'connects',
+        title: `Kafka Connect`,
+        response,
+      };
+      dispatch(actions.fetchConnectsAction.failure({ alert }));
+    }
+  };
 
-export const fetchConnectors = (
-  clusterName: ClusterName,
-  silent = false
-): PromiseThunkResult<void> => async (dispatch, getState) => {
-  if (!silent) dispatch(actions.fetchConnectorsAction.request());
-  try {
-    const connectors = await kafkaConnectApiClient.getAllConnectors({
-      clusterName,
-    });
-    const state = getState().connect;
-    dispatch(actions.fetchConnectorsAction.success({ ...state, connectors }));
-  } catch (error) {
-    const response = await getResponse(error);
-    const alert: FailurePayload = {
-      subject: [clusterName, 'connectors'].join('-'),
-      title: `Kafka Connect Connectors`,
-      response,
-    };
-    dispatch(actions.fetchConnectorsAction.failure({ alert }));
-  }
-};
+export const fetchConnectors =
+  (clusterName: ClusterName, silent = false): PromiseThunkResult<void> =>
+  async (dispatch, getState) => {
+    if (!silent) dispatch(actions.fetchConnectorsAction.request());
+    try {
+      const connectors = await kafkaConnectApiClient.getAllConnectors({
+        clusterName,
+      });
+      const state = getState().connect;
+      dispatch(actions.fetchConnectorsAction.success({ ...state, connectors }));
+    } catch (error) {
+      const response = await getResponse(error);
+      const alert: FailurePayload = {
+        subject: [clusterName, 'connectors'].join('-'),
+        title: `Kafka Connect Connectors`,
+        response,
+      };
+      dispatch(actions.fetchConnectorsAction.failure({ alert }));
+    }
+  };
 
-export const deleteConnector = (
-  clusterName: ClusterName,
-  connectName: string,
-  connectorName: string
-): PromiseThunkResult<void> => async (dispatch, getState) => {
-  dispatch(actions.deleteConnectorAction.request());
-  try {
-    await kafkaConnectApiClient.deleteConnector({
-      clusterName,
-      connectName,
-      connectorName,
-    });
-    const state = getState().connect;
-    dispatch(
-      actions.deleteConnectorAction.success({
-        ...state,
-        connectors: state?.connectors.filter(
-          ({ name }) => name !== connectorName
-        ),
-      })
-    );
-    dispatch(fetchConnectors(clusterName, true));
-  } catch (error) {
-    const response = await getResponse(error);
-    const alert: FailurePayload = {
-      subject: [clusterName, connectName, connectorName].join('-'),
-      title: `Kafka Connect Connector Delete`,
-      response,
-    };
-    dispatch(actions.deleteConnectorAction.failure({ alert }));
-  }
-};
+export const deleteConnector =
+  (
+    clusterName: ClusterName,
+    connectName: string,
+    connectorName: string
+  ): PromiseThunkResult<void> =>
+  async (dispatch, getState) => {
+    dispatch(actions.deleteConnectorAction.request());
+    try {
+      await kafkaConnectApiClient.deleteConnector({
+        clusterName,
+        connectName,
+        connectorName,
+      });
+      const state = getState().connect;
+      dispatch(
+        actions.deleteConnectorAction.success({
+          ...state,
+          connectors: state?.connectors.filter(
+            ({ name }) => name !== connectorName
+          ),
+        })
+      );
+      dispatch(fetchConnectors(clusterName, true));
+    } catch (error) {
+      const response = await getResponse(error);
+      const alert: FailurePayload = {
+        subject: [clusterName, connectName, connectorName].join('-'),
+        title: `Kafka Connect Connector Delete`,
+        response,
+      };
+      dispatch(actions.deleteConnectorAction.failure({ alert }));
+    }
+  };

kafka-ui-react-app/src/redux/actions/thunks/consumerGroups.ts

@@ -10,39 +10,40 @@ import * as actions from 'redux/actions/actions';
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const consumerGroupsApiClient = new ConsumerGroupsApi(apiClientConf);
 
-export const fetchConsumerGroupsList = (
-  clusterName: ClusterName
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.fetchConsumerGroupsAction.request());
-  try {
-    const consumerGroups = await consumerGroupsApiClient.getConsumerGroups({
-      clusterName,
-    });
-    dispatch(actions.fetchConsumerGroupsAction.success(consumerGroups));
-  } catch (e) {
-    dispatch(actions.fetchConsumerGroupsAction.failure());
-  }
-};
-
-export const fetchConsumerGroupDetails = (
-  clusterName: ClusterName,
-  consumerGroupID: ConsumerGroupID
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.fetchConsumerGroupDetailsAction.request());
-  try {
-    const consumerGroupDetails = await consumerGroupsApiClient.getConsumerGroup(
-      {
+export const fetchConsumerGroupsList =
+  (clusterName: ClusterName): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.fetchConsumerGroupsAction.request());
+    try {
+      const consumerGroups = await consumerGroupsApiClient.getConsumerGroups({
         clusterName,
-        id: consumerGroupID,
-      }
-    );
-    dispatch(
-      actions.fetchConsumerGroupDetailsAction.success({
-        consumerGroupID,
-        details: consumerGroupDetails,
-      })
-    );
-  } catch (e) {
-    dispatch(actions.fetchConsumerGroupDetailsAction.failure());
-  }
-};
+      });
+      dispatch(actions.fetchConsumerGroupsAction.success(consumerGroups));
+    } catch (e) {
+      dispatch(actions.fetchConsumerGroupsAction.failure());
+    }
+  };
+
+export const fetchConsumerGroupDetails =
+  (
+    clusterName: ClusterName,
+    consumerGroupID: ConsumerGroupID
+  ): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.fetchConsumerGroupDetailsAction.request());
+    try {
+      const consumerGroupDetails =
+        await consumerGroupsApiClient.getConsumerGroup({
+          clusterName,
+          id: consumerGroupID,
+        });
+      dispatch(
+        actions.fetchConsumerGroupDetailsAction.success({
+          consumerGroupID,
+          details: consumerGroupDetails,
+        })
+      );
+    } catch (e) {
+      dispatch(actions.fetchConsumerGroupDetailsAction.failure());
+    }
+  };

kafka-ui-react-app/src/redux/actions/thunks/schemas.ts

@@ -20,160 +20,164 @@ import { isEqual } from 'lodash';
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const schemasApiClient = new SchemasApi(apiClientConf);
 
-export const fetchSchemasByClusterName = (
-  clusterName: ClusterName
-): PromiseThunkResult<void> => async (dispatch) => {
-  dispatch(actions.fetchSchemasByClusterNameAction.request());
-  try {
-    const schemas = await schemasApiClient.getSchemas({ clusterName });
-    dispatch(actions.fetchSchemasByClusterNameAction.success(schemas));
-  } catch (e) {
-    dispatch(actions.fetchSchemasByClusterNameAction.failure());
-  }
-};
-
-export const fetchSchemaVersions = (
-  clusterName: ClusterName,
-  subject: SchemaName
-): PromiseThunkResult<void> => async (dispatch) => {
-  if (!subject) return;
-  dispatch(actions.fetchSchemaVersionsAction.request());
-  try {
-    const versions = await schemasApiClient.getAllVersionsBySubject({
-      clusterName,
-      subject,
-    });
-    dispatch(actions.fetchSchemaVersionsAction.success(versions));
-  } catch (e) {
-    dispatch(actions.fetchSchemaVersionsAction.failure());
-  }
-};
+export const fetchSchemasByClusterName =
+  (clusterName: ClusterName): PromiseThunkResult<void> =>
+  async (dispatch) => {
+    dispatch(actions.fetchSchemasByClusterNameAction.request());
+    try {
+      const schemas = await schemasApiClient.getSchemas({ clusterName });
+      dispatch(actions.fetchSchemasByClusterNameAction.success(schemas));
+    } catch (e) {
+      dispatch(actions.fetchSchemasByClusterNameAction.failure());
+    }
+  };
 
-export const fetchGlobalSchemaCompatibilityLevel = (
-  clusterName: ClusterName
-): PromiseThunkResult<void> => async (dispatch) => {
-  dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.request());
-  try {
-    const result = await schemasApiClient.getGlobalSchemaCompatibilityLevel({
-      clusterName,
-    });
-    dispatch(
-      actions.fetchGlobalSchemaCompatibilityLevelAction.success(
-        result.compatibility
-      )
-    );
-  } catch (e) {
-    dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.failure());
-  }
-};
+export const fetchSchemaVersions =
+  (clusterName: ClusterName, subject: SchemaName): PromiseThunkResult<void> =>
+  async (dispatch) => {
+    if (!subject) return;
+    dispatch(actions.fetchSchemaVersionsAction.request());
+    try {
+      const versions = await schemasApiClient.getAllVersionsBySubject({
+        clusterName,
+        subject,
+      });
+      dispatch(actions.fetchSchemaVersionsAction.success(versions));
+    } catch (e) {
+      dispatch(actions.fetchSchemaVersionsAction.failure());
+    }
+  };
 
-export const updateGlobalSchemaCompatibilityLevel = (
-  clusterName: ClusterName,
-  compatibilityLevel: CompatibilityLevelCompatibilityEnum
-): PromiseThunkResult<void> => async (dispatch) => {
-  dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.request());
-  try {
-    await schemasApiClient.updateGlobalSchemaCompatibilityLevel({
-      clusterName,
-      compatibilityLevel: { compatibility: compatibilityLevel },
-    });
-    dispatch(
-      actions.updateGlobalSchemaCompatibilityLevelAction.success(
-        compatibilityLevel
-      )
-    );
-  } catch (e) {
-    dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.failure());
-  }
-};
+export const fetchGlobalSchemaCompatibilityLevel =
+  (clusterName: ClusterName): PromiseThunkResult<void> =>
+  async (dispatch) => {
+    dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.request());
+    try {
+      const result = await schemasApiClient.getGlobalSchemaCompatibilityLevel({
+        clusterName,
+      });
+      dispatch(
+        actions.fetchGlobalSchemaCompatibilityLevelAction.success(
+          result.compatibility
+        )
+      );
+    } catch (e) {
+      dispatch(actions.fetchGlobalSchemaCompatibilityLevelAction.failure());
+    }
+  };
 
-export const createSchema = (
-  clusterName: ClusterName,
-  newSchemaSubject: NewSchemaSubject
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.createSchemaAction.request());
-  try {
-    const schema: SchemaSubject = await schemasApiClient.createNewSchema({
-      clusterName,
-      newSchemaSubject,
-    });
-    dispatch(actions.createSchemaAction.success(schema));
-  } catch (error) {
-    const response = await getResponse(error);
-    const alert: FailurePayload = {
-      subject: ['schema', newSchemaSubject.subject].join('-'),
-      title: `Schema ${newSchemaSubject.subject}`,
-      response,
-    };
-    dispatch(actions.createSchemaAction.failure({ alert }));
-    throw error;
-  }
-};
+export const updateGlobalSchemaCompatibilityLevel =
+  (
+    clusterName: ClusterName,
+    compatibilityLevel: CompatibilityLevelCompatibilityEnum
+  ): PromiseThunkResult<void> =>
+  async (dispatch) => {
+    dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.request());
+    try {
+      await schemasApiClient.updateGlobalSchemaCompatibilityLevel({
+        clusterName,
+        compatibilityLevel: { compatibility: compatibilityLevel },
+      });
+      dispatch(
+        actions.updateGlobalSchemaCompatibilityLevelAction.success(
+          compatibilityLevel
+        )
+      );
+    } catch (e) {
+      dispatch(actions.updateGlobalSchemaCompatibilityLevelAction.failure());
+    }
+  };
 
-export const updateSchema = (
-  latestSchema: SchemaSubject,
-  newSchema: string,
-  newSchemaType: SchemaType,
-  newCompatibilityLevel: CompatibilityLevelCompatibilityEnum,
-  clusterName: string,
-  subject: string
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.updateSchemaAction.request());
-  try {
-    let schema: SchemaSubject = latestSchema;
-    if (
-      (newSchema &&
-        !isEqual(JSON.parse(latestSchema.schema), JSON.parse(newSchema))) ||
-      newSchemaType !== latestSchema.schemaType
-    ) {
-      schema = await schemasApiClient.createNewSchema({
+export const createSchema =
+  (
+    clusterName: ClusterName,
+    newSchemaSubject: NewSchemaSubject
+  ): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.createSchemaAction.request());
+    try {
+      const schema: SchemaSubject = await schemasApiClient.createNewSchema({
         clusterName,
-        newSchemaSubject: {
-          ...latestSchema,
-          schema: newSchema || latestSchema.schema,
-          schemaType: newSchemaType || latestSchema.schemaType,
-        },
+        newSchemaSubject,
       });
+      dispatch(actions.createSchemaAction.success(schema));
+    } catch (error) {
+      const response = await getResponse(error);
+      const alert: FailurePayload = {
+        subject: ['schema', newSchemaSubject.subject].join('-'),
+        title: `Schema ${newSchemaSubject.subject}`,
+        response,
+      };
+      dispatch(actions.createSchemaAction.failure({ alert }));
+      throw error;
+    }
+  };
+
+export const updateSchema =
+  (
+    latestSchema: SchemaSubject,
+    newSchema: string,
+    newSchemaType: SchemaType,
+    newCompatibilityLevel: CompatibilityLevelCompatibilityEnum,
+    clusterName: string,
+    subject: string
+  ): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.updateSchemaAction.request());
+    try {
+      let schema: SchemaSubject = latestSchema;
+      if (
+        (newSchema &&
+          !isEqual(JSON.parse(latestSchema.schema), JSON.parse(newSchema))) ||
+        newSchemaType !== latestSchema.schemaType
+      ) {
+        schema = await schemasApiClient.createNewSchema({
+          clusterName,
+          newSchemaSubject: {
+            ...latestSchema,
+            schema: newSchema || latestSchema.schema,
+            schemaType: newSchemaType || latestSchema.schemaType,
+          },
+        });
+      }
+      if (newCompatibilityLevel !== latestSchema.compatibilityLevel) {
+        await schemasApiClient.updateSchemaCompatibilityLevel({
+          clusterName,
+          subject,
+          compatibilityLevel: {
+            compatibility: newCompatibilityLevel,
+          },
+        });
+      }
+      actions.updateSchemaAction.success(schema);
+    } catch (e) {
+      const response = await getResponse(e);
+      const alert: FailurePayload = {
+        subject: ['schema', subject].join('-'),
+        title: `Schema ${subject}`,
+        response,
+      };
+      dispatch(actions.updateSchemaAction.failure({ alert }));
+      throw e;
     }
-    if (newCompatibilityLevel !== latestSchema.compatibilityLevel) {
-      await schemasApiClient.updateSchemaCompatibilityLevel({
+  };
+export const deleteSchema =
+  (clusterName: ClusterName, subject: string): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.deleteSchemaAction.request());
+    try {
+      await schemasApiClient.deleteSchema({
         clusterName,
         subject,
-        compatibilityLevel: {
-          compatibility: newCompatibilityLevel,
-        },
       });
+      dispatch(actions.deleteSchemaAction.success(subject));
+    } catch (error) {
+      const response = await getResponse(error);
+      const alert: FailurePayload = {
+        subject: ['schema', subject].join('-'),
+        title: `Schema ${subject}`,
+        response,
+      };
+      dispatch(actions.deleteSchemaAction.failure({ alert }));
     }
-    actions.updateSchemaAction.success(schema);
-  } catch (e) {
-    const response = await getResponse(e);
-    const alert: FailurePayload = {
-      subject: ['schema', subject].join('-'),
-      title: `Schema ${subject}`,
-      response,
-    };
-    dispatch(actions.updateSchemaAction.failure({ alert }));
-    throw e;
-  }
-};
-export const deleteSchema = (
-  clusterName: ClusterName,
-  subject: string
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.deleteSchemaAction.request());
-  try {
-    await schemasApiClient.deleteSchema({
-      clusterName,
-      subject,
-    });
-    dispatch(actions.deleteSchemaAction.success(subject));
-  } catch (error) {
-    const response = await getResponse(error);
-    const alert: FailurePayload = {
-      subject: ['schema', subject].join('-'),
-      title: `Schema ${subject}`,
-      response,
-    };
-    dispatch(actions.deleteSchemaAction.failure({ alert }));
-  }
-};
+  };

kafka-ui-react-app/src/redux/actions/thunks/topics.ts

@@ -32,136 +32,138 @@ export interface FetchTopicsListParams {
   perPage?: number;
 }
 
-export const fetchTopicsList = (
-  params: FetchTopicsListParams
-): PromiseThunkResult => async (dispatch, getState) => {
-  dispatch(actions.fetchTopicsListAction.request());
-  try {
-    const { topics, pageCount } = await topicsApiClient.getTopics(params);
-    const newState = (topics || []).reduce(
-      (memo: TopicsState, topic) => ({
-        ...memo,
-        byName: {
-          ...memo.byName,
-          [topic.name]: {
-            ...memo.byName[topic.name],
-            ...topic,
-            id: v4(),
+export const fetchTopicsList =
+  (params: FetchTopicsListParams): PromiseThunkResult =>
+  async (dispatch, getState) => {
+    dispatch(actions.fetchTopicsListAction.request());
+    try {
+      const { topics, pageCount } = await topicsApiClient.getTopics(params);
+      const newState = (topics || []).reduce(
+        (memo: TopicsState, topic) => ({
+          ...memo,
+          byName: {
+            ...memo.byName,
+            [topic.name]: {
+              ...memo.byName[topic.name],
+              ...topic,
+              id: v4(),
+            },
           },
-        },
-        allNames: [...memo.allNames, topic.name],
-      }),
-      {
-        ...getState().topics,
-        allNames: [],
-        totalPages: pageCount || 1,
-      }
-    );
-    dispatch(actions.fetchTopicsListAction.success(newState));
-  } catch (e) {
-    dispatch(actions.fetchTopicsListAction.failure());
-  }
-};
+          allNames: [...memo.allNames, topic.name],
+        }),
+        {
+          ...getState().topics,
+          allNames: [],
+          totalPages: pageCount || 1,
+        }
+      );
+      dispatch(actions.fetchTopicsListAction.success(newState));
+    } catch (e) {
+      dispatch(actions.fetchTopicsListAction.failure());
+    }
+  };
 
-export const fetchTopicMessages = (
-  clusterName: ClusterName,
-  topicName: TopicName,
-  queryParams: Partial<TopicMessageQueryParams>
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.fetchTopicMessagesAction.request());
-  try {
-    const messages = await messagesApiClient.getTopicMessages({
-      clusterName,
-      topicName,
-      ...queryParams,
-    });
-    dispatch(actions.fetchTopicMessagesAction.success(messages));
-  } catch (e) {
-    dispatch(actions.fetchTopicMessagesAction.failure());
-  }
-};
+export const fetchTopicMessages =
+  (
+    clusterName: ClusterName,
+    topicName: TopicName,
+    queryParams: Partial<TopicMessageQueryParams>
+  ): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.fetchTopicMessagesAction.request());
+    try {
+      const messages = await messagesApiClient.getTopicMessages({
+        clusterName,
+        topicName,
+        ...queryParams,
+      });
+      dispatch(actions.fetchTopicMessagesAction.success(messages));
+    } catch (e) {
+      dispatch(actions.fetchTopicMessagesAction.failure());
+    }
+  };
 
-export const clearTopicMessages = (
-  clusterName: ClusterName,
-  topicName: TopicName,
-  partitions?: number[]
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.clearMessagesTopicAction.request());
-  try {
-    await messagesApiClient.deleteTopicMessages({
-      clusterName,
-      topicName,
-      partitions,
-    });
-    dispatch(actions.clearMessagesTopicAction.success(topicName));
-  } catch (e) {
-    const response = await getResponse(e);
-    const alert: FailurePayload = {
-      subject: [clusterName, topicName, partitions].join('-'),
-      title: `Clear Topic Messages`,
-      response,
-    };
-    dispatch(actions.clearMessagesTopicAction.failure({ alert }));
-  }
-};
+export const clearTopicMessages =
+  (
+    clusterName: ClusterName,
+    topicName: TopicName,
+    partitions?: number[]
+  ): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.clearMessagesTopicAction.request());
+    try {
+      await messagesApiClient.deleteTopicMessages({
+        clusterName,
+        topicName,
+        partitions,
+      });
+      dispatch(actions.clearMessagesTopicAction.success(topicName));
+    } catch (e) {
+      const response = await getResponse(e);
+      const alert: FailurePayload = {
+        subject: [clusterName, topicName, partitions].join('-'),
+        title: `Clear Topic Messages`,
+        response,
+      };
+      dispatch(actions.clearMessagesTopicAction.failure({ alert }));
+    }
+  };
 
-export const fetchTopicDetails = (
-  clusterName: ClusterName,
-  topicName: TopicName
-): PromiseThunkResult => async (dispatch, getState) => {
-  dispatch(actions.fetchTopicDetailsAction.request());
-  try {
-    const topicDetails = await topicsApiClient.getTopicDetails({
-      clusterName,
-      topicName,
-    });
-    const state = getState().topics;
-    const newState = {
-      ...state,
-      byName: {
-        ...state.byName,
-        [topicName]: {
-          ...state.byName[topicName],
-          ...topicDetails,
+export const fetchTopicDetails =
+  (clusterName: ClusterName, topicName: TopicName): PromiseThunkResult =>
+  async (dispatch, getState) => {
+    dispatch(actions.fetchTopicDetailsAction.request());
+    try {
+      const topicDetails = await topicsApiClient.getTopicDetails({
+        clusterName,
+        topicName,
+      });
+      const state = getState().topics;
+      const newState = {
+        ...state,
+        byName: {
+          ...state.byName,
+          [topicName]: {
+            ...state.byName[topicName],
+            ...topicDetails,
+          },
         },
-      },
-    };
-    dispatch(actions.fetchTopicDetailsAction.success(newState));
-  } catch (e) {
-    dispatch(actions.fetchTopicDetailsAction.failure());
-  }
-};
+      };
+      dispatch(actions.fetchTopicDetailsAction.success(newState));
+    } catch (e) {
+      dispatch(actions.fetchTopicDetailsAction.failure());
+    }
+  };
 
-export const fetchTopicConfig = (
-  clusterName: ClusterName,
-  topicName: TopicName
-): PromiseThunkResult => async (dispatch, getState) => {
-  dispatch(actions.fetchTopicConfigAction.request());
-  try {
-    const config = await topicsApiClient.getTopicConfigs({
-      clusterName,
-      topicName,
-    });
+export const fetchTopicConfig =
+  (clusterName: ClusterName, topicName: TopicName): PromiseThunkResult =>
+  async (dispatch, getState) => {
+    dispatch(actions.fetchTopicConfigAction.request());
+    try {
+      const config = await topicsApiClient.getTopicConfigs({
+        clusterName,
+        topicName,
+      });
 
-    const state = getState().topics;
-    const newState = {
-      ...state,
-      byName: {
-        ...state.byName,
-        [topicName]: {
-          ...state.byName[topicName],
-          config: config.map((inputConfig) => ({
-            ...inputConfig,
-          })),
+      const state = getState().topics;
+      const newState = {
+        ...state,
+        byName: {
+          ...state.byName,
+          [topicName]: {
+            ...state.byName[topicName],
+            config: config.map((inputConfig) => ({
+              ...inputConfig,
+            })),
+          },
         },
-      },
-    };
+      };
 
-    dispatch(actions.fetchTopicConfigAction.success(newState));
-  } catch (e) {
-    dispatch(actions.fetchTopicConfigAction.failure());
-  }
-};
+      dispatch(actions.fetchTopicConfigAction.success(newState));
+    } catch (e) {
+      dispatch(actions.fetchTopicConfigAction.failure());
+    }
+  };
 
 const formatTopicCreation = (form: TopicFormDataRaw): TopicCreation => {
   const {
@@ -229,84 +231,84 @@ const formatTopicUpdate = (form: TopicFormDataRaw): TopicUpdate => {
   };
 };
 
-export const createTopic = (
-  clusterName: ClusterName,
-  form: TopicFormDataRaw
-): PromiseThunkResult => async (dispatch, getState) => {
-  dispatch(actions.createTopicAction.request());
-  try {
-    const topic: Topic = await topicsApiClient.createTopic({
-      clusterName,
-      topicCreation: formatTopicCreation(form),
-    });
+export const createTopic =
+  (clusterName: ClusterName, form: TopicFormDataRaw): PromiseThunkResult =>
+  async (dispatch, getState) => {
+    dispatch(actions.createTopicAction.request());
+    try {
+      const topic: Topic = await topicsApiClient.createTopic({
+        clusterName,
+        topicCreation: formatTopicCreation(form),
+      });
 
-    const state = getState().topics;
-    const newState = {
-      ...state,
-      byName: {
-        ...state.byName,
-        [topic.name]: {
-          ...topic,
+      const state = getState().topics;
+      const newState = {
+        ...state,
+        byName: {
+          ...state.byName,
+          [topic.name]: {
+            ...topic,
+          },
         },
-      },
-      allNames: [...state.allNames, topic.name],
-    };
+        allNames: [...state.allNames, topic.name],
+      };
 
-    dispatch(actions.createTopicAction.success(newState));
-  } catch (error) {
-    const response = await getResponse(error);
-    const alert: FailurePayload = {
-      subject: ['schema', form.name].join('-'),
-      title: `Schema ${form.name}`,
-      response,
-    };
-    dispatch(actions.createTopicAction.failure({ alert }));
-  }
-};
+      dispatch(actions.createTopicAction.success(newState));
+    } catch (error) {
+      const response = await getResponse(error);
+      const alert: FailurePayload = {
+        subject: ['schema', form.name].join('-'),
+        title: `Schema ${form.name}`,
+        response,
+      };
+      dispatch(actions.createTopicAction.failure({ alert }));
+    }
+  };
 
-export const updateTopic = (
-  clusterName: ClusterName,
-  topicName: TopicName,
-  form: TopicFormDataRaw
-): PromiseThunkResult => async (dispatch, getState) => {
-  dispatch(actions.updateTopicAction.request());
-  try {
-    const topic: Topic = await topicsApiClient.updateTopic({
-      clusterName,
-      topicName,
-      topicUpdate: formatTopicUpdate(form),
-    });
+export const updateTopic =
+  (
+    clusterName: ClusterName,
+    topicName: TopicName,
+    form: TopicFormDataRaw
+  ): PromiseThunkResult =>
+  async (dispatch, getState) => {
+    dispatch(actions.updateTopicAction.request());
+    try {
+      const topic: Topic = await topicsApiClient.updateTopic({
+        clusterName,
+        topicName,
+        topicUpdate: formatTopicUpdate(form),
+      });
 
-    const state = getState().topics;
-    const newState = {
-      ...state,
-      byName: {
-        ...state.byName,
-        [topic.name]: {
-          ...state.byName[topic.name],
-          ...topic,
+      const state = getState().topics;
+      const newState = {
+        ...state,
+        byName: {
+          ...state.byName,
+          [topic.name]: {
+            ...state.byName[topic.name],
+            ...topic,
+          },
         },
-      },
-    };
+      };
 
-    dispatch(actions.updateTopicAction.success(newState));
-  } catch (e) {
-    dispatch(actions.updateTopicAction.failure());
-  }
-};
+      dispatch(actions.updateTopicAction.success(newState));
+    } catch (e) {
+      dispatch(actions.updateTopicAction.failure());
+    }
+  };
 
-export const deleteTopic = (
-  clusterName: ClusterName,
-  topicName: TopicName
-): PromiseThunkResult => async (dispatch) => {
-  dispatch(actions.deleteTopicAction.request());
-  try {
-    await topicsApiClient.deleteTopic({
-      clusterName,
-      topicName,
-    });
-    dispatch(actions.deleteTopicAction.success(topicName));
-  } catch (e) {
-    dispatch(actions.deleteTopicAction.failure());
-  }
-};
+export const deleteTopic =
+  (clusterName: ClusterName, topicName: TopicName): PromiseThunkResult =>
+  async (dispatch) => {
+    dispatch(actions.deleteTopicAction.request());
+    try {
+      await topicsApiClient.deleteTopic({
+        clusterName,
+        topicName,
+      });
+      dispatch(actions.deleteTopicAction.success(topicName));
+    } catch (e) {
+      dispatch(actions.deleteTopicAction.failure());
+    }
+  };

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

@@ -18,12 +18,10 @@ export const getTopicListTotalPages = (state: RootState) =>
   topicsState(state).totalPages;
 
 const getTopicListFetchingStatus = createFetchingSelector('GET_TOPICS');
-const getTopicDetailsFetchingStatus = createFetchingSelector(
-  'GET_TOPIC_DETAILS'
-);
-const getTopicMessagesFetchingStatus = createFetchingSelector(
-  'GET_TOPIC_MESSAGES'
-);
+const getTopicDetailsFetchingStatus =
+  createFetchingSelector('GET_TOPIC_DETAILS');
+const getTopicMessagesFetchingStatus =
+  createFetchingSelector('GET_TOPIC_MESSAGES');
 const getTopicConfigFetchingStatus = createFetchingSelector('GET_TOPIC_CONFIG');
 const getTopicCreationStatus = createFetchingSelector('POST_TOPIC');
 const getTopicUpdateStatus = createFetchingSelector('PATCH_TOPIC');

kafka-ui-react-app/src/redux/store/configureStore/mockStoreCreator.ts

@@ -6,9 +6,7 @@ import { RootState, Action } from 'redux/interfaces';
 const middlewares: Array<Middleware> = [thunk];
 type DispatchExts = ThunkDispatch<RootState, undefined, Action>;
 
-const mockStoreCreator: MockStoreCreator<
-  RootState,
-  DispatchExts
-> = configureMockStore<RootState, DispatchExts>(middlewares);
+const mockStoreCreator: MockStoreCreator<RootState, DispatchExts> =
+  configureMockStore<RootState, DispatchExts>(middlewares);
 
 export default mockStoreCreator();