From ca76ab2b4648e7e6f003ff8646dea285427f6ff9 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Tue, 17 Jun 2025 15:22:15 +0530 Subject: [PATCH 1/6] feat: CodeEditor - improve autocomplete UI --- package-lock.json | 7 +- package.json | 1 + .../Components/CodeEditor/CodeEditor.tsx | 3 + .../Components/CodeEditor/codeEditor.scss | 66 ++++++++++++++++++- 4 files changed, 73 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2e43bd67e..d45fd8ad3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "license": "ISC", "dependencies": { + "@codemirror/autocomplete": "6.18.6", "@codemirror/lang-json": "6.0.1", "@codemirror/lang-yaml": "6.1.2", "@codemirror/language": "6.10.8", @@ -635,9 +636,9 @@ } }, "node_modules/@codemirror/autocomplete": { - "version": "6.18.4", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz", - "integrity": "sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==", + "version": "6.18.6", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz", + "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==", "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", diff --git a/package.json b/package.json index 63c114be4..4b9068dbf 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "yaml": "^2.4.1" }, "dependencies": { + "@codemirror/autocomplete": "6.18.6", "@codemirror/lang-json": "6.0.1", "@codemirror/lang-yaml": "6.1.2", "@codemirror/language": "6.10.8", diff --git a/src/Shared/Components/CodeEditor/CodeEditor.tsx b/src/Shared/Components/CodeEditor/CodeEditor.tsx index b1cdcbcaa..c6f57f598 100644 --- a/src/Shared/Components/CodeEditor/CodeEditor.tsx +++ b/src/Shared/Components/CodeEditor/CodeEditor.tsx @@ -15,6 +15,7 @@ */ import { useEffect, useMemo, useRef, useState } from 'react' +import { autocompletion } from '@codemirror/autocomplete' import { foldGutter } from '@codemirror/language' import { lintGutter } from '@codemirror/lint' import { search } from '@codemirror/search' @@ -193,6 +194,7 @@ const CodeEditor = ({ drawSelection: true, highlightActiveLineGutter: true, tabSize, + autocompletion: false, } const handleOnChange: ReactCodeMirrorProps['onChange'] = (newValue) => { @@ -216,6 +218,7 @@ const CodeEditor = ({ // EXTENSIONS const getBaseExtensions = (): Extension[] => [ basicSetup(basicSetupOptions), + autocompletion({ closeOnBlur: false }), themeExtension, keymap.of([ ...vscodeKeymap.filter(({ key }) => key !== 'Mod-Alt-Enter' && key !== 'Mod-Enter' && key !== 'Mod-f'), diff --git a/src/Shared/Components/CodeEditor/codeEditor.scss b/src/Shared/Components/CodeEditor/codeEditor.scss index bd1894d7e..49907ae4a 100644 --- a/src/Shared/Components/CodeEditor/codeEditor.scss +++ b/src/Shared/Components/CodeEditor/codeEditor.scss @@ -181,7 +181,54 @@ } .cm-tooltip-autocomplete { - background-color: var(--bg-primary); + padding: 2px; + background-color: var(--bg-menu-primary); + border: 1px solid var(--border-primary-translucent); + + & > ul > li { + display: flex; + gap: 6px; + padding: 2px 4px; + color: var(--N900); + border-radius: 2px; + font-size: 13px; + line-height: 20px; + } + + & > ul li[aria-selected] { + color: var(--N900); + background-color: var(--bg-hover); + } + + .cm-completionDetail { + margin-left: 0; + } + + .cm-completionIcon.cm-completionIcon-property { + box-sizing: border-box; + height: 14px; + width: 14px; + padding-right: 0; + font-size: 100%; + vertical-align: middle; + opacity: 1; + + &::after { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgb(29, 39, 48)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 22.015a.75.75 0 0 1-.368-.097l-8.25-4.64A.75.75 0 0 1 3 16.623V7.376a.75.75 0 0 1 .382-.654l8.25-4.64a.75.75 0 0 1 .736 0l8.25 4.64a.75.75 0 0 1 .382.654v9.248a.75.75 0 0 1-.382.654l-8.25 4.64a.75.75 0 0 1-.368.097Zm0 0L12.089 12m8.808-5.004L12.089 12m0 0L3.104 6.995' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); + } + } + } + + .cm-tooltip .cm-completionInfo { + padding: 3px 7px; + background-color: var(--bg-menu-primary); + color: var(--N700); + border: 1px solid var(--border-primary-translucent); + border-radius: 0; + font-size: 13px; + line-height: 1.5; + max-height: 240px; + overflow-y: auto; } .cm-diagnostic-error { @@ -277,6 +324,23 @@ } } +// THEME SPECIFIC STYLES +.component-specific-theme__dark { + .cm-editor { + .cm-tooltip-autocomplete .cm-completionIcon.cm-completionIcon-property::after { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgb(228, 229, 230)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 22.015a.75.75 0 0 1-.368-.097l-8.25-4.64A.75.75 0 0 1 3 16.623V7.376a.75.75 0 0 1 .382-.654l8.25-4.64a.75.75 0 0 1 .736 0l8.25 4.64a.75.75 0 0 1 .382.654v9.248a.75.75 0 0 1-.382.654l-8.25 4.64a.75.75 0 0 1-.368.097Zm0 0L12.089 12m8.808-5.004L12.089 12m0 0L3.104 6.995' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); + } + + .cm-lint-marker-error { + content: url('data:image/svg+xml,'); + } + + .cm-lint-marker-warning { + content: url('data:image/svg+xml,'); + } + } +} + // MINIMAP STYLES .code-editor__mini-map { user-select: none; From 7d55ec4e13171fb66ca180d13f3c42c7a3f4c139 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Tue, 17 Jun 2025 15:23:23 +0530 Subject: [PATCH 2/6] feat: FilterSelectPicker - select options on menu close --- src/Shared/Components/SelectPicker/FilterSelectPicker.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx b/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx index db5ce8d1f..7210ef5d0 100644 --- a/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx +++ b/src/Shared/Components/SelectPicker/FilterSelectPicker.tsx @@ -71,11 +71,6 @@ const FilterSelectPicker = ({ setSelectedOptions(structuredClone(selectedOptionsToUpdate) as SelectPickerOptionType[]) } - const handleMenuClose = () => { - closeMenu() - setSelectedOptions(structuredClone(appliedFilterOptions ?? [])) - } - const handleApplyClick: ButtonProps['onClick'] = (e) => { handleApplyFilter(selectedOptions) resetTriggerAutoClickTimestamp() @@ -113,7 +108,7 @@ const FilterSelectPicker = ({ isMulti menuIsOpen={isMenuOpen} onMenuOpen={openMenu} - onMenuClose={handleMenuClose} + onMenuClose={handleApplyClick as () => void} onChange={handleSelectOnChange} menuListFooterConfig={{ type: 'button', From 857136a50712bd8fd69e30b36ca228b6df9a84be Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Tue, 17 Jun 2025 17:03:28 +0530 Subject: [PATCH 3/6] feat: add VALUE_COLUMN_DROPDOWN_LABEL constant --- .../DevtronApps/Details/CIPipeline/constants.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts b/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts index 1e2cc7e6d..03e5287d4 100644 --- a/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts +++ b/src/Pages/Applications/DevtronApps/Details/CIPipeline/constants.ts @@ -63,3 +63,12 @@ export const IO_VARIABLES_VALUE_COLUMN_DATE_OPTIONS: SelectPickerOptionType Date: Tue, 24 Jun 2025 13:14:42 +0530 Subject: [PATCH 4/6] fix(Segment): replace motion.label with label and wrap selected state in AnimatePresence --- src/Common/SegmentedControl/Segment.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/Common/SegmentedControl/Segment.tsx b/src/Common/SegmentedControl/Segment.tsx index c4b23fdb3..52e4ef0b6 100644 --- a/src/Common/SegmentedControl/Segment.tsx +++ b/src/Common/SegmentedControl/Segment.tsx @@ -1,5 +1,5 @@ import { ReactElement, useMemo } from 'react' -import { motion } from 'framer-motion' +import { AnimatePresence, motion } from 'framer-motion' import { Tooltip } from '@Common/Tooltip' import { Icon } from '@Shared/Components' @@ -38,19 +38,21 @@ const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disable disabled={disabled} /> - - {isSelected && ( - - )} + + {isSelected && ( + + )} + {(isError || icon) && ( @@ -69,7 +71,7 @@ const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disable )} {label && {label}} - + ) From a4b011c26bc697a0f11e25ce9ed98b2214275756 Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 26 Jun 2025 10:31:39 +0530 Subject: [PATCH 5/6] chore(version): bump to 1.16.0-pre-2 --- package-lock.json | 11 ++++++----- package.json | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7908f7ade..52afe323b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-1", + "version": "1.16.0-pre-2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-1", + "version": "1.16.0-pre-2", "hasInstallScript": true, "license": "ISC", "dependencies": { @@ -563,9 +563,10 @@ } }, "node_modules/@codemirror/autocomplete": { - "version": "6.18.4", - "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz", - "integrity": "sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==", + "version": "6.18.6", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz", + "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==", + "license": "MIT", "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", diff --git a/package.json b/package.json index b3135148b..0a3efc2c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-1", + "version": "1.16.0-pre-2", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 840df4cb014897e2e41041d3f3a834ea3eec9c5c Mon Sep 17 00:00:00 2001 From: Rohit Raj Date: Thu, 26 Jun 2025 10:32:14 +0530 Subject: [PATCH 6/6] fix(Segment): simplify transition properties and adjust z-index for active mask --- src/Common/SegmentedControl/Segment.tsx | 2 +- src/Common/SegmentedControl/segmentedControl.scss | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Common/SegmentedControl/Segment.tsx b/src/Common/SegmentedControl/Segment.tsx index 52e4ef0b6..65d7cf1ba 100644 --- a/src/Common/SegmentedControl/Segment.tsx +++ b/src/Common/SegmentedControl/Segment.tsx @@ -49,7 +49,7 @@ const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disable )} diff --git a/src/Common/SegmentedControl/segmentedControl.scss b/src/Common/SegmentedControl/segmentedControl.scss index a2cc2ea19..8d170b8ae 100644 --- a/src/Common/SegmentedControl/segmentedControl.scss +++ b/src/Common/SegmentedControl/segmentedControl.scss @@ -37,10 +37,11 @@ border: 0.5px solid var(--border-primary); box-shadow: 0px 1px 2px 0px var(--black-20); } + } - > *:not(.active-mask) { - z-index: 1; - } + > span { + position: relative; + z-index: 1; } &:hover:not(#{$parent-selector}--selected):not(.cursor-not-allowed) {