fix sql editor charts (supabase#28915)

* fix * fix type issues * fix type err * fix type error 2 the return of the type * fix type error 3 tokyo drift

Author: jordienr

apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx

@@ -34,6 +34,7 @@ const RenameQueryModal = ({
  const snapV2 = useSqlEditorV2StateSnapshot()
  const enableFolders = useFlag('sqlFolderOrganization')
  const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
+ const isSQLSnippet = snippet.type === 'sql'
 
  // Customers on HIPAA plans should not have access to Supabase AI
  const hasHipaaAddon = subscriptionHasHipaaAddon(subscription)
@@ -54,11 +55,11 @@ const RenameQueryModal = ({
  },
  })
 
- const isAiButtonVisible = enableFolders ? true : 'content' in snippet && !!snippet.content.sql
+ const isAiButtonVisible = enableFolders ? true : isSQLSnippet
 
  const generateTitle = async () => {
  if (enableFolders) {
- if ('content' in snippet) {
+ if ('content' in snippet && isSQLSnippet) {
  titleSql({ sql: snippet.content.sql })
  } else {
  try {
@@ -69,7 +70,7 @@ const RenameQueryModal = ({
  }
  }
  } else {
- if ('content' in snippet) titleSql({ sql: snippet.content.sql })
+ if ('content' in snippet && isSQLSnippet) titleSql({ sql: snippet.content.sql })
  }
  }
 

apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx

@@ -51,7 +51,7 @@ const UtilityPanel = ({
  const snapV2 = useSqlEditorV2StateSnapshot()
  const enableFolders = useFlag('sqlFolderOrganization')
 
- const snippet = snap.snippets[id]?.snippet
+ const snippet = enableFolders ? snapV2.snippets[id]?.snippet : snap.snippets[id]?.snippet
  const queryKeys = contentKeys.list(ref)
  const result = enableFolders ? snapV2.results[id]?.[0] : snap.results[id]?.[0]
 

apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx

@@ -45,7 +45,8 @@ const QueryItem = ({
 
  const { ref, id: activeId } = useParams()
  const snap = useSqlEditorStateSnapshot()
- const { id, name, description, content, visibility } = tabInfo || {}
+ const { id, name, description, content, visibility, type } = tabInfo || {}
+ const isSQLSnippet = type === 'sql'
  const isActive = id === activeId
  const activeItemRef = useRef<HTMLElement | null>(null)
 
@@ -147,7 +148,7 @@ const QueryItem = ({
  )}
  </InnerSideMenuItem>
  </HoverCardTrigger_Shadcn_>
- {!hideTooltip && (
+ {!hideTooltip && isSQLSnippet && (
  <HoverCardContent_Shadcn_ side="right" align="center" className="w-96" animate="slide-in">
  <>
  {content.sql.trim() ? (

apps/studio/components/layouts/SQLEditorLayout/QueryItemActions.tsx

@@ -46,7 +46,8 @@ export const QueryItemActions = ({
  const snap = useSqlEditorStateSnapshot()
  const project = useSelectedProject()
 
- const { id, name, visibility, content } = tabInfo || {}
+ const { id, name, visibility, content, type } = tabInfo || {}
+ const isSQLSnippet = type === 'sql'
 
  const canCreateSQLSnippet = useCheckPermissions(PermissionAction.CREATE, 'user_content', {
  resource: { type: 'sql', owner_id: profile?.id },
@@ -77,6 +78,7 @@ export const QueryItemActions = ({
  }
 
  const createPersonalCopy = async () => {
+ if (!isSQLSnippet) return console.error('Snippet is not SQL')
  if (!ref) return console.error('Project ref is required')
  if (!id) return console.error('Snippet ID is required')
  try {

apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV1.tsx

@@ -45,6 +45,10 @@ export const SQLEditorNavV1 = ({
  const enableFolders = useFlag('sqlFolderOrganization')
 
  const snippets = useSnippets(ref)
+ const sqlSnippets = useMemo(() => {
+ return snippets.filter((snippet) => snippet.type === 'sql')
+ }, [snippets])
+
  const snap = useSqlEditorStateSnapshot()
 
  const { isLoading, isSuccess, isError, error } = useSqlSnippetsQuery(ref, {
@@ -116,7 +120,8 @@ export const SQLEditorNavV1 = ({
  }
 
  const projectSnippets = useMemo(() => {
- return snippets.filter((snippet) => snippet.visibility === 'project')
+ const sqlSnippets = snippets.filter((snippet) => snippet.visibility === 'project')
+ return sqlSnippets.filter((snippet) => snippet.type === 'sql')
  }, [snippets])
 
  const filteredProjectSnippets = useMemo(() => {
@@ -129,19 +134,25 @@ export const SQLEditorNavV1 = ({
  }, [projectSnippets, searchText])
 
  const personalSnippets = useMemo(() => {
- const ss = snippets.filter(
- (snippet) => snippet.visibility === 'user' && !snippet.content.favorite
+ const ss = sqlSnippets.filter(
+ (snippet) =>
+ snippet.visibility === 'user' && !snippet.content.favorite && snippet.type === 'sql'
  )
 
  if (searchText.length > 0) {
- return ss.filter((tab) => tab.name.toLowerCase().includes(searchText.toLowerCase()))
+ return sqlSnippets.filter((tab) => tab.name.toLowerCase().includes(searchText.toLowerCase()))
  }
  return ss
- }, [searchText, snippets])
+ }, [searchText, sqlSnippets])
 
  const favoriteSnippets = useMemo(() => {
- return snippets.filter((snippet) => snippet.content.favorite)
- }, [snippets])
+ return sqlSnippets.filter((snippet) => {
+ if (snippet.type === 'sql') {
+ return snippet.content.favorite
+ }
+ return false
+ })
+ }, [sqlSnippets])
 
  const filteredFavoriteSnippets = useMemo(() => {
  if (searchText.length > 0) {

apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx

@@ -173,6 +173,7 @@ function SnippetSelector({
 
  const selectedValue = useCommandFilterState((state) => state.value)
  const selectedSnippet = snippets?.find((snippet) => snippetValue(snippet) === selectedValue)
+ const isSQLSnippet = selectedSnippet?.type === 'sql'
 
  return (
  <div className="w-full flex-grow min-h-0 grid gap-4 md:grid-cols-2">
@@ -214,7 +215,7 @@ function SnippetSelector({
  </CommandList_Shadcn_>
  <CodeBlock
  language="sql"
- value={selectedSnippet?.content?.sql ?? ''}
+ value={isSQLSnippet ? selectedSnippet?.content?.sql : ''}
  wrapperClassName="hidden md:block"
  className="w-full h-full border-0 [&>code]:overflow-scroll [&>code]:block [&>code]:w-full [&>code]:h-full"
  hideCopy
@@ -224,6 +225,7 @@ function SnippetSelector({
 }
 
 function snippetValue(snippet: SqlSnippet) {
+ if (snippet.type !== 'sql') return ''
  return escapeAttributeSelector(
  `${snippet.id}-${snippet.name}-${snippet.content.sql.slice(0, 30)}`
  ).toLowerCase()

apps/studio/data/content/sql-snippets-query.ts

@@ -1,7 +1,7 @@
 import { UseQueryOptions } from '@tanstack/react-query'
 import { Content, ContentData, ContentError, useContentQuery } from 'data/content/content-query'
 
-export type SqlSnippet = Extract<Content, { type: 'sql' }>
+export type SqlSnippet = Extract<Content, { type: 'sql' | 'log_sql' | 'report' }>
 
 export type SqlSnippets = {
  snippets: SqlSnippet[]

apps/studio/state/sql-editor.ts

@@ -120,7 +120,7 @@ export const sqlEditorState = proxy({
  }
  },
  setSql: (id: string, sql: string) => {
- if (sqlEditorState.snippets[id]) {
+ if (sqlEditorState.snippets[id] && sqlEditorState.snippets[id].snippet.type === 'sql') {
  sqlEditorState.snippets[id].snippet.content.sql = sql
  sqlEditorState.needsSaving.add(id)
  }
@@ -164,14 +164,15 @@ export const sqlEditorState = proxy({
  sqlEditorState.results[id].unshift({ rows: [], error, autoLimit })
  }
  },
+ // [Jordi] Only SQL snippets can be favorites for now.
  addFavorite: (id: string) => {
- if (sqlEditorState.snippets[id]) {
+ if (sqlEditorState.snippets[id] && sqlEditorState.snippets[id].snippet.type === 'sql') {
  sqlEditorState.snippets[id].snippet.content.favorite = true
  sqlEditorState.needsSaving.add(id)
  }
  },
  removeFavorite: (id: string) => {
- if (sqlEditorState.snippets[id]) {
+ if (sqlEditorState.snippets[id] && sqlEditorState.snippets[id].snippet.type === 'sql') {
  sqlEditorState.snippets[id].snippet.content.favorite = false
  sqlEditorState.needsSaving.add(id)
  }

apps/studio/types/userContent.ts

@@ -78,6 +78,7 @@ export namespace Dashboards {
  }
  interval: '1m' | '5m' | '1h' | '1d' | '1w' | '1M' | '1y' // this is the data interval
  layout: Chart[]
+ favorite?: boolean // not used yet
  }
 
  /**