Merge branch 'main' into tagging-implementation

Author: kirandevtn

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.4.0-patch-1",
+    "version": "0.5.0",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

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/Common/ChartVersionAndTypeSelector.tsx

@@ -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/Common/CodeEditor/CodeEditor.tsx

@@ -27,6 +27,11 @@
         max-height: 200px;
         width: auto;
     }
+    .button svg {
+        height: 100%;
+        max-height: none;
+        width: 100%;
+    }
     h1,
     h2,
     h3,

src/Common/EmptyState/emptyState.scss

@@ -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/RJSF/widgets/Select.tsx

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

src/Common/RJSF/widgets/index.ts

@@ -63,7 +63,7 @@ const SortableTableHeaderCell = ({
     return (
         <button
             type="button"
-            className={`dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text ${!isSortable ? 'cursor-default' : ''}`}
+            className={`dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text ${!isSortable ? 'cursor-default' : ''}`}
             onClick={isSortable ? triggerSorting : noop}
             disabled={disabled}
         >

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -37,7 +37,7 @@ const Tooltip = ({
             maxWidth=""
             {...rest}
             {...(shortcutKeyCombo ? { content: <ShortcutKeyComboTooltipContent {...shortcutKeyCombo} /> } : {})}
-            className={`${shortcutKeyCombo ? 'shortcut-keys__tippy' : 'default-tt'} ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className ?? ''}`}
+            className={`${shortcutKeyCombo ? 'shortcut-keys__tippy' : 'default-tt'} ${wordBreak ? 'dc__word-break' : ''} dc__mxw-200 ${rest.className ?? ''}`}
         >
             {cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
         </TippyJS>

src/Common/Tooltip/Tooltip.tsx

@@ -15,10 +15,10 @@
  */
 
 import { FormEvent, FunctionComponent, useMemo } from 'react'
-import ReactSelect from 'react-select'
+import { SelectPicker } from '@Shared/Components/SelectPicker'
+import { ComponentSizeType } from '@Shared/constants'
 import { BuildInfraFormActionProps } from './types'
 import { OptionType } from '../../../Common'
-import { unitSelectorStyles } from './utils'
 import { BUILD_INFRA_INPUT_CONSTRAINTS } from './constants'
 import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
 
@@ -93,19 +93,16 @@ const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps> = ({
                 </div>
 
                 {profileUnitsMap && (
-                    <ReactSelect
+                    <SelectPicker
+                        inputId={`${actionType}-unit`}
                         classNamePrefix="unit-dropdown"
                         name={`${actionType}-unit`}
-                        className="bcn-0 dc__mxw-120"
                         options={unitOptions}
                         value={currentUnit}
                         onChange={handleUnitChange}
                         isSearchable={false}
-                        components={{
-                            IndicatorSeparator: null,
-                            ClearIndicator: null,
-                        }}
-                        styles={unitSelectorStyles()}
+                        size={ComponentSizeType.large}
+                        shouldMenuAlignRight
                     />
                 )}
             </div>