Skip to content

Commit f95c7d0

Browse files
eshankvaisheshankvaish
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into chore/sync-theming-with-dev
2 parents 2b4eb7c + 9ea2c2f commit f95c7d0

File tree

74 files changed

+1761
-339
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+1761
-339
lines changed

‎package-lock.json

Lines changed: 40 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.4.0-beta-7",
3+
"version": "1.4.9",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
@@ -106,6 +106,7 @@
106106
"react-dates": "^21.8.0",
107107
"react-diff-viewer-continued": "^3.4.0",
108108
"react-monaco-editor": "^0.54.0",
109+
"react-virtualized-sticky-tree": "^3.0.0-beta18",
109110
"sass": "^1.69.7",
110111
"tslib": "2.7.0"
111112
},
@@ -120,6 +121,10 @@
120121
},
121122
"vite-plugin-svgr": {
122123
"vite": "5.4.11"
124+
},
125+
"react-virtualized-sticky-tree": {
126+
"react": "^17.0.2",
127+
"react-dom": "^17.0.2"
123128
}
124129
}
125130
}

‎src/Assets/Icon/ic-arrows-clockwise.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-shield-check.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-shield-warning-outline.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Common/AppStatus/AppStatus.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default function AppStatus({
7171
className="default-tt w-200"
7272
arrow={false}
7373
placement="top"
74-
content="To fetch app status for GitOps based deployments open the app detail page"
74+
content="To fetch app status for Helm based deployments open the app detail page"
7575
>
7676
<div className="flex">
7777
<InfoIcon className="icon-dim-16 fcn-6" />

‎src/Common/CodeEditor/CodeEditor.reducer.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export const CodeEditorReducer = (state: CodeEditorState, action: Action) => {
3030
return { ...state, theme: action.value }
3131
case 'setCode':
3232
return { ...state, code: action.value }
33+
case 'setDefaultCode':
34+
return { ...state, defaultCode: action.value }
3335
case 'setHeight':
3436
return { ...state, height: action.value.toString() }
3537
default:
@@ -72,6 +74,7 @@ export const initialState = ({
7274
mode,
7375
theme,
7476
value,
77+
defaultValue,
7578
diffView,
7679
noParsing,
7780
tabSize,
@@ -80,6 +83,7 @@ export const initialState = ({
8083
mode: mode as MODES,
8184
theme: getCodeEditorThemeFromAppTheme(theme, appTheme),
8285
code: noParsing ? value : parseValueToCode(value, mode, tabSize),
86+
defaultCode: noParsing ? defaultValue : parseValueToCode(defaultValue, mode, tabSize),
8387
diffMode: diffView,
8488
noParsing: [MODES.JSON, MODES.YAML].includes(mode as MODES) ? noParsing : true,
8589
})

‎src/Common/CodeEditor/CodeEditor.tsx

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'
18-
import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor'
18+
import MonacoEditor, { ChangeHandler, DiffEditorDidMount, EditorDidMount, MonacoDiffEditor } from 'react-monaco-editor'
1919
import ReactGA from 'react-ga4'
2020
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
2121
import { configureMonacoYaml } from 'monaco-yaml'
@@ -102,14 +102,15 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
102102
mode,
103103
theme,
104104
value,
105+
defaultValue,
105106
diffView,
106107
noParsing,
107108
tabSize,
108109
appTheme,
109110
}),
110111
)
111112
const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing)
112-
const [, originalJson, originlaYaml] = useJsonYaml(defaultValue, tabSize, state.mode, !state.noParsing)
113+
const [, originalJson, originalYaml] = useJsonYaml(state.defaultCode, tabSize, state.mode, !state.noParsing)
113114
const [contentHeight, setContentHeight] = useState(
114115
adjustEditorHeightToContent ? INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT : height,
115116
)
@@ -156,7 +157,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
156157
}
157158
}, [disableSearch])
158159

159-
const editorDidMount = (editor, monaco) => {
160+
const editorDidMount: EditorDidMount = (editor) => {
160161
if (
161162
mode === MODES.YAML &&
162163
editor &&
@@ -177,15 +178,21 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
177178
}
178179

179180
if (adjustEditorHeightToContent && editor) {
180-
if (!('getModifiedEditor' in editor)) {
181-
editor.onDidContentSizeChange(() => {
182-
setContentHeight(editor.getContentHeight())
183-
})
181+
editor.onDidContentSizeChange(() => {
184182
setContentHeight(editor.getContentHeight())
185-
return
186-
}
187-
const modifiedEditor = editor.getModifiedEditor()
188-
const originalEditor = editor.getOriginalEditor()
183+
})
184+
setContentHeight(editor.getContentHeight())
185+
}
186+
187+
editorRef.current = editor
188+
monacoRef.current = monaco
189+
}
190+
191+
const diffEditorDidMount: DiffEditorDidMount = (editor, monaco) => {
192+
const originalEditor = editor.getOriginalEditor()
193+
const modifiedEditor = editor.getModifiedEditor()
194+
195+
if (adjustEditorHeightToContent) {
189196
originalEditor.onDidContentSizeChange(() => {
190197
setContentHeight(
191198
Math.max(
@@ -194,6 +201,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
194201
),
195202
)
196203
})
204+
197205
modifiedEditor.onDidContentSizeChange(() => {
198206
setContentHeight(
199207
Math.max(
@@ -202,9 +210,14 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
202210
),
203211
)
204212
})
205-
setContentHeight(Math.max(modifiedEditor.getContentHeight(), modifiedEditor.getContentHeight()))
213+
214+
setContentHeight(Math.max(originalEditor.getContentHeight(), modifiedEditor.getContentHeight()))
206215
}
207216

217+
originalEditor.onDidChangeModelContent(() => {
218+
codeEditorOnChange(modifiedEditor.getValue(), originalEditor.getValue())
219+
})
220+
208221
editorRef.current = editor
209222
monacoRef.current = monaco
210223
}
@@ -250,14 +263,15 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
250263
editorRef.current.layout()
251264
}, [width, windowHeight])
252265

253-
const setCode = (value: string) => {
266+
const setCode = (value: string, originalValue: string) => {
254267
dispatch({ type: 'setCode', value })
255-
onChangeRef.current?.(value)
268+
dispatch({ type: 'setDefaultCode', value: originalValue })
269+
onChangeRef.current?.(value, originalValue)
256270
}
257271

258272
useEffectAfterMount(() => {
259273
if (noParsing) {
260-
setCode(value)
274+
setCode(value, defaultValue)
261275

262276
return
263277
}
@@ -266,8 +280,8 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
266280
return
267281
}
268282

269-
setCode(parseValueToCode(value, state.mode, tabSize))
270-
}, [value, noParsing])
283+
setCode(parseValueToCode(value, state.mode, tabSize), parseValueToCode(defaultValue, state.mode, tabSize))
284+
}, [value, defaultValue, noParsing])
271285

272286
useEffect(() => {
273287
dispatch({ type: 'setDiff', value: diffView })
@@ -279,13 +293,17 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
279293
}
280294
}, [focus])
281295

282-
function handleOnChange(newValue, e) {
283-
setCode(newValue)
296+
const codeEditorOnChange = (newValue: string, newOriginalValue: string) => {
297+
setCode(newValue, newOriginalValue)
298+
}
299+
300+
const handleOnChange: ChangeHandler = (newValue) => {
301+
codeEditorOnChange(newValue, editorRef.current?.getOriginalEditor?.().getValue?.() ?? '')
284302
}
285303

286304
function handleLanguageChange(mode: 'json' | 'yaml') {
287305
dispatch({ type: 'changeLanguage', value: mode })
288-
setCode(mode === 'json' ? json : yamlCode)
306+
setCode(mode === 'json' ? json : yamlCode, mode === 'json' ? originalJson : originalYaml)
289307
}
290308

291309
const options: monaco.editor.IEditorConstructionOptions = {
@@ -321,6 +339,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
321339

322340
const diffViewOptions: monaco.editor.IDiffEditorConstructionOptions = {
323341
...options,
342+
originalEditable: !readOnly,
324343
useInlineViewWhenSpaceIsLimited: false,
325344
}
326345

@@ -336,15 +355,13 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
336355
{shebang && <div className="code-editor__shebang">{shebang}</div>}
337356
{state.diffMode ? (
338357
<MonacoDiffEditor
339-
original={
340-
noParsing ? defaultValue : state.mode === 'json' ? originalJson : originlaYaml
341-
}
358+
original={state.defaultCode}
342359
value={state.code}
343360
language={state.mode}
344361
onChange={handleOnChange}
345362
options={diffViewOptions}
346363
theme={state.theme.toLowerCase().split(' ').join('-')}
347-
editorDidMount={editorDidMount}
364+
editorDidMount={diffEditorDidMount}
348365
height={editorHeight}
349366
width="100%"
350367
/>

‎src/Common/CodeEditor/types.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ interface CodeEditorBaseInterface {
3333
value?: string
3434
lineDecorationsWidth?: number
3535
responseType?: string
36-
onChange?: (string) => void
36+
onChange?: (value: string, defaultValue: string) => void
3737
onBlur?: () => void
3838
onFocus?: () => void
3939
children?: any
@@ -95,7 +95,7 @@ export interface CodeEditorHeaderComposition {
9595
Clipboard?: React.FC<any>
9696
}
9797

98-
export type ActionTypes = 'changeLanguage' | 'setDiff' | 'setTheme' | 'setCode' | 'setHeight'
98+
export type ActionTypes = 'changeLanguage' | 'setDiff' | 'setTheme' | 'setCode' | 'setDefaultCode' | 'setHeight'
9999

100100
export interface Action {
101101
type: ActionTypes
@@ -106,6 +106,7 @@ export interface CodeEditorInitialValueType extends Pick<CodeEditorBaseInterface
106106
mode: string
107107
diffView: boolean
108108
value: string
109+
defaultValue: string
109110
noParsing?: boolean
110111
tabSize: number
111112
appTheme: AppThemeType
@@ -116,6 +117,7 @@ export interface CodeEditorState {
116117
diffMode: boolean
117118
theme: CodeEditorThemesKeys
118119
code: string
120+
defaultCode: string
119121
noParsing: boolean
120122
}
121123

‎src/Common/Common.service.ts

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import {
4141
GlobalVariableDTO,
4242
GlobalVariableOptionType,
4343
} from './Types'
44-
import { ApiResourceType } from '../Pages'
44+
import { ApiResourceType, STAGE_MAP } from '../Pages'
4545
import { RefVariableType, VariableTypeFormat } from './CIPipeline.Types'
4646

4747
export const getTeamListMin = (): Promise<TeamList> => {
@@ -68,13 +68,6 @@ interface UserRole extends ResponseType {
6868
}
6969
}
7070

71-
const stageMap = {
72-
PRECD: 'PRE',
73-
CD: 'DEPLOY',
74-
POSTCD: 'POST',
75-
APPROVAL: 'APPROVAL',
76-
}
77-
7871
export const SourceTypeMap = {
7972
BranchFixed: 'SOURCE_TYPE_BRANCH_FIXED',
8073
WEBHOOK: 'WEBHOOK',
@@ -396,7 +389,7 @@ export const genericCDMaterialsService = (
396389
default:
397390
URL = getUrlWithSearchParams(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, {
398391
...manipulatedParams,
399-
stage: stageMap[stage],
392+
stage: STAGE_MAP[stage],
400393
})
401394
break
402395
}

0 commit comments

Comments
 (0)