Improve eslint configuration (#385)

Co-authored-by: Oleg Shuralev <workshur@gmail.com>

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

@@ -33,7 +33,14 @@
     "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"],
+      "newlines-between": "always"
+    }],
+    "import/no-relative-parent-imports": "error",
+    "no-debugger": "warn"
   },
   "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/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 Nav from 'components/Nav/Nav';
-import PageLoader from './common/PageLoader/PageLoader';
+import PageLoader from 'components/common/PageLoader/PageLoader';
-import Dashboard from './Dashboard/Dashboard';
+import Dashboard from 'components/Dashboard/Dashboard';
-import ClusterPage from './Cluster/Cluster';
+import ClusterPage from 'components/Cluster/Cluster';
-import Version from './Version/Version';
+import Version from 'components/Version/Version';
-import Alert from './Alert/Alert';
+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/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/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/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 'components/Connect/List/ListContainer';
-import ListContainer from '../ListContainer';
+import List, { ListProps } from 'components/Connect/List/List';
-import List, { ListProps } from '../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,9 @@ 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/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

@@ -2,7 +2,8 @@ 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/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/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

@@ -3,10 +3,11 @@ import { useHistory } from 'react-router';
 import { SchemaSubject } from 'generated-sources';
 import { ClusterName, SchemaName } from 'redux/interfaces';
 import { clusterSchemasPath } from 'lib/paths';
+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 Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+
 import SchemaVersion from './SchemaVersion';
 import LatestVersionItem from './LatestVersionItem';
 

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

@@ -4,8 +4,9 @@ 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 '../DetailsContainer';
+import DetailsContainer from 'components/Schemas/Details/DetailsContainer';
-import Details, { DetailsProps } from '../Details';
+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,8 @@
 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,7 @@
 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/List.tsx

@@ -6,6 +6,7 @@ import { ClusterName } from 'redux/interfaces';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import ClusterContext from 'components/contexts/ClusterContext';
+
 import ListItem from './ListItem';
 
 export interface ListProps {

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

@@ -5,6 +5,7 @@ import {
   getIsSchemaListFetching,
   getSchemaList,
 } from 'redux/reducers/schemas/selectors';
+
 import List from './List';
 
 const mapStateToProps = (state: RootState) => ({

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

@@ -4,8 +4,9 @@ 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 ListContainer from 'components/Schemas/List/ListContainer';
-import List, { ListProps } from '../List';
+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,9 @@
 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/NewContainer.ts

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { RootState } from 'redux/interfaces';
 import { createSchema } from 'redux/actions';
 import { getSchemaCreated } from 'redux/reducers/schemas/selectors';
+
 import New from './New';
 
 const mapStateToProps = (state: RootState) => ({

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 NewContainer from 'components/Schemas/New/NewContainer';
-import New, { NewProps } from '../New';
+import New, { NewProps } from 'components/Schemas/New/New';
 
 describe('New', () => {
   describe('Container', () => {

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

@@ -5,6 +5,7 @@ import {
   clusterSchemaPath,
   clusterSchemasPath,
 } from 'lib/paths';
+
 import ListContainer from './List/ListContainer';
 import DetailsContainer from './Details/DetailsContainer';
 import NewContainer from './New/NewContainer';

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/List.tsx

@@ -12,6 +12,7 @@ import { FetchTopicsListParams } from 'redux/actions';
 import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import Pagination from 'components/common/Pagination/Pagination';
+
 import ListItem from './ListItem';
 
 interface Props {

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

@@ -11,6 +11,7 @@ import {
   getAreTopicsFetching,
   getTopicListTotalPages,
 } from 'redux/reducers/topics/selectors';
+
 import List from './List';
 
 const mapStateToProps = (state: RootState) => ({

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/New/New.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ClusterName, TopicName, TopicFormDataRaw } from 'redux/interfaces';
 import { useForm, FormProvider } from 'react-hook-form';
-
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { clusterTopicsPath } from 'lib/paths';
 import TopicForm from 'components/Topics/shared/Form/TopicForm';

kafka-ui-react-app/src/components/Topics/New/NewContainer.ts

@@ -11,6 +11,7 @@ import { createTopic, createTopicAction } from 'redux/actions';
 import { getTopicCreated } from 'redux/reducers/topics/selectors';
 import { clusterTopicPath } from 'lib/paths';
 import { ThunkDispatch } from 'redux-thunk';
+
 import New from './New';
 
 interface RouteProps {

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

@@ -11,6 +11,7 @@ import {
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
+
 import OverviewContainer from './Overview/OverviewContainer';
 import MessagesContainer from './Messages/MessagesContainer';
 import SettingsContainer from './Settings/SettingsContainer';

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

@@ -1,6 +1,7 @@
 import 'react-datepicker/dist/react-datepicker.css';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { groupBy, map, concat, maxBy } from 'lodash';
+import DatePicker from 'react-datepicker';
 import MultiSelect from 'react-multi-select-component';
 import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 import { useDebouncedCallback } from 'use-debounce';
@@ -11,7 +12,7 @@ import {
 } from 'redux/interfaces';
 import { TopicMessage, Partition, SeekType } from 'generated-sources';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import DatePicker from 'react-datepicker';
+
 import MessagesTable from './MessagesTable';
 
 export interface Props {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TopicMessage } from 'generated-sources';
 import CustomParamButton from 'components/Topics/shared/Form/CustomParams/CustomParamButton';
+
 import MessageItem from './MessageItem';
 
 export interface MessagesTableProp {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import MessageItem from 'components/Topics/Topic/Details/Messages/MessageItem';
+
 import { messages } from './fixtures';
 
 jest.mock('date-fns', () => ({

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

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import MessagesTable, {
   MessagesTableProp,
 } from 'components/Topics/Topic/Details/Messages/MessagesTable';
+
 import { messages } from './fixtures';
 
 jest.mock('date-fns', () => ({

kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/OverviewContainer.ts

@@ -3,7 +3,7 @@ import { RootState, TopicName, ClusterName } from 'redux/interfaces';
 import { getTopicByName } from 'redux/reducers/topics/selectors';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { clearTopicMessages } from 'redux/actions';
-import Overview from './Overview';
+import Overview from 'components/Topics/Topic/Details/Overview/Overview';
 
 interface RouteProps {
   clusterName: ClusterName;

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/SettingsContainer.ts

@@ -6,6 +6,7 @@ import {
   getTopicConfig,
   getTopicConfigFetched,
 } from 'redux/reducers/topics/selectors';
+
 import Settings from './Settings';
 
 interface RouteProps {

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

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { RootState } from 'redux/interfaces';
 import { fetchTopicDetails } from 'redux/actions';
 import { getIsTopicDetailsFetching } from 'redux/reducers/topics/selectors';
+
 import Topic from './Topic';
 
 const mapStateToProps = (state: RootState) => ({

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

@@ -5,6 +5,7 @@ import {
   clusterTopicPath,
   clusterTopicsPath,
 } from 'lib/paths';
+
 import ListContainer from './List/ListContainer';
 import TopicContainer from './Topic/TopicContainer';
 import NewContainer from './New/NewContainer';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import CustomParamButton from './CustomParamButton';
 
 interface Props {

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

@@ -3,6 +3,7 @@ import { useFormContext } from 'react-hook-form';
 import { TopicConfigValue } from 'redux/interfaces';
 import { ErrorMessage } from '@hookform/error-message';
 import { TOPIC_CUSTOM_PARAMS } from 'lib/constants';
+
 import { INDEX_PREFIX } from './CustomParams';
 
 export interface CustomParamSelectProps {

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { omit, reject, reduce, remove } from 'lodash';
 import { v4 } from 'uuid';
-
 import {
   TopicFormCustomParams,
   TopicConfigByName,
   TopicConfigParams,
 } from 'redux/interfaces';
+
 import CustomParamButton from './CustomParamButton';
 import CustomParamField from './CustomParamField';
 

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

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { RootState, TopicConfigByName } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+
 import CustomParams from './CustomParams';
 
 interface OwnProps extends RouteComponentProps {

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/Topics/shared/Form/TimeToRetain.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import prettyMilliseconds from 'pretty-ms';
 import { useFormContext } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
-
 import { MILLISECONDS_IN_WEEK, MILLISECONDS_IN_SECOND } from 'lib/constants';
+
 import TimeToRetainBtns from './TimeToRetainBtns';
 
 interface Props {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MILLISECONDS_IN_DAY } from 'lib/constants';
+
 import TimeToRetainBtn from './TimeToRetainBtn';
 
 interface Props {

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

@@ -3,6 +3,7 @@ import { useFormContext } from 'react-hook-form';
 import { TOPIC_NAME_VALIDATION_PATTERN, BYTES_IN_GB } from 'lib/constants';
 import { TopicName, TopicConfigByName } from 'redux/interfaces';
 import { ErrorMessage } from '@hookform/error-message';
+
 import CustomParamsContainer from './CustomParams/CustomParamsContainer';
 import TimeToRetain from './TimeToRetain';
 

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 Dropdown, { DropdownProps } from 'components/common/Dropdown/Dropdown';
-import DropdownItem from '../DropdownItem';
+import DropdownItem from 'components/common/Dropdown/DropdownItem';
-import DropdownDivider from '../DropdownDivider';
+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/JSONViewer/JSONViewer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
-import theme from './themes/google';
+import theme from 'components/common/JSONViewer/themes/google';
 
 interface JSONViewerProps {
   data: Record<string, string>;

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/Pagination.tsx

@@ -3,7 +3,7 @@ import usePagination from 'lib/hooks/usePagination';
 import { range } from 'lodash';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PageControl from './PageControl';
+import PageControl from 'components/common/Pagination/PageControl';
 
 export interface PaginationProps {
   totalPages: number;

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/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import './theme/index.scss';
+import * as serviceWorker from 'serviceWorker';
-import AppContainer from './components/AppContainer';
+import configureStore from 'redux/store/configureStore';
-import * as serviceWorker from './serviceWorker';
+import AppContainer from 'components/AppContainer';
-import configureStore from './redux/store/configureStore';
+import 'theme/index.scss';
 
 const store = configureStore();
 

kafka-ui-react-app/src/lib/__test__/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/lib/paths.ts

@@ -1,4 +1,5 @@
 import { ClusterName, SchemaName, TopicName } from 'redux/interfaces';
+
 import { GIT_REPO_LINK } from './constants';
 
 export const gitCommitPath = (commit: string) =>

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

@@ -1,8 +1,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

@@ -1,8 +1,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

@@ -4,9 +4,8 @@ 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 consumerGroupsApiClient = new ConsumerGroupsApi(apiClientConf);

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

@@ -10,7 +10,6 @@ import {
   SchemaName,
   FailurePayload,
 } from 'redux/interfaces';
-
 import { BASE_PARAMS } from 'lib/constants';
 import * as actions from 'redux/actions';
 import { getResponse } from 'lib/errorHandling';

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

@@ -1,6 +1,7 @@
 import { ActionType } from 'typesafe-actions';
 import { ThunkAction } from 'redux-thunk';
 import * as actions from 'redux/actions/actions';
+
 import { TopicsState } from './topic';
 import { ClusterState } from './cluster';
 import { BrokersState } from './broker';

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

@@ -1,5 +1,6 @@
 import { dismissAlert, createTopicAction } from 'redux/actions';
 import reducer from 'redux/reducers/alerts/reducer';
+
 import { failurePayload1, failurePayload2 } from './fixtures';
 
 jest.mock('lodash', () => ({

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

@@ -1,6 +1,7 @@
 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();

kafka-ui-react-app/src/redux/reducers/alerts/reducer.ts

@@ -1,6 +1,7 @@
 import { getType } from 'typesafe-actions';
 import { dismissAlert } from 'redux/actions';
 import { Action, AlertsState } from 'redux/interfaces';
+
 import { addError, removeAlert } from './utils';
 
 export const initialState: AlertsState = {};

kafka-ui-react-app/src/redux/reducers/clusters/__test__/reducer.spec.ts

@@ -1,5 +1,6 @@
 import { fetchClusterListAction } from 'redux/actions';
 import reducer from 'redux/reducers/clusters/reducer';
+
 import { clustersPayload } from './fixtures';
 
 describe('Clusters reducer', () => {

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

@@ -1,6 +1,7 @@
 import { fetchClusterListAction } from 'redux/actions';
 import configureStore from 'redux/store/configureStore';
-import * as selectors from '../selectors';
+import * as selectors from 'redux/reducers/clusters/selectors';
+
 import {
   clustersPayload,
   offlineClusterPayload,

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

@@ -4,7 +4,7 @@ import { createFetchingSelector } from 'redux/reducers/loader/selectors';
 import {
   ConsumerGroupID,
   ConsumerGroupsState,
-} from '../../interfaces/consumerGroup';
+} from 'redux/interfaces/consumerGroup';
 
 const consumerGroupsState = ({
   consumerGroups,

kafka-ui-react-app/src/redux/reducers/index.ts

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 import { RootState } from 'redux/interfaces';
+
 import topics from './topics/reducer';
 import clusters from './clusters/reducer';
 import brokers from './brokers/reducer';

kafka-ui-react-app/src/redux/reducers/schemas/__test__/reducer.spec.ts

@@ -6,6 +6,7 @@ import {
   fetchSchemaVersionsAction,
 } from 'redux/actions';
 import reducer from 'redux/reducers/schemas/reducer';
+
 import {
   clusterSchemasPayload,
   initialState,

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

@@ -4,7 +4,8 @@ import {
   fetchSchemaVersionsAction,
 } from 'redux/actions';
 import configureStore from 'redux/store/configureStore';
-import * as selectors from '../selectors';
+import * as selectors from 'redux/reducers/schemas/selectors';
+
 import {
   clusterSchemasPayload,
   clusterSchemasPayloadWithNewSchema,

kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts

@@ -1,5 +1,5 @@
 import { deleteTopicAction, clearMessagesTopicAction } from 'redux/actions';
-import reducer from '../reducer';
+import reducer from 'redux/reducers/topics/reducer';
 
 const topic = {
   name: 'topic',