Merge branch 'develop' into fix/release-css

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -16,6 +16,7 @@
 
 import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
 
+// NOTE: check this link for more info on keyboard keys: https://w3c.github.io/uievents-key/
 export const KEYBOARD_KEYS_MAP = {
     Control: 'Ctrl',
     Shift: '⇧',
@@ -25,8 +26,22 @@ export const KEYBOARD_KEYS_MAP = {
     E: 'E',
     R: 'R',
     K: 'K',
+    X: 'X',
+    A: 'A',
     Escape: 'Esc',
     Enter: '↩',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    PageUp: 'PgUp',
+    PageDown: 'PgDn',
+    Home: 'Home',
+    End: 'End',
+    Backspace: '⌫',
+    Delete: '⌦',
+    '.': '.',
+    Space: 'Space',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -31,6 +31,7 @@ export interface UseStateFiltersReturnType<T>
         | 'pageSize'
         | 'searchKey'
         | 'handleSearch'
+        | 'isFilterApplied'
     > {}
 
 export interface PaginationType<T> extends Pick<UseUrlFiltersReturnType<T>, 'pageSize'> {

src/Common/Hooks/useStateFilters/types.ts

@@ -116,6 +116,7 @@ const useStateFilters = <T = string,>({
         changePage,
         changePageSize,
         offset,
+        isFilterApplied: !!searchKey,
     }
 }
 

src/Common/Hooks/useStateFilters/useStateFilters.tsx

@@ -16,7 +16,7 @@
 
 import { SortingOrder } from '../../Constants'
 
-export interface UseUrlFiltersProps<T, K> {
+export interface UseUrlFiltersProps<T, K extends {}> {
     /**
      * The key on which the sorting should be applied
      */
@@ -37,9 +37,9 @@ export interface UseUrlFiltersProps<T, K> {
     redirectionMethod?: 'replace' | 'push'
 }
 
-export type UpdateSearchParamsOptionsType<T, K = unknown> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>
+export type UpdateSearchParamsOptionsType<T, K = {}> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>
 
-export type UseUrlFiltersReturnType<T, K = unknown> = K & {
+export type UseUrlFiltersReturnType<T, K = {}> = K & {
     /**
      * Currently applied page size
      */
@@ -86,4 +86,5 @@ export type UseUrlFiltersReturnType<T, K = unknown> = K & {
      * Update the search params with the passed object
      */
     updateSearchParams: (paramsToSerialize: Partial<K>, options?: UpdateSearchParamsOptionsType<T, K>) => void
+    isFilterApplied: boolean
 }

src/Common/Hooks/useUrlFilters/types.ts

@@ -20,7 +20,7 @@ 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 { UpdateSearchParamsOptionsType, UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
-import { setItemInLocalStorageIfKeyExists } from './utils'
+import { areAnyAdditionalFiltersApplied, setItemInLocalStorageIfKeyExists } from './utils'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
 
@@ -41,7 +41,8 @@ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_K
  * ```
  *
  */
-const useUrlFilters = <T = string, K = unknown>({
+
+const useUrlFilters = <T = string, K = {}>({
     initialSortKey,
     parseSearchParams,
     localStorageKey,
@@ -220,6 +221,7 @@ const useUrlFilters = <T = string, K = unknown>({
         clearFilters,
         ...parsedParams,
         updateSearchParams,
+        isFilterApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams),
     }
 }
 

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -14,8 +14,28 @@
  * limitations under the License.
  */
 
+import { isNullOrUndefined } from '@Shared/Helpers'
+
 export const setItemInLocalStorageIfKeyExists = (localStorageKey: string, value: string) => {
     if (localStorageKey) {
         localStorage.setItem(localStorageKey, value)
     }
 }
+
+export const areAnyAdditionalFiltersApplied = (parsedParams: Record<string | number, any>) => {
+    if (!parsedParams || !Object.keys(parsedParams).length) {
+        return false
+    }
+
+    return Object.keys(parsedParams).some((key) => {
+        if (isNullOrUndefined(parsedParams[key])) {
+            return false
+        }
+
+        if (Array.isArray(parsedParams[key]) || typeof parsedParams[key] === 'string') {
+            return parsedParams[key].length > 0
+        }
+
+        return true
+    })
+}

src/Common/Hooks/useUrlFilters/utils.tsx

@@ -23,9 +23,10 @@ const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutK
         {!!combo?.length && (
             <div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
                 {combo.map((key) => (
-                    <span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
+                    // TODO: check styling for this since span was replaced by kbd
+                    <kbd key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
                         {KEYBOARD_KEYS_MAP[key]}
-                    </span>
+                    </kbd>
                 ))}
             </div>
         )}

src/Common/Tooltip/ShortcutKeyComboTooltipContent.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { ButtonHTMLAttributes, MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react'
-import { Link, LinkProps } from 'react-router-dom'
+import { MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip } from '@Common/Tooltip'
 import { TooltipProps } from '@Common/Tooltip/types'
@@ -26,6 +26,7 @@ import './button.scss'
 
 const ButtonElement = ({
     component = ButtonComponentType.button,
+    anchorProps,
     linkProps,
     buttonProps,
     onClick,
@@ -53,26 +54,44 @@ const ButtonElement = ({
         elementRef: MutableRefObject<HTMLButtonElement | HTMLAnchorElement>
     }
 >) => {
+    // Added the specific class to ensure that the link override is applied
+    const linkOrAnchorClassName = `${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`
+
     if (component === ButtonComponentType.link) {
         return (
             <Link
                 {...linkProps}
                 {...props}
-                // 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']}
+                className={linkOrAnchorClassName}
+                onClick={onClick as ButtonProps<typeof component>['onClick']}
                 ref={elementRef as MutableRefObject<HTMLAnchorElement>}
             />
         )
     }
 
+    if (component === ButtonComponentType.anchor) {
+        return (
+            <a
+                target="_blank"
+                rel="noopener noreferrer"
+                {...anchorProps}
+                {...props}
+                className={linkOrAnchorClassName}
+                onClick={onClick as ButtonProps<typeof component>['onClick']}
+                ref={elementRef as MutableRefObject<HTMLAnchorElement>}
+            >
+                {props.children}
+            </a>
+        )
+    }
+
     return (
         <button
             {...buttonProps}
             {...props}
             // eslint-disable-next-line react/button-has-type
             type={buttonProps?.type || 'button'}
-            onClick={onClick as ButtonHTMLAttributes<HTMLButtonElement>['onClick']}
+            onClick={onClick as ButtonProps<typeof component>['onClick']}
             ref={elementRef as MutableRefObject<HTMLButtonElement>}
         />
     )