Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/security-modal

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.3-beta-3",
+    "version": "0.3.5-beta-3",
     "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'
@@ -209,6 +210,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('ecr'),
     },
     'docker-hub': {
         value: 'docker-hub',
@@ -232,6 +234,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('docker-hub'),
     },
     acr: {
         value: 'acr',
@@ -256,6 +259,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('acr'),
     },
     'artifact-registry': {
         value: 'artifact-registry',
@@ -279,6 +283,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: 'Paste json file content here',
         },
+        startIcon: getContainerRegistryIcon('artifact-registry'),
     },
     gcr: {
         value: 'gcr',
@@ -302,6 +307,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: 'Paste json file content here',
         },
+        startIcon: getContainerRegistryIcon('gcr'),
     },
     quay: {
         value: 'quay',
@@ -325,6 +331,7 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
             defaultValue: '',
             placeholder: '',
         },
+        startIcon: getContainerRegistryIcon('quay'),
     },
     other: {
         value: 'other',
@@ -348,6 +355,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

@@ -28,6 +28,7 @@ const ButtonElement = ({
         | 'dataTestId'
         | 'isLoading'
         | 'ariaLabel'
+        | 'showAriaLabelInTippy'
     > & {
         className: string
         'data-testid': ButtonProps['dataTestId']
@@ -135,6 +136,7 @@ const Button = ({
     tooltipProps = {},
     icon = null,
     ariaLabel = null,
+    showAriaLabelInTippy = true,
     ...props
 }: ButtonProps) => {
     const isDisabled = disabled || isLoading
@@ -144,7 +146,8 @@ const Button = ({
     })}`
 
     const getTooltipProps = (): TooltipProps => {
-        if (!showTooltip && icon && ariaLabel) {
+        // Show the aria label as tippy only if the action based tippy is not to be shown
+        if (!showTooltip && showAriaLabelInTippy && icon && ariaLabel) {
             return {
                 alwaysShowTippyOnHover: true,
                 content: ariaLabel,

src/Shared/Components/Button/Button.component.tsx

@@ -6,7 +6,7 @@ export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string>
     [ComponentSizeType.xs]: 'px-9 py-1 fs-12 lh-20 fw-6 dc__gap-6 mw-48',
     [ComponentSizeType.small]: 'px-9 py-3 fs-12 lh-20 fw-6 dc__gap-8 mw-48',
     [ComponentSizeType.medium]: 'px-11 py-5 fs-13 lh-20 fw-6 dc__gap-8 mw-48',
-    [ComponentSizeType.large]: 'px-13 py-7 fs-13 lh-20 fw-6 dc__gap-10 mw-64',
+    [ComponentSizeType.large]: 'px-13 py-7 fs-13 lh-20 fw-6 dc__gap-8 mw-64',
     [ComponentSizeType.xl]: 'px-15 py-9 fs-14 lh-20 fw-6 dc__gap-12 mw-64',
 } as const
 

src/Shared/Components/Button/constants.ts

@@ -105,6 +105,7 @@ export type ButtonProps = (
         | {
               icon?: never
               ariaLabel?: never
+              showAriaLabelInTippy?: never
               /**
                * Text to be displayed in the button
                */
@@ -123,6 +124,12 @@ export type ButtonProps = (
                * If provided, icon button is rendered
                */
               icon: ReactElement
+              /**
+               * If false, the ariaLabel is not shown in tippy
+               *
+               * @default true
+               */
+              showAriaLabelInTippy?: boolean
               /**
                * Label for the icon button for accessibility.
                * Shown on hover in tooltip if tippy is not provided explicitly

src/Shared/Components/Button/types.ts

@@ -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,

src/Shared/Components/SelectPicker/utils.ts

@@ -9,7 +9,7 @@ export const ToastContent = ({
 }: Pick<ToastProps, 'title' | 'description' | 'buttonProps'>) => (
     <div className="flexbox-col dc__gap-8 custom-toast__content">
         <div className="flexbox-col dc__gap-4">
-            <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__truncate">{title}</h3>
+            <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__ellipsis-right__2nd-line">{title}</h3>
             <p className="fs-12 fw-4 lh-18 m-0 dc__truncate--clamp-6">{description}</p>
         </div>
         {buttonProps && (

src/Shared/Services/ToastManager/ToastContent.tsx

@@ -27,8 +27,9 @@ export const TOAST_BASE_CONFIG: ToastContainerProps = {
                 dataTestId="close-toast"
                 ariaLabel="Close toast"
                 size={ComponentSizeType.xs}
-                variant={ButtonVariantType.text}
+                variant={ButtonVariantType.borderLess}
                 style={ButtonStyleType.neutral}
+                showAriaLabelInTippy={false}
             />
         </div>
     ),

src/Shared/Services/ToastManager/constants.tsx

@@ -1,6 +1,10 @@
 @import 'react-toastify/dist/ReactToastify.css';
 
 .Toastify {
+    &__toast {
+        gap: 8px;
+    }
+
     &__toast-container {
         padding: 0;
         width: 280px;
@@ -63,9 +67,16 @@
 
     // Custom styling for close btn
     &__close-btn {
-        svg {
-            use {
-                fill: var(--N0) !important;
+        button {
+            svg {
+                use {
+                    fill: var(--N0) !important;
+                }
+            }
+
+            &:hover,
+            &:active {
+                background: #fff3 !important;
             }
         }
     }