Change flag for API keys last used (#41221)

apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx

@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion'
 import { MoreVertical } from 'lucide-react'
 
+import { useFlag } from 'common'
 import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import type { APIKeysData } from 'data/api-keys/api-keys-query'
 import {
@@ -14,7 +15,6 @@ import {
 import { ShimmeringLoader, TimestampInfo } from 'ui-patterns'
 import { APIKeyDeleteDialog } from './APIKeyDeleteDialog'
 import { ApiKeyPill } from './ApiKeyPill'
-import { useFlag } from 'common'
 
 export const APIKeyRow = ({
   apiKey,
@@ -34,8 +34,7 @@ export const APIKeyRow = ({
   setKeyToDelete: (id: string | null) => void
 }) => {
   const MotionTableRow = motion.create(TableRow)
-
-  const hideApiKeyLastUsed = useFlag('HideApiKeyLastUsed')
+  const showApiKeysLastUsed = useFlag('showApiKeysLastUsed')
 
   return (
     <>
@@ -65,7 +64,7 @@ export const APIKeyRow = ({
           </div>
         </TableCell>
 
-        {!hideApiKeyLastUsed && (
+        {showApiKeysLastUsed && (
           <TableCell className="py-2 min-w-0 whitespace-nowrap hidden lg:table-cell">
             <div className="truncate" title={lastSeen?.timestamp.toString() || 'Never used'}>
               {isLoadingLastSeen ? (

apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx

@@ -27,10 +27,7 @@ interface LastSeenData {
   [hash: string]: { timestamp: number; relative: string }
 }
 
-function useLastSeen(
-  projectRef: string,
-  enabled?: boolean
-): {
+function useLastSeen({ projectRef, enabled }: { projectRef: string; enabled?: boolean }): {
   data?: LastSeenData
   isLoading: boolean
 } {
@@ -79,11 +76,11 @@ export const SecretAPIKeys = () => {
     isError: isErrorApiKeys,
   } = useAPIKeysQuery({ projectRef, reveal: false }, { enabled: canReadAPIKeys })
 
-  const hideApiKeyLastUsed = useFlag('HideApiKeyLastUsed') ?? true
-  const { data: lastSeen, isLoading: isLoadingLastSeen } = useLastSeen(
-    projectRef ?? '',
-    !hideApiKeyLastUsed
-  )
+  const showApiKeysLastUsed = useFlag('showApiKeysLastUsed')
+  const { data: lastSeen, isLoading: isLoadingLastSeen } = useLastSeen({
+    projectRef: projectRef ?? '',
+    enabled: showApiKeysLastUsed,
+  })
 
   const secretApiKeys = useMemo(
     () =>
@@ -164,7 +161,7 @@ export const SecretAPIKeys = () => {
               <TableRow className="bg-200">
                 <TableHead>Name</TableHead>
                 <TableHead>API Key</TableHead>
-                {!hideApiKeyLastUsed && (
+                {showApiKeysLastUsed && (
                   <TableHead className="hidden lg:table-cell">Last Used</TableHead>
                 )}
                 <TableHead />

apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx

@@ -51,18 +51,18 @@ export const DisplayApiSettings = ({
   // api keys should not be empty. However it can be populated with a delay on project creation
   const isApiKeysEmpty = apiKeys.length === 0
 
-  const hideApiKeyLastUsed = useFlag('HideApiKeyLastUsed') ?? true
-  const { isLoading: isLoadingLastUsed, logData: lastUsedLogData } = useLastUsedAPIKeysLogQuery(
-    projectRef!,
-    !hideApiKeyLastUsed
-  )
+  const showApiKeyLastUsed = useFlag('showApiKeysLastUsed')
+  const { isLoading: isLoadingLastUsed, logData: lastUsedLogData } = useLastUsedAPIKeysLogQuery({
+    projectRef: projectRef ?? '',
+    enabled: showApiKeyLastUsed,
+  })
 
   const lastUsedAPIKeys = useMemo(() => {
     if (
       apiKeys.length < 1 ||
       !lastUsedLogData ||
       lastUsedLogData.length < 1 ||
-      hideApiKeyLastUsed
+      !showApiKeyLastUsed
     ) {
       return {}
     }
@@ -74,7 +74,7 @@ export const DisplayApiSettings = ({
       console.error(e)
       return {}
     }
-  }, [lastUsedLogData, apiKeys, hideApiKeyLastUsed])
+  }, [lastUsedLogData, apiKeys, showApiKeyLastUsed])
 
   return (
     <Panel
@@ -206,7 +206,7 @@ export const DisplayApiSettings = ({
               />
             </FormLayout>
 
-            {!hideApiKeyLastUsed && (
+            {showApiKeyLastUsed && (
               <div
                 className="pt-2 text-foreground-lighter w-full text-sm data-[invisible=true]:invisible"
                 data-invisible={isLoadingLastUsed}

apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts

@@ -3,7 +3,13 @@ import { useRef } from 'react'
 
 import useLogsQuery from 'hooks/analytics/useLogsQuery'
 
-export function useLastUsedAPIKeysLogQuery(projectRef: string, enabled?: boolean) {
+export function useLastUsedAPIKeysLogQuery({
+  projectRef,
+  enabled,
+}: {
+  projectRef: string
+  enabled?: boolean
+}) {
   const now = useRef(new Date()).current
   return useLogsQuery(
     projectRef,