Tie up column editor and keys

studio/components/interfaces/Settings/Vault/EncryptionKeySelector.tsx

@@ -8,7 +8,8 @@ interface Props {
   label?: string
   labelOptional?: string
   selectedKeyId?: any
-  onSelectKey?: (keyId: string) => void
+  onSelectKey: (keyId: string) => void
+  onUpdateDescription?: (desc: string) => void
 }
 
 const EncryptionKeySelector: FC<Props> = ({
@@ -18,6 +19,7 @@ const EncryptionKeySelector: FC<Props> = ({
   labelOptional,
   selectedKeyId,
   onSelectKey = () => {},
+  onUpdateDescription = () => {},
 }) => {
   const { vault } = useStore()
   const keys = vault.listKeys()
@@ -49,7 +51,7 @@ const EncryptionKeySelector: FC<Props> = ({
             value={key.id}
           >
             <div className="space-y-1">
-              <p>{key.comment ?? 'No description provided'}</p>
+              <p>{key.comment || 'No description provided'}</p>
               <p className="text-xs">
                 ID: <span className="font-mono">{key.id}</span>
               </p>
@@ -58,7 +60,12 @@ const EncryptionKeySelector: FC<Props> = ({
         ))}
       </Listbox>
       {selectedKeyId === 'create-new' && (
-        <Input id={descriptionId} label="Description" labelOptional="Optional" />
+        <Input
+          id={descriptionId}
+          label="Description"
+          labelOptional="Optional"
+          onChange={(event) => onUpdateDescription(event.target.value)}
+        />
       )}
     </>
   )

studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx

@@ -10,6 +10,7 @@ import {
   PostgresType,
 } from '@supabase/postgres-meta'
 
+import { useStore } from 'hooks'
 import ActionBar from '../ActionBar'
 import HeaderTitle from './HeaderTitle'
 import ColumnType from './ColumnType'
@@ -33,7 +34,6 @@ interface Props {
   column?: PostgresColumn
   selectedTable: PostgresTable
   tables: PostgresTable[]
-  enumTypes: PostgresType[]
   visible: boolean
   closePanel: () => void
   saveChanges: (
@@ -50,15 +50,22 @@ const ColumnEditor: FC<Props> = ({
   column,
   selectedTable,
   tables = [],
-  enumTypes = [],
   visible = false,
   closePanel = () => {},
   saveChanges = () => {},
   updateEditorDirty = () => {},
 }) => {
+  const { meta, vault } = useStore()
+
   const isNewRecord = isUndefined(column)
   const originalForeignKey = column ? getColumnForeignKey(column, selectedTable) : undefined
 
+  const enumTypes = meta.types.list(
+    (type: PostgresType) => !meta.excludedSchemas.includes(type.schema)
+  )
+  const keys = vault.listKeys()
+  const defaultKey = keys.find((key) => key.status === 'default')
+
   const [errors, setErrors] = useState<Dictionary<any>>({})
   const [columnFields, setColumnFields] = useState<ColumnField>()
   const [isEditingRelation, setIsEditingRelation] = useState<boolean>(false)
@@ -67,7 +74,7 @@ const ColumnEditor: FC<Props> = ({
     if (visible) {
       setErrors({})
       const columnFields = isNewRecord
-        ? generateColumnField()
+        ? { ...generateColumnField(), keyId: defaultKey?.id }
         : generateColumnFieldFromPostgresColumn(column!, selectedTable)
       setColumnFields(columnFields)
     }
@@ -128,8 +135,19 @@ const ColumnEditor: FC<Props> = ({
         const foreignKey = columnFields.foreignKey
           ? { ...columnFields.foreignKey, source_column_name: columnFields.name }
           : undefined
-        const configuration = { columnId: column?.id }
-        saveChanges(payload, foreignKey, isNewRecord, configuration, resolve)
+        const configuration = {
+          columnId: column?.id,
+          isEncrypted: columnFields.isEncrypted,
+          keyId: columnFields.keyId,
+          keyDescription: columnFields.keyDescription,
+        }
+        console.log('onSaveChangses', {
+          payload,
+          foreignKey,
+          configuration,
+        })
+        resolve()
+        // saveChanges(payload, foreignKey, isNewRecord, configuration, resolve)
       } else {
         resolve()
       }
@@ -288,22 +306,31 @@ const ColumnEditor: FC<Props> = ({
           />
         </FormSectionContent>
       </FormSection>
-      <SidePanel.Separator />
-      <FormSection
-        header={<FormSectionLabel className="lg:!col-span-4">Security</FormSectionLabel>}
-      >
-        <FormSectionContent loading={false} className="lg:!col-span-8">
-          <Toggle
-            label="Encrypt Column"
-            descriptionText="Encrypt the column's data with pgsodium's Transparent Column Encryption (TCE)"
-            checked={columnFields.isEncrypted}
-            onChange={() => onUpdateField({ isEncrypted: !columnFields.isEncrypted })}
-          />
-          {columnFields.isEncrypted && (
-            <EncryptionKeySelector label="Select a key to encrypt your column with" />
-          )}
-        </FormSectionContent>
-      </FormSection>
+      {isNewRecord && (
+        <>
+          <SidePanel.Separator />
+          <FormSection
+            header={<FormSectionLabel className="lg:!col-span-4">Security</FormSectionLabel>}
+          >
+            <FormSectionContent loading={false} className="lg:!col-span-8">
+              <Toggle
+                label="Encrypt Column"
+                descriptionText="Encrypt the column's data with pgsodium's Transparent Column Encryption (TCE)"
+                checked={columnFields.isEncrypted}
+                onChange={() => onUpdateField({ isEncrypted: !columnFields.isEncrypted })}
+              />
+              {columnFields.isEncrypted && (
+                <EncryptionKeySelector
+                  label="Select a key to encrypt your column with"
+                  selectedKeyId={columnFields.keyId}
+                  onSelectKey={(id) => onUpdateField({ keyId: id })}
+                  onUpdateDescription={(desc) => onUpdateField({ keyDescription: desc })}
+                />
+              )}
+            </FormSectionContent>
+          </FormSection>
+        </>
+      )}
 
       <ForeignKeySelector
         tables={tables}

studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx

@@ -53,9 +53,6 @@ const SidePanelEditor: FC<Props> = ({
   const [isClosingPanel, setIsClosingPanel] = useState<boolean>(false)
 
   const tables = meta.tables.list()
-  const enumTypes = meta.types.list(
-    (type: PostgresType) => !meta.excludedSchemas.includes(type.schema)
-  )
 
   const saveRow = async (
     payload: any,
@@ -271,7 +268,6 @@ const SidePanelEditor: FC<Props> = ({
       )}
       {!isUndefined(selectedTable) && (
         <ColumnEditor
-          enumTypes={enumTypes}
           tables={tables}
           column={selectedColumnToEdit}
           selectedTable={selectedTable}
@@ -280,13 +276,6 @@ const SidePanelEditor: FC<Props> = ({
           saveChanges={saveColumn}
           updateEditorDirty={() => setIsEdited(true)}
         />
-        // <ColumnEditorV2
-        //   visible={sidePanelKey === 'column'}
-        //   column={selectedColumnToEdit}
-        //   selectedTable={selectedTable}
-        //   enumTypes={enumTypes}
-        //   closePanel={onClosePanel}
-        // />
       )}
       <TableEditor
         table={selectedTableToEdit}

studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.types.ts

@@ -69,13 +69,11 @@ export interface ColumnField {
   isIdentity: boolean
   isPrimaryKey: boolean
   isNewColumn: boolean
-  isEncrypted: boolean
-}
 
-// export interface ForeignKey {
-//   table: PostgresTable
-//   column: PostgresColumn
-// }
+  isEncrypted?: boolean
+  keyId?: string
+  keyDescription?: string
+}
 
 export interface PostgresDataTypeOption {
   name: string
@@ -83,11 +81,6 @@ export interface PostgresDataTypeOption {
   type: 'number' | 'text' | 'time' | 'json' | 'bool' | 'others'
 }
 
-// export interface FormattedPostgresColumn extends PostgresColumn {
-//   isPrimaryKey: boolean
-//   foreignKey: ForeignKey
-// }
-
 // Probably belongs to a higher level
 export interface Dictionary<T> {
   [Key: string]: T