move component metadata to separate tab

assets/src/components/cd/services/service/ServiceComponents.tsx

@@ -24,8 +24,6 @@ import { useComponentKindSelect } from 'components/apps/app/components/Component
 import { ComponentList } from 'components/apps/app/components/ComponentList'
 import { ModalMountTransition } from 'components/utils/ModalMountTransition'
 
-import { isUnstructured } from 'components/component/ComponentInfo'
-
 import {
   getServiceDetailsBreadcrumbs,
   useServiceContext,
@@ -130,7 +128,6 @@ export default function ServiceComponents() {
               ? `${getServiceComponentPath({
                   clusterId,
                   serviceId,
-                  defaultRaw: isUnstructured(c.kind),
                   componentId: c.id,
                 })}`
               : undefined

assets/src/components/component/ComponentDetails.tsx

@@ -36,6 +36,8 @@ import { useTheme } from 'styled-components'
 import { isEmpty } from 'lodash'
 import { getServiceDetailsPath } from 'routes/cdRoutesConsts'
 
+import { isUnstructured } from './ComponentInfo'
+
 export const kindToQuery = {
   certificate: CertificateDocument,
   cronjob: CronJobDocument,
@@ -151,11 +153,12 @@ export function ComponentDetails({
   )
 
   const filteredDirectory = directory.filter(
-    ({ onlyFor, onlyIfNoError, onlyIfDryRun, prometheus }) =>
+    ({ onlyFor, onlyIfNoError, onlyIfDryRun, prometheus, label }) =>
       (!onlyFor || (componentKind && onlyFor.includes(componentKind))) &&
       (!prometheus || !service?.cluster?.id || hasPrometheus) &&
       (!onlyIfNoError || !hasNotFoundError) &&
-      (!onlyIfDryRun || (cdView && service?.dryRun))
+      (!onlyIfDryRun || (cdView && service?.dryRun)) &&
+      !(label === 'Info' && isUnstructured(componentKind))
   )
 
   const currentTab = filteredDirectory.find(({ path }) => path === subpath)

assets/src/components/component/ComponentInfo.tsx

@@ -1,7 +1,7 @@
 import { useOutletContext } from 'react-router-dom'
 import { useMemo } from 'react'
 
-import styled, { useTheme } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import Pods from './info/Pods'
 import Job from './info/Job'
@@ -11,7 +11,6 @@ import Service from './info/Service'
 import Ingress from './info/Ingress'
 import Deployment from './info/Deployment'
 import StatefulSet from './info/StatefulSet'
-import Metadata from './info/Metadata'
 import { ComponentDetailsContext } from './ComponentDetails'
 import DaemonSet from './info/Daemonset'
 import CanaryInfo from './info/Canary'
@@ -47,8 +46,6 @@ const componentInfoMap: { [key: string]: JSX.Element } = {
   rollout: <Rollout />,
 }
 
-const hideMetadataKinds = ['rollout']
-
 function getInfo(kind: string): JSX.Element | undefined {
   return componentInfoMap[kind]
 }
@@ -57,13 +54,6 @@ export function isUnstructured(kind: string): boolean {
   return componentInfoMap[kind.toLowerCase()] === undefined
 }
 
-const Section = styled.section((_) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  flexBasis: '50%',
-  flexGrow: 1,
-}))
-
 export default function ComponentInfo() {
   const theme = useTheme()
   const {
@@ -88,17 +78,11 @@ export default function ComponentInfo() {
         display: 'flex',
         flexDirection: 'column',
         gap: theme.spacing.large,
+        paddingBottom: theme.spacing.xxlarge,
       }}
     >
       {hasPods(componentKind) && <Pods pods={value?.pods} />}
-      <div css={{ display: 'flex', gap: theme.spacing.xxlarge }}>
-        {info && value && <Section>{info}</Section>}
-        {!hideMetadataKinds.includes(componentKind) && (
-          <Section>
-            <Metadata />
-          </Section>
-        )}
-      </div>
+      {info && value && info}
     </div>
   )
 }

assets/src/components/component/info/Metadata.tsx → assets/src/components/component/ComponentMetadata.tsx

@@ -3,9 +3,9 @@ import { useMemo } from 'react'
 import { LabelsAnnotations } from 'components/cluster/LabelsAnnotations'
 import { MetadataGrid, MetadataItem } from 'components/utils/Metadata'
 
-import { ComponentStatusChip } from '../../apps/app/components/misc'
+import { ComponentStatusChip } from '../apps/app/components/misc'
 
-import { InfoSection } from './common'
+import { InfoSection } from './info/common'
 
 export const componentsWithLogs: string[] = ['deployment', 'statefulset']
 

assets/src/components/component/directory.tsx

@@ -11,6 +11,11 @@ export const directory: {
     path: 'info',
     onlyIfNoError: true,
   },
+  {
+    label: 'Raw',
+    path: 'raw',
+    onlyIfNoError: true,
+  },
   {
     label: 'Metrics',
     path: 'metrics',
@@ -23,11 +28,6 @@ export const directory: {
     path: 'events',
     onlyIfNoError: true,
   },
-  {
-    label: 'Raw',
-    path: 'raw',
-    onlyIfNoError: true,
-  },
   {
     label: 'Tree view',
     path: 'tree',
@@ -38,4 +38,8 @@ export const directory: {
     path: 'dryrun',
     onlyIfDryRun: true,
   },
+  {
+    label: 'Metadata',
+    path: 'metadata',
+  },
 ]

assets/src/components/component/info/Canary.tsx

@@ -9,6 +9,8 @@ import { Canary, Deployment, Ingress } from 'generated/graphql'
 import { InlineLink } from 'components/utils/typography/InlineLink'
 import { ModalMountTransition } from 'components/utils/ModalMountTransition'
 
+import { MetadataBase } from '../ComponentMetadata'
+
 import {
   InfoSectionH2,
   InfoSectionH3,
@@ -17,7 +19,6 @@ import {
 } from './common'
 import { ConditionsTable } from './Conditions'
 import { IngressBase } from './Ingress'
-import { MetadataBase } from './Metadata'
 import { DeploymentBase } from './Deployment'
 
 const deploymentHelper = createColumnHelper<Deployment>()

assets/src/routes/cdRoutes.tsx

@@ -52,6 +52,8 @@ import ServiceDependencies from 'components/cd/services/service/ServiceDependenc
 
 import ObservabilityProviders from 'components/cd/globalSettings/observability/ObservabilityProviders'
 
+import ComponentMetadata from 'components/component/ComponentMetadata'
+
 import Cluster from '../components/cd/cluster/Cluster'
 import ClusterServices from '../components/cd/cluster/ClusterServices'
 import ClusterNodes from '../components/cd/cluster/ClusterNodes'
@@ -160,6 +162,10 @@ export const componentRoutes = (
       path="dryrun"
       element={<ComponentDryRun />}
     />
+    <Route
+      path="metadata"
+      element={<ComponentMetadata />}
+    />
   </Route>
 )
 

assets/src/routes/cdRoutesConsts.tsx

@@ -163,15 +163,13 @@ export function getClusterAddOnDetailsPath({
 
 export function getServiceComponentPath({
   componentId,
-  defaultRaw = false,
   ...props
 }: Parameters<typeof getServiceDetailsPath>[0] & {
   componentId: string | null | undefined
-  defaultRaw?: boolean
 }) {
   return `${getServiceDetailsPath({
     ...props,
-  })}/${SERVICE_COMPONENTS_PATH}/${componentId}${defaultRaw ? '/raw' : ''}`
+  })}/${SERVICE_COMPONENTS_PATH}/${componentId}`
 }
 
 export function getNodeDetailsPath({