Skip to content

Commit

Permalink
[Lens] Quick Function Incompatability Indicator Getting Cut Off (#160046
Browse files Browse the repository at this point in the history 
)

## Summary

Fixes #152520

Before 
<img width="285" alt="Screenshot 2023-06-20 at 17 39 47"
src="https://github.com/elastic/kibana/assets/4283304/6391050a-4105-437b-9b2e-91f8e8718038">

After
<img width="289" alt="Screenshot 2023-06-20 at 17 40 51"
src="https://github.com/elastic/kibana/assets/4283304/f8069ead-b20b-4898-ab59-59061e6a2a17">

Also fixed broken theme and missing I18nProvider from the extra action
that has a separate mounting point.
<img width="1150" alt="Screenshot 2023-06-21 at 09 54 41"
src="https://github.com/elastic/kibana/assets/4283304/0079c777-125c-4173-8b76-389ca28a38b1">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@mbondyra @kibanamachine
mbondyra and kibanamachine authored Jun 21, 2023
1 parent b6adcce commit b4624a9
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 175 deletions.
13 changes: 11 additions & 2 deletions x-pack/plugins/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -429,8 +429,16 @@ export function DimensionEditor(props: DimensionEditorProps) {
} else if (!compatibleWithCurrentField) {
label = (
<EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
<EuiFlexItem grow={false} style={{ marginRight: euiTheme.size.xs }}>
{label}
<EuiFlexItem grow={false} style={{ marginRight: euiTheme.size.xs, minWidth: 0 }}>
<span
css={css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`}
>
{label}
</span>
</EuiFlexItem>
{shouldDisplayDots && (
<EuiFlexItem grow={false}>
Expand Down Expand Up @@ -502,6 +510,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
helpPopoverContainer.current = null;
}
}}
theme={props.core.theme}
>
<HelpComponent />
</WrappingHelpPopover>
Expand Down
39 changes: 24 additions & 15 deletions x-pack/plugins/lens/public/datasources/form_based/help_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ import {
EuiText,
} from '@elastic/eui';
import './help_popover.scss';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
import { I18nProvider } from '@kbn/i18n-react';
import type { ThemeServiceStart } from '@kbn/core/public';

export const HelpPopoverButton = ({
children,
Expand Down Expand Up @@ -79,30 +82,36 @@ export const WrappingHelpPopover = ({
closePopover,
isOpen,
title,
theme,
}: {
anchorPosition?: EuiWrappingPopoverProps['anchorPosition'];
button: EuiWrappingPopoverProps['button'];
children: ReactNode;
closePopover: EuiWrappingPopoverProps['closePopover'];
isOpen: EuiWrappingPopoverProps['isOpen'];
title?: string;
theme: ThemeServiceStart;
}) => {
return (
<EuiWrappingPopover
anchorPosition={anchorPosition}
button={button}
className="lnsHelpPopover"
closePopover={closePopover}
isOpen={isOpen}
ownFocus
panelClassName="lnsHelpPopover__panel"
panelPaddingSize="none"
>
{title && <EuiPopoverTitle paddingSize="m">{title}</EuiPopoverTitle>}
<KibanaThemeProvider theme$={theme.theme$}>
<I18nProvider>
<EuiWrappingPopover
anchorPosition={anchorPosition}
button={button}
className="lnsHelpPopover"
closePopover={closePopover}
isOpen={isOpen}
ownFocus
panelClassName="lnsHelpPopover__panel"
panelPaddingSize="none"
>
{title && <EuiPopoverTitle paddingSize="m">{title}</EuiPopoverTitle>}

<EuiText className="lnsHelpPopover__content" size="s">
{children}
</EuiText>
</EuiWrappingPopover>
<EuiText className="lnsHelpPopover__content" size="s">
{children}
</EuiText>
</EuiWrappingPopover>
</I18nProvider>
</KibanaThemeProvider>
);
};
158 changes: 82 additions & 76 deletions x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,17 +379,21 @@ export function getTextBasedDatasource({
}

render(
<DimensionTrigger
id={props.columnId}
color={customLabel && selectedField ? 'primary' : 'danger'}
dataTestSubj="lns-dimensionTrigger-textBased"
label={
customLabel ??
i18n.translate('xpack.lens.textBasedLanguages.missingField', {
defaultMessage: 'Missing field',
})
}
/>,
<KibanaThemeProvider theme$={core.theme.theme$}>
<I18nProvider>
<DimensionTrigger
id={props.columnId}
color={customLabel && selectedField ? 'primary' : 'danger'}
dataTestSubj="lns-dimensionTrigger-textBased"
label={
customLabel ??
i18n.translate('xpack.lens.textBasedLanguages.missingField', {
defaultMessage: 'Missing field',
})
}
/>{' '}
</I18nProvider>
</KibanaThemeProvider>,
domElement
);
},
Expand Down Expand Up @@ -421,73 +425,75 @@ export function getTextBasedDatasource({
});
render(
<KibanaThemeProvider theme$={core.theme.theme$}>
<EuiFormRow
data-test-subj="text-based-languages-field-selection-row"
label={i18n.translate('xpack.lens.textBasedLanguages.chooseField', {
defaultMessage: 'Field',
})}
fullWidth
className="lnsIndexPatternDimensionEditor--padded"
>
<FieldSelect
existingFields={updatedFields}
selectedField={selectedField}
onChoose={(choice) => {
const meta = fields.find((f) => f.name === choice.field)?.meta;
const newColumn = {
columnId: props.columnId,
fieldName: choice.field,
meta,
};
return props.setState(
!selectedField
? {
...props.state,
layers: {
...props.state.layers,
[props.layerId]: {
...props.state.layers[props.layerId],
columns: [...props.state.layers[props.layerId].columns, newColumn],
allColumns: [
...props.state.layers[props.layerId].allColumns,
newColumn,
],
<I18nProvider>
<EuiFormRow
data-test-subj="text-based-languages-field-selection-row"
label={i18n.translate('xpack.lens.textBasedLanguages.chooseField', {
defaultMessage: 'Field',
})}
fullWidth
className="lnsIndexPatternDimensionEditor--padded"
>
<FieldSelect
existingFields={updatedFields}
selectedField={selectedField}
onChoose={(choice) => {
const meta = fields.find((f) => f.name === choice.field)?.meta;
const newColumn = {
columnId: props.columnId,
fieldName: choice.field,
meta,
};
return props.setState(
!selectedField
? {
...props.state,
layers: {
...props.state.layers,
[props.layerId]: {
...props.state.layers[props.layerId],
columns: [...props.state.layers[props.layerId].columns, newColumn],
allColumns: [
...props.state.layers[props.layerId].allColumns,
newColumn,
],
},
},
},
}
: {
...props.state,
layers: {
...props.state.layers,
[props.layerId]: {
...props.state.layers[props.layerId],
columns: props.state.layers[props.layerId].columns.map((col) =>
col.columnId !== props.columnId
? col
: { ...col, fieldName: choice.field, meta }
),
allColumns: props.state.layers[props.layerId].allColumns.map((col) =>
col.columnId !== props.columnId
? col
: { ...col, fieldName: choice.field, meta }
),
}
: {
...props.state,
layers: {
...props.state.layers,
[props.layerId]: {
...props.state.layers[props.layerId],
columns: props.state.layers[props.layerId].columns.map((col) =>
col.columnId !== props.columnId
? col
: { ...col, fieldName: choice.field, meta }
),
allColumns: props.state.layers[props.layerId].allColumns.map((col) =>
col.columnId !== props.columnId
? col
: { ...col, fieldName: choice.field, meta }
),
},
},
},
}
);
}}
/>
</EuiFormRow>
{props.dataSectionExtra && (
<div
style={{
paddingLeft: euiThemeVars.euiSize,
paddingRight: euiThemeVars.euiSize,
}}
>
{props.dataSectionExtra}
</div>
)}
}
);
}}
/>
</EuiFormRow>
{props.dataSectionExtra && (
<div
style={{
paddingLeft: euiThemeVars.euiSize,
paddingRight: euiThemeVars.euiSize,
}}
>
{props.dataSectionExtra}
</div>
)}
</I18nProvider>
</KibanaThemeProvider>,
domElement
);
Expand Down
Loading

0 comments on commit b4624a9

Please sign in to comment.