refactor configmap

pluralsh · Mar 27, 2024 · b8a023b · b8a023b
1 parent 8ba6f29
commit b8a023b
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 47 deletions.
diff --git a/assets/src/components/kubernetes/configuration/ConfigMap.tsx b/assets/src/components/kubernetes/configuration/ConfigMap.tsx
@@ -1,17 +1,16 @@
 import { ReactElement, useMemo } from 'react'
 import { Code, useSetBreadcrumbs } from '@pluralsh/design-system'
-import { useParams } from 'react-router-dom'
-import { useTheme } from 'styled-components'
+import { Outlet, useOutletContext, useParams } from 'react-router-dom'
 import { isEmpty } from 'lodash'
 import yaml from 'js-yaml'
 
 import {
   ConfigMapQueryVariables,
+  Configmap_ConfigMapDetail as ConfigMapT,
   useConfigMapQuery,
 } from '../../../generated/graphql-kubernetes'
 import { KubernetesClient } from '../../../helpers/kubernetes.client'
 import LoadingIndicator from '../../utils/LoadingIndicator'
-import { ResponsivePageFullWidth } from '../../utils/layout/ResponsivePageFullWidth'
 import { SubTitle } from '../../cluster/nodes/SubTitle'
 import { MetadataSidecar, useKubernetesCluster } from '../utils'
 import { NAMESPACE_PARAM } from '../Kubernetes'
@@ -21,10 +20,16 @@ import {
   getResourceDetailsAbsPath,
 } from '../../../routes/kubernetesRoutesConsts'
 
+import ResourceDetails, { TabEntry } from '../ResourceDetails'
+
 import { getBreadcrumbs } from './ConfigMaps'
 
+const directory: Array<TabEntry> = [
+  { path: '', label: 'Info' },
+  { path: 'raw', label: 'Raw' },
+] as const
+
 export default function ConfigMap(): ReactElement {
-  const theme = useTheme()
   const cluster = useKubernetesCluster()
   const { clusterId, name = '', namespace = '' } = useParams()
   const { data, loading } = useConfigMapQuery({
@@ -39,24 +44,6 @@ export default function ConfigMap(): ReactElement {
 
   const cm = data?.handleGetConfigMapDetail
 
-  const tabs = useMemo(
-    () => [
-      {
-        key: 'yaml',
-        label: 'YAML',
-        language: 'yaml',
-        content: yaml.dump(cm?.data),
-      },
-      {
-        key: 'json',
-        label: 'JSON',
-        language: 'json',
-        content: JSON.stringify(cm?.data, null, 2),
-      },
-    ],
-    [cm?.data]
-  )
-
   useSetBreadcrumbs(
     useMemo(
       () => [
@@ -84,27 +71,47 @@ export default function ConfigMap(): ReactElement {
   if (loading) return <LoadingIndicator />
 
   return (
-    <ResponsivePageFullWidth>
-      <div
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: theme.spacing.large,
-        }}
-      >
-        <section>
-          <SubTitle>Metadata</SubTitle>
-          <MetadataSidecar objectMeta={cm?.objectMeta} />
-        </section>
-        <section>
-          <SubTitle>Data</SubTitle>
-          {!isEmpty(cm?.data) ? (
-            <Code tabs={tabs} />
-          ) : (
-            'There is no data to display.'
-          )}
-        </section>
-      </div>
-    </ResponsivePageFullWidth>
+    <ResourceDetails
+      tabs={directory}
+      sidecar={<MetadataSidecar objectMeta={cm?.objectMeta} />}
+    >
+      <Outlet context={cm} />
+    </ResourceDetails>
+  )
+}
+
+export function ConfigMapInfo(): ReactElement {
+  const cm = useOutletContext() as ConfigMapT
+  const tabs = useMemo(
+    () => [
+      {
+        key: 'yaml',
+        label: 'YAML',
+        language: 'yaml',
+        content: yaml.dump(cm?.data),
+      },
+      {
+        key: 'json',
+        label: 'JSON',
+        language: 'json',
+        content: JSON.stringify(cm?.data, null, 2),
+      },
+    ],
+    [cm?.data]
+  )
+
+  return (
+    <section>
+      <SubTitle>Data</SubTitle>
+      {!isEmpty(cm?.data) ? (
+        <Code tabs={tabs} />
+      ) : (
+        'There is no data to display.'
+      )}
+    </section>
   )
 }
+
+export function ConfigMapRaw(): ReactElement {
+  return <>raw</>
+}
diff --git a/assets/src/routes/kubernetesRoutes.tsx b/assets/src/routes/kubernetesRoutes.tsx
@@ -64,7 +64,9 @@ import IngressClass from '../components/kubernetes/discovery/IngressClass'
 import NetworkPolicy from '../components/kubernetes/discovery/NetworkPolicy'
 import PersistentVolumeClaim from '../components/kubernetes/storage/PersistentVolumeClaim'
 import StorageClass from '../components/kubernetes/storage/StorageClass'
-import ConfigMap from '../components/kubernetes/configuration/ConfigMap'
+import ConfigMap, {
+  ConfigMapInfo,
+} from '../components/kubernetes/configuration/ConfigMap'
 import Namespace from '../components/kubernetes/cluster/Namespace'
 
 import {
@@ -400,10 +402,19 @@ export const kubernetesRoutes = [
   />,
   // Configuration
   <Route
-    index
     path={`${KUBERNETES_ABS_PATH}/${CONFIG_MAPS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
     element={<ConfigMap />}
-  />,
+  >
+    <Route
+      index
+      path=""
+      element={<ConfigMapInfo />}
+    />
+    <Route
+      path="raw"
+      element={<SecretRaw />}
+    />
+  </Route>,
   <Route
     path={`${KUBERNETES_ABS_PATH}/${SECRETS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
     element={<Secret />}