Merge branch 'develop' into refactor/compare-manifest

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.22",
+    "version": "0.5.0",
     "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

@@ -15,10 +15,10 @@
  */
 
 import { useEffect, useState } from 'react'
-import ReactSelect from 'react-select'
+import { SelectPicker, SelectPickerVariantType } from '@Shared/Components'
 import { fetchChartTemplateVersions } from './Common.service'
 import { ChartVersionAndTypeSelectorProps } from './Types'
-import { customStyles, getFilteredChartVersions, showError } from './Helper'
+import { getFilteredChartVersions, showError } from './Helper'
 
 interface DeploymentChartVersionType {
     chartRefId: number
@@ -78,20 +78,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

@@ -166,7 +166,7 @@ export const parseSchemaHiddenType = (hiddenSchema: HiddenType): MetaHiddenType
     const clone = structuredClone(hiddenSchema)
     if (typeof clone === 'string') {
         return {
-            value: false,
+            value: true,
             path: conformPathToPointers(clone),
         }
     }

src/Assets/Icon/ic-expand.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/Common/ChartVersionAndTypeSelector.tsx

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