chore(components): use npm overrides to force transitive leafygreen dependencies to the same version of shared packages #7223
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,129 +1,81 @@ | ||
| import React, { useCallback } from 'react'; | ||
| import type { AssistantMessage } from './compass-assistant-provider'; | ||
| import type { Chat } from './@ai-sdk/react/chat-react'; | ||
| import { useChat } from './@ai-sdk/react/use-chat'; | ||
| import { | ||
| LgChatChatWindow, | ||
| LgChatLeafygreenChatProvider, | ||
| LgChatMessage, | ||
| LgChatMessageFeed, | ||
| LgChatInputBar, | ||
| } from '@mongodb-js/compass-components'; | ||
|
|
||
| const { ChatWindow } = LgChatChatWindow; | ||
| const { LeafyGreenChatProvider, Variant } = LgChatLeafygreenChatProvider; | ||
| const { Message } = LgChatMessage; | ||
| const { MessageFeed } = LgChatMessageFeed; | ||
| const { InputBar } = LgChatInputBar; | ||
|
|
||
| interface AssistantChatProps { | ||
| chat: Chat<AssistantMessage>; | ||
| } | ||
|
|
||
| export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({ | ||
| chat, | ||
| }) => { | ||
| const { messages, sendMessage, status } = useChat({ | ||
| chat, | ||
| }); | ||
|
|
||
| // Transform AI SDK messages to LeafyGreen chat format | ||
| const lgMessages = messages.map((message) => ({ | ||
| id: message.id, | ||
| messageBody: | ||
| message.metadata?.displayText || | ||
| message.parts | ||
| ?.filter((part) => part.type === 'text') | ||
| .map((part) => part.text) | ||
| .join('') || | ||
| '', | ||
| isSender: message.role === 'user', | ||
| })); | ||
|
|
||
| const handleMessageSend = useCallback( | ||
| (messageBody: string) => { | ||
| void sendMessage({ text: messageBody }); | ||
| }, | ||
| [sendMessage] | ||
| ); | ||
|
|
||
| return ( | ||
| <div data-testid="assistant-chat" style={{ height: '100%', width: '100%' }}> | ||
| <LeafyGreenChatProvider variant={Variant.Compact}> | ||
| <ChatWindow title="MongoDB Assistant"> | ||
| <MessageFeed data-testid="assistant-chat-messages"> | ||
| {lgMessages.map((messageFields) => ( | ||
| <Message | ||
| key={messageFields.id} | ||
| {...messageFields} | ||
| data-testid={`assistant-message-${messageFields.id}`} | ||
| /> | ||
| ))} | ||
| {status === 'submitted' && ( | ||
| <Message | ||
| id="loading" | ||
| messageBody="Thinking..." | ||
| isSender={false} | ||
| /> | ||
| )} | ||
| </MessageFeed> | ||
| <InputBar | ||
| data-testid="assistant-chat-input" | ||
| onMessageSend={handleMessageSend} | ||
| textareaProps={{ | ||
| placeholder: 'Ask MongoDB Assistant a question', | ||
| }} | ||
| /> | ||
| </ChatWindow> | ||
| </LeafyGreenChatProvider> | ||
| </div> | ||
| ); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -149,11 +149,9 @@ function useCollectionTabs(props: CollectionMetadata) { | |
| </WithErrorBoundary> | ||
| ), | ||
| title: ( | ||
|
Contributor
There was a problem hiding this comment. nit: why the removed error boundary?
Collaborator
Author
There was a problem hiding this comment. So it's this issue caused by the fact that @leafygreen-ui/lib@15 seems like the one that seems to be working for all our dependendecies more or less, but it does cause something weird in leafygreen tabs component specifically: the title that we pass there wrapped in a boundary starts to fail with this error (I'm guessing they are doing something with this value passed that triggers the constructor accidentally). Before tabs were installing their own version, but doing this very targeted override on top of other overrides is a pain in the butt, so I'm just getting around the issue here by removing the boundary from the rendering tree. I'll leave a todo |
||
| <Provider {...props}> | ||
| <Header /> | ||
| </Provider> | ||
| ), | ||
| }; | ||
| }); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| /** | ||
| * We can't update @leafygreen-ui/button component to latest because it breaks | ||
| * the types across the whole application, but we also have to add a dependency | ||
| * on a new leafygreen package that depends on a new export from the button | ||
| * package, this new export is a one-liner color value. As a temporary | ||
| * workaround, we will patch leafygreen package and add the export manually. For | ||
| * more details see https://github.com/mongodb-js/compass/pull/7223 | ||
| */ | ||
| const fs = require('fs'); | ||
| const path = require('path'); | ||
|
|
||
| const leafygreenButtonPackage = path.dirname( | ||
| require.resolve('@leafygreen-ui/button/package.json') | ||
| ); | ||
|
|
||
| // eslint-disable-next-line no-console | ||
| console.log('Adding @leafygreen-ui/button/constants export...'); | ||
|
|
||
| fs.writeFileSync( | ||
| path.join(leafygreenButtonPackage, 'constants.js'), | ||
| "module.exports = { PRIMARY_BUTTON_INTERACTIVE_GREEN: '#00593F' };" | ||
| ); | ||
| fs.writeFileSync( | ||
| path.join(leafygreenButtonPackage, 'constants.d.ts'), | ||
| 'export declare const PRIMARY_BUTTON_INTERACTIVE_GREEN = "#00593F";' | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@gagik @lerouxb just wanted to highlight: I can either revert switching assistant to new UI or keep this skip in this PR, whatever you prefer. If we keep the skip, we probably want to follow-up with fixing those right away. At a glance it's just jsdom missing some methods, so shouldn't be too hard, I'm just trying to keep this PR small
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm working on a follow-up PR so we can just skip this here and I'll rebase and re-add those