Adds extra eslint rules

kafka-ui-react-app/.eslintrc.json

@@ -35,8 +35,12 @@
     "@typescript-eslint/no-explicit-any": "error",
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "import/no-cycle": "error",
-    "import/order": ["error", {"groups": ["builtin", "external", "parent", "sibling", "index"]}],
-    "import/no-relative-parent-imports": "error"
+    "import/order": ["error", {
+      "groups": ["builtin", "external", "parent", "sibling", "index"],
+      "newlines-between": "always"
+    }],
+    "import/no-relative-parent-imports": "error",
+    "no-debugger": "warn"
   },
   "overrides": [
     {

kafka-ui-react-app/src/components/App.tsx

@@ -1,16 +1,16 @@
-import './App.scss';
 import React from 'react';
 import cx from 'classnames';
 import { Cluster } from 'generated-sources';
 import { Switch, Route, useLocation } from 'react-router-dom';
 import { GIT_TAG, GIT_COMMIT } from 'lib/constants';
 import { Alerts } from 'redux/interfaces';
-import Nav from './Nav/Nav';
-import PageLoader from './common/PageLoader/PageLoader';
-import Dashboard from './Dashboard/Dashboard';
-import ClusterPage from './Cluster/Cluster';
-import Version from './Version/Version';
-import Alert from './Alert/Alert';
+import Nav from 'components/Nav/Nav';
+import PageLoader from 'components/common/PageLoader/PageLoader';
+import Dashboard from 'components/Dashboard/Dashboard';
+import ClusterPage from 'components/Cluster/Cluster';
+import Version from 'components/Version/Version';
+import Alert from 'components/Alert/Alert';
+import 'components/App.scss';
 
 export interface AppProps {
   isClusterListFetched?: boolean;

kafka-ui-react-app/src/components/AppContainer.tsx

@@ -6,7 +6,7 @@ import {
 } from 'redux/reducers/clusters/selectors';
 import { getAlerts } from 'redux/reducers/alerts/selectors';
 import { RootState } from 'redux/interfaces';
-import App from './App';
+import App from 'components/App';
 
 const mapStateToProps = (state: RootState) => ({
   isClusterListFetched: getIsClusterListFetched(state),

kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts

@@ -13,7 +13,7 @@ import {
   getUnderReplicatedPartitionCount,
   getDiskUsage,
 } from 'redux/reducers/brokers/selectors';
-import Brokers from './Brokers';
+import Brokers from 'components/Brokers/Brokers';
 
 const mapStateToProps = (state: RootState) => ({
   isFetched: getIsBrokerListFetched(state),

kafka-ui-react-app/src/components/Connect/Connect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { clusterConnectorsPath } from 'lib/paths';
-import ListContainer from './List/ListContainer';
+import ListContainer from 'components/Connect/List/ListContainer';
 
 const Connect: React.FC = () => (
   <Switch>

kafka-ui-react-app/src/components/Connect/List/List.tsx

@@ -7,7 +7,7 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import Indicator from 'components/common/Dashboard/Indicator';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import ListItem from './ListItem';
+import ListItem from 'components/Connect/List/ListItem';
 
 export interface ListProps {
   areConnectsFetching: boolean;

kafka-ui-react-app/src/components/Connect/List/ListContainer.ts

@@ -10,7 +10,7 @@ import {
   getAreConnectsFetching,
   getAreConnectorsFetching,
 } from 'redux/reducers/connect/selectors';
-import List from './List';
+import List from 'components/Connect/List/List';
 
 const mapStateToProps = (state: RootState) => ({
   areConnectsFetching: getAreConnectsFetching(state),

kafka-ui-react-app/src/components/ConsumerGroups/ConsumersGroupsContainer.ts

@@ -3,6 +3,7 @@ import { fetchConsumerGroupsList } from 'redux/actions';
 import { RootState, ClusterName } from 'redux/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
 import { getIsConsumerGroupsListFetched } from 'redux/reducers/consumerGroups/selectors';
+
 import ConsumerGroups from './ConsumerGroups';
 
 interface RouteProps {

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -8,8 +8,8 @@ import {
   ConsumerGroupDetails,
   ConsumerTopicPartitionDetail,
 } from 'generated-sources';
-
 import PageLoader from 'components/common/PageLoader/PageLoader';
+
 import ListItem from './ListItem';
 
 interface Props extends ConsumerGroup, ConsumerGroupDetails {

kafka-ui-react-app/src/components/ConsumerGroups/Details/DetailsContainer.ts

@@ -7,6 +7,7 @@ import {
 } from 'redux/reducers/consumerGroups/selectors';
 import { ConsumerGroupID } from 'redux/interfaces/consumerGroup';
 import { fetchConsumerGroupDetails } from 'redux/actions/thunks';
+
 import Details from './Details';
 
 interface RouteProps {

kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ClusterName } from 'redux/interfaces';
 import { ConsumerGroup } from 'generated-sources';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+
 import ListItem from './ListItem';
 
 interface Props {

kafka-ui-react-app/src/components/ConsumerGroups/List/ListContainer.ts

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { ClusterName, RootState } from 'redux/interfaces';
 import { getConsumerGroupsList } from 'redux/reducers/consumerGroups/selectors';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+
 import List from './List';
 
 interface RouteProps {

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { chunk } from 'lodash';
 import { v4 } from 'uuid';
-
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
 import { Cluster } from 'generated-sources';
+
 import ClusterWidget from './ClusterWidget';
 
 interface Props {

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidgetContainer.ts

@@ -5,6 +5,7 @@ import {
   getOfflineClusters,
 } from 'redux/reducers/clusters/selectors';
 import { RootState } from 'redux/interfaces';
+
 import ClustersWidget from './ClustersWidget';
 
 const mapStateToProps = (state: RootState) => ({

kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClusterWidget.spec.tsx

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import { ServerStatus } from 'generated-sources';
 import { clusterBrokersPath, clusterTopicsPath } from 'lib/paths';
 import ClusterWidget from 'components/Dashboard/ClustersWidget/ClusterWidget';
+
 import { offlineCluster, onlineCluster } from './fixtures';
 
 describe('ClusterWidget', () => {

kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+
 import ClustersWidgetContainer from './ClustersWidget/ClustersWidgetContainer';
 
 const Dashboard: React.FC = () => (

kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx

@@ -8,6 +8,7 @@ import {
   clusterSchemasPath,
   clusterConnectorsPath,
 } from 'lib/paths';
+
 import DefaultClusterIcon from './DefaultClusterIcon';
 import ClusterStatusIcon from './ClusterStatusIcon';
 

kafka-ui-react-app/src/components/Nav/Nav.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
 import { Cluster } from 'generated-sources';
+
 import ClusterMenu from './ClusterMenu';
 
 interface Props {

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
+import { useHistory } from 'react-router';
 import { SchemaSubject } from 'generated-sources';
 import { ClusterName, SchemaName } from 'redux/interfaces';
 import { clusterSchemasPath } from 'lib/paths';
-import ClusterContext from 'components/contexts/ClusterContext';
-import { useHistory } from 'react-router';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+import ClusterContext from 'components/contexts/ClusterContext';
+import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
 import PageLoader from 'components/common/PageLoader/PageLoader';
+
 import SchemaVersion from './SchemaVersion';
 import LatestVersionItem from './LatestVersionItem';
 
@@ -32,15 +34,20 @@ const Details: React.FC<DetailsProps> = ({
   isFetched,
 }) => {
   const { isReadOnly } = React.useContext(ClusterContext);
+  const [
+    isDeleteSchemaConfirmationVisible,
+    setDeleteSchemaConfirmationVisible,
+  ] = React.useState(false);
+
   React.useEffect(() => {
     fetchSchemaVersions(clusterName, subject);
   }, [fetchSchemaVersions, clusterName]);
 
   const history = useHistory();
-  const onDelete = async () => {
-    await deleteSchema(clusterName, subject);
+  const onDelete = React.useCallback(() => {
+    deleteSchema(clusterName, subject);
     history.push(clusterSchemasPath(clusterName));
-  };
+  }, [deleteSchema, clusterName, subject]);
 
   return (
     <div className="section">
@@ -84,10 +91,17 @@ const Details: React.FC<DetailsProps> = ({
                     className="button is-danger is-small level-item"
                     type="button"
                     title="in development"
-                    onClick={onDelete}
+                    onClick={() => setDeleteSchemaConfirmationVisible(true)}
                   >
                     Remove
                   </button>
+                  <ConfirmationModal
+                    isOpen={isDeleteSchemaConfirmationVisible}
+                    onCancel={() => setDeleteSchemaConfirmationVisible(false)}
+                    onConfirm={onDelete}
+                  >
+                    Are you sure want to remove <b>{subject}</b> schema?
+                  </ConfirmationModal>
                 </div>
               )}
             </div>

kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts

@@ -7,6 +7,7 @@ import {
   getSortedSchemaVersions,
 } from 'redux/reducers/schemas/selectors';
 import { fetchSchemaVersions, deleteSchema } from 'redux/actions';
+
 import Details from './Details';
 
 interface RouteProps {

kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { shallow, mount } from 'enzyme';
+import { shallow, mount, ReactWrapper } from 'enzyme';
 import configureStore from 'redux/store/configureStore';
 import { StaticRouter } from 'react-router';
 import ClusterContext from 'components/contexts/ClusterContext';
 import DetailsContainer from 'components/Schemas/Details/DetailsContainer';
 import Details, { DetailsProps } from 'components/Schemas/Details/Details';
+
 import { schema, versions } from './fixtures';
 
 const clusterName = 'testCluster';
 const fetchSchemaVersionsMock = jest.fn();
 
+jest.mock(
+  'components/common/ConfirmationModal/ConfirmationModal',
+  () => 'mock-ConfirmationModal'
+);
+
 describe('Details', () => {
   describe('Container', () => {
     const store = configureStore();
@@ -92,29 +98,53 @@ describe('Details', () => {
       });
 
       describe('when schema has versions', () => {
-        const wrapper = shallow(setupWrapper({ versions }));
-
         it('renders table heading with SchemaVersion', () => {
+          const wrapper = shallow(setupWrapper({ versions }));
           expect(wrapper.exists('LatestVersionItem')).toBeTruthy();
           expect(wrapper.exists('button')).toBeTruthy();
           expect(wrapper.exists('thead')).toBeTruthy();
           expect(wrapper.find('SchemaVersion').length).toEqual(2);
         });
 
-        it('calls deleteSchema on button click', () => {
-          const mockDelete = jest.fn();
-          const component = mount(
-            <StaticRouter>
-              {setupWrapper({ versions, deleteSchema: mockDelete })}
-            </StaticRouter>
-          );
-          component.find('button').at(1).simulate('click');
-          expect(mockDelete).toHaveBeenCalledTimes(1);
-        });
-
         it('matches snapshot', () => {
           expect(shallow(setupWrapper({ versions }))).toMatchSnapshot();
         });
+
+        describe('confirmation', () => {
+          let wrapper: ReactWrapper;
+          let confirmationModal: ReactWrapper;
+          const mockDelete = jest.fn();
+
+          const findConfirmationModal = () =>
+            wrapper.find('mock-ConfirmationModal');
+
+          beforeEach(() => {
+            wrapper = mount(
+              <StaticRouter>
+                {setupWrapper({ versions, deleteSchema: mockDelete })}
+              </StaticRouter>
+            );
+            confirmationModal = findConfirmationModal();
+          });
+
+          it('calls deleteSchema after confirmation', () => {
+            expect(confirmationModal.prop('isOpen')).toBeFalsy();
+            wrapper.find('button').at(1).simulate('click');
+            expect(findConfirmationModal().prop('isOpen')).toBeTruthy();
+            // @ts-expect-error lack of typing of enzyme#invoke
+            confirmationModal.invoke('onConfirm')();
+            expect(mockDelete).toHaveBeenCalledTimes(1);
+          });
+
+          it('calls deleteSchema after confirmation', () => {
+            expect(confirmationModal.prop('isOpen')).toBeFalsy();
+            wrapper.find('button').at(1).simulate('click');
+            expect(findConfirmationModal().prop('isOpen')).toBeTruthy();
+            // @ts-expect-error lack of typing of enzyme#invoke
+            wrapper.find('mock-ConfirmationModal').invoke('onCancel')();
+            expect(findConfirmationModal().prop('isOpen')).toBeFalsy();
+          });
+        });
       });
 
       describe('when the readonly flag is set', () => {

kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import LatestVersionItem from 'components/Schemas/Details/LatestVersionItem';
+
 import { schema } from './fixtures';
 
 describe('LatestVersionItem', () => {

kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import SchemaVersion from 'components/Schemas/Details/SchemaVersion';
+
 import { versions } from './fixtures';
 
 describe('SchemaVersion', () => {