feat: table in RB

package.json

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

src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx

@@ -25,6 +25,7 @@ const IGNORE_TAGS_FALLBACK = ['input', 'textarea', 'select']
 const DEFAULT_TIMEOUT = 300
 
 const UseRegisterShortcutProvider = ({
+    containerRef,
     ignoreTags,
     preventDefault = false,
     shortcutTimeout,
@@ -117,21 +118,22 @@ const UseRegisterShortcutProvider = ({
     }, [])
 
     const handleKeydownEvent = useCallback((event: KeyboardEvent) => {
-        if (preventDefault) {
-            event.preventDefault()
-        }
-
         if (
             // NOTE: in case of custom events generated by password managers autofill, the event.key is not set
             !event.key ||
-            ignoredTags.map((tag) => tag.toUpperCase()).indexOf((event.target as HTMLElement).tagName?.toUpperCase()) >
-                -1 ||
+            (ignoredTags.map((tag) => tag.toUpperCase()).indexOf((event.target as HTMLElement).tagName?.toUpperCase()) >
+                -1 &&
+                (!containerRef || containerRef.current?.contains(event.target as HTMLElement))) ||
             (event.target as HTMLElement)?.role === 'textbox' ||
             disableShortcutsRef.current
         ) {
             return
         }
 
+        if (preventDefault) {
+            event.preventDefault()
+        }
+
         keysDownRef.current.add(event.key.toUpperCase() as Uppercase<string>)
 
         if (event.ctrlKey) {

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { RefObject } from 'react'
+
 import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
 
 // NOTE: check this link for more info on keyboard keys: https://w3c.github.io/uievents-key/
@@ -28,6 +30,7 @@ export const KEYBOARD_KEYS_MAP = {
     K: 'K',
     X: 'X',
     A: 'A',
+    N: 'N',
     Escape: 'Esc',
     Enter: '↩',
     ArrowLeft: '←',
@@ -80,6 +83,7 @@ export interface UseRegisterShortcutContextType {
 }
 
 export interface UseRegisterShortcutProviderType {
+    containerRef?: RefObject<HTMLElement>
     children: React.ReactNode
     /**
      * Defines how long after holding the keys down do we trigger the callback in milliseconds

src/Common/Hooks/useStateFilters/types.ts

@@ -16,7 +16,8 @@
 
 import { UseUrlFiltersProps, UseUrlFiltersReturnType } from '../useUrlFilters'
 
-export interface UseStateFiltersProps<T> extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey'> {}
+export interface UseStateFiltersProps<T>
+    extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey' | 'defaultPageSize'> {}
 
 export interface UseStateFiltersReturnType<T>
     extends Pick<
@@ -31,7 +32,7 @@ export interface UseStateFiltersReturnType<T>
         | 'pageSize'
         | 'searchKey'
         | 'handleSearch'
-        | 'isFilterApplied'
+        | 'areFiltersApplied'
     > {}
 
 export interface PaginationType<T> extends Pick<UseUrlFiltersReturnType<T>, 'pageSize'> {

src/Common/Hooks/useStateFilters/useStateFilters.tsx

@@ -35,6 +35,7 @@ import { PaginationType, UseStateFiltersProps, UseStateFiltersReturnType } from
  */
 const useStateFilters = <T = string,>({
     initialSortKey,
+    defaultPageSize = DEFAULT_BASE_PAGE_SIZE,
 }: UseStateFiltersProps<T> = {}): UseStateFiltersReturnType<T> => {
     const [sortingConfig, setSortingConfig] = useState({
         sortOrder: SortingOrder.ASC,
@@ -45,7 +46,7 @@ const useStateFilters = <T = string,>({
     const { sortBy, sortOrder } = sortingConfig
 
     const [pagination, setPagination] = useState<PaginationType<T>>({
-        pageSize: DEFAULT_BASE_PAGE_SIZE,
+        pageSize: defaultPageSize,
         pageNumber: DEFAULT_PAGE_NUMBER,
     })
     const offset = pagination.pageSize * (pagination.pageNumber - 1)
@@ -117,7 +118,7 @@ const useStateFilters = <T = string,>({
         changePage,
         changePageSize,
         offset,
-        isFilterApplied: !!searchKey,
+        areFiltersApplied: !!searchKey,
     }
 }
 

src/Common/Hooks/useUrlFilters/types.ts

@@ -35,6 +35,7 @@ export interface UseUrlFiltersProps<T, K extends {}> {
      * @default 'replace'
      */
     redirectionMethod?: 'replace' | 'push'
+    defaultPageSize?: number
 }
 
 export type UpdateSearchParamsOptionsType<T, K = {}> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>
@@ -86,5 +87,5 @@ export type UseUrlFiltersReturnType<T, K = {}> = K & {
      * Update the search params with the passed object
      */
     updateSearchParams: (paramsToSerialize: Partial<K>, options?: UpdateSearchParamsOptionsType<T, K>) => void
-    isFilterApplied: boolean
+    areFiltersApplied: boolean
 }

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -49,6 +49,7 @@ const useUrlFilters = <T = string, K = {}>({
     parseSearchParams,
     localStorageKey,
     redirectionMethod = 'replace',
+    defaultPageSize = DEFAULT_BASE_PAGE_SIZE,
 }: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
@@ -108,7 +109,7 @@ const useUrlFilters = <T = string, K = {}>({
         const _parsedParams = getParsedSearchParams(searchParams)
 
         return {
-            pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
+            pageSize: Number(_pageSize) || defaultPageSize,
             pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
             searchKey: _searchKey || '',
             sortBy: sortByKey,
@@ -223,7 +224,7 @@ const useUrlFilters = <T = string, K = {}>({
         clearFilters,
         ...parsedParams,
         updateSearchParams,
-        isFilterApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams),
+        areFiltersApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams),
     }
 }
 

src/Common/Pagination/PageSizeSelector.tsx

@@ -82,7 +82,7 @@ const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSiz
                 </div>
             )}
 
-            <button type="button" className="select__button" onClick={handleDropdownToggle}>
+            <button type="button" className="select__button flexbox" onClick={handleDropdownToggle}>
                 <span>{selectedOption ? selectedOption.value : ''}</span>
                 <span className="select__icon">
                     <i className={font} />

src/Common/Pagination/constants.ts

@@ -20,3 +20,9 @@ export const FALLBACK_PAGE_SIZE_OPTIONS = [
     { value: 40, selected: false },
     { value: 50, selected: false },
 ]
+
+export const LARGE_PAGE_SIZE_OPTIONS = [
+    { value: 100, selected: true },
+    { value: 150, selected: false },
+    { value: 200, selected: false },
+]

src/Common/Pagination/index.tsx

@@ -16,5 +16,6 @@
 
 /* eslint-disable import/prefer-default-export */
 // Disabling since might need to export types as well
+export { LARGE_PAGE_SIZE_OPTIONS } from './constants'
 export { default as Pagination } from './Pagination'
 export type { PaginationProps } from './types'

src/Common/PopupMenu.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { Modal } from './Modals/Modal'
 import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types'
 
@@ -155,19 +155,33 @@ const PopupMenu = ({
     )
 }
 
-const Button = ({
+const Button = forwardRef(({
     children = null,
     disabled = false,
     rootClassName = '',
     tabIndex = 0,
     onHover = false,
     isKebab = false,
     dataTestId = '',
-}: PopupMenuButtonType) => {
+}: PopupMenuButtonType, forwardedRef) => {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
+
+    const refCallback = (node) => {
+        buttonRef.current = node
+
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node)
+            return
+        }
+
+        if (forwardedRef && typeof forwardedRef === 'object') {
+            forwardedRef.current = node
+        }
+    }
+
     return (
         <button
-            ref={initialiseButtonWidth}
+            ref={refCallback}
             type="button"
             tabIndex={tabIndex}
             disabled={disabled}
@@ -181,7 +195,7 @@ const Button = ({
             {children}
         </button>
     )
-}
+})
 
 const Body = ({
     children = null,

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -95,7 +95,9 @@ const SortableTableHeaderCell = ({
 
     return (
         // Added w-100, h-100 when isResizable is true to ensure the cell takes full dimensions in wrapper flex layout (if any)
-        <div className={`flex dc__content-space dc__gap-6 dc__position-rel ${isResizable ? 'w-100 h-100' : ''}`}>
+        <div
+            className={`flex dc__content-space dc__gap-6 dc__position-rel ${isResizable ? 'w-100 h-100 sortable-table-header__container' : ''}`}
+        >
             <button
                 type="button"
                 className={`dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text fw-6 ${!isSortable ? 'cursor-default' : ''} dc__position-rel`}

src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss

@@ -15,6 +15,10 @@
  */
 
 .sortable-table-header {
+    &__container > :first-child {
+        margin-right: 6px;
+    }
+
     &__resize-btn {
         > div {
             transition: all 0.1s ease-out;

src/Pages/ResourceBrowser/ResourceBrowser.Types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Dispatch, RefObject, SetStateAction } from 'react'
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { GroupBase } from 'react-select'
 
 import { ServerErrors } from '@Common/ServerError'
@@ -205,14 +205,15 @@ export interface GVKOptionValueType {
 }
 
 export interface GetResourceRecommenderResourceListPropsType {
-    resourceList: K8sResourceDetailType
-    reloadResourceListData: () => void
     setShowAbsoluteValuesInResourceRecommender: Dispatch<SetStateAction<boolean>>
     showAbsoluteValuesInResourceRecommender: boolean
     gvkOptions: GroupBase<SelectPickerOptionType<GVKOptionValueType>>[]
     areGVKOptionsLoading: boolean
     reloadGVKOptions: () => void
     gvkOptionsError: ServerErrors
-    isResourceListLoading: boolean
-    resourceListError: ServerErrors
+}
+
+export interface ResourceRecommenderActionMenuProps {
+    children: ReactNode
+    lastScannedOn: string
 }

src/Shared/Components/Badge/Badge.tsx

@@ -29,7 +29,7 @@ const Badge = ({
                 : {})}
         >
             {startIconProps && <Icon {...startIconProps} size={iconSize} color={fontColor || iconColor} />}
-            <span className="dc__truncate">{label}</span>
+            {label && <span className="dc__truncate">{label}</span>}
             {endIconProps && <Icon {...endIconProps} size={iconSize} color={fontColor || iconColor} />}
         </div>
     )