Merge pull request #283 from devtron-labs/feat/replace-select-picker

chore: menu with modification from select picker

Author: shivani170

package-lock.json

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

package.json

@@ -15,6 +15,7 @@
  */
 
 import { RegistryTypeDetailType } from './Types'
+import { getContainerRegistryIcon } from './utils'
 
 export const FALLBACK_REQUEST_TIMEOUT = 60000
 export const Host = window?.__ORCHESTRATOR_ROOT__ ?? '/orchestrator'
@@ -207,6 +208,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('ecr'),
     },
     'docker-hub': {
         value: 'docker-hub',
@@ -230,6 +232,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('docker-hub'),
     },
     acr: {
         value: 'acr',
@@ -254,6 +257,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('acr'),
     },
     'artifact-registry': {
         value: 'artifact-registry',
@@ -277,6 +281,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: 'Paste json file content here',
         },
+        startIcon: getContainerRegistryIcon('artifact-registry'),
     },
     gcr: {
         value: 'gcr',
@@ -300,6 +305,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: 'Paste json file content here',
         },
+        startIcon: getContainerRegistryIcon('gcr'),
     },
     quay: {
         value: 'quay',
@@ -323,6 +329,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('quay'),
     },
     other: {
         value: 'other',
@@ -346,6 +353,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('other'),
     },
 }
 

src/Common/Constants.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, CSSProperties } from 'react'
+import React, { ReactNode, CSSProperties, ReactElement } from 'react'
 import { Placement } from 'tippy.js'
 import { UserGroupDTO } from '@Pages/GlobalConfigurations'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
@@ -726,6 +726,7 @@ export interface RegistryTypeDetailType {
     registryURL: InputDetailType
     id: InputDetailType
     password: InputDetailType
+    startIcon: ReactElement
 }
 
 export interface UseSearchString {

src/Common/Types.ts

@@ -0,0 +1,3 @@
+export const getContainerRegistryIcon = (registryValue: string): JSX.Element => (
+    <div className={`dc__registry-icon dc__git-logo ${registryValue}`} />
+)

src/Common/utils.tsx

@@ -392,7 +392,7 @@ export const KeyValueTable = <K extends string>({
                             ) : (
                                 <div
                                     key={key}
-                                    className={`bcn-50 cn-9 fs-13 lh-20 py-8 px-12 fw-6 flexbox dc__align-items-center dc__content-space dc__gap-2 ${key === firstHeaderKey ? `${hasRows ? 'dc__top-left-radius' : 'dc__left-radius-4'}` : `${hasRows ? 'dc__top-right-radius' : 'dc__right-radius-4'}`}  ${className || ''}`}
+                                    className={`bcn-50 cn-9 fs-13 lh-20 py-8 px-12 fw-6 flexbox dc__align-items-center dc__content-space dc__gap-2 ${key === firstHeaderKey ? `${hasRows ? 'dc__top-left-radius' : 'dc__left-radius-4'}` : `${hasRows ? 'dc__top-right-radius-4' : 'dc__right-radius-4'}`}  ${className || ''}`}
                                 >
                                     {label}
                                     {!!headerComponent && headerComponent}

src/Shared/Components/KeyValueTable/KeyValueTable.component.tsx

@@ -21,15 +21,24 @@ import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } fr
 
 const getMenuWidthFromSize = <OptionValue, IsMulti extends boolean>(
     menuSize: SelectPickerProps<OptionValue, IsMulti>['menuSize'],
-): string => {
+): { width: string; minWidth: string } => {
     switch (menuSize) {
         case ComponentSizeType.medium:
-            return '125%'
+            return {
+                width: '125%',
+                minWidth: '250px',
+            }
         case ComponentSizeType.large:
-            return '150%'
+            return {
+                width: '150%',
+                minWidth: '300px',
+            }
         case ComponentSizeType.small:
         default:
-            return '100%'
+            return {
+                width: '100%',
+                minWidth: '200px',
+            }
     }
 }
 
@@ -95,8 +104,8 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         backgroundColor: 'var(--N0)',
         border: '1px solid var(--N200)',
         boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.20)',
-        width: getMenuWidthFromSize(menuSize),
-        minWidth: '200px',
+        width: getMenuWidthFromSize(menuSize).width,
+        minWidth: getMenuWidthFromSize(menuSize).minWidth,
         zIndex: 'var(--select-picker-menu-index)',
         ...(shouldMenuAlignRight && {
             right: 0,