From e65603902ef04618dffa8cdd90503a94d6afae20 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Tue, 26 Mar 2024 13:22:13 +0100
Subject: [PATCH 1/3] show secret data

---
 .../kubernetes/configuration/Secret.tsx       | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/assets/src/components/kubernetes/configuration/Secret.tsx b/assets/src/components/kubernetes/configuration/Secret.tsx
index df4038cd09..4cca1746a9 100644
--- a/assets/src/components/kubernetes/configuration/Secret.tsx
+++ b/assets/src/components/kubernetes/configuration/Secret.tsx
@@ -1,5 +1,5 @@
 import { ReactElement, useMemo } from 'react'
-import { useSetBreadcrumbs } from '@pluralsh/design-system'
+import { Card, Prop, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { useParams } from 'react-router-dom'
 import { useTheme } from 'styled-components'
 
@@ -71,8 +71,29 @@ 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>
+          <Card
+            css={{
+              display: 'flex',
+              flexDirection: 'row',
+            }}
+          >
+            {Object.entries(secret?.data)?.map(([key, value]) => (
+              <Prop title={key}>{value}</Prop>
+            ))}
+          </Card>
         </section>
       </div>
     </ResponsivePageFullWidth>

From 677e86b1fd9a2b49b439a93c57f5eb6697cdc713 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Tue, 26 Mar 2024 14:17:26 +0100
Subject: [PATCH 2/3] finish secrets

---
 .../kubernetes/configuration/Secret.tsx       | 84 +++++++++++++++++--
 1 file changed, 78 insertions(+), 6 deletions(-)

diff --git a/assets/src/components/kubernetes/configuration/Secret.tsx b/assets/src/components/kubernetes/configuration/Secret.tsx
index 4cca1746a9..5d9033105f 100644
--- 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 { Card, Prop, 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.xxsmall,
+      }}
+    >
+      <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 (
@@ -84,15 +150,21 @@ export default function Secret(): ReactElement {
         </section>
         <section>
           <SubTitle>Data</SubTitle>
+          {/* TODO: Reveal all button. */}
           <Card
             css={{
               display: 'flex',
-              flexDirection: 'row',
+              flexDirection: 'column',
             }}
           >
-            {Object.entries(secret?.data)?.map(([key, value]) => (
-              <Prop title={key}>{value}</Prop>
-            ))}
+            <Table
+              data={secretData || []}
+              columns={columns}
+              css={{
+                maxHeight: 'unset',
+                height: '100%',
+              }}
+            />
           </Card>
         </section>
       </div>

From 46164e1ac7e7061360804c1e6af3d3a74e5b727c Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Tue, 26 Mar 2024 14:19:14 +0100
Subject: [PATCH 3/3] fix spacing

---
 assets/src/components/kubernetes/configuration/Secret.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/components/kubernetes/configuration/Secret.tsx b/assets/src/components/kubernetes/configuration/Secret.tsx
index 5d9033105f..1afd9a68d8 100644
--- a/assets/src/components/kubernetes/configuration/Secret.tsx
+++ b/assets/src/components/kubernetes/configuration/Secret.tsx
@@ -45,7 +45,7 @@ function SecretDataValue({ value }: { value: any }) {
       css={{
         display: 'flex',
         alignItems: 'center',
-        gap: theme.spacing.xxsmall,
+        gap: theme.spacing.large,
       }}
     >
       <IconFrame