Skip to content

Commit cb657db

Browse files
arunjaindevarunjaindev
authored
Merge branch 'develop' into feat/config-drift-state
2 parents 35245e0 + 01fcfed commit cb657db

File tree

10 files changed

+63
-22
lines changed

10 files changed

+63
-22
lines changed

‎package-lock.json

Lines changed: 2 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: 1 addition & 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.6.2",
3+
"version": "1.6.4",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/CodeEditor/CodeEditor.theme.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ export const getCodeEditorTheme = (isDark: boolean) => {
99
fontSize: '14px',
1010
fontFamily: 'Inconsolata, monospace',
1111
background: 'var(--bg-code-editor-base)',
12-
foreground: isDark ? 'var(--white)' : 'var(--black)',
13-
caret: isDark ? 'var(--white)' : 'var(--black)',
12+
foreground: 'var(--N900)',
13+
caret: 'var(--N900)',
1414
gutterBackground: 'var(--bg-code-editor-base-gutter)',
15-
gutterForeground: isDark ? 'var(--white)' : 'var(--black)',
15+
gutterForeground: 'var(--N900)',
1616
gutterBorder: 'transparent',
1717
lineHighlight: 'var(--active-line)',
1818
},

‎src/Common/CodeEditor/CodeEditor.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,6 @@ const CodeEditor = <DiffView extends boolean = false>({
175175
defaultKeymap: false,
176176
searchKeymap: false,
177177
foldGutter: false,
178-
// TODO: need to remove this after getting proper colors from design
179178
drawSelection: false,
180179
highlightActiveLineGutter: false,
181180
tabSize,

‎src/Common/CodeEditor/CodeEditorRenderer.tsx

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,19 @@ export const CodeEditorRenderer = ({
3131
}: CodeEditorRendererProps) => {
3232
// STATES
3333
const [isFocused, setIsFocused] = useState(false)
34+
const [gutterWidth, setGutterWidth] = useState(0)
3435

3536
// REFS
3637
const codeMirrorRef = useRef<ReactCodeMirrorRef>()
3738

39+
// This handling will be removed once shebang is shown inside the codeEditor rather than extra div
40+
const updateGutterWith = () => {
41+
const gutters = document.querySelector('.cm-gutters')
42+
if (gutters) {
43+
setGutterWidth(gutters.getBoundingClientRect().width)
44+
}
45+
}
46+
3847
useEffect(() => {
3948
// Added timeout to ensure the autofocus code is executed post the re-renders
4049
setTimeout(() => {
@@ -46,17 +55,23 @@ export const CodeEditorRenderer = ({
4655

4756
// STOPPING OVERSCROLL BROWSER BACK/FORWARD BEHAVIOR WHEN CODE EDITOR IS FOCUSED
4857
useEffect(() => {
49-
const html = document.querySelector('html')
50-
if (html) {
58+
const body = document.querySelector('body')
59+
if (body) {
5160
const { scrollWidth, clientWidth } = codeMirrorRef.current?.view?.scrollDOM ?? {}
5261
if (isFocused && scrollWidth > clientWidth) {
53-
html.classList.add('dc__overscroll-none')
62+
body.classList.add('dc__overscroll-none')
5463
} else {
55-
html.classList.remove('dc__overscroll-none')
64+
body.classList.remove('dc__overscroll-none')
5665
}
5766
}
67+
68+
updateGutterWith()
5869
}, [state.lhsCode, state.code, isFocused])
5970

71+
const onCreateEditor = () => {
72+
updateGutterWith()
73+
}
74+
6075
const handleOnFocus: FocusEventHandler<HTMLDivElement> = (e) => {
6176
setIsFocused(true)
6277
onFocus?.(e)
@@ -105,12 +120,15 @@ export const CodeEditorRenderer = ({
105120
) : (
106121
<div ref={codeMirrorParentDivRef} className={`w-100 ${codeEditorParentClassName}`}>
107122
{shebang && (
108-
<div
109-
className={`flexbox text__white code-editor__shebang ${isDarkTheme ? 'code-editor__shebang__dark' : 'code-editor__shebang__light'}`}
123+
<p
124+
className={`m-0 flexbox cn-9 code-editor__shebang ${isDarkTheme ? 'code-editor__shebang__dark' : 'code-editor__shebang__light'}`}
110125
>
111-
<div className="code-editor__shebang__gutter dc__align-self-stretch" />
126+
<span
127+
className="code-editor__shebang__gutter dc__align-self-stretch"
128+
style={{ flex: `0 0 ${gutterWidth}px` }}
129+
/>
112130
{shebang}
113-
</div>
131+
</p>
114132
)}
115133
<CodeMirror
116134
ref={codeMirrorRef}
@@ -122,6 +140,7 @@ export const CodeEditorRenderer = ({
122140
readOnly={readOnly}
123141
height={codeEditorHeight}
124142
minHeight="250px"
143+
onCreateEditor={onCreateEditor}
125144
onFocus={handleOnFocus}
126145
onBlur={handleOnBlur}
127146
onChange={handleOnChange}

‎src/Common/CodeEditor/Extensions/findAndReplace.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ export const codeEditorFindReplace = (view: EditorView): Panel => {
432432
findField?.select()
433433
}
434434

435-
const update = ({ transactions, changes }: ViewUpdate) => {
435+
const update = ({ transactions, docChanged, state, startState }: ViewUpdate) => {
436436
transactions.forEach((tr) => {
437437
tr.effects.forEach((effect) => {
438438
if (effect.is(setSearchQuery)) {
@@ -441,7 +441,7 @@ export const codeEditorFindReplace = (view: EditorView): Panel => {
441441
})
442442
})
443443

444-
if (changes) {
444+
if (docChanged || state.readOnly !== startState.readOnly) {
445445
renderFindReplace()
446446
}
447447
}

‎src/Common/CodeEditor/codeEditor.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
border-left: 1px solid var(--N200);
2525
}
2626

27+
.cm-scroller {
28+
min-height: inherit;
29+
}
30+
2731
.cm-editor {
2832
&.cm-focused {
2933
outline: none;
@@ -271,7 +275,6 @@
271275
background-color: var(--bg-code-editor-base);
272276

273277
&__gutter {
274-
flex: 0 0 52px;
275278
background-color: var(--bg-code-editor-base-gutter);
276279
}
277280
}

‎src/Common/CodeEditor/utils.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ export const getValidationSchema = ({
161161
validatorSchema,
162162
schemaURI,
163163
}: Pick<CodeEditorProps, 'schemaURI' | 'validatorSchema' | 'mode'>): Extension[] => {
164-
if (!Object.keys(validatorSchema).length) {
164+
if (!Object.keys(validatorSchema ?? {}).length) {
165165
return []
166166
}
167167

‎src/Shared/Components/Textarea/Textarea.component.tsx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { TextareaHTMLAttributes, useRef } from 'react'
1+
import { TextareaHTMLAttributes, useEffect, useRef, useState } from 'react'
22
import {
33
COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP,
44
COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP,
@@ -27,9 +27,13 @@ const Textarea = ({
2727
size = ComponentSizeType.large,
2828
ariaLabel,
2929
borderRadiusConfig,
30+
value,
3031
...props
3132
}: TextareaProps) => {
3233
const textareaRef = useRef<HTMLTextAreaElement>(null)
34+
// If the passed value remains the same, the component will behave as un-controlled
35+
// else, it behaves as controlled
36+
const [text, setText] = useState('')
3337

3438
const updateRefsHeight = (height: number) => {
3539
const refElement = textareaRef.current
@@ -57,7 +61,17 @@ const Textarea = ({
5761
updateRefsHeight(nextHeight)
5862
}
5963

60-
useThrottledEffect(reInitHeight, 300, [props.value])
64+
useEffect(() => {
65+
setText(value)
66+
}, [value])
67+
68+
useThrottledEffect(reInitHeight, 300, [text])
69+
70+
const handleChange: TextareaProps['onChange'] = (e) => {
71+
setText(e.target.value)
72+
73+
props.onChange?.(e)
74+
}
6175

6276
const handleBlur: TextareaProps['onBlur'] = (event) => {
6377
// NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
@@ -113,6 +127,8 @@ const Textarea = ({
113127
spellCheck={false}
114128
data-testid={name}
115129
required={required}
130+
value={text}
131+
onChange={handleChange}
116132
onBlur={handleBlur}
117133
onKeyDown={handleKeyDown}
118134
className={`${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[size]} ${COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP[size]} ${getFormFieldBorderClassName(borderRadiusConfig)} w-100 dc__overflow-auto textarea`}

‎src/Shared/Components/Textarea/types.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FormFieldWrapperProps } from '../FormFieldWrapper'
55
export interface TextareaProps
66
extends Omit<FormFieldWrapperProps, 'children' | 'inputId'>,
77
Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onBlur' | 'disabled' | 'autoFocus' | 'onFocus'>,
8-
Required<Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'onChange' | 'value' | 'name'>> {
8+
Required<Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'onChange' | 'name'>> {
99
/**
1010
* If false, the input is not trimmed on blur
1111
*
@@ -18,4 +18,8 @@ export interface TextareaProps
1818
* @default ComponentSizeType.large
1919
*/
2020
size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
21+
/**
22+
* Value of the textarea
23+
*/
24+
value: string
2125
}

0 commit comments

Comments
 (0)