Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/collapsible-list-state

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.22",
+    "version": "4.0.2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -83,18 +83,18 @@
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
+        "react-keybind": "^0.9.4",
         "react-mde": "^11.5.0",
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
-        "react-keybind": "^0.9.4",
         "rxjs": "^7.8.1",
         "yaml": "^2.4.1"
     },
     "dependencies": {
         "@types/react-dates": "^21.8.6",
         "ansi_up": "^5.2.1",
-        "dayjs": "^1.11.12",
+        "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^9.0.0",
         "react-dates": "^21.8.0",

package.json

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react'
-import ReactSelect from 'react-select'
+import { useEffect, useState } from 'react'
 import { fetchChartTemplateVersions } from './Common.service'
 import { ChartVersionAndTypeSelectorProps, DeploymentChartVersionType } from './Types'
-import { customStyles, getFilteredChartVersions, showError } from './Helper'
+import { getFilteredChartVersions, showError } from './Helper'
+import { SelectPicker, SelectPickerVariantType } from '@Shared/Components'
 
 // @TODO: Generalize this component to be used in CodeEditor as Chart selector toolbar
 // when the Code Editor is moved to the fe-common-lib
@@ -71,20 +71,23 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
         <div className="flex">
             <div className="chart-type-options flex" data-testid="chart-type-options">
                 <span className="cn-7 mr-4">Chart Type</span>
-                <ReactSelect
+                <SelectPicker
+                    inputId='chart-type-select'
+                    label='Chart Type'
                     value={selectedChartType ?? chartTypeOptions[0]}
                     options={chartTypeOptions}
                     onChange={handleChartTypeChange}
-                    styles={customStyles}
+                    variant={SelectPickerVariantType.BORDER_LESS}
                 />
             </div>
             <div className="chart-version-options flex" data-testid="chart-version-options">
-                <span className="cn-7 mr-4">Chart Version</span>
-                <ReactSelect
+            <span className="cn-7 mr-4">Chart Version</span>
+                <SelectPicker
+                    inputId='chart-version-select'
                     value={selectedChartVersion ?? chartVersionOptions[0]}
                     options={chartVersionOptions}
                     onChange={handleChartVersionChange}
-                    styles={customStyles}
+                    variant={SelectPickerVariantType.BORDER_LESS}
                 />
             </div>
         </div>

src/Assets/Icon/ic-caret-left-small.svg

@@ -54,14 +54,6 @@ function useCodeEditorContext() {
     return context
 }
 
-/**
- * TODO: can be removed with this new merge into react-monaco-editor :)
- * see: https://github.com/react-monaco-editor/react-monaco-editor/pull/955
- * */
-const _onChange = {
-    onChange: null,
-}
-
 const INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT = 100
 
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(
@@ -107,6 +99,12 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const [contentHeight, setContentHeight] = useState(
             adjustEditorHeightToContent ? INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT : height,
         )
+        /**
+         * TODO: can be removed with this new merge into react-monaco-editor :)
+         * see: https://github.com/react-monaco-editor/react-monaco-editor/pull/955
+         * */
+        const onChangeRef = useRef(onChange)
+        onChangeRef.current = onChange
         monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
             base: 'vs-dark',
             inherit: true,
@@ -257,14 +255,9 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             editorRef.current.layout()
         }, [width, windowHeight])
 
-        /**
-         * NOTE: Please see @_onChange variable
-         */
-        _onChange.onChange = onChange
-
         const setCode = (value: string) => {
             dispatch({ type: 'setCode', value })
-            _onChange.onChange?.(value)
+            onChangeRef.current?.(value)
         }
 
         useEffect(() => {

src/Assets/Icon/ic-close.svg

@@ -35,7 +35,7 @@ const DropdownIndicator = (props) => (
     </components.DropdownIndicator>
 )
 
-export const Select = (props: WidgetProps) => {
+export const SelectWidget = (props: WidgetProps) => {
     const {
         id,
         multiple = false,

src/Assets/Icon/ic-expand.svg

@@ -15,4 +15,4 @@
  */
 
 export { Checkbox as CheckboxWidget } from './Checkbox'
-export { Select as SelectWidget } from './Select'
+export { SelectWidget } from './Select'

src/Common/ChartVersionAndTypeSelector.tsx

@@ -639,12 +639,6 @@ export interface VulnerabilityType {
     url?: string
 }
 
-export interface ScanVulnerabilitiesTableProps {
-    vulnerabilities: VulnerabilityType[]
-    hidePolicy?: boolean
-    shouldStick?: boolean
-}
-
 export interface MaterialInfo {
     revision: string
     modifiedTime: string | Date