Skip to content

chore(components): upgrade LeafyGreen non-modal (+ some chat related) components COMPASS-9642 #7582

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kraenhansen merged 33 commits into from
Nov 25, 2025
Merged

chore(components): upgrade LeafyGreen non-modal (+ some chat related) components COMPASS-9642 #7582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
6b50730
Remove patch-leafygreen-button
kraenhansen Sep 30, 2025
43dc230
Delete unused packages
kraenhansen Nov 21, 2025
f042cd0
Bump LG packages
kraenhansen Nov 17, 2025
581e012
Fix type error in e2e-tests
kraenhansen Oct 7, 2025
bb1f668
Fix incorrect React.Ref type argument in generative-ai
kraenhansen Sep 30, 2025
4116bf2
Add autoFocus prop to compass-editor
kraenhansen Oct 1, 2025
4c35c6a
Use named over default exports
kraenhansen Nov 17, 2025
0bde132
Fix Button / IconButton links
kraenhansen Sep 30, 2025
2c213a2
Fix ActionButton prop types
kraenhansen Sep 30, 2025
c4b510b
Remove defaultValue workaround
kraenhansen Nov 17, 2025
1643455
Fix SmallIconButton props
kraenhansen Sep 30, 2025
bfcd92c
TEMP: Working around https://jira.mongodb.org/browse/LG-5461
kraenhansen Sep 30, 2025
f8ab37d
Workaround for React.ComponentProps<typeof Button> no longer working
kraenhansen Sep 30, 2025
c33b90e
TEMP work around https://jira.mongodb.org/browse/LG-5590
kraenhansen Oct 1, 2025
f622a80
Fix issue passing Popover ref into IconButton
kraenhansen Oct 1, 2025
bd565a3
Fix check failure in guide-cue spec
kraenhansen Oct 7, 2025
66bc1e6
Removed extraneous ts-expect-error
kraenhansen Nov 5, 2025
6e99b2c
Update to account for breaking change in select v16.2.0
kraenhansen Nov 5, 2025
0be5d0a
Wait for crud elements to become visible before interacting
kraenhansen Nov 6, 2025
623bf10
Update existing tests to handle changes in Select
kraenhansen Nov 6, 2025
4142956
Fix index creation interactions with ComboBox
kraenhansen Nov 7, 2025
d4d2769
Update e2e tests to use setComboBoxValue instead of setValueVisible w…
kraenhansen Nov 7, 2025
2090deb
Update e2e tests to expect chat messages to not be displayed when dec…
kraenhansen Nov 7, 2025
d5ae3a0
Update ConnectDropdownButton to reflect change in SplitButton
kraenhansen Nov 10, 2025
b01bf22
Update e2e test to use a different selector for menu items in "CSV fi…
kraenhansen Nov 10, 2025
f3c65e4
Skip opening the assistant drawer if it's already open
kraenhansen Nov 11, 2025
c37c211
Assistant tests: Add option to useExplainPlanEntryPoint to avoid wait…
kraenhansen Nov 12, 2025
fac7e14
Assistant tests: Close drawer after every test.
kraenhansen Nov 17, 2025
d7329d0
Export ConfirmationModalProps fixing re-export of showConfirmation in…
kraenhansen Nov 17, 2025
12f7ae9
Update modal close selector
kraenhansen Nov 19, 2025
d276850
Update use of chat-provider v6
kraenhansen Nov 21, 2025
b2861ce
Update package lock
kraenhansen Nov 24, 2025
694ac4e
Update assistant tests to reflect change in LG
kraenhansen Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,764 changes: 1,461 additions & 3,303 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

33 changes: 10 additions & 23 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,28 +111,15 @@
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.2.0"
},
"@leafygreen-ui/emotion": "^4.0.9",
"@leafygreen-ui/lib": "^15.3.0",
"@leafygreen-ui/palette": "^4.1.3",
"@leafygreen-ui/tokens": "^3.2.4",
"@leafygreen-ui/leafygreen-provider": "^4.0.2",
"@leafygreen-ui/marketing-modal": "^5.0.2",
"@leafygreen-ui/typography": "^20.0.2",
"@leafygreen-ui/icon": "^14.6.0",
"@leafygreen-ui/inline-definition": "^9.0.5",
"@leafygreen-ui/popover": "^13.0.11",
"@leafygreen-ui/badge": "^9.0.2",
"@leafygreen-ui/banner": "^10.1.0",
"@leafygreen-ui/button": "^22.0.2",
"@leafygreen-ui/hooks": "^8.3.4",
"@leafygreen-ui/icon-button": "^16.0.2",
"@leafygreen-ui/input-option": "^3.0.4",
"@leafygreen-ui/polymorphic": "^2.0.5",
"@leafygreen-ui/search-input": "^5.0.2",
"@leafygreen-ui/code": "^20.1.1",
"@leafygreen-ui/text-area": "^10.0.2",
"@leafygreen-ui/card": "^12.0.2",
"@leafygreen-ui/logo": "^10.0.2",
"@leafygreen-ui/tabs": "^17.0.4"
Comment on lines -114 to -136
Copy link
Collaborator

@gribnoysup gribnoysup Nov 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious what logic you used to decide on which overrides to remove and which to keep for this step of the LG update: I see that some of the ones that are left do overrides, but some are not, so not obvious at a glance what's the deciding factor here

EDIT: ah, scratch that, didn't noticed it at first doing npm ls, seems all of them are related to the packages not being bumped in this PR specifically? Is that about right?

Copy link
Contributor Author

@kraenhansen kraenhansen Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep. I basically brute-forced this. Whenever something was causing duplicate installs in the package lock I added an override for that 🤷 I hope to be able to get rid of these all together in my final PR 🤞

"@leafygreen-ui/button": "^25.1.3",
"@leafygreen-ui/confirmation-modal": "^8.0.0",
"@leafygreen-ui/form-field": "^4.0.7",
"@leafygreen-ui/leafygreen-provider": "^5.0.4",
"@leafygreen-ui/marketing-modal": "^6.0.0",
"@leafygreen-ui/modal": "^18.0.0",
"@leafygreen-ui/select": "^17.0.1",
"@leafygreen-ui/text-input": "^16.2.1",
"@leafygreen-ui/tokens": "^4.0.0",
"@leafygreen-ui/typography": "^22.2.2"
}
}
4 changes: 2 additions & 2 deletions ...ponents/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@ describe('condition', function () {
renderCondition({ condition });
expect(screen.getByLabelText(new RegExp(SINGLE_SELECT_LABEL, 'i'))).to
.exist;
expect(screen.getByLabelText(LABELS.operatorSelect)).to.exist;
expect(screen.getByTestId('match-condition-operator-select')).to.exist;
expect(screen.getByTestId('match-stage-expected-value-input')).to.exist;
expect(screen.getByLabelText(LABELS.typeSelect)).to.exist;
expect(screen.getByTestId('match-condition-type-select')).to.exist;
});

it('should call onConditionChange with updated condition when a field is selected', function () {
Expand Down
4 changes: 2 additions & 2 deletions ...c/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ const MatchConditionForm = ({
aria-label={LABELS.operatorSelect}
value={condition.operator}
onChange={handleOperatorChange}
data-testid="match-condition-operator-select"
>
{MATCH_OPERATOR_LABELS.map(({ operator, label }) => {
return (
Expand All @@ -183,8 +184,6 @@ const MatchConditionForm = ({
<div className={valueInputStyles}>
<TextInput
placeholder={LABELS.valueInput}
// NOTE: LeafyGreen doesn't support aria-label and only understands "aria-labelledby" and "label".
aria-labelledby=""
data-testid="match-stage-expected-value-input"
aria-label={LABELS.valueInput}
value={condition.value}
Expand All @@ -198,6 +197,7 @@ const MatchConditionForm = ({
aria-label={LABELS.typeSelect}
value={condition.bsonType}
onChange={handleBsonTypeChange}
data-testid="match-condition-type-select"
>
{CASTABLE_TYPES.map((type) => (
<Option key={type} value={`${type}`}>
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-assistant/src/components/assistant-chat.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ describe('AssistantChat', function () {

it('displays the disclaimer and welcome text', function () {
renderWithChat(createMockChat({ messages: [] }));
expect(screen.getByText(/AI can make mistakes. Review for accuracy./)).to
expect(screen.getByText(/AI can make mistakes, so review for accuracy/)).to
.exist;
});

Expand Down
28 changes: 2 additions & 26 deletions packages/compass-assistant/src/components/assistant-chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,17 @@ import {
fontFamilies,
palette,
useDarkMode,
LgChatChatDisclaimer,
Link,
Icon,
} from '@mongodb-js/compass-components';
import { ConfirmationMessage } from './confirmation-message';
import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
import { NON_GENUINE_WARNING_MESSAGE } from '../preset-messages';

const { DisclaimerText } = LgChatChatDisclaimer;
const { ChatWindow } = LgChatChatWindow;
const { LeafyGreenChatProvider, Variant } = LgChatLeafygreenChatProvider;
const { LeafyGreenChatProvider } = LgChatLeafygreenChatProvider;
const { Message } = LgChatMessage;
const { InputBar } = LgChatInputBar;

const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';

interface AssistantChatProps {
chat: Chat<AssistantMessage>;
hasNonGenuineConnections: boolean;
Expand Down Expand Up @@ -160,14 +155,6 @@ const welcomeMessageStyles = css({
paddingLeft: spacing[400],
paddingRight: spacing[400],
});
const disclaimerTextStyles = css({
paddingBottom: spacing[400],
paddingLeft: spacing[400],
paddingRight: spacing[400],
a: {
fontSize: 'inherit',
},
});
// On small screens, many components end up breaking words which we don't want.
// This is a general temporary fix for all components that we want to prevent from wrapping.
const noWrapFixesStyles = css({
Expand Down Expand Up @@ -379,7 +366,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
)}
style={chatContainerOverrideStyle}
>
<LeafyGreenChatProvider variant={Variant.Compact}>
<LeafyGreenChatProvider>
<ChatWindow title="MongoDB Assistant" className={chatWindowFixesStyles}>
<div
data-testid="assistant-chat-messages"
Expand Down Expand Up @@ -501,17 +488,6 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
textareaProps={inputBarTextareaProps}
/>
</div>
<DisclaimerText className={disclaimerTextStyles}>
AI can make mistakes. Review for accuracy.{' '}
<Link
className={noWrapFixesStyles}
hideExternalIcon={false}
href={GEN_AI_FAQ_LINK}
target="_blank"
>
Learn more
</Link>
</DisclaimerText>
</ChatWindow>
</LeafyGreenChatProvider>
</div>
Expand Down
115 changes: 51 additions & 64 deletions packages/compass-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,74 +29,61 @@
"test-cov": "nyc --compact=false --produce-source-map=false -x \"**/*.spec.*\" --reporter=lcov --reporter=text --reporter=html npm run test",
"test-watch": "npm run test -- --watch",
"test-ci": "npm run test-cov",
"reformat": "npm run eslint . -- --fix && npm run prettier -- --write .",
"postinstall": "node ./scripts/patch-leafygreen-button.js"
"reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
},
"dependencies": {
"@dnd-kit/core": "^6.0.7",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.1",
"@leafygreen-ui/avatar": "^3.1.0",
"@leafygreen-ui/badge": "^9.0.2",
"@leafygreen-ui/banner": "^10.1.0",
"@leafygreen-ui/button": "^22.0.2",
"@leafygreen-ui/card": "^12.0.2",
"@leafygreen-ui/checkbox": "^14.0.2",
"@leafygreen-ui/chip": "^3.0.12",
"@leafygreen-ui/code": "^20.1.1",
"@leafygreen-ui/combobox": "^11.0.2",
"@leafygreen-ui/confirmation-modal": "^6.0.2",
"@leafygreen-ui/copyable": "^10.0.14",
"@leafygreen-ui/drawer": "^5.0.3",
"@leafygreen-ui/emotion": "^4.0.9",
"@leafygreen-ui/guide-cue": "^7.0.2",
"@leafygreen-ui/hooks": "^8.3.4",
"@leafygreen-ui/icon": "^14.6.0",
"@leafygreen-ui/icon-button": "^16.0.2",
"@leafygreen-ui/info-sprinkle": "^4.0.2",
"@leafygreen-ui/input-option": "^3.0.12",
"@leafygreen-ui/leafygreen-provider": "^4.0.2",
"@leafygreen-ui/logo": "^10.0.2",
"@leafygreen-ui/marketing-modal": "^5.0.2",
"@leafygreen-ui/menu": "^29.0.5",
"@leafygreen-ui/modal": "^17.0.2",
"@leafygreen-ui/palette": "^4.1.3",
"@leafygreen-ui/pipeline": "^7.0.2",
"@leafygreen-ui/polymorphic": "^2.0.5",
"@leafygreen-ui/popover": "^13.0.11",
"@leafygreen-ui/portal": "^6.0.2",
"@leafygreen-ui/radio-box-group": "^14.0.2",
"@leafygreen-ui/radio-group": "^12.0.2",
"@leafygreen-ui/search-input": "^5.0.2",
"@leafygreen-ui/segmented-control": "^10.0.2",
"@leafygreen-ui/select": "^14.0.2",
"@leafygreen-ui/skeleton-loader": "^2.0.11",
"@leafygreen-ui/split-button": "^4.1.5",
"@leafygreen-ui/table": "^13.0.1",
"@leafygreen-ui/tabs": "^17.0.4",
"@leafygreen-ui/text-area": "^10.0.2",
"@leafygreen-ui/text-input": "^14.0.2",
"@leafygreen-ui/toast": "^7.0.2",
"@leafygreen-ui/toggle": "^11.0.2",
"@leafygreen-ui/tokens": "^3.2.4",
"@leafygreen-ui/tooltip": "^13.0.13",
"@leafygreen-ui/typography": "^20.0.2",
"@lg-chat/avatar": "^7.0.2",
"@lg-chat/chat-disclaimer": "^5.0.0",
"@lg-chat/chat-window": "^4.1.4",
"@lg-chat/fixed-chat-window": "^4.0.6",
"@lg-chat/input-bar": "^10.0.4",
"@leafygreen-ui/avatar": "^3.1.5",
"@leafygreen-ui/badge": "^10.2.3",
"@leafygreen-ui/banner": "^10.2.3",
"@leafygreen-ui/button": "^25.1.3",
"@leafygreen-ui/card": "^13.2.1",
"@leafygreen-ui/checkbox": "^18.1.3",
"@leafygreen-ui/chip": "^4.0.9",
"@leafygreen-ui/code": "^20.2.3",
"@leafygreen-ui/combobox": "^12.2.1",
"@leafygreen-ui/confirmation-modal": "^8.0.0",
"@leafygreen-ui/copyable": "^12.0.1",
"@leafygreen-ui/drawer": "^5.1.3",
"@leafygreen-ui/emotion": "^5.1.0",
"@leafygreen-ui/guide-cue": "^8.1.1",
"@leafygreen-ui/hooks": "^9.3.0",
"@leafygreen-ui/icon": "^14.7.0",
"@leafygreen-ui/icon-button": "^17.1.3",
"@leafygreen-ui/info-sprinkle": "^5.0.9",
"@leafygreen-ui/input-option": "^4.1.3",
"@leafygreen-ui/leafygreen-provider": "^5.0.4",
"@leafygreen-ui/logo": "^11.1.0",
"@leafygreen-ui/marketing-modal": "^6.0.0",
"@leafygreen-ui/menu": "^33.0.1",
"@leafygreen-ui/modal": "^18.0.0",
"@leafygreen-ui/palette": "^5.0.2",
"@leafygreen-ui/pipeline": "^8.0.8",
"@leafygreen-ui/polymorphic": "^3.1.0",
"@leafygreen-ui/popover": "^14.3.1",
"@leafygreen-ui/portal": "^7.1.0",
"@leafygreen-ui/radio-box-group": "^15.0.10",
"@leafygreen-ui/radio-group": "^13.0.10",
"@leafygreen-ui/search-input": "^6.1.1",
"@leafygreen-ui/segmented-control": "^11.0.11",
"@leafygreen-ui/select": "^17.0.1",
"@leafygreen-ui/skeleton-loader": "^3.0.9",
"@leafygreen-ui/split-button": "^6.1.7",
"@leafygreen-ui/table": "^15.2.1",
"@leafygreen-ui/tabs": "^17.0.7",
"@leafygreen-ui/text-area": "^12.1.3",
"@leafygreen-ui/text-input": "^16.2.1",
"@leafygreen-ui/toast": "^8.1.1",
"@leafygreen-ui/toggle": "^12.1.3",
"@leafygreen-ui/tokens": "^4.0.0",
"@leafygreen-ui/tooltip": "^14.2.3",
"@leafygreen-ui/typography": "^22.2.2",
"@lg-chat/chat-window": "^4.1.5",
"@lg-chat/input-bar": "^10.1.0",
"@lg-chat/leafygreen-chat-provider": "^5.0.2",
"@lg-chat/lg-markdown": "^4.1.3",
"@lg-chat/message": "^8.1.0",
"@lg-chat/message-actions": "^1.1.2",
"@lg-chat/message-feed": "^7.0.2",
"@lg-chat/message-feedback": "^7.0.2",
"@lg-chat/message-prompts": "^4.0.5",
"@lg-chat/message-rating": "^5.0.2",
"@lg-chat/rich-links": "^4.0.0",
"@lg-chat/suggestions": "^0.2.3",
"@lg-chat/title-bar": "^4.0.7",
"@lg-chat/message": "^8.2.0",
"@mongodb-js/compass-context-menu": "^0.3.1",
"@mongodb-js/diagramming": "^2.2.1",
"@react-aria/interactions": "^3.9.1",
Expand All @@ -118,8 +105,8 @@
"react-window": "^1.8.6"
},
"devDependencies": {
"@emotion/css": "^11.11.2",
"@leafygreen-ui/lib": "^15.3.0",
"@emotion/css": "^11.13.5",
"@leafygreen-ui/lib": "^15.6.2",
"@mongodb-js/eslint-config-compass": "^1.4.12",
"@mongodb-js/mocha-config-compass": "^1.7.2",
"@mongodb-js/prettier-config-compass": "^1.2.9",
Expand Down
26 changes: 0 additions & 26 deletions packages/compass-components/scripts/patch-leafygreen-button.js
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions packages/compass-components/src/components/actions/dropdown-menu-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ export type DropdownMenuButtonProps<Action extends string> = {
activeAction?: Action;
'data-testid'?: string;
buttonText: string;
buttonProps: ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
buttonProps: Omit<ButtonProps, 'ref'> &
React.ButtonHTMLAttributes<HTMLButtonElement>;
hideOnNarrow?: boolean;
narrowBreakpoint?: string;
};
Expand Down Expand Up @@ -88,7 +89,8 @@ export function DropdownMenuButton<Action extends string>({
children: React.ReactNode;
}) => {
return (
<Button
<Button<'button'>
as="button"
ref={menuTriggerRef}
data-testid={dataTestId ? `${dataTestId}-show-actions` : undefined}
onClick={(evt) => {
Expand Down
22 changes: 9 additions & 13 deletions packages/compass-components/src/components/actions/small-icon-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { forwardRef } from 'react';
import { css, cx } from '@leafygreen-ui/emotion';
import { spacing } from '@leafygreen-ui/tokens';
import type { AccessibleIconButtonProps } from '@leafygreen-ui/icon-button';

import { IconButton } from '../leafygreen';

Expand Down Expand Up @@ -34,27 +35,22 @@ const buttonSizeStyle: Record<ItemActionButtonSize, string | undefined> = {
export type SmallIconButtonProps = {
glyph: React.ReactChild;
label: string;
title?: string;
size: ItemActionButtonSize;
onClick(evt: React.MouseEvent<HTMLButtonElement>): void;
} & Omit<React.HTMLProps<HTMLButtonElement>, 'size'>;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
} & Omit<
AccessibleIconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>,
'size' | 'onClick'
>;

export const SmallIconButton = forwardRef<
HTMLButtonElement,
SmallIconButtonProps
>(function SmallIconButton(
{ glyph, size, label, onClick, children, title, className, ...rest },
ref
export const SmallIconButton = forwardRef(function SmallIconButton(
{ glyph, size, label, children, className, ...rest }: SmallIconButtonProps,
ref: React.Ref<HTMLButtonElement>
) {
return (
<IconButton
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error leafygreen confuses TS a lot here
ref={ref}
className={cx(buttonSizeStyle[size], className)}
aria-label={label}
title={title}
onClick={onClick}
{...rest}
>
<span role="presentation" className={iconContainerStyle}>
Expand Down
Loading
Loading