feat: table in RB

src/Common/Helper.tsx

@@ -1002,7 +1002,7 @@ export const getBranchIcon = (sourceType, _isRegex?: boolean, webhookEventName?:
             return <ICPullRequest className="scn-6" />
         }
         if (webhookEventName === WebhookEventNameType.TAG_CREATION) {
-        return <ICTag className="scn-6" />
+            return <ICTag className="scn-6" />
         }
         return <ICWebhook />
     }

src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx

@@ -117,10 +117,6 @@ 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 ||
@@ -132,6 +128,10 @@ const UseRegisterShortcutProvider = ({
             return
         }
 
+        if (preventDefault) {
+            event.preventDefault()
+        }
+
         keysDownRef.current.add(event.key.toUpperCase() as Uppercase<string>)
 
         if (event.ctrlKey) {

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/Shared/Components/BulkSelection/BulkSelection.tsx

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react'
+
 import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.svg'
 import { ReactComponent as ICCheckSquare } from '../../../Assets/Icon/ic-check-square.svg'
 import { ReactComponent as ICChevronDown } from '../../../Assets/Icon/ic-chevron-down.svg'
@@ -24,74 +26,77 @@ import { useBulkSelection } from './BulkSelectionProvider'
 import { BULK_DROPDOWN_TEST_ID, BulkSelectionOptionsLabels } from './constants'
 import { BulkSelectionDropdownItemsType, BulkSelectionEvents, BulkSelectionProps } from './types'
 
-const BulkSelection = <T,>({ showPagination, disabled = false, showChevronDownIcon = true }: BulkSelectionProps) => {
-    const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection<T>()
-    const areOptionsSelected = getSelectedIdentifiersCount() > 0
-    const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
-        {
-            locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
-            label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ON_PAGE],
-            isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.CHECKED,
-            icon: ICCheckSquare,
-        },
-        ...(showPagination
-            ? [
-                  {
-                      locator: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
-                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES],
-                      isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.BULK_CHECKED,
-                      icon: ICCheckAll,
-                  },
-              ]
-            : []),
-        ...(areOptionsSelected
-            ? [
-                  {
-                      locator: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
-                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
-                      isSelected: false,
-                      icon: ICClose,
-                      iconClass: 'icon-use-fill-n6',
-                  },
-              ]
-            : []),
-    ]
+const BulkSelection = forwardRef(
+    ({ showPagination, disabled = false, showChevronDownIcon = true }: BulkSelectionProps, forwardedRef) => {
+        const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection()
+        const areOptionsSelected = getSelectedIdentifiersCount() > 0
+        const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
+            {
+                locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+                label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ON_PAGE],
+                isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.CHECKED,
+                icon: ICCheckSquare,
+            },
+            ...(showPagination
+                ? [
+                      {
+                          locator: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
+                          label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES],
+                          isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.BULK_CHECKED,
+                          icon: ICCheckAll,
+                      },
+                  ]
+                : []),
+            ...(areOptionsSelected
+                ? [
+                      {
+                          locator: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
+                          label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
+                          isSelected: false,
+                          icon: ICClose,
+                          iconClass: 'icon-use-fill-n6',
+                      },
+                  ]
+                : []),
+        ]
 
-    return (
-        <PopupMenu autoClose>
-            <PopupMenu.Button
-                isKebab
-                rootClassName="h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp"
-                dataTestId={BULK_DROPDOWN_TEST_ID}
-                disabled={disabled}
-            >
-                <Checkbox
-                    isChecked={isChecked}
-                    onChange={noop}
-                    rootClassName="icon-dim-20 m-0"
-                    value={checkboxValue}
+        return (
+            <PopupMenu autoClose>
+                <PopupMenu.Button
+                    ref={forwardedRef}
+                    isKebab
+                    rootClassName="h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp"
+                    dataTestId={BULK_DROPDOWN_TEST_ID}
                     disabled={disabled}
-                    // Ideally should be disabled but was giving issue with cursor
-                />
+                >
+                    <Checkbox
+                        isChecked={isChecked}
+                        onChange={noop}
+                        rootClassName="icon-dim-20 m-0"
+                        value={checkboxValue}
+                        disabled={disabled}
+                        // Ideally should be disabled but was giving issue with cursor
+                    />
 
-                {showChevronDownIcon && <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />}
-            </PopupMenu.Button>
+                    {showChevronDownIcon && <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />}
+                </PopupMenu.Button>
 
-            <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bg__primary flex column dc__content-start dc__align-start dc__position-abs bg__primary dc__border dc__border-radius-4-imp">
-                {BulkSelectionItems.map((item) => (
-                    <BulkSelectionDropdownItems<T>
-                        key={item.locator}
-                        locator={item.locator}
-                        label={item.label}
-                        isSelected={item.isSelected}
-                        icon={item.icon}
-                        handleBulkSelection={handleBulkSelection}
-                        iconClass={item.iconClass}
-                    />
-                ))}
-            </PopupMenu.Body>
-        </PopupMenu>
-    )
-}
+                <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bg__primary flex column dc__content-start dc__align-start dc__position-abs bg__primary dc__border dc__border-radius-4-imp">
+                    {BulkSelectionItems.map((item) => (
+                        <BulkSelectionDropdownItems
+                            key={item.locator}
+                            locator={item.locator}
+                            label={item.label}
+                            isSelected={item.isSelected}
+                            icon={item.icon}
+                            handleBulkSelection={handleBulkSelection}
+                            iconClass={item.iconClass}
+                        />
+                    ))}
+                </PopupMenu.Body>
+            </PopupMenu>
+        )
+    },
+)
 
 export default BulkSelection

src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx

@@ -16,14 +16,14 @@
 
 import { BulkSelectionDropdownItemsProps } from './types'
 
-const BulkSelectionDropdownItems = <T,>({
+const BulkSelectionDropdownItems = ({
     locator,
     label,
     isSelected,
     handleBulkSelection,
     icon: Icon,
     iconClass,
-}: BulkSelectionDropdownItemsProps<T>) => {
+}: BulkSelectionDropdownItemsProps<unknown>) => {
     const handleSelect = () => {
         handleBulkSelection({
             action: locator,

src/Shared/Components/Icon/Icon.tsx

@@ -89,6 +89,7 @@ import { ReactComponent as ICHelpOutline } from '@IconsV2/ic-help-outline.svg'
 import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
 import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
 import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg'
+import { ReactComponent as ICInfoFilledColor } from '@IconsV2/ic-info-filled-color.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICInstall } from '@IconsV2/ic-install.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
@@ -245,6 +246,7 @@ export const iconMap = {
     'ic-help-outline': ICHelpOutline,
     'ic-hibernate': ICHibernate,
     'ic-in-progress': ICInProgress,
+    'ic-info-filled-color': ICInfoFilledColor,
     'ic-info-filled': ICInfoFilled,
     'ic-info-outline': ICInfoOutline,
     'ic-install': ICInstall,

src/Shared/Components/Table/BulkSelectionActionWidget.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { useEffect } from 'react'
+import { MouseEvent, useEffect } from 'react'
 
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { DraggableButton, DraggablePositionVariant, DraggableWrapper } from '@Common/DraggableWrapper'
@@ -18,6 +18,8 @@ const BulkSelectionActionWidget = ({
     handleClearBulkSelection,
     parentRef,
     BulkActionsComponent,
+    bulkActionsData,
+    setBulkActionState,
 }: BulkSelectionActionWidgetProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
@@ -29,6 +31,13 @@ const BulkSelectionActionWidget = ({
         }
     }, [])
 
+    const onActionClick = (event: MouseEvent<HTMLButtonElement>) => {
+        const {
+            dataset: { key },
+        } = event.currentTarget
+        setBulkActionState(key)
+    }
+
     return (
         <DraggableWrapper
             dragSelector={`.${DRAG_SELECTOR_IDENTIFIER}`}
@@ -46,7 +55,7 @@ const BulkSelectionActionWidget = ({
                     </div>
                 </div>
 
-                <BulkActionsComponent />
+                <BulkActionsComponent onActionClick={onActionClick} bulkActionsData={bulkActionsData} />
 
                 <Button
                     icon={<ICClose />}