Merge branch 'develop' into feat/patch-dt-cm-cs

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -26,7 +26,7 @@ export const KEYBOARD_KEYS_MAP = {
     R: 'R',
     K: 'K',
     Escape: 'Escape',
-    Enter: 'Enter',
+    Enter: '↩',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -29,7 +29,7 @@ export interface ImageCardAccordionProps extends MaterialSecurityInfoType {
     isScanEnabled: boolean
     SecurityModalSidebar: React.FC<SidebarPropsType>
     getSecurityScan: (
-        props: Pick<AppDetailsPayload, 'appId' | 'envId' | 'artifactId'>,
+        props: Pick<AppDetailsPayload, 'appId' | 'artifactId'>,
     ) => Promise<ResponseType<ApiResponseResultType>>
 }
 

src/Shared/Components/ImageCardAccordion/types.ts

@@ -12,8 +12,10 @@ import {
     stopPropagation,
     VisibleModal2,
 } from '@Common/index'
-import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
+import { ReactComponent as ICClose } from '@Icons/ic-cross.svg'
 import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
+import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components/Button'
+import { ComponentSizeType } from '@Shared/constants'
 import { Table, InfoCard } from './components'
 import { DEFAULT_SECURITY_MODAL_STATE } from './constants'
 import { getTableData, getInfoCardData } from './config'
@@ -64,16 +66,16 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     const renderHeader = () => (
         <div className="flexbox dc__content-space dc__align-items-center pl-20 pr-20 pt-12 pb-12 dc__border-bottom">
             <span className="fs-16 fw-6 lh-24 cn-9">Security</span>
-            <button
-                type="button"
-                className="dc__unset-button-styles"
+            <Button
+                dataTestId="close-security-modal"
+                ariaLabel="close-security-modal"
+                icon={<ICClose />}
                 onClick={handleModalClose}
-                aria-label="Close Modal"
-            >
-                <div className="flex p-4">
-                    <ICClose className="icon-dim-16" />
-                </div>
-            </button>
+                showAriaLabelInTippy={false}
+                size={ComponentSizeType.xs}
+                style={ButtonStyleType.neutral}
+                variant={ButtonVariantType.borderLess}
+            />
         </div>
     )
 

src/Shared/Components/Security/SecurityModal/SecurityModal.tsx

@@ -83,7 +83,7 @@ export const useGetSecurityVulnerabilities = ({
     )
 
     const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
-        () => getSecurityScan({ artifactId, appId, envId }),
+        () => getSecurityScan({ artifactId, appId }),
         [],
         isScanned && isScanEnabled && isScanV2Enabled && !!getSecurityScan,
         {

src/Shared/Components/Security/Vulnerabilities/utils.ts

@@ -6,10 +6,15 @@ import { useEffect, useMemo, useState } from 'react'
 import { ReactComponent as ICFilter } from '@Icons/ic-filter.svg'
 import { ReactComponent as ICFilterApplied } from '@Icons/ic-filter-applied.svg'
 import { ComponentSizeType } from '@Shared/constants'
+import { useRegisterShortcut, UseRegisterShortcutProvider } from '@Common/Hooks'
+import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
+import { SupportedKeyboardKeysType } from '@Common/Hooks/UseRegisterShortcut/types'
 import SelectPicker from './SelectPicker.component'
 import { FilterSelectPickerProps, SelectPickerOptionType, SelectPickerProps } from './type'
 import { Button } from '../Button'
 
+const APPLY_FILTER_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = [IS_PLATFORM_MAC_OS ? 'Meta' : 'Control', 'Enter']
+
 const FilterSelectPicker = ({
     appliedFilterOptions,
     handleApplyFilter,
@@ -23,6 +28,8 @@ const FilterSelectPicker = ({
         structuredClone(appliedFilterOptions ?? []),
     )
 
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
     const appliedFiltersCount = appliedFilterOptions?.length ?? 0
 
     useEffect(() => {
@@ -52,24 +59,39 @@ const FilterSelectPicker = ({
         setSelectedOptions(structuredClone(appliedFilterOptions ?? []))
     }
 
-    const renderApplyButton = () => {
-        const handleApplyClick = () => {
-            handleApplyFilter(selectedOptions)
-            closeMenu()
+    const handleApplyClick = () => {
+        handleApplyFilter(selectedOptions)
+        closeMenu()
+    }
+
+    const renderApplyButton = () => (
+        <div className="p-8 dc__border-top-n1">
+            <Button
+                text="Apply"
+                dataTestId="filter-select-picker-apply"
+                onClick={handleApplyClick}
+                size={ComponentSizeType.small}
+                fullWidth
+                showTooltip
+                tooltipProps={{
+                    shortcutKeyCombo: {
+                        text: 'Apply filter',
+                        combo: APPLY_FILTER_SHORTCUT_KEYS,
+                    },
+                }}
+            />
+        </div>
+    )
+
+    useEffect(() => {
+        if (isMenuOpen) {
+            registerShortcut({ keys: APPLY_FILTER_SHORTCUT_KEYS, callback: handleApplyClick })
         }
 
-        return (
-            <div className="p-8 dc__border-top-n1">
-                <Button
-                    text="Apply"
-                    dataTestId="filter-select-picker-apply"
-                    onClick={handleApplyClick}
-                    size={ComponentSizeType.small}
-                    fullWidth
-                />
-            </div>
-        )
-    }
+        return () => {
+            unregisterShortcut(APPLY_FILTER_SHORTCUT_KEYS)
+        }
+    }, [handleApplyClick, isMenuOpen])
 
     return (
         <div className="dc__mxw-250">
@@ -96,4 +118,10 @@ const FilterSelectPicker = ({
     )
 }
 
-export default FilterSelectPicker
+const FilterSelectPickerWrapper = (props: FilterSelectPickerProps) => (
+    <UseRegisterShortcutProvider ignoreTags={[]}>
+        <FilterSelectPicker {...props} />
+    </UseRegisterShortcutProvider>
+)
+
+export default FilterSelectPickerWrapper

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { GroupHeadingProps, MultiValueProps, OptionProps, ValueContainerProps, MenuPlacement } from 'react-select'
+import {
+    GroupHeadingProps,
+    MultiValueProps,
+    OptionProps,
+    ValueContainerProps,
+    MenuPlacement,
+    Props as ReactSelectProps,
+} from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 import { ReactElement, useCallback, useMemo } from 'react'
 
@@ -308,6 +315,13 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         }
     }
 
+    const handleKeyDown: ReactSelectProps['onKeyDown'] = (e) => {
+        // Prevent the option from being selected if meta or control key is pressed
+        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            e.preventDefault()
+        }
+    }
+
     const commonProps = useMemo(
         () => ({
             name: name || inputId,
@@ -318,7 +332,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             menuPlacement: 'auto' as MenuPlacement,
             menuPosition,
             menuShouldScrollIntoView: true,
-            backspaceRemovesValue: isMulti,
+            backspaceRemovesValue: isMulti && controlShouldRenderValue,
             'aria-errormessage': errorElementId,
             'aria-invalid': !!error,
             'aria-labelledby': labelId,
@@ -336,8 +350,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             errorElementId,
             error,
             labelId,
-            isMulti,
             shouldRenderCustomOptions,
+            controlShouldRenderValue,
         ],
     )
 
@@ -393,6 +407,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onInputChange={onInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
+                            onKeyDown={handleKeyDown}
                         />
                     </div>
                 </ConditionalWrap>

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -207,16 +207,18 @@ export const SelectPickerMenuList = <OptionValue,>(props: MenuListProps<SelectPi
     } = props
 
     return (
-        // added key here to explicitly re-render the list on input change so that the top option is rendered
-        <components.MenuList {...props} key={inputValue}>
-            <div className="py-4 cursor">{shouldRenderCustomOptions ? renderCustomOptions() : children}</div>
-            {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
+        <>
+            {/* added key here to explicitly re-render the list on input change so that the top option is rendered */}
+            <components.MenuList {...props} key={inputValue}>
+                <div className="py-4 cursor">{shouldRenderCustomOptions ? renderCustomOptions() : children}</div>
+                {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
+            </components.MenuList>
             {!shouldRenderCustomOptions && renderMenuListFooter && (
                 <div className="dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0 dc__zi-2">
                     {renderMenuListFooter()}
                 </div>
             )}
-        </components.MenuList>
+        </>
     )
 }
 

src/Shared/Components/SelectPicker/common.tsx

@@ -98,6 +98,7 @@ export interface customEnv {
     FEATURE_BULK_RESTART_WORKLOADS_FROM_RB: string
     FEATURE_DEFAULT_MERGE_STRATEGY?: OverrideMergeStrategyType
     FEATURE_DEFAULT_LANDING_RB_ENABLE?: boolean
+    FEATURE_CLUSTER_MAP_ENABLE?: boolean
 }
 declare global {
     interface Window {