chore: replace Markdown component in some generic studio components (supabase#30666)

We no longer want to use Markdown when not necessary. I checked the props for these components and we were only passing in a regular text without any actual markdown

Author: kevcodez

apps/studio/components/grid/components/header/Header.tsx

@@ -7,7 +7,6 @@ import { toast } from 'sonner'
 
 import { useDispatch, useTrackedState } from 'components/grid/store/Store'
 import type { Filter, Sort, SupaTable } from 'components/grid/types'
-import { Markdown } from 'components/interfaces/Markdown'
 import { formatTableRowsToSQL } from 'components/interfaces/TableGridEditor/TableEntity.utils'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
@@ -31,12 +30,22 @@ import {
 } from 'ui'
 import FilterPopover from './filter/FilterPopover'
 import { SortPopover } from './sort'
+import Link from 'next/link'
 
 // [Joshen] CSV exports require this guard as a fail-safe if the table is
 // just too large for a browser to keep all the rows in memory before
 // exporting. Either that or export as multiple CSV sheets with max n rows each
 export const MAX_EXPORT_ROW_COUNT = 500000
-export const MAX_EXPORT_ROW_COUNT_MESSAGE = `Sorry! We're unable to support exporting row counts larger than ${MAX_EXPORT_ROW_COUNT.toLocaleString()} at the moment. Alternatively, you may consider using [pg_dump](https://supabase.com/docs/reference/cli/supabase-db-dump) via our CLI instead.`
+export const MAX_EXPORT_ROW_COUNT_MESSAGE = (
+  <>
+    Sorry! We're unable to support exporting row counts larger than $
+    {MAX_EXPORT_ROW_COUNT.toLocaleString()} at the moment. Alternatively, you may consider using
+    <Link href="https://supabase.com/docs/reference/cli/supabase-db-dump" target="_blank">
+      pg_dump
+    </Link>{' '}
+    via our CLI instead.
+  </>
+)
 
 export type HeaderProps = {
   table: SupaTable
@@ -290,7 +299,9 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => {
     setIsExporting(true)
 
     if (allRowsSelected && totalRows > MAX_EXPORT_ROW_COUNT) {
-      toast.error(<Markdown content={MAX_EXPORT_ROW_COUNT_MESSAGE} className="text-foreground" />)
+      toast.error(
+        <div className="prose text-sm text-foreground">{MAX_EXPORT_ROW_COUNT_MESSAGE}</div>
+      )
       return setIsExporting(false)
     }
 
@@ -331,7 +342,9 @@ const RowHeader = ({ table, sorts, filters }: RowHeaderProps) => {
     setIsExporting(true)
 
     if (allRowsSelected && totalRows > MAX_EXPORT_ROW_COUNT) {
-      toast.error(<Markdown content={MAX_EXPORT_ROW_COUNT_MESSAGE} className="text-foreground" />)
+      toast.error(
+        <div className="prose text-sm text-foreground">{MAX_EXPORT_ROW_COUNT_MESSAGE}</div>
+      )
       return setIsExporting(false)
     }
 

apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx

@@ -21,7 +21,6 @@ import {
   MAX_EXPORT_ROW_COUNT_MESSAGE,
 } from 'components/grid/components/header/Header'
 import { parseSupaTable } from 'components/grid/SupabaseGrid.utils'
-import { Markdown } from 'components/interfaces/Markdown'
 import {
   formatTableRowsToSQL,
   getEntityLintDetails,
@@ -117,7 +116,7 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
       })
       if (isTableLike(table) && table.live_rows_estimate > MAX_EXPORT_ROW_COUNT) {
         return toast.error(
-          <Markdown content={MAX_EXPORT_ROW_COUNT_MESSAGE} className="text-foreground" />,
+          <div className="text-foreground prose text-sm">{MAX_EXPORT_ROW_COUNT_MESSAGE}</div>,
           { id: toastId }
         )
       }
@@ -171,7 +170,7 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
 
       if (isTableLike(table) && table.live_rows_estimate > MAX_EXPORT_ROW_COUNT) {
         return toast.error(
-          <Markdown content={MAX_EXPORT_ROW_COUNT_MESSAGE} className="text-foreground" />,
+          <div className="text-foreground prose text-sm">{MAX_EXPORT_ROW_COUNT_MESSAGE}</div>,
           { id: toastId }
         )
       }

apps/studio/components/ui/Forms/FormHeader.tsx

@@ -1,6 +1,3 @@
-import ReactMarkdown from 'react-markdown'
-
-import { Markdown } from 'components/interfaces/Markdown'
 import { ReactNode } from 'react'
 import { cn } from 'ui'
 import { DocsButton } from '../DocsButton'
@@ -21,12 +18,8 @@ const FormHeader = ({
   return (
     <div className={cn(`mb-6 flex items-center justify-between gap-x-4 ${className}`)}>
       <div className="space-y-1">
-        <h3 className="text-foreground text-xl">
-          <ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
-            {title}
-          </ReactMarkdown>
-        </h3>
-        {description && <Markdown content={description} className="max-w-full" />}
+        <h3 className="text-foreground text-xl prose">{title}</h3>
+        {description && <div className="prose text-sm max-w-full">{description}</div>}
       </div>
       <div className="flex items-center gap-x-2">
         {docsUrl !== undefined && <DocsButton href={docsUrl} />}

apps/studio/components/ui/Panel.tsx

@@ -1,6 +1,5 @@
 import { Megaphone } from 'lucide-react'
 import { forwardRef, PropsWithChildren, ReactNode } from 'react'
-import ReactMarkdown from 'react-markdown'
 import { Badge, Button, Loading, cn } from 'ui'
 
 interface PanelProps {
@@ -109,11 +108,9 @@ const PanelNotice = forwardRef<
           {/* <span className="font-medium text-foreground text-sm">{title}</span> */}
         </div>
         {description && (
-          <span className="text-foreground-light text-sm flex flex-col gap-0">
-            <ReactMarkdown className="prose text-xs max-w-none [&_p]:mt-2 [&_p]:mb-0">
-              {description}
-            </ReactMarkdown>
-          </span>
+          <div className="text-foreground-light text-sm flex flex-col gap-0">
+            <div className="prose text-xs max-w-none [&_p]:mt-2 [&_p]:mb-0">{description}</div>
+          </div>
         )}
       </div>