Skip to content

Commit 7a76975

Browse files
arunjaindevarunjaindev
committed
Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/hibernation-patch
2 parents e255b70 + 01fcfed commit 7a76975

File tree

20 files changed

+116
-72
lines changed

20 files changed

+116
-72
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.1",
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/Common/Dialogs/ConfirmationDialog.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ import {
2323
ConfirmationDialogType,
2424
} from './Types'
2525

26+
/**
27+
* @deprecated use confirmation modal instead
28+
*/
2629
const ConfirmationDialog = ({ className = '', children, close }: ConfirmationDialogType) => (
2730
<VisibleModal2 className="confirmation-dialog" close={close}>
2831
<div onClick={stopPropagation} className={`confirmation-dialog__body ${className}`}>{children}</div>

‎src/Common/SegmentedBarChart/SegmentedBarChart.tsx

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

1717
import React from 'react'
18+
import { motion } from 'framer-motion'
1819
import { SegmentedBarChartProps, Entity } from './types'
1920
import { FALLBACK_ENTITY } from './constants'
2021
import './styles.scss'
@@ -26,9 +27,10 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
2627
labelClassName,
2728
isProportional,
2829
swapLegendAndBar = false,
30+
showAnimationOnBar = false,
2931
}) => {
3032
const total = entities.reduce((sum, entity) => entity.value + sum, 0)
31-
const filteredEntities = entities.filter((entity) => entity.value)
33+
const filteredEntities = entities.filter((entity) => !!entity.value)
3234

3335
const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
3436

@@ -46,20 +48,20 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
4648

4749
const renderContent = () => {
4850
if (isProportional) {
49-
return entities
50-
.filter((entity) => !!entity.value)
51-
.map((entity) => (
52-
<div className="flexbox-col">
53-
{renderValue(entity.value, entity.label)}
54-
<div className="flex left dc__gap-6">
55-
<span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
56-
{renderLabel(entity.label)}
57-
</div>
51+
return filteredEntities.map((entity, idx) => (
52+
// eslint-disable-next-line react/no-array-index-key
53+
<div key={idx} className="flexbox-col">
54+
{renderValue(entity.value, entity.label)}
55+
<div className="flex left dc__gap-6">
56+
<span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
57+
{renderLabel(entity.label)}
5858
</div>
59-
))
59+
</div>
60+
))
6061
}
61-
return entities.map((entity) => (
62-
<div className={`${isProportional ? 'flexbox-col' : 'flexbox dc__gap-4 dc__align-items-center'}`}>
62+
return entities.map((entity, idx) => (
63+
// eslint-disable-next-line react/no-array-index-key
64+
<div key={idx} className="flexbox dc__gap-4 dc__align-items-center">
6365
<div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
6466
{renderValue(entity.value, entity.label)}
6567
{renderLabel(entity.label)}
@@ -78,8 +80,17 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
7880
)
7981

8082
const renderBar = () => (
81-
<div className="flexbox dc__gap-2">
82-
{filteredEntities?.map((entity, index, map) => (
83+
<motion.div
84+
{...(showAnimationOnBar
85+
? {
86+
initial: { width: 0 },
87+
animate: { width: '100%' },
88+
transition: { duration: 0.6 },
89+
}
90+
: {})}
91+
className="flexbox dc__gap-2"
92+
>
93+
{filteredEntities.map((entity, index, map) => (
8394
<div
8495
key={entity.label}
8596
className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
@@ -88,7 +99,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
8899
style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
89100
/>
90101
))}
91-
</div>
102+
</motion.div>
92103
)
93104

94105
return (

0 commit comments

Comments
 (0)