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

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.6.4",
+    "version": "1.6.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -70,7 +70,7 @@
         "sharp": "^0.33.5",
         "svgo": "^3.3.2",
         "typescript": "5.5.4",
-        "vite": "5.4.11",
+        "vite": "5.4.14",
         "vite-plugin-dts": "4.0.3",
         "vite-plugin-image-optimizer": "^1.1.8",
         "vite-plugin-lib-inject-css": "2.1.1",
@@ -127,7 +127,7 @@
             "react-dom": "^17.0.2"
         },
         "vite-plugin-svgr": {
-            "vite": "5.4.11"
+            "vite": "5.4.14"
         },
         "react-virtualized-sticky-tree": {
             "react": "^17.0.2",

package.json

@@ -25,9 +25,20 @@ export interface UseUrlFiltersProps<T, K> {
      * Callback function for parsing the search params
      */
     parseSearchParams?: (searchParams: URLSearchParams) => K
+    /**
+     * Local storage key to store the filters
+     */
     localStorageKey?: `${string}__${string}`
+    /**
+     * Method to be used for redirection in case of filter update
+     *
+     * @default 'replace'
+     */
+    redirectionMethod?: 'replace' | 'push'
 }
 
+export type UpdateSearchParamsOptionsType<T, K = unknown> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>
+
 export type UseUrlFiltersReturnType<T, K = unknown> = K & {
     /**
      * Currently applied page size
@@ -74,5 +85,5 @@ export type UseUrlFiltersReturnType<T, K = unknown> = K & {
     /**
      * Update the search params with the passed object
      */
-    updateSearchParams: (paramsToSerialize: Partial<K>) => void
+    updateSearchParams: (paramsToSerialize: Partial<K>, options?: UpdateSearchParamsOptionsType<T, K>) => void
 }

src/Common/Hooks/useUrlFilters/types.ts

@@ -19,7 +19,7 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { getUrlWithSearchParams } from '@Common/Helper'
 import { DEFAULT_BASE_PAGE_SIZE, EXCLUDED_FALSY_VALUES, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
-import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
+import { UpdateSearchParamsOptionsType, UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
 import { setItemInLocalStorageIfKeyExists } from './utils'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
@@ -45,6 +45,7 @@ const useUrlFilters = <T = string, K = unknown>({
     initialSortKey,
     parseSearchParams,
     localStorageKey,
+    redirectionMethod = 'replace',
 }: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
@@ -62,6 +63,7 @@ const useUrlFilters = <T = string, K = unknown>({
                         const localSearchString = getUrlWithSearchParams('', JSON.parse(localStorageValue))
                         const localSearchParams = new URLSearchParams(localSearchString.split('?')[1] ?? '')
 
+                        // This would remain replace since the initial value is being set from local storage
                         history.replace({ search: localSearchParams.toString() })
                         return localSearchParams
                     } catch {
@@ -118,23 +120,34 @@ const useUrlFilters = <T = string, K = unknown>({
      */
     const offset = pageSize * (pageNumber - 1)
 
+    const updateFiltersInUrl = (updatedSearchString: string, options: UpdateSearchParamsOptionsType<T, K>) => {
+        const params = { search: updatedSearchString }
+        const methodForRedirection = options.redirectionMethod ?? redirectionMethod
+
+        if (methodForRedirection === 'push') {
+            history.push(params)
+        } else {
+            history.replace(params)
+        }
+    }
+
     /**
      * Update and replace the search params in the URL.
      *
      * Note: Currently only primitive data types are supported
      */
-    const _updateSearchParam = (key: string, value) => {
+    const _updateSearchParam = (key: string, value: unknown, options: UpdateSearchParamsOptionsType<T, K> = {}) => {
         searchParams.set(key, String(value))
-        history.replace({ search: searchParams.toString() })
+        updateFiltersInUrl(searchParams.toString(), options)
     }
 
-    const _resetPageNumber = () => {
+    const _resetPageNumber = (options: UpdateSearchParamsOptionsType<T, K> = {}) => {
         if (pageNumber !== DEFAULT_PAGE_NUMBER) {
-            _updateSearchParam(PAGE_NUMBER, DEFAULT_PAGE_NUMBER)
+            _updateSearchParam(PAGE_NUMBER, DEFAULT_PAGE_NUMBER, options)
             return
         }
 
-        history.replace({ search: searchParams.toString() })
+        updateFiltersInUrl(searchParams.toString(), options)
     }
 
     const changePage = (page: number) => {
@@ -167,13 +180,13 @@ const useUrlFilters = <T = string, K = unknown>({
     }
 
     const clearFilters = () => {
-        history.replace({ search: '' })
+        updateFiltersInUrl('', {})
         if (localStorageKey) {
             localStorage.removeItem(localStorageKey)
         }
     }
 
-    const updateSearchParams = (paramsToSerialize: Partial<K>) => {
+    const updateSearchParams = (paramsToSerialize: Partial<K>, options: UpdateSearchParamsOptionsType<T, K> = {}) => {
         Object.keys(paramsToSerialize).forEach((key) => {
             if (!EXCLUDED_FALSY_VALUES.includes(paramsToSerialize[key])) {
                 if (Array.isArray(paramsToSerialize[key])) {
@@ -191,7 +204,7 @@ const useUrlFilters = <T = string, K = unknown>({
         // Skipping primary params => pageSize, pageNumber, searchKey, sortBy, sortOrder
         setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(getParsedSearchParams(searchParams)))
         // Not replacing the params as it is being done by _resetPageNumber
-        _resetPageNumber()
+        _resetPageNumber(options)
     }
 
     return {

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -16,17 +16,17 @@
 
 import { forwardRef } from 'react'
 import RJSF from '@rjsf/core'
-import RJSFValidator from '@rjsf/validator-ajv8'
 
 import { templates, widgets } from './config'
 import { FormProps } from './types'
 import { translateString } from './utils'
+import { SCHEMA_07_VALIDATOR_STRICT } from '@Shared/validations'
 import './rjsfForm.scss'
 
 // Need to use this way because the default import was not working as expected
 // The default import resolves to an object intead of a function
 const Form = RJSF
-const validator = RJSFValidator
+const validator = SCHEMA_07_VALIDATOR_STRICT
 
 export const RJSFForm = forwardRef((props: FormProps, ref: FormProps['ref']) => (
     <Form

src/Common/RJSF/Form.tsx

@@ -76,7 +76,7 @@ const SortableTableHeaderCell = ({
         if (isSorted) {
             return (
                 <SortArrowDown
-                    className={`icon-dim-12 mw-12 scn-7 dc__no-shrink dc__transition--transform ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
+                    className={`icon-dim-12 mw-12 scn-7 dc__no-shrink dc__transition--transform ${sortOrder !== SortingOrder.DESC ? 'dc__flip-180' : ''}`}
                 />
             )
         }
@@ -99,6 +99,7 @@ const SortableTableHeaderCell = ({
                 onClick={isSortable ? triggerSorting : noop}
                 disabled={disabled}
                 tabIndex={disabled || !isSortable ? -1 : 0}
+                data-testid={title}
             >
                 <Tooltip showOnTruncate={showTippyOnTruncate} content={title}>
                     <span className="dc__uppercase dc__truncate">{title}</span>

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -15,6 +15,7 @@
  */
 
 import { useState } from 'react'
+import DOMPurify from 'dompurify'
 import { InfoColourBar } from '../../../Common'
 import { ReactComponent as MegaphoneIcon } from '../../../Assets/Icon/ic-megaphone.svg'
 import { ReactComponent as Close } from '../../../Assets/Icon/ic-close.svg'
@@ -26,7 +27,8 @@ interface AnnouncementBannerType {
 }
 
 const AnnouncementBanner = ({ parentClassName = '', isCDMaterial = false }: AnnouncementBannerType) => {
-    const message = window?._env_?.ANNOUNCEMENT_BANNER_MSG
+    const rawMessage = window?._env_?.ANNOUNCEMENT_BANNER_MSG
+    const message = rawMessage ? DOMPurify.sanitize(rawMessage) : null
     const showAnnouncementBanner = (): boolean => {
         const expiryDateOfHidingAnnouncementBanner: string =
             typeof Storage !== 'undefined' &&
@@ -61,7 +63,11 @@ const AnnouncementBanner = ({ parentClassName = '', isCDMaterial = false }: Anno
 
     const renderAnnouncementBanner = () => (
         <div className="flex dc__gap-4">
-            <div className="dc__word-break cn-7">{message}</div>
+            <div
+                className="dc__word-break cn-7"
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{ __html: message }}
+            />
             {isCDMaterial ? null : (
                 <Close className="icon-dim-20 ml-8 fcn-9" onClick={onClickCloseAnnouncememtBanner} />
             )}

src/Shared/Components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ButtonHTMLAttributes, PropsWithChildren } from 'react'
+import { ButtonHTMLAttributes, MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { Link, LinkProps } from 'react-router-dom'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'
@@ -29,6 +29,7 @@ const ButtonElement = ({
     linkProps,
     buttonProps,
     onClick,
+    elementRef,
     ...props
 }: PropsWithChildren<
     Omit<
@@ -49,6 +50,7 @@ const ButtonElement = ({
         className: string
         'data-testid': ButtonProps['dataTestId']
         'aria-label': ButtonProps['ariaLabel']
+        elementRef: MutableRefObject<HTMLButtonElement | HTMLAnchorElement>
     }
 >) => {
     if (component === ButtonComponentType.link) {
@@ -59,6 +61,7 @@ const ButtonElement = ({
                 // Added the specific class to ensure that the link override is applied
                 className={`${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`}
                 onClick={onClick as LinkProps['onClick']}
+                ref={elementRef as MutableRefObject<HTMLAnchorElement>}
             />
         )
     }
@@ -70,6 +73,7 @@ const ButtonElement = ({
             // eslint-disable-next-line react/button-has-type
             type={buttonProps?.type || 'button'}
             onClick={onClick as ButtonHTMLAttributes<HTMLButtonElement>['onClick']}
+            ref={elementRef as MutableRefObject<HTMLButtonElement>}
         />
     )
 }
@@ -155,14 +159,46 @@ const Button = ({
     showAriaLabelInTippy = true,
     fullWidth = false,
     isOpacityHoverChild = false,
+    triggerAutoClickTimestamp,
     ...props
 }: ButtonProps) => {
+    const [isAutoClickActive, setIsAutoClickActive] = useState(false)
+    const autoClickTimeoutRef = useRef<number>()
+    const elementRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null)
+
     const isDisabled = disabled || isLoading
     const iconClass = `dc__no-shrink flex dc__fill-available-space ${getButtonIconClassName({
         size,
         icon,
     })}`
 
+    useEffect(() => {
+        if (triggerAutoClickTimestamp) {
+            // Adding after timeout to ensure the transition is triggered after the button is rendered
+            setTimeout(() => {
+                setIsAutoClickActive(true)
+
+                autoClickTimeoutRef.current = setTimeout(() => {
+                    elementRef.current.click()
+                    // This is 100ms less than the duration of the transition in CSS
+                    // Make sure to update the same in CSS if this is changed
+                }, 2400)
+            }, 100)
+        }
+
+        return () => {
+            setIsAutoClickActive(false)
+            clearTimeout(autoClickTimeoutRef.current)
+        }
+    }, [triggerAutoClickTimestamp])
+
+    const handleClick: ButtonProps['onClick'] = (e) => {
+        setIsAutoClickActive(false)
+        clearTimeout(autoClickTimeoutRef.current)
+
+        props.onClick?.(e)
+    }
+
     const getTooltipProps = (): TooltipProps => {
         // Show the aria label as tippy only if the action based tippy is not to be shown
         if (!showTooltip && showAriaLabelInTippy && icon && ariaLabel) {
@@ -189,9 +225,11 @@ const Button = ({
                 <ButtonElement
                     {...props}
                     disabled={isDisabled}
-                    className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${isOpacityHoverChild ? 'dc__opacity-hover--child' : ''} ${getButtonDerivedClass({ size, variant, style, isLoading, icon })} ${isDisabled ? 'dc__disabled' : ''} ${fullWidth ? 'w-100' : ''}`}
+                    className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${isOpacityHoverChild ? 'dc__opacity-hover--child' : ''} ${getButtonDerivedClass({ size, variant, style, isLoading, icon, isAutoTriggerActive: isAutoClickActive })} ${isDisabled ? 'dc__disabled' : ''} ${fullWidth ? 'w-100' : ''}`}
                     data-testid={dataTestId}
                     aria-label={ariaLabel}
+                    elementRef={elementRef}
+                    onClick={handleClick}
                 >
                     {icon ? (
                         <span className={iconClass}>{icon}</span>