chore: merge rc-v0.34.0

.eslintrc.cjs

@@ -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,
@@ -109,6 +111,26 @@ module.exports = {
         'import/prefer-default-export': 'off',
         'no-restricted-exports': 'off',
         'import/named': 'off',
+        '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

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.11.2",
+    "version": "1.12.0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -60,6 +60,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",
         "glob": "^10.3.3",
         "husky": "^7.0.4",
         "json-schema": "^0.4.0",
@@ -73,7 +74,7 @@
         "sharp": "^0.33.5",
         "svgo": "^3.3.2",
         "typescript": "5.5.4",
-        "vite": "5.4.14",
+        "vite": "5.4.17",
         "vite-plugin-dts": "4.0.3",
         "vite-plugin-image-optimizer": "^1.1.8",
         "vite-plugin-lib-inject-css": "2.1.1",
@@ -108,10 +109,10 @@
         "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",
-        "@xyflow/react": "12.4.2",
         "@uiw/codemirror-extensions-hyper-link": "4.23.10",
         "@uiw/codemirror-theme-github": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
+        "@xyflow/react": "12.4.2",
         "ansi_up": "^5.2.1",
         "codemirror-json-schema": "0.8.0",
         "dayjs": "^1.11.13",
@@ -141,7 +142,7 @@
             "monaco-editor": "0.44.0"
         },
         "vite-plugin-svgr": {
-            "vite": "5.4.14"
+            "vite": "5.4.17"
         },
         "react-virtualized-sticky-tree": {
             "react": "^17.0.2",

src/Common/API/CoreAPI.ts

@@ -1,5 +1,10 @@
-import { INVALID_LICENSE_KEY, ResponseHeaders } from '@Shared/index'
-import { API_STATUS_CODES, APIOptions, FALLBACK_REQUEST_TIMEOUT, Host, noop, ResponseType, ServerErrors } from '..'
+import { API_STATUS_CODES, FALLBACK_REQUEST_TIMEOUT, Host } from '@Common/Constants'
+import { noop } from '@Common/Helper'
+import { ServerErrors } from '@Common/ServerError'
+import { APIOptions, ResponseType } from '@Common/Types'
+import { INVALID_LICENSE_KEY } from '@Shared/constants'
+import { ResponseHeaders } from '@Shared/types'
+
 import { CoreAPIConstructorParamsType, FetchAPIParamsType, FetchInTimeParamsType } from './types'
 import { handleServerError } from './utils'
 

src/Common/API/index.ts

@@ -8,5 +8,5 @@ const dashboardAPI = new CoreAPI({
 })
 
 export const { post, put, patch, get, trash } = dashboardAPI
-export { getIsRequestAborted, abortPreviousRequests, handleRedirectToLicenseActivation } from './utils'
 export { default as CoreAPI } from './CoreAPI'
+export { abortPreviousRequests, getIsRequestAborted, handleRedirectToLicenseActivation } from './utils'

src/Common/API/utils.ts

@@ -1,6 +1,8 @@
-import { ServerErrors } from '@Common/ServerError'
 import { MutableRefObject } from 'react'
+
 import { URLS } from '@Common/Constants'
+import { ServerErrors } from '@Common/ServerError'
+
 import { RESPONSE_MESSAGES } from './constants'
 
 export const handleServerError = async (contentType: string, response: Response) => {

src/Common/AddCDButton/utils.tsx

@@ -15,7 +15,7 @@
  */
 
 import { AddCDPositions, AddPipelineType, PipelineType, WorkflowNodeType } from '../Types'
-import { HandleAddCD, GetPipelineType } from './types'
+import { GetPipelineType, HandleAddCD } from './types'
 
 const getPipelineType = ({ startNode }: GetPipelineType) => {
     if (startNode.type === WorkflowNodeType.WEBHOOK) {

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+
 import Tooltip from '@Common/Tooltip/Tooltip'
+
+import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
+import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
 import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import ClipboardProps from './types'
-import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
-import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
 
 /**
  * @param content - Content to be copied

src/Common/CodeEditor/CodeEditor.reducer.ts

@@ -15,7 +15,9 @@
  */
 
 import YAML from 'yaml'
+
 import { noop, YAMLStringify } from '@Common/Helper'
+
 import { MODES } from '../Constants'
 import { Action, CodeEditorInitialValueType, CodeEditorState } from './types'
 import { getCodeEditorThemeFromAppTheme } from './utils'

src/Common/CodeEditor/types.ts

@@ -15,6 +15,7 @@
  */
 
 import { AppThemeType } from '@Shared/Providers'
+
 import { MODES } from '../Constants'
 
 export interface InformationBarProps {

src/Common/CodeEditor/utils.ts

@@ -15,6 +15,7 @@
  */
 
 import { AppThemeType } from '@Shared/Providers'
+
 import { CodeEditorInterface, CodeEditorThemesKeys } from './types'
 
 export const getCodeEditorThemeFromAppTheme = (

src/Common/CodeMirror/CodeEditor.components.tsx

@@ -16,10 +16,10 @@
 
 import { ReactNode } from 'react'
 
-import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
-import { ReactComponent as Info } from '@Icons/ic-info-filled.svg'
-import { ReactComponent as ErrorIcon } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICCompare } from '@Icons/ic-compare.svg'
+import { ReactComponent as ErrorIcon } from '@Icons/ic-error-exclamation.svg'
+import { ReactComponent as Info } from '@Icons/ic-info-filled.svg'
+import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ClipboardButton } from '@Common/ClipboardButton'
 import { getComponentSpecificThemeClass } from '@Shared/Providers'
 

src/Common/CodeMirror/CodeEditor.theme.ts

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { EditorView } from '@uiw/react-codemirror'
-import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
 import { tags } from '@lezer/highlight'
+import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
+import { EditorView } from '@uiw/react-codemirror'
 
 import { CODE_EDITOR_FONT_SIZE } from './CodeEditor.constants'
 

src/Common/CodeMirror/CodeEditor.tsx

@@ -15,42 +15,42 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { foldGutter } from '@codemirror/language'
+import { lintGutter } from '@codemirror/lint'
+import { search } from '@codemirror/search'
+import { indentationMarkers } from '@replit/codemirror-indentation-markers'
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap'
+import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
 import {
-    Extension,
-    ReactCodeMirrorProps,
     basicSetup,
     BasicSetupOptions,
     Compartment,
-    keymap,
-    EditorView,
     EditorState,
+    EditorView,
+    Extension,
+    keymap,
+    ReactCodeMirrorProps,
 } from '@uiw/react-codemirror'
-import { foldGutter } from '@codemirror/language'
-import { search } from '@codemirror/search'
-import { lintGutter } from '@codemirror/lint'
-import { vscodeKeymap } from '@replit/codemirror-vscode-keymap'
-import { indentationMarkers } from '@replit/codemirror-indentation-markers'
-import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
 
-import { AppThemeType, useTheme } from '@Shared/Providers'
-import { getUniqueId } from '@Shared/Helpers'
-import { cleanKubeManifest } from '@Common/Helper'
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
+import { cleanKubeManifest } from '@Common/Helper'
+import { getUniqueId } from '@Shared/Helpers'
+import { AppThemeType, useTheme } from '@Shared/Providers'
 
-import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
+import { Clipboard, Container, ErrorBar, Header, Information, Warning } from './CodeEditor.components'
+import { CodeEditorContext } from './CodeEditor.context'
+import { getCodeEditorTheme } from './CodeEditor.theme'
+import { CodeEditorRenderer } from './CodeEditorRenderer'
 import {
     blurOnEscape,
     openSearchPanel,
     openSearchPanelWithReplace,
     replaceAll,
     showReplaceFieldState,
 } from './Commands'
+import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
 import { CodeEditorContextProps, CodeEditorProps } from './types'
 import { getFoldGutterElement, getLanguageExtension, getValidationSchema, parseValueToCode } from './utils'
-import { CodeEditorContext } from './CodeEditor.context'
-import { Clipboard, Container, ErrorBar, Header, Information, Warning } from './CodeEditor.components'
-import { getCodeEditorTheme } from './CodeEditor.theme'
-import { CodeEditorRenderer } from './CodeEditorRenderer'
 
 import './codeEditor.scss'
 

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -15,16 +15,16 @@
  */
 
 import { useEffect, useRef, useState } from 'react'
-import CodeMirror, { EditorView, ReactCodeMirrorRef, ViewUpdate } from '@uiw/react-codemirror'
 import { MergeView } from '@codemirror/merge'
+import CodeMirror, { EditorView, ReactCodeMirrorRef, ViewUpdate } from '@uiw/react-codemirror'
 
-import { getComponentSpecificThemeClass } from '@Shared/Providers'
 import { Progressing } from '@Common/Progressing'
+import { getComponentSpecificThemeClass } from '@Shared/Providers'
 
 import { useCodeEditorContext } from './CodeEditor.context'
+import { DiffMinimap } from './Extensions'
 import { CodeEditorRendererProps } from './types'
 import { getCodeEditorHeight, getRevertControlButton, getScanLimit, updateDiffMinimapValues } from './utils'
-import { DiffMinimap } from './Extensions'
 
 export const CodeEditorRenderer = ({
     codemirrorMergeKey,

src/Common/CodeMirror/Extensions/DiffMinimap.tsx

@@ -18,8 +18,8 @@ import { useEffect, useRef, useState } from 'react'
 
 import { getComponentSpecificThemeClass } from '@Shared/Providers'
 
-import { DiffMinimapProps } from '../types'
 import { CODE_EDITOR_FONT_SIZE, CODE_EDITOR_MIN_OVERLAY_HEIGHT } from '../CodeEditor.constants'
+import { DiffMinimapProps } from '../types'
 
 export const DiffMinimap = ({ view, theme, diffMinimapParentRef, scalingFactor }: DiffMinimapProps) => {
     // STATES