update images

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -4,19 +4,21 @@ import { noop } from 'lodash'
 import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react'
 import { APISidePanelPreview } from './APISidePanelPreview'
 import { CLSPreview } from './CLSPreview'
+import { SqlEditorTabsPreview } from './SqlEditorTabs'
+import { TableEditorTabsPreview } from './TableEditorTabs'
 
 export const FEATURE_PREVIEWS = [
   {
     key: LOCAL_STORAGE_KEYS.UI_TABLE_EDITOR_TABS,
     name: 'Table Editor tabs',
-    content: <CLSPreview />,
+    content: <TableEditorTabsPreview />,
     discussionsUrl: 'https://github.com/orgs/supabase/discussions/20295',
     isNew: true,
   },
   {
     key: LOCAL_STORAGE_KEYS.UI_SQL_EDITOR_TABS,
     name: 'SQL Editor tabs',
-    content: <CLSPreview />,
+    content: <SqlEditorTabsPreview />,
     discussionsUrl: 'https://github.com/orgs/supabase/discussions/20295',
     isNew: true,
   },

apps/studio/components/interfaces/App/FeaturePreview/SqlEditorTabs.tsx

@@ -1,11 +1,8 @@
-import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
 import { BASE_PATH } from 'lib/constants'
 import Image from 'next/image'
 
 export const SqlEditorTabsPreview = () => {
-  const { ref } = useParams()
-
   return (
     <div className="space-y-2">
       <Markdown
@@ -13,7 +10,7 @@ export const SqlEditorTabsPreview = () => {
         content={`The SQL Editor now features tabs for improved navigation and organization.`}
       />
       <Image
-        src={`${BASE_PATH}/img/previews/api-docs-preview.png`}
+        src={`${BASE_PATH}/img/previews/tabs-sql.png`}
         width={1860}
         height={970}
         alt="api-docs-side-panel-preview"

apps/studio/components/interfaces/App/FeaturePreview/TableEditorTabs.tsx

@@ -1,11 +1,7 @@
-import { useParams } from 'common'
-import { Markdown } from 'components/interfaces/Markdown'
 import { BASE_PATH } from 'lib/constants'
 import Image from 'next/image'
 
 export const TableEditorTabsPreview = () => {
-  const { ref } = useParams()
-
   return (
     <div className="space-y-2">
       <p className="text-foreground-light text-sm mb-4">
@@ -14,27 +10,12 @@ export const TableEditorTabsPreview = () => {
         thinking, more building.
       </p>
       <Image
-        src={`${BASE_PATH}/img/previews/api-docs-preview.png`}
+        src={`${BASE_PATH}/img/previews/tabs-editor.png`}
         width={1860}
         height={970}
         alt="api-docs-side-panel-preview"
         className="rounded border"
       />
-      <div className="space-y-2 !mt-4">
-        <p className="text-sm">Enabling this preview will:</p>
-        <ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
-          <li>
-            Replace the original API documentation page with a global API documentation side panel
-            that can be accessed anywhere while in a project.
-          </li>
-          <li>
-            <Markdown
-              className="text-foreground-light"
-              content={`Move the GraphiQL interface the Database section of the dashboard [here](/project/${ref}/database/graphiql).`}
-            />
-          </li>
-        </ul>
-      </div>
     </div>
   )
 }