View contents of attached secrets in Workspace Wizard

Signed-off-by: Charles Thao <[email protected]>

Author: thaorell

workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSecrets.tsx

@@ -23,6 +23,7 @@ import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
 import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
 import { SecretsAttachModal } from './secrets/SecretsAttachModal';
 import { SecretsCreateModal } from './secrets/SecretsCreateModal';
+import { SecretsViewPopover } from './secrets/SecretsViewPopover';
 
 interface WorkspaceFormPropertiesSecretsProps {
   secrets: WorkspacesPodSecretMount[];
@@ -48,7 +49,6 @@ export const WorkspaceFormPropertiesSecrets: React.FC<WorkspaceFormPropertiesSec
   const [attachedSecrets, setAttachedSecrets] = useState<WorkspacesPodSecretMount[]>([]);
   const [attachedMountPath, setAttachedMountPath] = useState('');
   const [attachedDefaultMode, setAttachedDefaultMode] = useState(DEFAULT_MODE_OCTAL);
-
   const { api } = useNotebookAPI();
   const { selectedNamespace } = useNamespaceContext();
 
@@ -157,6 +157,7 @@ export const WorkspaceFormPropertiesSecrets: React.FC<WorkspaceFormPropertiesSec
               <Th>Secret Name</Th>
               <Th>Mount Path</Th>
               <Th>Default Mode</Th>
+              <Th aria-label="View Secret" />
               <Th aria-label="Actions" />
             </Tr>
           </Thead>
@@ -166,6 +167,9 @@ export const WorkspaceFormPropertiesSecrets: React.FC<WorkspaceFormPropertiesSec
                 <Td>{secret.secretName}</Td>
                 <Td>{secret.mountPath}</Td>
                 <Td>{secret.defaultMode?.toString(8) ?? DEFAULT_MODE_OCTAL}</Td>
+                <Td isActionCell>
+                  <SecretsViewPopover secretName={secret.secretName} />
+                </Td>
                 <Td isActionCell>
                   <Dropdown
                     toggle={(toggleRef) => (
@@ -223,6 +227,7 @@ export const WorkspaceFormPropertiesSecrets: React.FC<WorkspaceFormPropertiesSec
         onSubmit={handleCreateOrEditSubmit}
         editSecret={editingSecret}
       />
+
       <Modal
         isOpen={isDeleteModalOpen}
         onClose={() => setIsDeleteModalOpen(false)}

workspaces/frontend/src/app/pages/Workspaces/Form/properties/secrets/SecretsViewPopover.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { Popover } from '@patternfly/react-core/dist/esm/components/Popover';
+import { Button } from '@patternfly/react-core/dist/esm/components/Button';
+import { EyeIcon } from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
+import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
+import { SecretsSecretUpdate } from '~/generated/data-contracts';
+
+export interface SecretsViewPopoverProps {
+  secretName: string;
+}
+export const SecretsViewPopover: React.FC<SecretsViewPopoverProps> = ({ secretName }) => {
+  const { api } = useNotebookAPI();
+  const { selectedNamespace } = useNamespaceContext();
+  const [secret, setSecret] = useState<SecretsSecretUpdate | null>(null);
+  useEffect(() => {
+    const fetchSecret = async () => {
+      const response = await api.secrets.getSecret(selectedNamespace, secretName);
+      setSecret(response.data);
+    };
+    fetchSecret();
+  }, [secretName, api.secrets, selectedNamespace]);
+  const secretContentsKeys = secret ? Object.keys(secret.contents) : [];
+  return (
+    <Popover
+      aria-label="Basic popover"
+      headerContent={<div>{secretName}</div>}
+      bodyContent={
+        <div>
+          {secretContentsKeys.map((key) => (
+            <div key={key}>{key}: *********</div>
+          ))}
+        </div>
+      }
+    >
+      <Button variant="plain" icon={<EyeIcon />} />
+    </Popover>
+  );
+};

workspaces/frontend/src/shared/mock/mockNotebookApis.ts

@@ -5,6 +5,7 @@ import {
   mockedHealthCheckResponse,
   mockNamespaces,
   mockSecretCreate,
+  mockSecretCreate3,
   mockSecretsList,
   mockWorkspace1,
   mockWorkspaceKind1,
@@ -90,8 +91,8 @@ export const mockNotebookApisImpl = (): NotebookApis => ({
       data: mockSecretCreate,
     }),
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getSecret: async () => ({
-      data: mockSecretCreate,
+    getSecret: async (_, name) => ({
+      data: name === 'secret-3' ? mockSecretCreate3 : mockSecretCreate,
     }),
     updateSecret: async () => ({
       data: mockSecretCreate,

workspaces/frontend/src/shared/mock/mockNotebookServiceData.ts

@@ -179,9 +179,18 @@ export const mockSecretCreate: SecretsSecretCreate = {
   type: 'Opaque',
   immutable: false,
   contents: {
-    data: {
-      base64: 'abcd',
-    },
+    username: {},
+    password: {},
+  },
+};
+
+export const mockSecretCreate3: SecretsSecretCreate = {
+  name: 'secret-3',
+  type: 'Opaque',
+  immutable: false,
+  contents: {
+    apiKey: {},
+    apiSecret: {},
   },
 };
 
@@ -193,4 +202,7 @@ export const mockSecretsList = [
     name: 'secret-2',
     canMount: false,
   }),
+  buildMockSecret({
+    name: 'secret-3',
+  }),
 ];