Merge branch 'kubernetes' of github.com:pluralsh/console into kubernetes

pluralsh · Mar 26, 2024 · eb11ec4 · eb11ec4
2 parents 9cf232b + 46164e1
commit eb11ec4
Showing 1 changed file with 95 additions and 2 deletions.
diff --git a/assets/src/components/kubernetes/configuration/Secret.tsx b/assets/src/components/kubernetes/configuration/Secret.tsx
@@ -1,8 +1,18 @@
-import { ReactElement, useMemo } from 'react'
-import { useSetBreadcrumbs } from '@pluralsh/design-system'
+import { ReactElement, useMemo, useState } from 'react'
+import {
+  Card,
+  EyeClosedIcon,
+  EyeIcon,
+  IconFrame,
+  Prop,
+  Table,
+  useSetBreadcrumbs,
+} from '@pluralsh/design-system'
 import { useParams } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 
+import { createColumnHelper } from '@tanstack/react-table'
+
 import {
   SecretQueryVariables,
   useSecretQuery,
@@ -21,6 +31,53 @@ import {
 
 import { getBreadcrumbs } from './Secrets'
 
+type SecretDataEntry = {
+  key: string
+  value: any
+}
+
+function SecretDataValue({ value }: { value: any }) {
+  const theme = useTheme()
+  const [reveal, setReveal] = useState(false)
+
+  return (
+    <div
+      css={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.large,
+      }}
+    >
+      <IconFrame
+        size="medium"
+        clickable
+        tooltip={reveal ? 'Hide value' : 'Reveal value'}
+        icon={reveal ? <EyeIcon /> : <EyeClosedIcon />}
+        onClick={() => setReveal(() => !reveal)}
+      />
+      <div css={{ wordBreak: 'break-word' }}>
+        {reveal ? atob(value) : value}
+      </div>
+    </div>
+  )
+}
+
+const columnHelper = createColumnHelper<SecretDataEntry>()
+
+const columns = [
+  columnHelper.accessor((row) => row.key, {
+    id: 'key',
+    header: 'Key',
+    meta: { gridTemplate: `fit-content(200px)` },
+    cell: ({ getValue }) => getValue(),
+  }),
+  columnHelper.accessor((row) => row.value, {
+    id: 'value',
+    header: 'Value',
+    cell: ({ getValue }) => <SecretDataValue value={getValue()} />,
+  }),
+]
+
 export default function Secret(): ReactElement {
   const theme = useTheme()
   const cluster = useKubernetesCluster()
@@ -56,6 +113,15 @@ export default function Secret(): ReactElement {
     )
   )
 
+  const secretData: SecretDataEntry[] = useMemo(
+    () =>
+      Object.entries(secret?.data ?? {}).map(([key, value]) => ({
+        key,
+        value,
+      })),
+    [secret?.data]
+  )
+
   if (loading) return <LoadingIndicator />
 
   return (
@@ -71,8 +137,35 @@ export default function Secret(): ReactElement {
           <SubTitle>Metadata</SubTitle>
           <Metadata objectMeta={secret?.objectMeta} />
         </section>
+        <section>
+          <SubTitle>Info</SubTitle>
+          <Card
+            css={{
+              display: 'flex',
+              flexDirection: 'row',
+            }}
+          >
+            <Prop title="Type">{secret?.type}</Prop>
+          </Card>
+        </section>
         <section>
           <SubTitle>Data</SubTitle>
+          {/* TODO: Reveal all button. */}
+          <Card
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Table
+              data={secretData || []}
+              columns={columns}
+              css={{
+                maxHeight: 'unset',
+                height: '100%',
+              }}
+            />
+          </Card>
         </section>
       </div>
     </ResponsivePageFullWidth>