Skip to content

Commit

Permalink
[Lens] Migrate away from EuiPageTemplate/EuiPageContent (elastic#142367)
Browse files Browse the repository at this point in the history 
* [Lens] Migrate away from EuiPageTemplate/EuiPageContent

Closes: elastic#139905

* fix FF issue

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
@alexwizp @kibanamachine @WafaaNasr
2 people authored and WafaaNasr committed Oct 11, 2022
1 parent 88313f3 commit f656de8
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 83 deletions.
6 changes: 3 additions & 3 deletions ...ns/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React from 'react';
import { EuiPageContentBody_Deprecated as EuiPageContentBody, EuiText } from '@elastic/eui';
import { EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import { UiActionsStart, VISUALIZE_GEO_FIELD_TRIGGER } from '@kbn/ui-actions-plugin/public';
Expand Down Expand Up @@ -45,7 +45,7 @@ export function GeoFieldWorkspacePanel(props: Props) {
}

return (
<EuiPageContentBody className="lnsWorkspacePanelWrapper__pageContentBody">
<div className="lnsWorkspacePanelWrapper__pageContentBody">
<EuiText className="lnsWorkspacePanel__emptyContent" textAlign="center" size="s">
<div>
<h2>
Expand All @@ -72,6 +72,6 @@ export function GeoFieldWorkspacePanel(props: Props) {
</DragDrop>
</div>
</EuiText>
</EuiPageContentBody>
</div>
);
}
5 changes: 1 addition & 4 deletions ...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
EuiText,
EuiButtonEmpty,
EuiLink,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiButton,
EuiSpacer,
EuiTextColor,
Expand Down Expand Up @@ -618,9 +617,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
value={dropProps.value}
order={dropProps.order}
>
<EuiPageContentBody className="lnsWorkspacePanelWrapper__pageContentBody">
{renderWorkspaceContents()}
</EuiPageContentBody>
<div className="lnsWorkspacePanelWrapper__pageContentBody">{renderWorkspaceContents()}</div>
</DragDrop>
);
};
Expand Down
154 changes: 78 additions & 76 deletions ...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import './workspace_panel_wrapper.scss';

import React, { useCallback } from 'react';
import {
EuiPageContent_Deprecated as EuiPageContent,
EuiPageSection,
EuiPageTemplate,
EuiFlexGroup,
EuiFlexItem,
EuiButton,
Expand Down Expand Up @@ -117,92 +118,93 @@ export function WorkspacePanelWrapper({
warningMessages.push(...requestWarnings);
}
return (
<>
<EuiPageTemplate direction="row" grow={true} offset={0} minHeight={0} responsive={[]}>
{!(isFullscreen && (autoApplyEnabled || warningMessages?.length)) && (
<EuiFlexGroup
alignItems="flexEnd"
gutterSize="s"
direction="row"
className={classNames('lnsWorkspacePanelWrapper__toolbar', {
'lnsWorkspacePanelWrapper__toolbar--fullscreen': isFullscreen,
})}
responsive={false}
>
{!isFullscreen && (
<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
<EuiFlexItem grow={false}>
<ChartSwitch
data-test-subj="lnsChartSwitcher"
visualizationMap={visualizationMap}
datasourceMap={datasourceMap}
framePublicAPI={framePublicAPI}
/>
</EuiFlexItem>

{activeVisualization && activeVisualization.renderToolbar && (
<EuiPageSection grow={false} paddingSize="none" color="transparent">
<EuiFlexGroup
alignItems="flexEnd"
gutterSize="s"
direction="row"
className={classNames('lnsWorkspacePanelWrapper__toolbar', {
'lnsWorkspacePanelWrapper__toolbar--fullscreen': isFullscreen,
})}
responsive={false}
>
{!isFullscreen && (
<EuiFlexItem>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
<EuiFlexItem grow={false}>
<NativeRenderer
render={activeVisualization.renderToolbar}
nativeProps={{
frame: framePublicAPI,
state: visualizationState,
setState: setVisualizationState,
}}
<ChartSwitch
data-test-subj="lnsChartSwitcher"
visualizationMap={visualizationMap}
datasourceMap={datasourceMap}
framePublicAPI={framePublicAPI}
/>
</EuiFlexItem>

{activeVisualization && activeVisualization.renderToolbar && (
<EuiFlexItem grow={false}>
<NativeRenderer
render={activeVisualization.renderToolbar}
nativeProps={{
frame: framePublicAPI,
state: visualizationState,
setState: setVisualizationState,
}}
/>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
)}

<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
{warningMessages?.length ? (
<EuiFlexItem grow={false}>
<WarningsPopover>{warningMessages}</WarningsPopover>
</EuiFlexItem>
) : null}

{!autoApplyEnabled && (
<EuiFlexItem grow={false}>
<EuiButton
disabled={autoApplyEnabled || changesApplied}
fill
className={
'lnsWorkspacePanelWrapper__applyButton ' +
DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS
}
iconType="checkInCircleFilled"
onClick={() => dispatchLens(applyChanges())}
size="m"
data-test-subj="lnsApplyChanges__toolbar"
minWidth="auto"
>
<FormattedMessage
id="xpack.lens.editorFrame.applyChangesLabel"
defaultMessage="Apply changes"
/>
</EuiButton>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
)}

<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
{warningMessages?.length ? (
<EuiFlexItem grow={false}>
<WarningsPopover>{warningMessages}</WarningsPopover>
</EuiFlexItem>
) : null}

{!autoApplyEnabled && (
<EuiFlexItem grow={false}>
<EuiButton
disabled={autoApplyEnabled || changesApplied}
fill
className={
'lnsWorkspacePanelWrapper__applyButton ' +
DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS
}
iconType="checkInCircleFilled"
onClick={() => dispatchLens(applyChanges())}
size="m"
data-test-subj="lnsApplyChanges__toolbar"
minWidth="auto"
>
<FormattedMessage
id="xpack.lens.editorFrame.applyChangesLabel"
defaultMessage="Apply changes"
/>
</EuiButton>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexGroup>
</EuiPageSection>
)}

<EuiPageContent
className={classNames('lnsWorkspacePanelWrapper', {
'lnsWorkspacePanelWrapper--fullscreen': isFullscreen,
})}
color="transparent"
hasBorder={false}
hasShadow={false}
<EuiPageSection
grow={true}
paddingSize="none"
contentProps={{
className: classNames('lnsWorkspacePanelWrapper', {
'lnsWorkspacePanelWrapper--fullscreen': isFullscreen,
}),
}}
>
<WorkspaceTitle />
{children}
</EuiPageContent>
</>
</EuiPageSection>
</EuiPageTemplate>
);
}

0 comments on commit f656de8

Please sign in to comment.