Merge pull request #14215 from supabase/fix/jest-tests-with-react-markdown

Fix Jest errors with react markdown for cmdk

apps/docs/pages/_app.tsx

@@ -90,12 +90,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       <Favicons />
       <AuthContainer>
         <ThemeProvider>
-          <CommandMenuProvider
-            site="docs"
-            MarkdownHandler={(props) => (
-              <ReactMarkdown remarkPlugins={[remarkGfm]} components={components} {...props} />
-            )}
-          >
+          <CommandMenuProvider site="docs">
             <SiteLayout>
               <Component {...pageProps} />
             </SiteLayout>

packages/ui/src/components/Command/AiCommand.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type {
   ChatCompletionResponseMessage,
   CreateChatCompletionResponse,
@@ -16,14 +15,23 @@ import {
 
 import { SSE } from 'sse.js'
 
-import { Alert, Button, IconAlertTriangle, IconCornerDownLeft, IconUser, Input } from 'ui'
+import {
+  Button,
+  IconAlertTriangle,
+  IconCornerDownLeft,
+  IconUser,
+  Input,
+  markdownComponents,
+} from 'ui'
 import { AiIcon, AiIconChat } from './Command.icons'
 import { CommandGroup, CommandItem, useAutoInputFocus, useHistoryKeys } from './Command.utils'
 
-import { useCommandMenu } from './CommandMenuProvider'
 import { AiWarning } from './Command.alerts'
+import { useCommandMenu } from './CommandMenuProvider'
 
+import ReactMarkdown from 'react-markdown'
 import { cn } from './../../utils/cn'
+import remarkGfm from 'remark-gfm'
 
 const questions = [
   'How do I get started with Supabase?',
@@ -339,7 +347,7 @@ export function queryAi(messages: Message[], timeout = 0) {
 }
 
 const AiCommand = () => {
-  const { isLoading, setIsLoading, search, setSearch, MarkdownHandler } = useCommandMenu()
+  const { isLoading, setIsLoading, search, setSearch } = useCommandMenu()
 
   const { submit, reset, messages, isResponding, hasError } = useAiChat({
     setIsLoading,
@@ -404,7 +412,9 @@ const AiCommand = () => {
                       {message.status === MessageStatus.Pending ? (
                         <div className="bg-scale-700 h-[21px] w-[13px] mt-1 animate-pulse animate-bounce"></div>
                       ) : (
-                        <MarkdownHandler
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          components={markdownComponents}
                           linkTarget="_blank"
                           className="prose dark:prose-dark"
                           transformLinkUri={(href) => {
@@ -419,7 +429,7 @@ const AiCommand = () => {
                           }}
                         >
                           {message.content}
-                        </MarkdownHandler>
+                        </ReactMarkdown>
                       )}
                     </>
                   </div>

packages/ui/src/components/Command/CommandMenuProvider.tsx

@@ -1,7 +1,6 @@
 import { useTheme, UseThemeProps } from 'common'
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
 import CommandMenu from './CommandMenu'
-import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown'
 
 export interface CommandMenuContextValue {
   isOpen: boolean
@@ -29,10 +28,6 @@ export interface CommandMenuContextValue {
    */
   isOptedInToAI: boolean
 
-  // to do: remove this prop
-  // this is a temporary hack as ReactMarkdown fails our jest tests if we import the package within this UI package
-  MarkdownHandler: (props: ReactMarkdownOptions) => JSX.Element
-
   // Optional callback to save a generated SQL output
   saveGeneratedSQL?: (answer: string, title: string) => Promise<void>
 }
@@ -66,11 +61,6 @@ export interface CommandMenuProviderProps {
    * Any additional metadata that CMDK component can use in its AI prompts
    */
   metadata?: { definitions?: string; flags?: { [key: string]: string } }
-  /**
-   * TODO: remove this prop, temporary hack as ReactMarkdown fails our jest tests
-   * if we import the package directly within this UI package
-   */
-  MarkdownHandler: (props: ReactMarkdownOptions) => JSX.Element
   /**
    * Call back when save SQL snippet button is selected
    */
@@ -84,7 +74,6 @@ const CommandMenuProvider = ({
   apiKeys,
   metadata,
   isOptedInToAI = false,
-  MarkdownHandler,
   saveGeneratedSQL,
 }: PropsWithChildren<CommandMenuProviderProps>) => {
   const [isOpen, setIsOpen] = useState(false)
@@ -116,7 +105,6 @@ const CommandMenuProvider = ({
         project,
         metadata,
         isOptedInToAI,
-        MarkdownHandler,
         saveGeneratedSQL,
       }}
     >

studio/__mocks__/react-markdown.js

@@ -0,0 +1,9 @@
+/**
+ * Opting for option 1 as described here:
+ * https://github.com/remarkjs/react-markdown/issues/635#issuecomment-956158474
+ */
+function ReactMarkdown({ children }) {
+  return <>{children}</>
+}
+
+export default ReactMarkdown

studio/__mocks__/remark-gfm.js

@@ -0,0 +1 @@
+export default function remarkGfm() {}

studio/components/interfaces/App/CommandMenuWrapper.tsx

@@ -98,9 +98,6 @@ const CommandMenuWrapper = observer(({ children }: PropsWithChildren<{}>) => {
       site="studio"
       projectRef={ref}
       apiKeys={apiKeys}
-      MarkdownHandler={(props) => (
-        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents} {...props} />
-      )}
       metadata={cmdkMetadata}
       isOptedInToAI={allowCMDKDataOptIn && isOptedInToAI}
       saveGeneratedSQL={onSaveGeneratedSQL}