From 217da28c287e9005f2d2cc411ce37d890da189bc Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 28 Nov 2022 16:25:51 +0800
Subject: [PATCH] Fix old properties

---
 .../Vault/Keys/EncryptionKeySelector.tsx      |  2 +-
 .../Vault/Keys/EncryptionKeysManagement.tsx   | 16 ++++++++--
 .../Settings/Vault/Secrets/SecretRow.tsx      | 15 +++++++---
 .../Vault/Secrets/SecretsManagement.tsx       | 29 ++++++++++++++-----
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeySelector.tsx b/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeySelector.tsx
index 959d75c5ffc..d685f67631d 100644
--- a/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeySelector.tsx
+++ b/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeySelector.tsx
@@ -52,7 +52,7 @@ const EncryptionKeySelector: FC<Props> = ({
             value={key.id}
           >
             <div className="space-y-1">
-              <p>{key.comment || 'No description provided'}</p>
+              <p>{key.name || 'No name provided'}</p>
               <p className="text-xs">
                 ID: <span className="font-mono">{key.id}</span>
               </p>
diff --git a/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx b/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx
index 2d50618beb1..9ce0e3dc105 100644
--- a/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx
+++ b/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx
@@ -90,17 +90,27 @@ const EncryptionKeysManagement: FC<Props> = ({}) => {
             <Input
               className="w-64"
               size="small"
-              placeholder="Search by description or ID"
+              placeholder="Search by name or ID"
               value={searchValue}
               onChange={(event) => setSearchValue(event.target.value)}
               icon={<IconSearch strokeWidth={2} size={16} />}
             />
             <div className="w-32">
               <Listbox size="small" value={selectedSort} onChange={setSelectedSort}>
-                <Listbox.Option id="created" value="created" label="Sort by created at">
+                <Listbox.Option
+                  id="created"
+                  className="max-w-[180px]"
+                  value="created"
+                  label="Sort by created at"
+                >
                   Created at
                 </Listbox.Option>
-                <Listbox.Option id="name" value="name" label="Sort by name">
+                <Listbox.Option
+                  id="name"
+                  className="max-w-[180px]"
+                  value="name"
+                  label="Sort by name"
+                >
                   Name
                 </Listbox.Option>
               </Listbox>
diff --git a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
index 11d639cc75b..c082c157cd2 100644
--- a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
+++ b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
@@ -25,7 +25,7 @@ const SecretRow: FC<Props> = ({ secret, onSelectEdit, onSelectRemove }) => {
   const { vault } = useStore()
   const [isLoading, setIsLoading] = useState(false)
   const [revealedValue, setRevealedValue] = useState<string>()
-  const description = secret?.description ?? 'No description provided'
+  const name = secret?.name ?? 'No name provided'
 
   const revealSecret = async () => {
     setIsLoading(true)
@@ -44,9 +44,16 @@ const SecretRow: FC<Props> = ({ secret, onSelectEdit, onSelectRemove }) => {
   return (
     <div className="px-6 py-4 flex items-center space-x-4">
       <div className="space-y-1 min-w-[35%] max-w-[35%]">
-        <p className="text-sm text-scale-1200" title={description}>
-          {description}
-        </p>
+        <div>
+          <p className="text-sm text-scale-1200" title={name}>
+            {name}
+          </p>
+          {secret.description !== undefined && (
+            <p className="text-sm text-scale-1100" title={secret.description}>
+              {secret.description}
+            </p>
+          )}
+        </div>
         <div className="flex items-center space-x-2">
           <IconKey size={14} strokeWidth={2} />
           <p className="text-scale-1100 font-mono text-xs" title={secret.key_id}>
diff --git a/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx b/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx
index f2c0608313a..b9dbad3b9c3 100644
--- a/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx
+++ b/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx
@@ -14,7 +14,7 @@ interface Props {}
 const SecretsManagement: FC<Props> = ({}) => {
   const { vault } = useStore()
   const [searchValue, setSearchValue] = useState<string>('')
-  const [selectedSort, setSelectedSort] = useState<'created_at' | 'description'>('created_at')
+  const [selectedSort, setSelectedSort] = useState<'created_at' | 'name'>('created_at')
   const [showAddSecretModal, setShowAddSecretModal] = useState(false)
   const [selectedSecretToEdit, setSelectedSecretToEdit] = useState<any>()
   const [selectedSecretToRemove, setSelectedSecretToRemove] = useState<any>()
@@ -23,7 +23,7 @@ const SecretsManagement: FC<Props> = ({}) => {
     searchValue.length > 0
       ? vault.listSecrets(
           (secret: any) =>
-            (secret?.description ?? '').toLowerCase().includes(searchValue.toLowerCase()) ||
+            (secret?.name ?? '').toLowerCase().includes(searchValue.toLowerCase()) ||
             secret.key_id.toLowerCase().includes(searchValue.toLowerCase())
         )
       : vault.listSecrets()
@@ -47,20 +47,35 @@ const SecretsManagement: FC<Props> = ({}) => {
             <Input
               className="w-64"
               size="small"
-              placeholder="Search by description or key ID"
+              placeholder="Search by name or key ID"
               value={searchValue}
               onChange={(event) => setSearchValue(event.target.value)}
               icon={<IconSearch strokeWidth={2} size={16} />}
             />
             <div className="w-32">
               <Listbox size="small" value={selectedSort} onChange={setSelectedSort}>
-                <Listbox.Option id="created_at" value="created_at" label="Sort by created at">
+                <Listbox.Option
+                  id="created_at"
+                  className="max-w-[180px]"
+                  value="created_at"
+                  label="Sort by created at"
+                >
                   Created at
                 </Listbox.Option>
-                <Listbox.Option id="description" value="description" label="Sort by description">
-                  Description
+                <Listbox.Option
+                  id="name"
+                  className="max-w-[180px]"
+                  value="name"
+                  label="Sort by name"
+                >
+                  Name
                 </Listbox.Option>
-                <Listbox.Option id="key_id" value="key_id" label="Sort by key ID">
+                <Listbox.Option
+                  id="key_id"
+                  className="max-w-[180px]"
+                  value="key_id"
+                  label="Sort by key ID"
+                >
                   Key ID
                 </Listbox.Option>
               </Listbox>