Merge pull request #2634 from devtron-labs/fix/sort-imports

fix: improve import/export order across modules via eslint-plugin-simple-import-sort

Author: RohitRaj011

.eslintrc.js

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+const tsconfigPath = require('./tsconfig.json')
+
 module.exports = {
     parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint', 'react', 'prettier', 'import'],
+    plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort'],
     env: {
         browser: true,
         es2021: true,
@@ -112,6 +114,26 @@ module.exports = {
         'import/named': 'off',
         'no-use-before-define': 'off',
         '@typescript-eslint/no-use-before-define': 'error',
+        'simple-import-sort/imports': [
+            'error',
+            {
+                groups: [
+                    // Packages `react` related packages and external packages.
+                    ['^react', '^@?\\w'],
+                    // Devtron packages
+                    ['^@devtron-labs'],
+                    // Internal packages.
+                    [...Object.keys(tsconfigPath.compilerOptions.paths).map((alias) => alias.replace('/*', ''))],
+                    // Side effect imports.
+                    ['^\\u0000'],
+                    // Put same-folder imports, `..` and `.` last. Other relative imports.
+                    ['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$',],
+                    // Style imports.
+                    [ '^.+\\.?(css|scss)$'],
+                ],
+            },
+        ],
+        'simple-import-sort/exports': 'error',
     },
     overrides: [
         {

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.10.18",
+        "@devtron-labs/devtron-fe-common-lib": "1.10.19",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -111,6 +111,7 @@
         "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-storybook": "^0.8.0",
         "husky": "^7.0.4",
         "jest-extended": "^2.0.0",

src/Pages/App/CreateAppModal/AppToCloneSelector.tsx

@@ -14,15 +14,18 @@
  * limitations under the License.
  */
 
+import { useState } from 'react'
+
 import {
     AppSelectorNoOptionsMessage as appSelectorNoOptionsMessage,
     ComponentSizeType,
     InfoBlock,
     SelectPicker,
     SelectPickerProps,
 } from '@devtron-labs/devtron-fe-common-lib'
+
 import { appListOptions } from '@Components/AppSelector/AppSelectorUtil'
-import { useState } from 'react'
+
 import { AppToCloneSelectorProps } from './types'
 
 const AppToCloneSelector = ({ isJobView, error, handleCloneIdChange }: AppToCloneSelectorProps) => {

src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx

@@ -14,12 +14,16 @@
  * limitations under the License.
  */
 
+import { ChangeEvent } from 'react'
+
 import { CustomInput, TagsContainer, Textarea } from '@devtron-labs/devtron-fe-common-lib'
-import { ReactComponent as ICDevtronApp } from '@Icons/ic-devtron-app.svg'
+
 import { ReactComponent as ICCaretLeftSmall } from '@Icons/ic-caret-left-small.svg'
-import { ChangeEvent } from 'react'
+import { ReactComponent as ICDevtronApp } from '@Icons/ic-devtron-app.svg'
 import { importComponentFromFELibrary } from '@Components/common'
 import { APP_TYPE } from '@Config/constants'
+
+import AppToCloneSelector from './AppToCloneSelector'
 import ProjectSelector from './ProjectSelector'
 import {
     ApplicationInfoFormProps,
@@ -29,7 +33,6 @@ import {
     HandleFormStateChangeParamsType,
     ProjectSelectorProps,
 } from './types'
-import AppToCloneSelector from './AppToCloneSelector'
 
 const MandatoryTagsContainer = importComponentFromFELibrary('MandatoryTagsContainer', null, 'function')
 

src/Pages/App/CreateAppModal/CreateAppModal.component.tsx

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import { useEffect, useMemo, useState } from 'react'
+import { useHistory } from 'react-router-dom'
+
 import {
     Button,
     ButtonStyleType,
@@ -28,17 +31,21 @@ import {
     validateTagKeyValue,
     validateTagValue,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { useEffect, useMemo, useState } from 'react'
-import { getHostURLConfiguration } from '@Services/service'
+
+import { ReactComponent as ICAppTemplate } from '@Icons/ic-app-template.svg'
+import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
+import { importComponentFromFELibrary } from '@Components/common'
 import { saveHostURLConfiguration } from '@Components/hostURL/hosturl.service'
 import { createJob } from '@Components/Jobs/Service'
-import { APP_COMPOSE_STAGE, getAppComposeURL, URLS } from '@Config/routes'
-import { useHistory } from 'react-router-dom'
 import { REQUIRED_FIELDS_MISSING } from '@Config/constants'
-import { importComponentFromFELibrary } from '@Components/common'
-import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
-import { ReactComponent as ICAppTemplate } from '@Icons/ic-app-template.svg'
+import { APP_COMPOSE_STAGE, getAppComposeURL, URLS } from '@Config/routes'
+import { getHostURLConfiguration } from '@Services/service'
 
+import ApplicationInfoForm from './ApplicationInfoForm'
+import { createAppInitialFormErrorState, createAppInitialFormState } from './constants'
+import HeaderSection from './HeaderSection'
+import { createApp } from './service'
+import Sidebar from './Sidebar'
 import {
     ApplicationInfoFormProps,
     CreateAppFormErrorStateType,
@@ -47,13 +54,8 @@ import {
     CreateAppModalProps,
     CreationMethodType,
 } from './types'
-import { createAppInitialFormErrorState, createAppInitialFormState } from './constants'
-import { getCreateMethodConfig, validateAppName, validateCloneApp, validateProject } from './utils'
-import { createApp } from './service'
-import ApplicationInfoForm from './ApplicationInfoForm'
-import HeaderSection from './HeaderSection'
-import Sidebar from './Sidebar'
 import UpdateTemplateConfig from './UpdateTemplateConfig'
+import { getCreateMethodConfig, validateAppName, validateCloneApp, validateProject } from './utils'
 
 import './styles.scss'
 

src/Pages/App/CreateAppModal/HeaderSection.tsx

@@ -15,7 +15,9 @@
  */
 
 import { Button, ButtonStyleType, ButtonVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
+
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
+
 import { HeaderSectionProps } from './types'
 
 const HeaderSection = ({ isJobView, handleClose, isCloseDisabled }: HeaderSectionProps) => (

src/Pages/App/CreateAppModal/ProjectSelector.tsx

@@ -21,7 +21,9 @@ import {
     SelectPickerProps,
     useGetResourceKindsOptions,
 } from '@devtron-labs/devtron-fe-common-lib'
+
 import { ReactComponent as ICFolderColor } from '@Icons/ic-folder-color.svg'
+
 import { CreateAppFormStateType, ProjectSelectorProps } from './types'
 
 const ProjectSelector = ({ selectedProjectId, handleProjectIdChange, error }: ProjectSelectorProps) => {

src/Pages/App/CreateAppModal/Sidebar.tsx

@@ -15,7 +15,9 @@
  */
 
 import { ModalSidebarPanel } from '@devtron-labs/devtron-fe-common-lib'
+
 import { DOCUMENTATION } from '@Config/constants'
+
 import { CreationMethodType, SidebarProps } from './types'
 
 const Sidebar = ({

src/Pages/App/CreateAppModal/UpdateTemplateConfig.tsx

@@ -16,14 +16,14 @@
 
 import { noop } from '@devtron-labs/devtron-fe-common-lib'
 
-import MaterialList from '@Components/material/MaterialList'
 import CIConfig from '@Components/ciConfig/CIConfig'
 import { CIConfigProps } from '@Components/ciConfig/types'
 import { DockerConfigOverrideKeys } from '@Components/ciPipeline/types'
 import { MaterialListProps } from '@Components/material/material.types'
+import MaterialList from '@Components/material/MaterialList'
 
-import { Workflow, WorkflowProps } from './Workflow'
 import { CreateAppFormStateActionType, UpdateTemplateConfigProps } from './types'
+import { Workflow, WorkflowProps } from './Workflow'
 
 const parentState: CIConfigProps['parentState'] = {
     loadingState: null,

src/Pages/App/CreateAppModal/Workflow/Workflow.tsx

@@ -15,6 +15,7 @@
  */
 
 import { useEffect, useState } from 'react'
+
 import {
     APIResponseHandler,
     GenericEmptyState,
@@ -29,6 +30,7 @@ import {
 import { getCreateWorkflows } from '@Components/app/details/triggerView/workflow.service'
 import { getEnvironmentListMin } from '@Services/service'
 
+import { HandleNodeUpdateActionProps, NodeUpdateActionType, WorkflowProps } from './types'
 import {
     getCDNodeIcon,
     getPipelineIdFromNodeId,
@@ -37,7 +39,6 @@ import {
     getWorkflowGraphVisualizerNodes,
     getWorkflowLinkedCDNodes,
 } from './utils'
-import { HandleNodeUpdateActionProps, NodeUpdateActionType, WorkflowProps } from './types'
 
 export const Workflow = ({ templateId, onChange, workflowIdToErrorMessageMap }: WorkflowProps) => {
     // STATES