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

fix: RB table

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -31,6 +31,8 @@ export const KEYBOARD_KEYS_MAP = {
     X: 'X',
     A: 'A',
     N: 'N',
+    S: 'S',
+    '/': '/',
     Escape: 'Esc',
     Enter: '↩',
     ArrowLeft: '←',

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -116,16 +116,14 @@ export const NODE_DRAIN_OPTIONS_CHECKBOX_CONFIG: {
 export const GVK_FILTER_KIND_QUERY_PARAM_KEY = 'gvkFilterKind'
 export const GVK_FILTER_API_VERSION_QUERY_PARAM_KEY = 'gvkFilterApiVersion'
 
-export const DUMMY_RESOURCE_GVK_VERSION = 'v1'
-
 export const RESOURCE_BROWSER_ROUTES = {
     OVERVIEW: `${URLS.RESOURCE_BROWSER}/:clusterId/overview`,
     MONITORING_DASHBOARD: `${URLS.RESOURCE_BROWSER}/:clusterId/monitoring-dashboard`,
     TERMINAL: `${URLS.RESOURCE_BROWSER}/:clusterId/terminal`,
     CLUSTER_UPGRADE: `${URLS.RESOURCE_BROWSER}/:clusterId/cluster-upgrade`,
     NODE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/node/:name`,
-    K8S_RESOURCE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/:namespace/:kind/:group/:version/:name`,
-    K8S_RESOURCE_LIST: `${URLS.RESOURCE_BROWSER}/:clusterId/:kind/:group/:version`,
+    K8S_RESOURCE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/:namespace/:kind/:group/:name`,
+    K8S_RESOURCE_LIST: `${URLS.RESOURCE_BROWSER}/:clusterId/:kind/:group`,
     RESOURCE_RECOMMENDER: `${URLS.RESOURCE_BROWSER}/:clusterId/resource-recommender`,
 } as const
 

src/Pages/ResourceBrowser/constants.tsx

@@ -23,7 +23,7 @@ import { DATE_TIME_FORMATS, URLS } from '@Common/Constants'
 import { DeploymentAppTypes } from '@Common/Types'
 import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants'
 import { isTimeStringAvailable } from '@Shared/Helpers'
-import { DUMMY_RESOURCE_GVK_VERSION, K8S_EMPTY_GROUP } from '@Pages/ResourceBrowser'
+import { K8S_EMPTY_GROUP } from '@Pages/ResourceBrowser'
 
 import { DeploymentStatusBreakdownItemType, Node, ResourceKindType, WorkflowStatusEnum } from '../../types'
 import { Icon } from '../Icon'
@@ -234,7 +234,7 @@ export const getHistoryItemStatusIconFromWorkflowStages = (
 }
 
 export const getWorkerPodBaseUrl = (clusterId: number = DEFAULT_CLUSTER_ID, podNamespace: string = DEFAULT_NAMESPACE) =>
-    `${URLS.RESOURCE_BROWSER}/${clusterId}/${podNamespace}/pod/${K8S_EMPTY_GROUP}/${DUMMY_RESOURCE_GVK_VERSION}`
+    `${URLS.RESOURCE_BROWSER}/${clusterId}/${podNamespace}/pod/${K8S_EMPTY_GROUP}`
 
 export const getWorkflowNodeStatusTitle = (status: string) => {
     if (!status) {

src/Shared/Components/CICDHistory/utils.tsx

@@ -61,13 +61,24 @@ const InternalTable = ({
 
     useEffect(() => {
         const handleFocusOutEvent = (e: FocusEvent) => {
-            const container = e.currentTarget as HTMLElement
-            const related = e.relatedTarget as HTMLElement | null
-
-            if (container && (!related || related.tagName === 'BODY')) {
-                const tableElement = wrapperDivRef.current.getElementsByClassName('generic-table')[0] as HTMLDivElement
-                tableElement?.focus()
-            }
+            setTimeout(() => {
+                const container = e.currentTarget as HTMLElement
+                const related = e.relatedTarget as HTMLElement | null
+
+                // NOTE: we want to focus the table if the focus is lost from any element inside the table
+                // and the focus is not moving to another element inside the table. Ideally we don't want to steal focus
+                // inputs, buttons, etc. from the user, but when we blur any element by pressing Escape, we want to focus the table
+                // Keep in mind that if we tab focus onto a div/span with tabIndex then the relatedTarget will be that null
+                if (
+                    !container.contains(document.activeElement) &&
+                    (!related || related.tagName === 'BODY' || document.activeElement === document.body)
+                ) {
+                    const tableElement = wrapperDivRef.current.getElementsByClassName(
+                        'generic-table',
+                    )[0] as HTMLDivElement
+                    tableElement?.focus()
+                }
+            }, 0)
         }
 
         wrapperDivRef.current?.addEventListener('focusout', handleFocusOutEvent)