Merge branch 'develop' into feat/theme-dialog

Author: AbhishekA1509

.eslintignore

@@ -30,7 +30,6 @@ src/Common/Drawer/Drawer.tsx
 src/Common/Grid/Grid.tsx
 src/Common/Helper.tsx
 src/Common/Hooks/UseClickOutside/UseClickOutside.tsx
-src/Common/Hooks/UseSuperAdmin/UseSuperAdmin.tsx
 src/Common/Hooks/UseWindowSize/UseWindowSize.tsx
 src/Common/ImageTags.tsx
 src/Common/InfoColorBar/InfoColourbar.tsx

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.6",
+    "version": "1.8.8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -107,7 +107,8 @@
         "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",
-        "@uiw/codemirror-theme-github": "^4.23.7",
+        "@uiw/codemirror-extensions-hyper-link": "4.23.10",
+        "@uiw/codemirror-theme-github": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
         "ansi_up": "^5.2.1",
         "codemirror-json-schema": "0.8.0",

package.json

@@ -22,7 +22,7 @@ const TooltipContent = ({ tooltipContent }: TooltipContentProps) => {
     if (tooltipContent) {
         return (
             <div className="dc__white-space-pre-wrap">
-                <p className="m-0 cn-0 fs-12 fw-6 lh-18">Click to add</p>
+                <p className="m-0 fs-12 fw-6 lh-18">Click to add</p>
 
                 {tooltipContent}
             </div>

src/Assets/IconV2/ic-crown.svg

@@ -75,7 +75,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
     }
 
     return (
-        <div className="flex">
+        <div className="flex left">
             <div className="chart-type-options flex" data-testid="chart-type-options">
                 <span className="cn-7 mr-4">Chart Type</span>
                 <SelectPicker

src/Assets/IconV2/ic-user-key.svg

@@ -101,7 +101,7 @@ export interface CodeEditorHeaderComposition {
     Clipboard?: React.FC<any>
 }
 
-export type ActionTypes = 'changeLanguage' | 'setDiff' | 'setTheme' | 'setCode' | 'setDefaultCode' | 'setHeight'
+type ActionTypes = 'changeLanguage' | 'setDiff' | 'setTheme' | 'setCode' | 'setDefaultCode' | 'setHeight'
 
 export interface Action {
     type: ActionTypes

src/Common/AddCDButton/AddCDButton.tsx

@@ -45,7 +45,7 @@ const SplitPane = () => {
 }
 
 export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEditorHeaderProps) => {
-    const { diffMode, lhsValue, hasCodeEditorContainer, theme } = useCodeEditorContext()
+    const { diffMode, readOnly, lhsValue, hasCodeEditorContainer, theme } = useCodeEditorContext()
 
     return (
         <div className={`${getComponentSpecificThemeClass(theme)} flexbox w-100 border__primary--bottom`}>
@@ -56,7 +56,9 @@ export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEdit
                 {children}
                 {!hideDefaultSplitHeader && lhsValue && <SplitPane />}
             </div>
-            {diffMode ? <div className="bg__secondary px-5 dc__align-self-stretch" /> : null}
+            {diffMode ? (
+                <div className={`bg__secondary dc__align-self-stretch ${readOnly ? 'px-15' : 'px-5'}`} />
+            ) : null}
         </div>
     )
 }

src/Common/ChartVersionAndTypeSelector.tsx

@@ -28,14 +28,21 @@ 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 { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
-import { openSearchPanel, openSearchPanelWithReplace, replaceAll, showReplaceFieldState } from './Commands'
+import {
+    blurOnEscape,
+    openSearchPanel,
+    openSearchPanelWithReplace,
+    replaceAll,
+    showReplaceFieldState,
+} from './Commands'
 import { CodeEditorContextProps, CodeEditorProps } from './types'
 import { getFoldGutterElement, getLanguageExtension, getValidationSchema, parseValueToCode } from './utils'
 import { CodeEditorContext } from './CodeEditor.context'
@@ -48,6 +55,11 @@ import './codeEditor.scss'
 // CODEMIRROR CLASSES
 const foldingCompartment = new Compartment()
 
+// EXTENSIONS
+const foldConfig = foldGutter({
+    markerDOM: getFoldGutterElement,
+})
+
 const CodeEditor = <DiffView extends boolean = false>({
     theme,
     value: propValue,
@@ -184,10 +196,6 @@ const CodeEditor = <DiffView extends boolean = false>({
     }
 
     // EXTENSIONS
-    const foldConfig = foldGutter({
-        markerDOM: getFoldGutterElement,
-    })
-
     const getBaseExtensions = (): Extension[] => [
         basicSetup(basicSetupOptions),
         themeExtension,
@@ -196,6 +204,7 @@ const CodeEditor = <DiffView extends boolean = false>({
             ...(!disableSearch ? [{ key: 'Mod-f', run: openSearchPanel, scope: 'editor search-panel' }] : []),
             { key: 'Mod-Enter', run: replaceAll, scope: 'editor search-panel' },
             { key: 'Mod-Alt-f', run: openSearchPanelWithReplace, scope: 'editor search-panel' },
+            { key: 'Escape', run: blurOnEscape, stopPropagation: true },
         ]),
         indentationMarkers(),
         getLanguageExtension(mode),
@@ -206,6 +215,7 @@ const CodeEditor = <DiffView extends boolean = false>({
         }),
         showReplaceFieldState,
         ...(mode === MODES.YAML ? [yamlHighlight] : []),
+        hyperLink,
     ]
 
     const extensions: Extension[] = [
@@ -222,7 +232,6 @@ const CodeEditor = <DiffView extends boolean = false>({
         basicSetup({
             ...basicSetupOptions,
             lineNumbers: false,
-            foldGutter: false,
             highlightActiveLine: false,
             highlightActiveLineGutter: false,
             syntaxHighlighting: false,