fix: action menu placement & more

Author: Elessar1802

src/components/ResourceBrowser/ResourceList/K8SResourceList.tsx

@@ -21,6 +21,7 @@ import {
     abortPreviousRequests,
     FiltersTypeEnum,
     getAIAnalyticsEvents,
+    getIsRequestAborted,
     LARGE_PAGE_SIZE_OPTIONS,
     Nodes,
     PaginationEnum,
@@ -139,7 +140,7 @@ export const K8SResourceList = ({
           }, {})
         : null
 
-    const [resourceListLoader, resourceList, , reloadResourceList] = useAsync(
+    const [resourceListLoader, resourceList, resourceListError, reloadResourceList] = useAsync(
         () =>
             abortPreviousRequests(async () => {
                 if (selectedResource) {
@@ -155,10 +156,10 @@ export const K8SResourceList = ({
                 return null
             }, abortControllerRef),
         [selectedResource, clusterId, selectedNamespace, JSON.stringify(resourceFilters)],
-        true,
-        { resetOnChange: false },
     )
 
+    const isResourceListLoading = !resourceList || resourceListLoader || getIsRequestAborted(resourceListError)
+
     useEffect(
         () => () => {
             abortControllerRef.current?.abort()
@@ -241,7 +242,7 @@ export const K8SResourceList = ({
         <>
             <Table
                 // key={JSON.stringify(selectedResource)}
-                loading={resourceListLoader || !resourceList}
+                loading={isResourceListLoading}
                 columns={columns}
                 rows={rows}
                 {...(RBBulkSelectionActions && !isEventListing

src/components/ResourceBrowser/ResourceList/K8sResourceListTableCellComponent.tsx

@@ -162,6 +162,12 @@ const K8sResourceListTableCellComponent = ({
         )
     }
 
+    const onAddEnvironmentKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+        if (e.key === 'Enter') {
+            e.stopPropagation()
+        }
+    }
+
     if (columnName === 'type' && isEventListing) {
         const iconName: IconName =
             (resourceData.type as string).toLowerCase() === 'normal' ? 'ic-info-filled-color' : 'ic-warning'
@@ -284,6 +290,9 @@ const K8sResourceListTableCellComponent = ({
                                     dataTestId="add-environment"
                                     variant={ButtonVariantType.text}
                                     onClick={getAddEnvironmentClickHandler(resourceData.name as string)}
+                                    buttonProps={{
+                                        onKeyDown: onAddEnvironmentKeyDown,
+                                    }}
                                 />
                             )}
                         {columnName === 'status' && isNodeUnschedulable && (

src/components/ResourceBrowser/ResourceList/NodeActionsMenu.tsx

@@ -186,7 +186,7 @@ const NodeActionsMenu = forwardRef<HTMLButtonElement, NodeActionsMenuProps>(
                     id={nodeData.name as string}
                     onClick={onActionMenuClick}
                     options={[{ items: getNodeActions(!!nodeData.unschedulable) }]}
-                    position="right"
+                    position="bottom"
                 >
                     <Button
                         ref={forwardedRef}

src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx

@@ -145,7 +145,7 @@ const ResourceBrowserActionMenu = forwardRef(
                 <ActionMenu
                     id={id}
                     onClick={onActionMenuClick}
-                    position="right"
+                    position="bottom"
                     options={[
                         {
                             items: [

src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx

@@ -302,6 +302,7 @@ const ResourceFilterOptions = ({
 
                     <div className="dc__mxw-200">
                         <SelectPicker
+                            selectRef={namespaceFilterRef}
                             inputId="resource-filter-select"
                             placeholder="Select Namespace"
                             options={namespaceOptions}

src/components/ResourceBrowser/ResourceList/ResourceRecommenderTableCellComponent.tsx

@@ -8,11 +8,10 @@ import {
     ButtonVariantType,
     ClipboardButton,
     ComponentSizeType,
-    FiltersTypeEnum,
+    getGroupVersionFromApiVersion,
     highlightSearchText,
     Icon,
     ResourceRecommenderHeaderWithRecommendation,
-    TableCellComponentProps,
     TableSignalEnum,
     Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -25,7 +24,8 @@ import {
     RESOURCE_ACTION_MENU,
     RESOURCE_BROWSER_ROUTES,
 } from '../Constants'
-import { ClusterDetailBaseParams, ResourceFilterOptionsProps } from '../Types'
+import { ClusterDetailBaseParams } from '../Types'
+import { ResourceRecommenderTableCellComponentProps } from './types'
 
 const ApplyResourceRecommendationModal = importComponentFromFELibrary(
     'ApplyResourceRecommendationModal',
@@ -34,12 +34,6 @@ const ApplyResourceRecommendationModal = importComponentFromFELibrary(
 )
 const ResourceRecommendationChip = importComponentFromFELibrary('ResourceRecommendationChip', null, 'function')
 
-interface ResourceRecommenderTableCellComponentProps
-    extends TableCellComponentProps<FiltersTypeEnum.URL>,
-        Pick<ResourceFilterOptionsProps, 'resourceRecommenderConfig'> {
-    handleReloadDataAfterBulkOperation: () => void
-}
-
 const ResourceRecommenderTableCellComponent = ({
     field: columnName,
     row: { id, data: resourceData },
@@ -57,16 +51,18 @@ const ResourceRecommenderTableCellComponent = ({
             name,
             namespace = ALL_NAMESPACE_OPTION.value,
             kind,
-            group: _group,
             tab = RESOURCE_ACTION_MENU.manifest,
+            apiVersion,
         } = e.currentTarget.dataset
 
+        const group = getGroupVersionFromApiVersion(apiVersion).group.toLowerCase() || K8S_EMPTY_GROUP
+
         const url = generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL, {
             clusterId,
             namespace,
             name,
             kind: kind.toLowerCase(),
-            group: _group || K8S_EMPTY_GROUP,
+            group,
             version: DUMMY_RESOURCE_GVK_VERSION,
         })
 

src/components/ResourceBrowser/ResourceList/ResourceRecommenderTableViewWrapper.tsx

@@ -1,12 +1,7 @@
-import { ErrorScreenManager, TableViewWrapperProps, URLS } from '@devtron-labs/devtron-fe-common-lib'
+import { ErrorScreenManager, URLS } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ResourceFilterOptionsProps } from '../Types'
 import ResourceFilterOptions from './ResourceFilterOptions'
-
-interface ResourceRecommenderTableViewWrapperProps extends ResourceFilterOptionsProps, TableViewWrapperProps {
-    resourceListError: any
-    reloadResourceListData: () => void
-}
+import { ResourceRecommenderTableViewWrapperProps } from './types'
 
 export const ResourceRecommenderTableViewWrapper = ({
     children,

src/components/ResourceBrowser/ResourceList/types.ts

@@ -26,7 +26,7 @@ import { UseTabsReturnType } from '@Components/common/DynamicTabs/types'
 import { NodeDetailPropsType } from '@Components/v2/appDetails/appDetails.type'
 
 import { NODE_K8S_VERSION_FILTER_KEY } from '../Constants'
-import { ClusterDetailBaseParams, K8SResourceListType, NODE_SEARCH_KEYS } from '../Types'
+import { ClusterDetailBaseParams, K8SResourceListType, NODE_SEARCH_KEYS, ResourceFilterOptionsProps } from '../Types'
 
 export interface ClusterUpgradeCompatibilityInfoProps
     extends Pick<ClusterListType, 'updateTabUrl'>,
@@ -104,3 +104,14 @@ export type DynamicTabComponentWrapperProps = Pick<
     ({ type: 'fixed'; addTab?: never } | { type: 'dynamic'; addTab: UseTabsReturnType['addTab'] }) & {
         children: React.ReactElement
     }
+
+export interface ResourceRecommenderTableCellComponentProps
+    extends TableCellComponentProps<FiltersTypeEnum.URL>,
+        Pick<ResourceFilterOptionsProps, 'resourceRecommenderConfig'> {
+    handleReloadDataAfterBulkOperation: () => void
+}
+
+export interface ResourceRecommenderTableViewWrapperProps extends ResourceFilterOptionsProps, TableViewWrapperProps {
+    resourceListError: any
+    reloadResourceListData: () => void
+}