Merge pull request #2839 from devtron-labs/fix/cluster-terminal-main

fix(main): cluster terminal size

Author: Elessar1802

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useRef, useState } from 'react'
-import { generatePath, useHistory, useLocation, useParams } from 'react-router-dom'
+import { generatePath, useHistory, useLocation } from 'react-router-dom'
 
 import {
     Checkbox,
@@ -37,12 +37,10 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ResourceBrowserTabsId } from '@Components/ResourceBrowser/Constants'
-import { K8sResourceListURLParams } from '@Components/ResourceBrowser/ResourceList/types'
 import { getClusterTerminalParamsData } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.util'
 
 import { BUSYBOX_LINK, DEFAULT_CONTAINER_NAME, NETSHOOT_LINK, shellTypes } from '../../config/constants'
 import { clusterImageDescription, convertToOptionsList } from '../common'
-import { AppDetailsTabs } from '../v2/appDetails/appDetails.store'
 import {
     EditModeType,
     TERMINAL_STATUS,
@@ -88,9 +86,13 @@ const ClusterTerminal = ({
     taints,
     updateTabUrl,
 }: ClusterTerminalType) => {
-    const { kind } = useParams<K8sResourceListURLParams>()
     const { replace } = useHistory()
     const location = useLocation()
+    const isAdminTerminalVisible =
+        location.pathname ===
+        generatePath(RESOURCE_BROWSER_ROUTES.TERMINAL, {
+            clusterId,
+        })
     const queryParams = new URLSearchParams(location.search)
     const terminalAccessIdRef = useRef()
     const clusterShellTypes = shellTypes.filter((types) => types.label === 'sh' || types.label === 'bash')
@@ -159,7 +161,7 @@ const ClusterTerminal = ({
     }
 
     useEffect(() => {
-        if (kind !== 'terminal' || queryParamsData.selectedNode.value === selectedNodeName.value || !update) {
+        if (!isAdminTerminalVisible || queryParamsData.selectedNode.value === selectedNodeName.value || !update) {
             return
         }
         /* NOTE: update selectedNodeName */
@@ -188,7 +190,7 @@ const ClusterTerminal = ({
             id: ResourceBrowserTabsId.terminal,
             url: `${generatePath(RESOURCE_BROWSER_ROUTES.TERMINAL, { clusterId })}?${queryParams.toString()}`,
         })
-        if (kind === AppDetailsTabs.terminal) {
+        if (isAdminTerminalVisible) {
             replace({ search: queryParams.toString() })
         }
     }, [selectedNodeName.value, selectedNamespace.value, selectedImage.value, selectedTerminalType.value])
@@ -1036,7 +1038,7 @@ const ClusterTerminal = ({
                 renderConnectionStrip: renderStripMessage(),
                 setSocketConnection,
                 socketConnection,
-                isTerminalTab: selectedTabIndex === 0 && kind === 'terminal',
+                isTerminalTab: selectedTabIndex === 0 && isAdminTerminalVisible,
                 sessionId,
                 registerLinkMatcher: renderRegisterLinkMatcher,
             },

src/components/ResourceBrowser/ResourceList/AdminTerminalDummy.tsx

@@ -61,5 +61,7 @@ export const DynamicTabComponentWrapper = ({
         updateTabUrl({ id: tabId, url: `${pathname}${search}` })
     }, [pathname, search])
 
-    return cloneElement(children, { ...children.props, key: getTabById(tabId)?.componentKey }) as ReactElement
+    return children
+        ? (cloneElement(children, { ...children.props, key: getTabById(tabId)?.componentKey }) as ReactElement)
+        : null
 }

src/components/ResourceBrowser/ResourceList/DynamicTabComponentWrapper.tsx

@@ -55,7 +55,6 @@ import { getClusterListing } from '../ResourceBrowser.service'
 import { ClusterDetailBaseParams, ClusterOptionType, K8SResourceListType } from '../Types'
 import { getClusterChangeRedirectionUrl, getTabsBasedOnRole } from '../Utils'
 import AdminTerminal from './AdminTerminal'
-import AdminTerminalDummy from './AdminTerminalDummy'
 import ClusterSelector from './ClusterSelector'
 import ClusterUpgradeCompatibilityInfo from './ClusterUpgradeCompatibilityInfo'
 import { DynamicTabComponentWrapper } from './DynamicTabComponentWrapper'
@@ -231,14 +230,7 @@ const ResourceList = ({ selectedCluster, k8SObjectMapRaw }: ResourceListProps) =
                 </Route>
             )}
             <Route path={RESOURCE_BROWSER_ROUTES.TERMINAL} exact>
-                <DynamicTabComponentWrapper type="fixed" {...DynamicTabComponentWrapperBaseProps}>
-                    <AdminTerminalDummy
-                        markTabActiveById={markTabActiveById}
-                        clusterName={selectedCluster.label}
-                        getTabById={getTabById}
-                        updateTabUrl={updateTabUrl}
-                    />
-                </DynamicTabComponentWrapper>
+                <DynamicTabComponentWrapper type="fixed" {...DynamicTabComponentWrapperBaseProps} />
             </Route>
             {ResourceRecommender && (
                 <Route path={RESOURCE_BROWSER_ROUTES.RESOURCE_RECOMMENDER} exact>

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -90,11 +90,6 @@ export interface K8sResourceListTableCellComponentProps
     reloadResourceListData: () => void
 }
 
-export interface AdminTerminalDummyProps
-    extends Pick<UseTabsReturnType, 'markTabActiveById' | 'updateTabUrl' | 'getTabById'> {
-    clusterName: string
-}
-
 export interface ResourcePageHeaderProps {
     breadcrumbs: ReturnType<typeof useBreadcrumb>['breadcrumbs']
     renderPageHeaderActionButtons?: () => JSX.Element
@@ -111,7 +106,7 @@ export type DynamicTabComponentWrapperProps = Pick<
     'updateTabUrl' | 'markTabActiveById' | 'getTabId' | 'getTabById'
 > &
     ({ type: 'fixed'; addTab?: never } | { type: 'dynamic'; addTab: UseTabsReturnType['addTab'] }) & {
-        children: React.ReactElement
+        children?: React.ReactElement
     }
 
 export interface ResourceRecommenderTableViewWrapperProps extends ResourceFilterOptionsProps, TableViewWrapperProps {