From a523c3cf2d01115a49f18f3754415759b2787186 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 16:35:24 +0800
Subject: [PATCH 1/8] Use the same SettingsTable for the API keys

---
 .../networking/queries/useGetApiKeysQuery.tsx |   8 +-
 packages/web/pages/settings/api.tsx           | 166 ++++++++++--------
 2 files changed, 99 insertions(+), 75 deletions(-)

diff --git a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
index 9b3c9e79c..c1b6b0fa8 100644
--- a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx
@@ -7,9 +7,9 @@ export interface ApiKey {
   name: string
   key?: string
   scopes: string[]
-  createdAt: Date
-  expiresAt: Date
-  usedAt?: Date
+  createdAt: string
+  expiresAt: string
+  usedAt?: string
 }
 
 interface ApiKeysQueryResponse {
@@ -66,7 +66,7 @@ export function useGetApiKeysQuery(): ApiKeysQueryResponse {
     console.log('error', error)
   }
   return {
-    isValidating: false,
+    isValidating: true,
     apiKeys: [],
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     revalidate: () => {},
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index a78b2b285..aa6401a32 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -14,6 +14,14 @@ import { Table } from '../../components/elements/Table'
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
+import {
+  EmptySettingsRow,
+  SettingsTable,
+  SettingsTableRow,
+} from '../../components/templates/settings/SettingsTable'
+import { StyledText } from '../../components/elements/StyledText'
+import { formattedShortDate } from '../../lib/dateFormatting'
+import Link from 'next/link'
 
 interface ApiKey {
   name: string
@@ -23,7 +31,7 @@ interface ApiKey {
 }
 
 export default function Api(): JSX.Element {
-  const { apiKeys, revalidate } = useGetApiKeysQuery()
+  const { apiKeys, revalidate, isValidating } = useGetApiKeysQuery()
   const [onDeleteId, setOnDeleteId] = useState<string>('')
   const [addModalOpen, setAddModalOpen] = useState(false)
   const [name, setName] = useState<string>('')
@@ -48,25 +56,6 @@ export default function Api(): JSX.Element {
     }
   }, [router.query])
 
-  const headers = ['Name', 'Scopes', 'Used at', 'Expires on']
-  const rows = useMemo(() => {
-    const rows = new Map<string, ApiKey>()
-    apiKeys.forEach((apiKey) =>
-      rows.set(apiKey.id, {
-        name: apiKey.name,
-        scopes: apiKey.scopes.join(', ') || 'All',
-        usedAt: apiKey.usedAt
-          ? new Date(apiKey.usedAt).toISOString()
-          : 'Never used',
-        expiresAt:
-          new Date(apiKey.expiresAt).getTime() != neverExpiresDate.getTime()
-            ? new Date(apiKey.expiresAt).toDateString()
-            : 'Never',
-      })
-    )
-    return rows
-  }, [apiKeys])
-
   applyStoredTheme(false)
 
   async function onDelete(id: string): Promise<void> {
@@ -135,66 +124,101 @@ export default function Api(): JSX.Element {
           'in 1 year',
           'Never',
         ],
-        value: defaultExpiresAt,
+        value: neverExpiresDate,
       },
     ])
   }
 
   return (
-    <PrimaryLayout pageTestId={'api-keys'}>
-      <Toaster
-        containerStyle={{
-          top: '5rem',
-        }}
-      />
+    <SettingsTable
+      pageId="api-keys"
+      pageHeadline="API Keys"
+      pageInfoLink="https://docs.omnivore.app/integrations/api.html"
+      headerTitle="API Keys"
+      createTitle="Generate API Key"
+      createAction={() => {
+        onAdd()
+        setName('')
+        setExpiresAt(new Date(neverExpiresDate))
+        setAddModalOpen(true)
+      }}
+      children={
+        <>
+          {apiKeys.length > 0 ? (
+            apiKeys.map((apiKey, i) => {
+              return (
+                <SettingsTableRow
+                  key={apiKey.id}
+                  title={apiKey.name}
+                  isLast={i === apiKeys.length - 1}
+                  onDelete={() => setOnDeleteId(apiKey.id)}
+                  deleteTitle="Delete"
+                  sublineElement={
+                    <StyledText
+                      css={{
+                        my: '5px',
+                        fontSize: '11px',
+                        a: {
+                          color: '$omnivoreCtaYellow',
+                        },
+                      }}
+                    >
+                      {`Last used: ${
+                        apiKey.usedAt
+                          ? formattedShortDate(apiKey.usedAt)
+                          : 'Never'
+                      }, `}
+                      {apiKey.expiresAt &&
+                      apiKey.expiresAt != neverExpiresDate.toISOString()
+                        ? `expires: ${formattedShortDate(apiKey.expiresAt)}`
+                        : 'never expires'}
+                    </StyledText>
+                  }
+                  titleElement={<></>}
+                  extraElement={<></>}
+                />
+              )
+            })
+          ) : (
+            <EmptySettingsRow text={isValidating ? '-' : 'No API Keys Found'} />
+          )}
 
-      {addModalOpen && (
-        <FormModal
-          title={'Generate API Key'}
-          onSubmit={onCreate}
-          onOpenChange={setAddModalOpen}
-          inputs={formInputs}
-          acceptButtonLabel={'Generate'}
-        />
-      )}
+          {addModalOpen && (
+            <FormModal
+              title={'Generate API Key'}
+              onSubmit={onCreate}
+              onOpenChange={setAddModalOpen}
+              inputs={formInputs}
+              acceptButtonLabel={'Generate'}
+            />
+          )}
 
-      {apiKeyGenerated && (
-        <ConfirmationModal
-          message={`API key generated. Copy the key and use it in your application.
+          {apiKeyGenerated && (
+            <ConfirmationModal
+              message={`API key generated. Copy the key and use it in your application.
                     You won’t be able to see it again!
                     Key: ${apiKeyGenerated}`}
-          acceptButtonLabel={'Copy'}
-          onAccept={async () => {
-            await navigator.clipboard.writeText(apiKeyGenerated)
-            setApiKeyGenerated('')
-          }}
-          onOpenChange={() => setApiKeyGenerated('')}
-        />
-      )}
+              acceptButtonLabel={'Copy'}
+              onAccept={async () => {
+                await navigator.clipboard.writeText(apiKeyGenerated)
+                setApiKeyGenerated('')
+              }}
+              onOpenChange={() => setApiKeyGenerated('')}
+            />
+          )}
 
-      {onDeleteId && (
-        <ConfirmationModal
-          message={'API key would be revoked. This action cannot be undone.'}
-          onAccept={async () => {
-            await onDelete(onDeleteId)
-            setOnDeleteId('')
-          }}
-          onOpenChange={() => setOnDeleteId('')}
-        />
-      )}
-
-      <Table
-        heading={'API Keys'}
-        headers={headers}
-        rows={rows}
-        onDelete={setOnDeleteId}
-        onAdd={() => {
-          onAdd()
-          setName('')
-          setExpiresAt(new Date(defaultExpiresAt))
-          setAddModalOpen(true)
-        }}
-      />
-    </PrimaryLayout>
+          {onDeleteId && (
+            <ConfirmationModal
+              message={'API key will be revoked. This action cannot be undone.'}
+              onAccept={async () => {
+                await onDelete(onDeleteId)
+                setOnDeleteId('')
+              }}
+              onOpenChange={() => setOnDeleteId('')}
+            />
+          )}
+        </>
+      }
+    />
   )
 }

From 7b885aeb348d011673e3f24657ae253453a86d11 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 16:57:21 +0800
Subject: [PATCH 2/8] Dont use children=

---
 packages/web/pages/settings/api.tsx | 141 ++++++++++++++--------------
 1 file changed, 68 insertions(+), 73 deletions(-)

diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index aa6401a32..c4010b50c 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -142,83 +142,78 @@ export default function Api(): JSX.Element {
         setExpiresAt(new Date(neverExpiresDate))
         setAddModalOpen(true)
       }}
-      children={
-        <>
-          {apiKeys.length > 0 ? (
-            apiKeys.map((apiKey, i) => {
-              return (
-                <SettingsTableRow
-                  key={apiKey.id}
-                  title={apiKey.name}
-                  isLast={i === apiKeys.length - 1}
-                  onDelete={() => setOnDeleteId(apiKey.id)}
-                  deleteTitle="Delete"
-                  sublineElement={
-                    <StyledText
-                      css={{
-                        my: '5px',
-                        fontSize: '11px',
-                        a: {
-                          color: '$omnivoreCtaYellow',
-                        },
-                      }}
-                    >
-                      {`Last used: ${
-                        apiKey.usedAt
-                          ? formattedShortDate(apiKey.usedAt)
-                          : 'Never'
-                      }, `}
-                      {apiKey.expiresAt &&
-                      apiKey.expiresAt != neverExpiresDate.toISOString()
-                        ? `expires: ${formattedShortDate(apiKey.expiresAt)}`
-                        : 'never expires'}
-                    </StyledText>
-                  }
-                  titleElement={<></>}
-                  extraElement={<></>}
-                />
-              )
-            })
-          ) : (
-            <EmptySettingsRow text={isValidating ? '-' : 'No API Keys Found'} />
-          )}
-
-          {addModalOpen && (
-            <FormModal
-              title={'Generate API Key'}
-              onSubmit={onCreate}
-              onOpenChange={setAddModalOpen}
-              inputs={formInputs}
-              acceptButtonLabel={'Generate'}
+    >
+      {apiKeys.length > 0 ? (
+        apiKeys.map((apiKey, i) => {
+          return (
+            <SettingsTableRow
+              key={apiKey.id}
+              title={apiKey.name}
+              isLast={i === apiKeys.length - 1}
+              onDelete={() => setOnDeleteId(apiKey.id)}
+              deleteTitle="Delete"
+              sublineElement={
+                <StyledText
+                  css={{
+                    my: '5px',
+                    fontSize: '11px',
+                    a: {
+                      color: '$omnivoreCtaYellow',
+                    },
+                  }}
+                >
+                  {`Last used: ${
+                    apiKey.usedAt ? formattedShortDate(apiKey.usedAt) : 'Never'
+                  }, `}
+                  {apiKey.expiresAt &&
+                  apiKey.expiresAt != neverExpiresDate.toISOString()
+                    ? `expires: ${formattedShortDate(apiKey.expiresAt)}`
+                    : 'never expires'}
+                </StyledText>
+              }
+              titleElement={<></>}
+              extraElement={<></>}
             />
-          )}
+          )
+        })
+      ) : (
+        <EmptySettingsRow text={isValidating ? '-' : 'No API Keys Found'} />
+      )}
 
-          {apiKeyGenerated && (
-            <ConfirmationModal
-              message={`API key generated. Copy the key and use it in your application.
+      {addModalOpen && (
+        <FormModal
+          title={'Generate API Key'}
+          onSubmit={onCreate}
+          onOpenChange={setAddModalOpen}
+          inputs={formInputs}
+          acceptButtonLabel={'Generate'}
+        />
+      )}
+
+      {apiKeyGenerated && (
+        <ConfirmationModal
+          message={`API key generated. Copy the key and use it in your application.
                     You won’t be able to see it again!
                     Key: ${apiKeyGenerated}`}
-              acceptButtonLabel={'Copy'}
-              onAccept={async () => {
-                await navigator.clipboard.writeText(apiKeyGenerated)
-                setApiKeyGenerated('')
-              }}
-              onOpenChange={() => setApiKeyGenerated('')}
-            />
-          )}
+          acceptButtonLabel={'Copy'}
+          onAccept={async () => {
+            await navigator.clipboard.writeText(apiKeyGenerated)
+            setApiKeyGenerated('')
+          }}
+          onOpenChange={() => setApiKeyGenerated('')}
+        />
+      )}
 
-          {onDeleteId && (
-            <ConfirmationModal
-              message={'API key will be revoked. This action cannot be undone.'}
-              onAccept={async () => {
-                await onDelete(onDeleteId)
-                setOnDeleteId('')
-              }}
-              onOpenChange={() => setOnDeleteId('')}
-            />
-          )}
-        </>
-      }
-    />
+      {onDeleteId && (
+        <ConfirmationModal
+          message={'API key will be revoked. This action cannot be undone.'}
+          onAccept={async () => {
+            await onDelete(onDeleteId)
+            setOnDeleteId('')
+          }}
+          onOpenChange={() => setOnDeleteId('')}
+        />
+      )}
+    </SettingsTable>
   )
 }

From cab2e7ba0d9f82f528181765278e81cd5211b498 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 17:47:13 +0800
Subject: [PATCH 3/8] Continue to use 7 days for default expires at

---
 packages/web/pages/settings/api.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index c4010b50c..93664d1ab 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -124,7 +124,7 @@ export default function Api(): JSX.Element {
           'in 1 year',
           'Never',
         ],
-        value: neverExpiresDate,
+        value: defaultExpiresAt,
       },
     ])
   }
@@ -139,7 +139,7 @@ export default function Api(): JSX.Element {
       createAction={() => {
         onAdd()
         setName('')
-        setExpiresAt(new Date(neverExpiresDate))
+        setExpiresAt(new Date(defaultExpiresAt))
         setAddModalOpen(true)
       }}
     >

From 4e2197331c809999aabf8feec2b59ee67ff6b946 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 18:01:34 +0800
Subject: [PATCH 4/8] Fix default expiration to match form

---
 .../components/patterns/ConfirmationModal.tsx |  5 ++---
 packages/web/pages/settings/api.tsx           | 20 ++++---------------
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx
index a05d7524f..7ff120c77 100644
--- a/packages/web/components/patterns/ConfirmationModal.tsx
+++ b/packages/web/components/patterns/ConfirmationModal.tsx
@@ -6,14 +6,13 @@ import {
 import { VStack, HStack } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
 import { StyledText } from '../elements/StyledText'
-import { useConfirmListener } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { useEffect, useRef } from 'react'
 
 type ConfirmationModalProps = {
   message?: string
   richMessage?: React.ReactNode
   icon?: React.ReactNode
   acceptButtonLabel?: string
+  cancelButtonLabel?: string
   onAccept: () => void
   onOpenChange: (open: boolean) => void
 }
@@ -42,7 +41,7 @@ export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
                 }
               }}
             >
-              Cancel
+              {props.cancelButtonLabel ? props.cancelButtonLabel : 'Cancel'}
             </Button>
             <Button
               style="ctaDarkYellow"
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 93664d1ab..661b5d7e3 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -1,6 +1,5 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Toaster } from 'react-hot-toast'
 
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { applyStoredTheme } from '../../lib/themeUpdater'
@@ -8,9 +7,6 @@ import { useGetApiKeysQuery } from '../../lib/networking/queries/useGetApiKeysQu
 import { generateApiKeyMutation } from '../../lib/networking/mutations/generateApiKeyMutation'
 import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKeyMutation'
 
-import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
-import { Table } from '../../components/elements/Table'
-
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
@@ -21,14 +17,6 @@ import {
 } from '../../components/templates/settings/SettingsTable'
 import { StyledText } from '../../components/elements/StyledText'
 import { formattedShortDate } from '../../lib/dateFormatting'
-import Link from 'next/link'
-
-interface ApiKey {
-  name: string
-  scopes: string
-  expiresAt: string
-  usedAt: string
-}
 
 export default function Api(): JSX.Element {
   const { apiKeys, revalidate, isValidating } = useGetApiKeysQuery()
@@ -36,12 +24,11 @@ export default function Api(): JSX.Element {
   const [addModalOpen, setAddModalOpen] = useState(false)
   const [name, setName] = useState<string>('')
   const [value, setValue] = useState<string>('')
-  // const [scopes, setScopes] = useState<string[] | undefined>(undefined)
   const [expiresAt, setExpiresAt] = useState<Date>(new Date())
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([])
   const [apiKeyGenerated, setApiKeyGenerated] = useState('')
   // default expiry date is 1 year from now
-  const defaultExpiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 365)
+  const defaultExpiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7)
     .toISOString()
     .split('T')[0]
   const neverExpiresDate = new Date(8640000000000000)
@@ -195,7 +182,8 @@ export default function Api(): JSX.Element {
           message={`API key generated. Copy the key and use it in your application.
                     You won’t be able to see it again!
                     Key: ${apiKeyGenerated}`}
-          acceptButtonLabel={'Copy'}
+          acceptButtonLabel="Copy"
+          cancelButtonLabel="Close"
           onAccept={async () => {
             await navigator.clipboard.writeText(apiKeyGenerated)
             setApiKeyGenerated('')

From 5a5d0a5054235057424bc8b48996fdb070e78911 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 18:16:30 +0800
Subject: [PATCH 5/8] Use never as default expiration, fix key= prop

---
 .../web/components/patterns/FormModal.tsx     | 22 ++++++++++++-------
 .../templates/settings/SettingsTable.tsx      |  2 --
 packages/web/pages/settings/api.tsx           |  6 ++---
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
index 14a6235e2..9344076f8 100644
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -5,13 +5,10 @@ import {
   ModalRoot,
   ModalTitleBar,
 } from '../elements/ModalPrimitives'
-import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
-import { Button } from '../elements/Button'
+import { Box, VStack } from '../elements/LayoutPrimitives'
 import { StyledText } from '../elements/StyledText'
 import { useState } from 'react'
 import { FormInputProps, GeneralFormInput } from '../elements/FormElements'
-import { theme } from '../tokens/stitches.config'
-import { X } from 'phosphor-react'
 
 export interface FormModalProps {
   inputs?: FormInputProps[]
@@ -35,7 +32,10 @@ export function FormModal(props: FormModalProps): JSX.Element {
         css={{ overflow: 'auto', px: '24px' }}
       >
         <VStack>
-          <ModalTitleBar title={props.title} onOpenChange={props.onOpenChange} />
+          <ModalTitleBar
+            title={props.title}
+            onOpenChange={props.onOpenChange}
+          />
           <Box css={{ width: '100%' }}>
             <form
               onSubmit={(event) => {
@@ -46,15 +46,21 @@ export function FormModal(props: FormModalProps): JSX.Element {
             >
               {inputs.map((input, index) => (
                 <VStack key={index}>
-                  <StyledText style={'menuTitle'} css={{ pt: index > 0 ? '10px' : 'unset' }}>
+                  <StyledText
+                    style={'menuTitle'}
+                    css={{ pt: index > 0 ? '10px' : 'unset' }}
+                  >
                     {input.label}
-                    </StyledText>
+                  </StyledText>
                   <Box css={{ width: '100%' }}>
                     <GeneralFormInput {...input} />
                   </Box>
                 </VStack>
               ))}
-              <ModalButtonBar onOpenChange={props.onOpenChange} acceptButtonLabel={props.acceptButtonLabel} />
+              <ModalButtonBar
+                onOpenChange={props.onOpenChange}
+                acceptButtonLabel={props.acceptButtonLabel}
+              />
             </form>
           </Box>
         </VStack>
diff --git a/packages/web/components/templates/settings/SettingsTable.tsx b/packages/web/components/templates/settings/SettingsTable.tsx
index 293d2f38e..11242a58d 100644
--- a/packages/web/components/templates/settings/SettingsTable.tsx
+++ b/packages/web/components/templates/settings/SettingsTable.tsx
@@ -28,7 +28,6 @@ type CreateButtonProps = {
 }
 
 type SettingsTableRowProps = {
-  key: string
   title: string
   isLast: boolean
 
@@ -121,7 +120,6 @@ export const EmptySettingsRow = (props: EmptySettingsRowProps): JSX.Element => {
 export const SettingsTableRow = (props: SettingsTableRowProps): JSX.Element => {
   return (
     <Box
-      key={props.key}
       css={{
         backgroundColor: '$grayBg',
         display: 'flex',
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 661b5d7e3..e650b5e0f 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -27,11 +27,8 @@ export default function Api(): JSX.Element {
   const [expiresAt, setExpiresAt] = useState<Date>(new Date())
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([])
   const [apiKeyGenerated, setApiKeyGenerated] = useState('')
-  // default expiry date is 1 year from now
-  const defaultExpiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7)
-    .toISOString()
-    .split('T')[0]
   const neverExpiresDate = new Date(8640000000000000)
+  const defaultExpiresAt = neverExpiresDate.toISOString().split('T')[0]
 
   const router = useRouter()
   useEffect(() => {
@@ -80,6 +77,7 @@ export default function Api(): JSX.Element {
         name: 'expiredAt',
         required: true,
         onChange: (e) => {
+          console.log('onChange: ', e)
           let additionalDays = 0
           switch (e.target.value) {
             case 'in 7 days':

From 287f569220b62ba03fb867740de4b92363c5464f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 18:45:44 +0800
Subject: [PATCH 6/8] Dont use a button and a dropdown option, fire action from
 the option

---
 .../web/components/templates/settings/SettingsTable.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/settings/SettingsTable.tsx b/packages/web/components/templates/settings/SettingsTable.tsx
index 11242a58d..705b34252 100644
--- a/packages/web/components/templates/settings/SettingsTable.tsx
+++ b/packages/web/components/templates/settings/SettingsTable.tsx
@@ -65,12 +65,12 @@ const MoreOptions = (props: MoreOptionsProps) => (
   >
     <DropdownOption
       onSelect={() => {
-        return true
+        props.onDelete()
       }}
     >
       <HStack alignment={'center'} distribution={'start'}>
         <Trash size={24} color={theme.colors.omnivoreRed.toString()} />
-        <Button
+        <SpanBox
           css={{
             color: theme.colors.omnivoreRed.toString(),
             marginLeft: '8px',
@@ -81,10 +81,9 @@ const MoreOptions = (props: MoreOptionsProps) => (
               backgroundColor: 'transparent',
             },
           }}
-          onClick={props.onDelete}
         >
           {props.title}
-        </Button>
+        </SpanBox>
       </HStack>
     </DropdownOption>
   </Dropdown>

From d08763c12651b6abd20b5619f2c46f3620a22706 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 18:46:03 +0800
Subject: [PATCH 7/8] Fix default values when creating API keys, sort keys by
 createdAt

---
 .../web/components/elements/FormElements.tsx  |  1 +
 packages/web/pages/settings/api.tsx           | 22 +++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index 1e5caa098..cdb98a1ca 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/packages/web/components/elements/FormElements.tsx
@@ -92,6 +92,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
     return (
       <select
         onChange={input.onChange}
+        defaultValue={props.value}
         style={{
           padding: '8px',
           height: '38px',
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index e650b5e0f..432e62b76 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
 
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
@@ -28,7 +28,7 @@ export default function Api(): JSX.Element {
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([])
   const [apiKeyGenerated, setApiKeyGenerated] = useState('')
   const neverExpiresDate = new Date(8640000000000000)
-  const defaultExpiresAt = neverExpiresDate.toISOString().split('T')[0]
+  const defaultExpiresAt = 'Never'
 
   const router = useRouter()
   useEffect(() => {
@@ -114,6 +114,13 @@ export default function Api(): JSX.Element {
     ])
   }
 
+  const sortedApiKeys = useMemo(() => {
+    if (!apiKeys) {
+      return []
+    }
+    return apiKeys.sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+  }, [apiKeys])
+
   return (
     <SettingsTable
       pageId="api-keys"
@@ -128,14 +135,17 @@ export default function Api(): JSX.Element {
         setAddModalOpen(true)
       }}
     >
-      {apiKeys.length > 0 ? (
-        apiKeys.map((apiKey, i) => {
+      {sortedApiKeys.length > 0 ? (
+        sortedApiKeys.map((apiKey, i) => {
           return (
             <SettingsTableRow
               key={apiKey.id}
               title={apiKey.name}
               isLast={i === apiKeys.length - 1}
-              onDelete={() => setOnDeleteId(apiKey.id)}
+              onDelete={() => {
+                console.log('onDelete triggered: ', apiKey.id)
+                setOnDeleteId(apiKey.id)
+              }}
               deleteTitle="Delete"
               sublineElement={
                 <StyledText
@@ -156,8 +166,6 @@ export default function Api(): JSX.Element {
                     : 'never expires'}
                 </StyledText>
               }
-              titleElement={<></>}
-              extraElement={<></>}
             />
           )
         })

From 59328605c3de49a2e1eba2b511beece2b67c722a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 18 Jan 2023 19:03:23 +0800
Subject: [PATCH 8/8] Properly set the expires default value date to never

---
 packages/web/pages/settings/api.tsx | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 432e62b76..a258505ed 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -30,16 +30,6 @@ export default function Api(): JSX.Element {
   const neverExpiresDate = new Date(8640000000000000)
   const defaultExpiresAt = 'Never'
 
-  const router = useRouter()
-  useEffect(() => {
-    if (Object.keys(router.query).length) {
-      setValue(`${router.query?.create}`)
-      setExpiresAt(new Date(defaultExpiresAt))
-      onAdd()
-      setAddModalOpen(true)
-    }
-  }, [router.query])
-
   applyStoredTheme(false)
 
   async function onDelete(id: string): Promise<void> {
@@ -69,7 +59,7 @@ export default function Api(): JSX.Element {
         label: 'Name',
         onChange: setName,
         name: 'name',
-        value: `${router.query?.create ? router.query?.create : value}`,
+        value: value,
         required: true,
       },
       {
@@ -131,7 +121,7 @@ export default function Api(): JSX.Element {
       createAction={() => {
         onAdd()
         setName('')
-        setExpiresAt(new Date(defaultExpiresAt))
+        setExpiresAt(neverExpiresDate)
         setAddModalOpen(true)
       }}
     >
@@ -160,10 +150,11 @@ export default function Api(): JSX.Element {
                   {`Last used: ${
                     apiKey.usedAt ? formattedShortDate(apiKey.usedAt) : 'Never'
                   }, `}
+                  {`Created: ${formattedShortDate(apiKey.createdAt)}, `}
                   {apiKey.expiresAt &&
                   apiKey.expiresAt != neverExpiresDate.toISOString()
-                    ? `expires: ${formattedShortDate(apiKey.expiresAt)}`
-                    : 'never expires'}
+                    ? `Expires: ${formattedShortDate(apiKey.expiresAt)}`
+                    : 'Never expires'}
                 </StyledText>
               }
             />