Merge pull request #652 from devtron-labs/feat/table

feat: table component

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.8",
+    "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

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
+import { DraggableButton, DraggablePositionVariant, DraggableWrapper } from '@Common/DraggableWrapper'
+import { ComponentSizeType } from '@Shared/constants'
+import { useRegisterShortcut } from '@Common/Hooks'
+import { useEffect } from 'react'
+import { BulkSelectionActionWidgetProps } from './types'
+import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button'
+import { DRAG_SELECTOR_IDENTIFIER } from './constants'
+
+const BulkSelectionActionWidget = ({
+    count,
+    handleClearBulkSelection,
+    parentRef,
+    BulkActionsComponent,
+}: BulkSelectionActionWidgetProps) => {
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
+    useEffect(() => {
+        registerShortcut({ keys: ['Escape'], callback: handleClearBulkSelection })
+
+        return () => {
+            unregisterShortcut(['Escape'])
+        }
+    }, [])
+
+    return (
+        <DraggableWrapper
+            dragSelector={`.${DRAG_SELECTOR_IDENTIFIER}`}
+            positionVariant={DraggablePositionVariant.PARENT_BOTTOM_CENTER}
+            zIndex="calc(var(--modal-index) - 1)"
+            parentRef={parentRef}
+        >
+            <div className="dc__separated-flexbox dc__separated-flexbox--gap-8 p-12 bulk-selection-widget br-8">
+                <div className="flexbox dc__gap-8">
+                    <DraggableButton dragClassName={DRAG_SELECTOR_IDENTIFIER} />
+
+                    <div className="fs-13 lh-20 fw-6 flex dc__gap-12">
+                        <span className="flex dc__gap-2 bcb-5 text__white br-4 px-6">{count}</span>
+                        <span className="cn-9">Selected</span>
+                    </div>
+                </div>
+
+                <BulkActionsComponent />
+
+                <Button
+                    icon={<ICClose />}
+                    dataTestId="table__action-widget--close"
+                    component={ButtonComponentType.button}
+                    style={ButtonStyleType.negativeGrey}
+                    variant={ButtonVariantType.borderLess}
+                    ariaLabel="Clear selection(s)"
+                    size={ComponentSizeType.small}
+                    onClick={handleClearBulkSelection}
+                    showAriaLabelInTippy={false}
+                />
+            </div>
+        </DraggableWrapper>
+    )
+}
+
+export default BulkSelectionActionWidget