Merge pull request #2803 from devtron-labs/feat/rb-table

AbhishekA1509 · web-flow · commit 16dd3b70ae60 · 2025-07-02T21:16:20.000+05:30
fix: RB table
diff --git a/Dockerfile b/Dockerfile
@@ -1,24 +1,24 @@
-FROM node:20-alpine AS builder
-
-RUN apk add --no-cache git
+FROM node:22-alpine AS builder
 
 WORKDIR /app
+
+RUN corepack enable yarn && \
+    yarn set version 4.9.2
+
 COPY package.json .
 COPY yarn.lock .
+COPY .yarn/ .yarn/
+COPY .yarnrc.yml ./
 
-RUN yarn install --frozen-lockfile --network-timeout 600000
+RUN apk add --no-cache git
+RUN yarn install --immutable --network-timeout 600000
 
-COPY src/ src
-COPY nginx.conf .
-COPY tsconfig.json .
-COPY vite.config.mts .
 COPY . .
 
 RUN echo `git rev-parse --short=9 HEAD` > health.html && \
     echo "" >> .env && \
-    echo "SENTRY_RELEASE_VERSION=dashboard@$(git rev-parse --short=9 HEAD)" >> .env
-
-RUN yarn build
+    echo "SENTRY_RELEASE_VERSION=dashboard@$(git rev-parse --short=9 HEAD)" >> .env && \
+    yarn build
 
 FROM fholzer/nginx-brotli:v1.26.2
 
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.16.0-pre-7",
+        "@devtron-labs/devtron-fe-common-lib": "1.16.0-pre-8",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/components/ClusterNodes/ClusterOverview.tsx b/src/components/ClusterNodes/ClusterOverview.tsx
@@ -18,7 +18,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { generatePath, useHistory, useParams } from 'react-router-dom'
 
 import {
-    DUMMY_RESOURCE_GVK_VERSION,
     EditableTextArea,
     ErrorScreenManager,
     getRandomColor,
@@ -216,7 +215,6 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
             clusterId,
             kind: 'node',
             group: K8S_EMPTY_GROUP,
-            version: DUMMY_RESOURCE_GVK_VERSION,
         })}?${queryParam}=${encodeURIComponent(filterText)}`
         history.push(newUrl)
     }
diff --git a/src/components/ResourceBrowser/Constants.ts b/src/components/ResourceBrowser/Constants.ts
@@ -397,7 +397,7 @@ export const AI_BUTTON_CONFIG_MAP: Record<string, ShowAIButtonConfig> = Object.f
 export const ResourceBrowserRouteToTabIdMap: Partial<
     Record<(typeof RESOURCE_BROWSER_ROUTES)[keyof typeof RESOURCE_BROWSER_ROUTES], ResourceBrowserTabsId | string>
 > = {
-    '/resource-browser/:clusterId/:kind/:group/:version': ResourceBrowserTabsId.k8s_Resources,
+    '/resource-browser/:clusterId/:kind/:group': ResourceBrowserTabsId.k8s_Resources,
     '/resource-browser/:clusterId/overview': ResourceBrowserTabsId.cluster_overview,
     '/resource-browser/:clusterId/monitoring-dashboard': MONITORING_DASHBOARD_TAB_ID,
     '/resource-browser/:clusterId/terminal': ResourceBrowserTabsId.terminal,
diff --git a/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx b/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import ReactSelect, { Props as SelectProps, SelectInstance } from 'react-select'
 
@@ -29,6 +29,7 @@ import {
     PopupMenu,
     ToastManager,
     ToastVariantType,
+    useRegisterShortcut,
     ValueContainerWithLoadingShimmer,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -66,6 +67,22 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
 
     const selectRef = useRef<SelectInstance>(null)
 
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
+    useEffect(() => {
+        registerShortcut({
+            keys: ['S'],
+            callback: () => {
+                selectRef.current?.focus()
+                selectRef.current?.openMenu('first')
+            },
+        })
+
+        return () => {
+            unregisterShortcut(['S'])
+        }
+    }, [])
+
     let filteredClusterList = clusterList
     if (window._env_.HIDE_DEFAULT_CLUSTER) {
         filteredClusterList = clusterList.filter((item) => Number(item.value) !== DEFAULT_CLUSTER_ID)
diff --git a/src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfoTableCellComponent.tsx b/src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfoTableCellComponent.tsx
@@ -5,7 +5,6 @@ import DOMPurify from 'dompurify'
 import {
     ALL_NAMESPACE_OPTION,
     ClipboardButton,
-    DUMMY_RESOURCE_GVK_VERSION,
     GVKType,
     highlightSearchText,
     K8sResourceDetailDataType,
@@ -49,7 +48,6 @@ const ClusterUpgradeCompatibilityInfoTableCellComponent = ({
             name,
             kind: kind.toLowerCase(),
             group,
-            version: DUMMY_RESOURCE_GVK_VERSION,
         })
 
         push(`${url}/${tab}`)
diff --git a/src/components/ResourceBrowser/ResourceList/K8sResourceListTableCellComponent.tsx b/src/components/ResourceBrowser/ResourceList/K8sResourceListTableCellComponent.tsx
@@ -8,7 +8,6 @@ import {
     ButtonVariantType,
     ClipboardButton,
     ConditionalWrap,
-    DUMMY_RESOURCE_GVK_VERSION,
     getAIAnalyticsEvents,
     highlightSearchText,
     Icon,
@@ -90,7 +89,6 @@ const K8sResourceListTableCellComponent = ({
             name,
             kind: kind.toLowerCase(),
             group: _group || K8S_EMPTY_GROUP,
-            version: DUMMY_RESOURCE_GVK_VERSION,
         })
 
         push(`${url}/${tab}`)
@@ -154,7 +152,6 @@ const K8sResourceListTableCellComponent = ({
                 name,
                 group,
                 kind,
-                version: DUMMY_RESOURCE_GVK_VERSION,
             }),
         )
     }
diff --git a/src/components/ResourceBrowser/ResourceList/NodeListSearchFilter.tsx b/src/components/ResourceBrowser/ResourceList/NodeListSearchFilter.tsx
@@ -107,12 +107,12 @@ const NodeListSearchFilter = ({
 
     useEffect(() => {
         if (registerShortcut) {
-            registerShortcut({ keys: ['R'], callback: handleFocusInput })
+            registerShortcut({ keys: ['/'], callback: handleFocusInput })
             registerShortcut({ keys: ['Escape'], callback: handleBlurInput })
         }
 
         return (): void => {
-            unregisterShortcut(['R'])
+            unregisterShortcut(['/'])
             unregisterShortcut(['Escape'])
         }
     }, [])
@@ -249,7 +249,7 @@ const NodeListSearchFilter = ({
                     )}
 
                     {!searchTextType && (
-                        <ShortcutKeyBadge shortcutKey="r" rootClassName="node-listing-search-container__shortcut-key" />
+                        <ShortcutKeyBadge shortcutKey="/" rootClassName="node-listing-search-container__shortcut-key" />
                     )}
                 </button>
 
diff --git a/src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx b/src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx
@@ -130,13 +130,13 @@ const ResourceFilterOptions = ({
 
     useEffect(() => {
         if (registerShortcut) {
-            registerShortcut({ keys: ['R'], callback: handleInputShortcut })
+            registerShortcut({ keys: ['/'], callback: handleInputShortcut })
             registerShortcut({ keys: ['F'], callback: handleShowFilterModal })
             registerShortcut({ keys: ['N'], callback: handleFocusNamespaceFilter })
         }
         return (): void => {
             unregisterShortcut(['F'])
-            unregisterShortcut(['R'])
+            unregisterShortcut(['/'])
             unregisterShortcut(['N'])
         }
     }, [])
@@ -243,7 +243,7 @@ const ResourceFilterOptions = ({
                         />
                         {showShortcutKey && (
                             <ShortcutKeyBadge
-                                shortcutKey="r"
+                                shortcutKey="/"
                                 rootClassName="resource-search-shortcut-key"
                                 onClick={handleInputShortcut}
                             />
diff --git a/src/components/ResourceBrowser/ResourceList/Sidebar.tsx b/src/components/ResourceBrowser/ResourceList/Sidebar.tsx
@@ -22,8 +22,8 @@ import DOMPurify from 'dompurify'
 
 import {
     ApiResourceGroupType,
-    DUMMY_RESOURCE_GVK_VERSION,
     highlightSearchText,
+    K8S_EMPTY_GROUP,
     Nodes,
     ReactSelectInputAction,
     RESOURCE_BROWSER_ROUTES,
@@ -33,7 +33,7 @@ import {
 
 import { ReactComponent as ICExpand } from '../../../assets/icons/ic-expand.svg'
 import { AggregationKeys } from '../../app/types'
-import { K8S_EMPTY_GROUP, KIND_SEARCH_COMMON_STYLES, ResourceBrowserTabsId, SIDEBAR_KEYS } from '../Constants'
+import { KIND_SEARCH_COMMON_STYLES, ResourceBrowserTabsId, SIDEBAR_KEYS } from '../Constants'
 import { K8SObjectChildMapType, K8SObjectMapType, K8sObjectOptionType, SidebarType } from '../Types'
 import {
     convertK8sObjectMapToOptionsList,
@@ -47,7 +47,7 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
     const location = useLocation()
     const { push } = useHistory()
-    const { clusterId, kind } = useParams<K8sResourceListURLParams>()
+    const { clusterId, kind, group } = useParams<K8sResourceListURLParams>()
     const [searchText, setSearchText] = useState('')
     /* NOTE: apiResources prop will only change after a component mount/dismount */
     const [list, setList] = useState(convertResourceGroupListToK8sObjectList(apiResources || null, kind))
@@ -121,7 +121,6 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
             clusterId,
             kind: _selectedKind,
             group: _selectedGroup || K8S_EMPTY_GROUP,
-            version: DUMMY_RESOURCE_GVK_VERSION,
         })
 
         if (path === location.pathname) {
@@ -161,8 +160,14 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
             return
         }
         /* NOTE: match will never be null; due to node fallback */
+        const lowercasedKind = kind.toLowerCase()
+        const lowercasedGroup = group.toLowerCase()
         const match =
-            k8sObjectOptionsList.find((option) => option.dataset.kind.toLowerCase() === kind) ?? k8sObjectOptionsList[0]
+            k8sObjectOptionsList.find(
+                (option) =>
+                    option.dataset.kind.toLowerCase() === lowercasedKind &&
+                    (option.dataset.group || K8S_EMPTY_GROUP).toLowerCase() === lowercasedGroup,
+            ) ?? k8sObjectOptionsList[0]
         /* NOTE: if nodeType doesn't match the selectedResource kind, set it accordingly */
         selectNode(
             {
@@ -172,7 +177,7 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
             },
             match.groupName,
         )
-    }, [kind, k8sObjectOptionsList])
+    }, [kind, group, k8sObjectOptionsList])
 
     const selectedChildRef: React.Ref<HTMLButtonElement> = (node) => {
         /**
diff --git a/src/components/ResourceBrowser/Utils.tsx b/src/components/ResourceBrowser/Utils.tsx
@@ -22,7 +22,6 @@ import queryString from 'query-string'
 import {
     ApiResourceGroupType,
     DATE_TIME_FORMAT_STRING,
-    DUMMY_RESOURCE_GVK_VERSION,
     FeatureTitleWithInfo,
     getUrlWithSearchParams,
     GVK_FILTER_API_VERSION_QUERY_PARAM_KEY,
@@ -305,7 +304,6 @@ export const getTabsBasedOnRole = ({
                 clusterId,
                 kind: 'node',
                 group: K8S_EMPTY_GROUP,
-                version: DUMMY_RESOURCE_GVK_VERSION,
             }),
             isSelected: true,
             type: 'fixed',
@@ -454,7 +452,6 @@ export const getClusterChangeRedirectionUrl = (shouldRedirectToInstallationStatu
               clusterId: id,
               group: K8S_EMPTY_GROUP,
               kind: 'node',
-              version: DUMMY_RESOURCE_GVK_VERSION,
           })
 
 const renderAppGroupDescriptionContent = () =>
diff --git a/src/components/common/ClusterMetaDataBar/ClusterMetaDataBar.tsx b/src/components/common/ClusterMetaDataBar/ClusterMetaDataBar.tsx
@@ -18,7 +18,6 @@ import { generatePath, useHistory } from 'react-router-dom'
 
 import {
     AppThemeType,
-    DUMMY_RESOURCE_GVK_VERSION,
     getComponentSpecificThemeClass,
     K8S_EMPTY_GROUP,
     RESOURCE_BROWSER_ROUTES,
@@ -56,7 +55,7 @@ export const ClusterMetaDataBar = ({
         <a
             className={`${darkTheme ? 'icon-stroke__white resource-link__dark-theme text__white' : 'scn-9 cn-9 resource-link__white-theme'} fw-6 flex left dc__gap-6 cursor`}
             target="_blank"
-            href={`${window.__BASE_URL__}${generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_LIST, { clusterId, group: K8S_EMPTY_GROUP, kind: 'pod', version: DUMMY_RESOURCE_GVK_VERSION })}?namespace=${namespace}`}
+            href={`${window.__BASE_URL__}${generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_LIST, { clusterId, group: K8S_EMPTY_GROUP, kind: 'pod' })}?namespace=${namespace}`}
             rel="noreferrer"
         >
             <AllResourcesIcon />
diff --git a/src/components/common/DynamicTabs/DynamicTabs.tsx b/src/components/common/DynamicTabs/DynamicTabs.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { cloneElement, RefCallback, useMemo, useRef } from 'react'
+import React, { cloneElement, MouseEventHandler, RefCallback, useMemo, useRef } from 'react'
 import { useHistory } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 import { Dayjs } from 'dayjs'
@@ -26,13 +26,13 @@ import {
     ComponentSizeType,
     ConditionalWrap,
     DynamicTabType,
+    Icon,
     logExceptionToSentry,
     noop,
     Progressing,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
-import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
 
 import Timer from './DynamicTabs.timer'
 import DynamicTabsSelect from './DynamicTabsSelect'
@@ -204,6 +204,22 @@ const DynamicTabs = ({
             </Tippy>
         )
 
+        const renderCloseButton = (onClick: MouseEventHandler<HTMLButtonElement>) => (
+            <div className="pr-12 dc__zi-2 dc__no-shrink">
+                <Button
+                    variant={ButtonVariantType.borderLess}
+                    size={ComponentSizeType.xxs}
+                    style={ButtonStyleType.negativeGrey}
+                    icon={<Icon name="ic-close-small" color={null} />}
+                    dataTestId="close-icon"
+                    onClick={onClick}
+                    ariaLabel={`Close tab ${tab.name}`}
+                    showAriaLabelInTippy={false}
+                    data-id={tab.id}
+                />
+            </div>
+        )
+
         return (
             <ConditionalWrap key={tab.id} condition={!isFixed} wrap={renderWithTippy}>
                 <div
@@ -213,36 +229,8 @@ const DynamicTabs = ({
                     className={`${isFixed ? 'fixed-tab' : 'dynamic-tab'} flex dc__gap-5 cn-9 ${tab.isSelected ? 'dynamic-tab-selected bg__primary' : ''}`}
                 >
                     {getTabNavLink(tab)}
-                    {_showNameOnSelect && (
-                        <button
-                            type="button"
-                            // NOTE: need dc__zi-2 because the before pseudo class renders
-                            // the rounded corners and it has a z-index of 1
-                            className="dc__unset-button-styles pr-12 dc__zi-2"
-                            aria-label={`Stop tab ${tab.name}`}
-                            onClick={handleTabStopAction}
-                            data-id={tab.id}
-                        >
-                            <div className="dynamic-tab__close flex br-4">
-                                <ICCross className="icon-dim-16 cursor p-2 fcn-6 scn-6" />
-                            </div>
-                        </button>
-                    )}
-                    {!isFixed && (
-                        <button
-                            type="button"
-                            // NOTE: need dc__zi-2 because the before pseudo class renders
-                            // the rounded corners and it has a z-index of 1
-                            className="dc__unset-button-styles pr-12 dc__zi-2"
-                            aria-label={`Close tab ${tab.name}`}
-                            onClick={handleTabCloseAction}
-                            data-id={tab.id}
-                        >
-                            <div className="dynamic-tab__close flex br-4">
-                                <ICCross className="icon-dim-16 cursor p-2 fcn-6 scn-6" />
-                            </div>
-                        </button>
-                    )}
+                    {_showNameOnSelect && renderCloseButton(handleTabStopAction)}
+                    {!isFixed && renderCloseButton(handleTabCloseAction)}
                 </div>
             </ConditionalWrap>
         )
diff --git a/yarn.lock b/yarn.lock
