Improve eslint configuration

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

@@ -33,7 +33,10 @@
     "jsx-a11y/label-has-associated-control": "off",
     "import/prefer-default-export": "off",
     "@typescript-eslint/no-explicit-any": "error",
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+    "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"
   },
   "overrides": [
     {

kafka-ui-react-app/src/components/Alert/__tests__/Alert.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Alert as AlertProps } from 'redux/interfaces';
 import * as actions from 'redux/actions/actions';
-import Alert from '../Alert';
+import Alert from 'components/Alert/Alert';
 
 const id = 'test-id';
 const title = 'My Alert Title';

kafka-ui-react-app/src/components/Cluster/__tests__/Cluster.spec.tsx

@@ -6,7 +6,7 @@ import { ClusterFeaturesEnum } from 'generated-sources';
 import { fetchClusterListAction } from 'redux/actions';
 import configureStore from 'redux/store/configureStore';
 import { onlineClusterPayload } from 'redux/reducers/clusters/__test__/fixtures';
-import Cluster from '../Cluster';
+import Cluster from 'components/Cluster/Cluster';
 
 const store = configureStore();
 

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

@@ -10,7 +10,7 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
-import StatusTag from '../StatusTag';
+import StatusTag from 'components/Connect/StatusTag';
 
 export interface ListItemProps {
   clusterName: ClusterName;

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

@@ -8,9 +8,8 @@ import ClusterContext, {
   ContextProps,
   initialValue,
 } from 'components/contexts/ClusterContext';
-
-import ListContainer from '../ListContainer';
-import List, { ListProps } from '../List';
+import ListContainer from 'components/Connect/List/ListContainer';
+import List, { ListProps } from 'components/Connect/List/List';
 
 const store = configureStore();
 

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

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { connectorsPayload } from 'redux/reducers/connect/__test__/fixtures';
 import configureStore from 'redux/store/configureStore';
-import ListItem, { ListItemProps } from '../ListItem';
+import ListItem, { ListItemProps } from 'components/Connect/List/ListItem';
 
 const store = configureStore();
 

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

@@ -2,8 +2,8 @@ import { connect } from 'react-redux';
 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';
-import { getIsConsumerGroupsListFetched } from '../../redux/reducers/consumerGroups/selectors';
 
 interface RouteProps {
   clusterName: ClusterName;

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

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

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

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import { StaticRouter } from 'react-router';
 import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
 import { onlineClusterPayload } from 'redux/reducers/clusters/__test__/fixtures';
-import ClusterMenu from '../ClusterMenu';
+import ClusterMenu from 'components/Nav/ClusterMenu';
 
 describe('ClusterMenu', () => {
   const setupComponent = (cluster: Cluster) => (

kafka-ui-react-app/src/components/Nav/__tests__/ClusterStatusIcon.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { ServerStatus } from 'generated-sources';
-import ClusterStatusIcon from '../ClusterStatusIcon';
+import ClusterStatusIcon from 'components/Nav/ClusterStatusIcon';
 
 describe('ClusterStatusIcon', () => {
   it('matches snapshot', () => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { onlineClusterPayload } from 'redux/reducers/clusters/__test__/fixtures';
-import Nav from '../Nav';
+import Nav from 'components/Nav/Nav';
 
 describe('Nav', () => {
   it('renders loader', () => {

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

@@ -4,10 +4,10 @@ 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 '../../common/Breadcrumb/Breadcrumb';
+import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 import SchemaVersion from './SchemaVersion';
 import LatestVersionItem from './LatestVersionItem';
-import PageLoader from '../../common/PageLoader/PageLoader';
 
 export interface DetailsProps {
   subject: SchemaName;

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

@@ -4,8 +4,8 @@ import { shallow, mount } from 'enzyme';
 import configureStore from 'redux/store/configureStore';
 import { StaticRouter } from 'react-router';
 import ClusterContext from 'components/contexts/ClusterContext';
-import DetailsContainer from '../DetailsContainer';
-import Details, { DetailsProps } from '../Details';
+import DetailsContainer from 'components/Schemas/Details/DetailsContainer';
+import Details, { DetailsProps } from 'components/Schemas/Details/Details';
 import { schema, versions } from './fixtures';
 
 const clusterName = 'testCluster';

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

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

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

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

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

@@ -4,8 +4,8 @@ import { Provider } from 'react-redux';
 import { StaticRouter } from 'react-router';
 import configureStore from 'redux/store/configureStore';
 import ClusterContext from 'components/contexts/ClusterContext';
-import ListContainer from '../ListContainer';
-import List, { ListProps } from '../List';
+import ListContainer from 'components/Schemas/List/ListContainer';
+import List, { ListProps } from 'components/Schemas/List/List';
 import { schemas } from './fixtures';
 
 describe('List', () => {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { BrowserRouter as Router } from 'react-router-dom';
+import ListItem from 'components/Schemas/List/ListItem';
 import { schemas } from './fixtures';
-import ListItem from '../ListItem';
 
 describe('ListItem', () => {
   const wrapper = mount(

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

@@ -3,8 +3,8 @@ import configureStore from 'redux/store/configureStore';
 import { mount, shallow } from 'enzyme';
 import { Provider } from 'react-redux';
 import { StaticRouter } from 'react-router-dom';
-import NewContainer from '../NewContainer';
-import New, { NewProps } from '../New';
+import NewContainer from 'components/Schemas/New/NewContainer';
+import New, { NewProps } from 'components/Schemas/New/New';
 
 describe('New', () => {
   describe('Container', () => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { StaticRouter } from 'react-router-dom';
-import Schemas from '../Schemas';
+import Schemas from 'components/Schemas/Schemas';
 
 describe('Schemas', () => {
   const pathname = `/ui/clusters/clusterName/schemas`;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { StaticRouter } from 'react-router-dom';
 import ClusterContext from 'components/contexts/ClusterContext';
-import List from '../List';
+import List from 'components/Topics/List/List';
 
 describe('List', () => {
   describe('when it has readonly flag', () => {

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

@@ -5,7 +5,7 @@ import {
   externalTopicPayload,
   internalTopicPayload,
 } from 'redux/reducers/topics/__test__/fixtures';
-import ListItem, { ListItemProps } from '../ListItem';
+import ListItem, { ListItemProps } from 'components/Topics/List/ListItem';
 
 const mockDelete = jest.fn();
 const clusterName = 'local';

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

@@ -4,7 +4,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { TOPIC_CUSTOM_PARAMS } from 'lib/constants';
 import CustomParamSelect, {
   CustomParamSelectProps,
-} from '../CustomParamSelect';
+} from 'components/Topics/shared/Form/CustomParams/CustomParamSelect';
 
 const existingFields = [
   'leader.replication.throttled.replicas',

kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Version from '../Version';
+import Version from 'components/Version/Version';
 
 const tag = 'v1.0.1-SHAPSHOT';
 const commit = '123sdf34';

kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx

@@ -1,7 +1,9 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { StaticRouter } from 'react-router-dom';
-import Breadcrumb, { BreadcrumbItem } from '../Breadcrumb';
+import Breadcrumb, {
+  BreadcrumbItem,
+} from 'components/common/Breadcrumb/Breadcrumb';
 
 describe('Breadcrumb component', () => {
   const links: BreadcrumbItem[] = [

kafka-ui-react-app/src/components/common/BytesFormatted/__tests__/BytesFormatted.spec.tsx

@@ -1,6 +1,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import BytesFormatted, { sizes } from '../BytesFormatted';
+import BytesFormatted, {
+  sizes,
+} from 'components/common/BytesFormatted/BytesFormatted';
 
 describe('BytesFormatted', () => {
   it('renders Bytes correctly', () => {

kafka-ui-react-app/src/components/common/ConfirmationModal/__test__/ConfirmationModal.spec.tsx

@@ -2,7 +2,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 import ConfirmationModal, {
   ConfirmationModalProps,
-} from '../ConfirmationModal';
+} from 'components/common/ConfirmationModal/ConfirmationModal';
 
 const confirmMock = jest.fn();
 const cancelMock = jest.fn();

kafka-ui-react-app/src/components/common/Dashboard/__tests__/Indicator.spec.tsx

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 import React from 'react';
-import Indicator from '../Indicator';
+import Indicator from 'components/common/Dashboard/Indicator';
 
 describe('Indicator', () => {
   it('matches the snapshot', () => {

kafka-ui-react-app/src/components/common/Dashboard/__tests__/MetricsWrapper.spec.tsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
-import MetricsWrapper from '../MetricsWrapper';
+import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 
 describe('MetricsWrapper', () => {
   it('correctly adds classes', () => {

kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Dropdown, { DropdownProps } from '../Dropdown';
-import DropdownItem from '../DropdownItem';
-import DropdownDivider from '../DropdownDivider';
+import Dropdown, { DropdownProps } from 'components/common/Dropdown/Dropdown';
+import DropdownItem from 'components/common/Dropdown/DropdownItem';
+import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
 
 const dummyLable = 'My Test Label';
 const dummyChildren = (

kafka-ui-react-app/src/components/common/Dropdown/__tests__/DropdownItem.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import DropdownItem from '../DropdownItem';
+import DropdownItem from 'components/common/Dropdown/DropdownItem';
 
 const onClick = jest.fn();
 

kafka-ui-react-app/src/components/common/DynamicTextButton/__tests__/DynamicTextButton.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import DynamicTextButton from '../DynamicTextButton';
+import DynamicTextButton from 'components/common/DynamicTextButton/DynamicTextButton';
 
 describe('DynamicButton', () => {
   const mockCallback = jest.fn();

kafka-ui-react-app/src/components/common/PageLoader/__tests__/PageLoader.spec.tsx

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 import React from 'react';
-import PageLoader from '../PageLoader';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 
 describe('PageLoader', () => {
   it('matches the snapshot', () => {

kafka-ui-react-app/src/components/common/Pagination/__tests__/PageControl.spec.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { StaticRouter } from 'react-router';
-import PageControl, { PageControlProps } from '../PageControl';
+import PageControl, {
+  PageControlProps,
+} from 'components/common/Pagination/PageControl';
 
 const page = 138;
 

kafka-ui-react-app/src/components/common/Pagination/__tests__/Pagination.spec.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { StaticRouter } from 'react-router';
-import Pagination, { PaginationProps } from '../Pagination';
+import Pagination, {
+  PaginationProps,
+} from 'components/common/Pagination/Pagination';
 
 describe('Pagination', () => {
   const setupWrapper = (search = '', props: Partial<PaginationProps> = {}) => (

kafka-ui-react-app/src/lib/__tests__/paths.spec.ts

@@ -1,5 +1,5 @@
 import { GIT_REPO_LINK } from 'lib/constants';
-import * as paths from '../paths';
+import * as paths from 'lib/paths';
 
 describe('Paths', () => {
   it('gitCommitPath', () => {

kafka-ui-react-app/src/lib/hooks/__tests__/useDataSaver.spec.tsx

@@ -1,4 +1,4 @@
-import useDataSaver from '../useDataSaver';
+import useDataSaver from 'lib/hooks/useDataSaver';
 
 describe('useDataSaver hook', () => {
   const content = {

kafka-ui-react-app/src/redux/actions/__test__/actions.spec.ts

@@ -2,7 +2,7 @@ import {
   clusterSchemasPayload,
   schemaVersionsPayload,
 } from 'redux/reducers/schemas/__test__/fixtures';
-import * as actions from '../actions';
+import * as actions from 'redux/actions';
 
 describe('Actions', () => {
   describe('fetchClusterStatsAction', () => {

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

@@ -3,7 +3,7 @@ import * as actions from 'redux/actions/actions';
 import * as thunks from 'redux/actions/thunks';
 import * as schemaFixtures from 'redux/reducers/schemas/__test__/fixtures';
 import mockStoreCreator from 'redux/store/configureStore/mockStoreCreator';
-import * as fixtures from '../fixtures';
+import * as fixtures from 'redux/actions/__test__/fixtures';
 
 const store = mockStoreCreator;
 

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

@@ -2,7 +2,7 @@ import { BrokersApi, Configuration } from 'generated-sources';
 import { PromiseThunkResult, ClusterName, BrokerId } from 'redux/interfaces';
 
 import { BASE_PARAMS } from 'lib/constants';
-import * as actions from '../actions';
+import * as actions from 'redux/actions/actions';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const brokersApiClient = new BrokersApi(apiClientConf);

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

@@ -2,7 +2,7 @@ import { ClustersApi, Configuration, Cluster } from 'generated-sources';
 import { PromiseThunkResult, ClusterName } from 'redux/interfaces';
 
 import { BASE_PARAMS } from 'lib/constants';
-import * as actions from '../actions';
+import * as actions from 'redux/actions/actions';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const clustersApiClient = new ClustersApi(apiClientConf);

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

@@ -6,7 +6,7 @@ import {
 } from 'redux/interfaces';
 
 import { BASE_PARAMS } from 'lib/constants';
-import * as actions from '../actions';
+import * as actions from 'redux/actions/actions';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const consumerGroupsApiClient = new ConsumerGroupsApi(apiClientConf);

kafka-ui-react-app/src/redux/reducers/alerts/__test__/selectors.spec.ts

@@ -1,6 +1,6 @@
 import configureStore from 'redux/store/configureStore';
 import { createTopicAction } from 'redux/actions';
-import * as selectors from '../selectors';
+import * as selectors from 'redux/reducers/alerts/selectors';
 import { failurePayload1, failurePayload2 } from './fixtures';
 
 const store = configureStore();