Skip to content
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

[Lens] Correctly use UserMessage longMessage as function #192492

Merged
merged 5 commits into from
Oct 14, 2024
Merged

[Lens] Correctly use UserMessage longMessage as function #192492

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
824f2f9
correctly use longMessage as function when need
markov00 Sep 10, 2024
b512718
Merge branch 'main' into 2024_09_10-fix_long_user_messages
markov00 Sep 26, 2024
1b8d5f9
Merge branch 'main' into 2024_09_10-fix_long_user_messages
markov00 Oct 10, 2024
18f4f3b
extract logic
markov00 Oct 10, 2024
5faf697
Merge branch 'main' into 2024_09_10-fix_long_user_messages
markov00 Oct 14, 2024
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
11 changes: 5 additions & 6 deletions x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,14 +164,13 @@ describe('application-level user messages', () => {
visualization: {} as Visualization,
visualizationState: { activeId: 'foo', state: {} },
};
const firstMessage = getApplicationUserMessages({ ...props, ...propsOverrides }).at(0);
const rtlRender = render(
<I18nProvider>
{
getApplicationUserMessages({
...props,
...propsOverrides,
})[0].longMessage as React.ReactNode
}
{firstMessage &&
(typeof firstMessage.longMessage === 'function'
? firstMessage.longMessage()
: firstMessage.longMessage)}
</I18nProvider>
);
return rtlRender;
Expand Down
8 changes: 2 additions & 6 deletions x-pack/plugins/lens/public/datasources/form_based/form_based.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3154,9 +3154,7 @@ describe('IndexPattern Data Source', () => {
values={
Object {
"position": 1,
"wrappedMessage": <React.Fragment>
error 1
</React.Fragment>,
"wrappedMessage": "error 1",
}
}
/>,
Expand All @@ -3177,9 +3175,7 @@ describe('IndexPattern Data Source', () => {
values={
Object {
"position": 1,
"wrappedMessage": <React.Fragment>
error 2
</React.Fragment>,
"wrappedMessage": "error 2",
}
}
/>,
Expand Down
5 changes: 4 additions & 1 deletion x-pack/plugins/lens/public/datasources/form_based/form_based.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -995,7 +995,10 @@ function getLayerErrorMessages(
defaultMessage="Layer {position} error: {wrappedMessage}"
values={{
position: index + 1,
wrappedMessage: <>{error.longMessage}</>,
wrappedMessage:
typeof error.longMessage === 'function'
? error.longMessage()
: error.longMessage,
}}
/>
),
Expand Down
30 changes: 22 additions & 8 deletions x-pack/plugins/lens/public/datasources/form_based/utils.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,15 @@ describe('indexpattern_datasource utils', () => {
);

expect(warningMessages).toHaveLength(1);
const { longMessage, ...rest } = warningMessages[0];

expect({ ...warningMessages[0], longMessage: '' }).toMatchSnapshot();
expect({ ...rest, longMessage: '' }).toMatchSnapshot();

render(<I18nProvider>{warningMessages[0].longMessage as React.ReactNode}</I18nProvider>);
render(
<I18nProvider>
{typeof longMessage === 'function' ? longMessage() : longMessage}
</I18nProvider>
);

expect(screen.getByTestId('lnsPrecisionWarningEnableAccuracy')).toBeInTheDocument();
await userEvent.click(screen.getByTestId('lnsPrecisionWarningEnableAccuracy'));
Expand All @@ -145,11 +150,14 @@ describe('indexpattern_datasource utils', () => {
);

expect(warningMessages).toHaveLength(1);
const { longMessage, ...rest } = warningMessages[0];

expect({ ...warningMessages[0], longMessage: '' }).toMatchSnapshot();
expect({ ...rest, longMessage: '' }).toMatchSnapshot();

const { container } = render(
<I18nProvider>{warningMessages[0].longMessage as React.ReactNode}</I18nProvider>
<I18nProvider>
{typeof longMessage === 'function' ? longMessage() : longMessage}
</I18nProvider>
);
expect(container).toHaveTextContent(
'might be an approximation. For more precise results, try increasing the number of Top Values or using Filters instead.'
Expand Down Expand Up @@ -178,18 +186,24 @@ describe('indexpattern_datasource utils', () => {
} as unknown as GenericIndexPatternColumn,
};
const setState = jest.fn();
const warnings = getPrecisionErrorWarningMessages(
const warningMessages = getPrecisionErrorWarningMessages(
datatableUtilitites,
state,
framePublicAPI,
docLinks,
setState
);

expect(warnings).toHaveLength(1);
expect({ ...warnings[0], longMessage: '' }).toMatchSnapshot();
expect(warningMessages).toHaveLength(1);
const { longMessage, ...rest } = warningMessages[0];

render(<I18nProvider>{warnings[0].longMessage as React.ReactNode}</I18nProvider>);
expect({ ...rest, longMessage: '' }).toMatchSnapshot();

render(
<I18nProvider>
{typeof longMessage === 'function' ? longMessage() : longMessage}
</I18nProvider>
);
await userEvent.click(screen.getByText('Rank by rarity'));
const stateSetter = setState.mock.calls[0][0];
const newState = stateSetter(state);
Expand Down
18 changes: 13 additions & 5 deletions x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,6 +518,7 @@ export function LayerPanel(props: LayerPanelProps) {
props?.getUserMessages?.('dimensionButton', {
dimensionId: columnId,
}) ?? [];
const firstMessage = messages.at(0);

return (
<DraggableDimensionButton
Expand Down Expand Up @@ -567,11 +568,18 @@ export function LayerPanel(props: LayerPanelProps) {
props.onRemoveDimension({ columnId: id, layerId });
removeButtonRef(id);
}}
message={{
severity: messages[0]?.severity,
content: (messages[0]?.shortMessage ||
messages[0]?.longMessage) as React.ReactNode,
}}
message={
firstMessage
? {
severity: firstMessage.severity,
content:
firstMessage.shortMessage ||
(typeof firstMessage.longMessage === 'function'
? firstMessage.longMessage()
: firstMessage.longMessage),
}
: undefined
}
>
{layerDatasource ? (
<>
Expand Down
4 changes: 3 additions & 1 deletion x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,9 @@ export function EditorFrame(props: EditorFrameProps) {
bannerMessages.length ? (
<ErrorBoundary onError={onError}>
<BannerWrapper
nodes={bannerMessages.map(({ longMessage }) => longMessage as React.ReactNode)}
nodes={bannerMessages.map(({ longMessage }) =>
typeof longMessage === 'function' ? longMessage() : longMessage
)}
/>
</ErrorBoundary>
) : undefined
Expand Down
7 changes: 6 additions & 1 deletion ...lugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,12 @@ export function WorkspaceErrors(props: Props) {
{activeError.longMessage ? (
<>
<EuiSpacer />
<EuiText size="s"> {activeError.longMessage as React.ReactNode}</EuiText>
<EuiText size="s">
{' '}
{typeof activeError.longMessage === 'function'
? activeError.longMessage()
: activeError.longMessage}
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
</EuiText>
</>
) : null}
</div>
Expand Down
12 changes: 8 additions & 4 deletions x-pack/plugins/lens/public/embeddable/embeddable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export interface ViewUnderlyingDataArgs {
}

function VisualizationErrorPanel({ errors, canEdit }: { errors: UserMessage[]; canEdit: boolean }) {
const showMore = errors.length > 1;
const firstError = errors.at(0);
const canFixInLens = canEdit && errors.some(({ fixableInEditor }) => fixableInEditor);
return (
<div className="lnsEmbeddedError">
Expand All @@ -261,10 +261,14 @@ function VisualizationErrorPanel({ errors, canEdit }: { errors: UserMessage[]; c
data-test-subj="embeddable-lens-failure"
body={
<>
{errors.length ? (
{firstError ? (
<>
<p>{errors[0].longMessage as React.ReactNode}</p>
{showMore && !canFixInLens ? (
<p>
{typeof firstError.longMessage === 'function'
? firstError.longMessage()
: firstError.longMessage}
</p>
{errors.length > 1 && !canFixInLens ? (
<p>
<FormattedMessage
id="xpack.lens.embeddable.moreErrors"
Expand Down
4 changes: 3 additions & 1 deletion x-pack/plugins/lens/public/embeddable/embeddable_info_badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,9 @@ export const EmbeddableFeatureBadge = ({ messages }: { messages: UserMessage[] }
</EuiTitle>
<ul className="lnsEmbeddablePanelFeatureList">
{messageGroup.map(({ longMessage }, i) => (
<Fragment key={`${uniqueId}-${i}`}>{longMessage as React.ReactNode}</Fragment>
<Fragment key={`${uniqueId}-${i}`}>
{typeof longMessage === 'function' ? longMessage() : longMessage}
</Fragment>
))}
</ul>
</aside>
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/lens/public/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ export interface UserMessage {
severity: 'error' | 'warning' | 'info';
hidePopoverIcon?: boolean;
shortMessage: string;
longMessage: string | React.ReactNode | ((closePopover: () => void) => React.ReactNode);
longMessage: string | React.ReactNode | ((closePopover?: () => void) => React.ReactNode);
fixableInEditor: boolean;
displayLocations: UserMessageDisplayLocation[];
}
Expand Down