Restore missing functionality to Container page

assets/src/components/apps/app/config/Configuration.tsx

@@ -24,7 +24,7 @@ export default function Configuration() {
   const [view, setView] = useState<Key>()
   const { appName } = useParams()
   const { setBreadcrumbs } = useContext<any>(BreadcrumbsContext)
-  const { data, error, loading } = useQuery(APPLICATION_Q, {
+  const { data, error } = useQuery(APPLICATION_Q, {
     variables: { name: appName },
     fetchPolicy: 'network-only',
     onError: console.error,
@@ -36,10 +36,6 @@ export default function Configuration() {
     { text: 'configuration', url: `/apps/${appName}/config` },
   ]), [appName, setBreadcrumbs])
 
-  console.log('error', error)
-  console.log('data', data)
-  console.log('loading', loading)
-
   if (error) return <ScrollablePage heading="Configuration">Cannot access configuration for this app.</ScrollablePage>
 
   if (!data) {

assets/src/components/cluster/TableElements.tsx

@@ -28,24 +28,16 @@ const isNullishIsh = (val: any) => {
 }
 
 export const numishSort: SortingFn<any> = (thingA, thingB, colId) => {
-  console.log('thingA', thingA)
   const a = thingA.getValue<any>(colId)
   const b = thingB.getValue<any>(colId)
 
-  console.log({ a, b })
   if (isNullishIsh(a) && isNullishIsh(b)) {
-    console.log('both null')
-
     return 0
   }
   if (isNullishIsh(a)) {
-    console.log('a null')
-
     return -1
   }
   if (isNullishIsh(b)) {
-    console.log('b null')
-
     return 1
   }
 

assets/src/components/cluster/containers/Container.tsx

@@ -2,19 +2,22 @@ import { useEffect, useMemo, useRef } from 'react'
 import {
   Outlet,
   useMatch,
+  useNavigate,
   useOutletContext,
   useParams,
 } from 'react-router-dom'
 import {
   EmptyState,
+  ListBoxItem,
   LoopingLogo,
+  Select,
+  SelectButton,
   SubTab,
   TabList,
   TabPanel,
 } from '@pluralsh/design-system'
-
-import { useBreadcrumbs } from 'components/layout/Breadcrumbs'
-
+import { Flex } from 'honorable'
+import styled from 'styled-components'
 import { useQuery } from '@apollo/client'
 import {
   ContainerStatus,
@@ -23,24 +26,20 @@ import {
   Pod,
 } from 'generated/graphql'
 
+import { useBreadcrumbs } from 'components/layout/Breadcrumbs'
 import { ResponsivePageFullWidth } from 'components/utils/layout/ResponsivePageFullWidth'
-
 import { LinkTabWrap } from 'components/utils/Tabs'
 
 import { POD_INFO_Q } from '../queries'
 import { POLL_INTERVAL } from '../constants'
-
 import { statusesToRecord } from '../pods/PodInfo'
 
 const DIRECTORY = [
   { path: '', label: 'Cloud shell' },
   { path: 'metadata', label: 'Metadata' },
 ] as const
 
-function HeadingTabList({ tabStateRef }: any) {
-  const subpath
-    = useMatch('/pods/:namespace/:name/shell/:container/:subpath')?.params
-      ?.subpath || ''
+function HeadingTabList({ tabStateRef, subpath }: any) {
   const currentTab = DIRECTORY.find(({ path }) => path === subpath)
 
   return (
@@ -73,12 +72,18 @@ type ContainerContext = {
   initContainers: Maybe<ContainerT>[]
 }
 
+const SelectTrigger = styled(SelectButton)({
+  minWidth: 230,
+})
+
 export default function Container() {
-  const {
-    name, namespace, container: containerName,
-  } = useParams()
+  const { name, namespace, container: containerName } = useParams()
   const { setBreadcrumbs } = useBreadcrumbs()
   const tabStateRef = useRef<any>()
+  const navigate = useNavigate()
+
+  const match = useMatch('/pods/:namespace/:name/shell/:container/:subpath')
+  const subpath = match?.params?.subpath || ''
 
   const { data, error } = useQuery<{ pod: Pod }>(POD_INFO_Q, {
     variables: { name, namespace },
@@ -131,6 +136,8 @@ export default function Container() {
     }
   }, [containerName, data])
 
+  const { initContainers, containers, pod } = { ...transformedData }
+
   if (error || (data && !transformedData)) {
     return (
       <EmptyState message={`Could not find container "${containerName}"`} />
@@ -142,7 +149,46 @@ export default function Container() {
     <ResponsivePageFullWidth
       scrollable={false}
       heading={containerName}
-      headingContent={<HeadingTabList tabStateRef={tabStateRef} />}
+      headingContent={(
+        <Flex gap="medium">
+          <HeadingTabList
+            subpath={subpath}
+            tabStateRef={tabStateRef}
+          />
+          {(initContainers || containers) && (
+            <Select
+              width="100%"
+              placement="right"
+              selectedKey={containerName}
+              onSelectionChange={toContainerName => {
+                navigate(`/pods/${pod?.metadata.namespace}/${
+                  pod?.metadata.name
+                }/shell/${toContainerName}${subpath ? `/${subpath}` : ''}`)
+              }}
+              triggerButton={<SelectTrigger>{containerName}</SelectTrigger>}
+            >
+              {[
+                ...(initContainers || []).map((container, i) => (
+                  <ListBoxItem
+                    key={`init: ${container?.name || i}`}
+                    label={container?.name ? `init: ${container?.name}` : ''}
+                    textValue={
+                      container?.name ? `init: ${container?.name}` : ''
+                    }
+                  />
+                )),
+                ...(containers || []).map((container, i) => (
+                  <ListBoxItem
+                    key={container?.name || `${i}`}
+                    label={container?.name || ''}
+                    textValue={container?.name || ''}
+                  />
+                )),
+              ]}
+            </Select>
+          )}
+        </Flex>
+      )}
     >
       <TabPanel
         stateRef={tabStateRef}