provectus · workshur · Apr 22, 2021 · Apr 21, 2021 · Apr 22, 2021 · Apr 22, 2021
@@ -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": [
     {

@@ -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';

@@ -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;

@@ -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),

@@ -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),

@@ -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();
 

@@ -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>

@@ -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;

@@ -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),

@@ -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;

@@ -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();
 

@@ -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();
 

@@ -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;

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

@@ -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 {

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

@@ -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', () => {

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

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

@@ -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 {

@@ -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) => (

@@ -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', () => {

@@ -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', () => {

@@ -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';
 

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

@@ -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 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';

@@ -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', () => {

@@ -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', () => {

@@ -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 {

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

@@ -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 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', () => {

@@ -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(

@@ -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) => ({

@@ -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', () => {

@@ -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';

@@ -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`;

@@ -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 {