Merge pull request #294 from oasisprotocol/mz/secretTableRefactor

Extract add secret from SecretsTable component

Author: buberdds

src/components/SecretsTable/AddSecret.tsx

@@ -1,10 +1,8 @@
 import { type FC } from 'react'
-import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import { InputFormField } from '../InputFormField'
-import { Plus } from 'lucide-react'
+import { AddSecretFormContent } from './AddSecretFormContent'
 
 const formSchema = z.object({
   name: z.string().min(1, {
@@ -36,21 +34,7 @@ export const AddSecret: FC<AddSecretProps> = ({ handleAddSecret, disabled }) =>
 
   return (
     <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-4 ">
-      <div className="w-1/2">
-        <InputFormField control={form.control} name="name" placeholder="Type Name" disabled={disabled} />
-      </div>
-      <div className="w-1/2">
-        <InputFormField
-          control={form.control}
-          name="value"
-          placeholder="Type Value"
-          type="password"
-          disabled={disabled}
-        />
-      </div>
-      <Button variant="secondary" size="icon" type="submit" disabled={disabled}>
-        <Plus className="h-4 w-4" />
-      </Button>
+      <AddSecretFormContent formControl={form.control} disabled={disabled} />
     </form>
   )
 }

src/components/SecretsTable/AddSecretFormContent.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
+import { InputFormField } from '../InputFormField'
+import { Plus } from 'lucide-react'
+import { Control, FieldValues, Path } from 'react-hook-form'
+
+type AddSecretFormContentProps<T extends FieldValues> = {
+  formControl: Control<T>
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export const AddSecretFormContent = <T extends FieldValues>({
+  formControl,
+  disabled,
+  onClick,
+}: AddSecretFormContentProps<T>) => {
+  return (
+    <div className="flex gap-4 mt-4 w-full">
+      <div className="w-1/2">
+        <InputFormField
+          control={formControl}
+          name={'name' as Path<T>}
+          placeholder="Type Name"
+          disabled={disabled}
+        />
+      </div>
+      <div className="w-1/2">
+        <InputFormField
+          control={formControl}
+          name={'value' as Path<T>}
+          placeholder="Type Value"
+          type="password"
+          disabled={disabled}
+        />
+      </div>
+      <Button
+        variant="secondary"
+        size="icon"
+        type={onClick ? 'button' : 'submit'}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        <Plus className="h-4 w-4" />
+      </Button>
+    </div>
+  )
+}

src/components/SecretsTable/EditSecretDialog.tsx

@@ -72,14 +72,20 @@ export const EditSecretDialog: FC<EditSecretDialogProps> = ({
     onOpenChange(false)
   }
 
+  function handleFormSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    e.stopPropagation()
+    form.handleSubmit(onSubmit)(e)
+  }
+
   return (
     <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Edit secret</DialogTitle>
         </DialogHeader>
         <DialogDescription className="mb-6">Please provide a new secret value.</DialogDescription>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <form onSubmit={handleFormSubmit} className="space-y-6">
           <InputFormField control={form.control} name="name" label="Name" disabled />
 
           <InputFormField control={form.control} name="value" label="Value" type="password" />

src/components/SecretsTable/index.tsx

@@ -20,7 +20,6 @@ import {
   DropdownMenuItem,
 } from '@oasisprotocol/ui-library/src/components/ui/dropdown-menu'
 import { MoreVertical } from 'lucide-react'
-import { AddSecret } from './AddSecret'
 
 type SecretsTableProps = {
   appSek: RoflApp['sek']
@@ -121,8 +120,6 @@ export const SecretsTable: FC<SecretsTableProps> = ({
         </Table>
       )}
 
-      <AddSecret disabled={!editEnabled} handleAddSecret={handleEditSecret} />
-
       <EditSecretDialog
         open={secretDialogState.open}
         secret={secretDialogState.secretKey}

src/pages/Dashboard/AppDetails/index.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState, type FC } from 'react'
+import * as oasis from '@oasisprotocol/client'
+import * as oasisRT from '@oasisprotocol/client-rt'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/ui/tabs'
 import { AppStatusIcon } from '../../../components/AppStatusIcon'
 import { AppMetadata } from './AppMetadata'
@@ -16,6 +18,7 @@ import { UnsavedChanges } from './UnsavedChanges'
 import { RemoveAppButton } from './RemoveAppButton'
 import { Dialog, DialogContent } from '@oasisprotocol/ui-library/src/components/ui/dialog'
 import { HelpWidget } from '../../CreateApp/HelpWidget'
+import { AddSecret } from '../../../components/SecretsTable/AddSecret'
 
 function setDefaultMetadataViewState(metadata: RoflAppMetadata | undefined = {}): ViewMetadataState {
   return {
@@ -66,6 +69,22 @@ export const AppDetails: FC = () => {
 
   const showBlockingOverlay = removeApp.isPending || updateApp.isPending
 
+  const handleAddSecret = (key: string, value: string) => {
+    if (!roflApp?.sek) return
+
+    const secretValue = oasisRT.rofl.encryptSecret(
+      key,
+      oasis.misc.fromString(value),
+      oasis.misc.fromBase64(roflApp.sek),
+    )
+
+    const updatedSecrets = { ...viewSecretsState.secrets, [key]: secretValue }
+    setViewSecretsState({
+      isDirty: true,
+      secrets: updatedSecrets,
+    })
+  }
+
   useEffect(() => {
     if (roflApp) {
       setViewMetadataState({
@@ -183,6 +202,7 @@ export const AppDetails: FC = () => {
                   setViewSecretsState={setViewSecretsState}
                   editEnabled={editEnabled}
                 />
+                <AddSecret disabled={!editEnabled} handleAddSecret={handleAddSecret} />
               </TabsContent>
               <TabsContent value="compose">
                 <AppArtifacts