Skip to content

Commit faee8db

Browse files
Merge branch 'main' into eui-v74.1.x
2 parents 2dc5efa + 5d4c880 commit faee8db

56 files changed

Lines changed: 574 additions & 230 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.github/CODEOWNERS

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1191,3 +1191,6 @@ packages/kbn-yarn-lock-validator @elastic/kibana-operations
11911191

11921192
# Design (at the bottom for specificity of SASS files)
11931193
**/*.scss @elastic/kibana-design
1194+
1195+
# Changes to translation files should not ping code reviewers
1196+
x-pack/plugins/translations/translations

packages/kbn-generate/src/commands/codeowners_command.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ const GENERATED_TRAILER = `
3030
3131
# Design (at the bottom for specificity of SASS files)
3232
**/*.scss @elastic/kibana-design
33+
34+
# Changes to translation files should not ping code reviewers
35+
x-pack/plugins/translations/translations
3336
`;
3437

3538
function normalizeDir(dirish: string): string {

src/plugins/controls/public/control_group/component/control_frame_component.tsx

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121

2222
import { FormattedMessage } from '@kbn/i18n-react';
2323
import { Markdown } from '@kbn/kibana-react-plugin/public';
24-
import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
24+
import { useReduxEmbeddableContext, FloatingActions } from '@kbn/presentation-util-plugin/public';
2525
import { ControlGroupReduxState } from '../types';
2626
import { pluginServices } from '../../services';
2727
import { EditControlButton } from '../editor/edit_control';
@@ -127,12 +127,7 @@ export const ControlFrame = ({
127127
}, [embeddable, embeddableRoot]);
128128

129129
const floatingActions = (
130-
<div
131-
className={classNames('controlFrameFloatingActions', {
132-
'controlFrameFloatingActions--twoLine': usingTwoLineLayout,
133-
'controlFrameFloatingActions--oneLine': !usingTwoLineLayout,
134-
})}
135-
>
130+
<>
136131
{!fatalError && embeddableType !== TIME_SLIDER_CONTROL && (
137132
<EuiToolTip content={ControlGroupStrings.floatingActions.getEditButtonTitle()}>
138133
<EditControlButton embeddableId={embeddableId} />
@@ -158,7 +153,7 @@ export const ControlFrame = ({
158153
color="danger"
159154
/>
160155
</EuiToolTip>
161-
</div>
156+
</>
162157
);
163158

164159
const embeddableParentClassNames = classNames('controlFrame__control', {
@@ -220,18 +215,27 @@ export const ControlFrame = ({
220215

221216
return (
222217
<>
223-
{embeddable && enableActions && floatingActions}
224-
<EuiFormRow
225-
data-test-subj="control-frame-title"
226-
fullWidth
227-
label={
228-
usingTwoLineLayout
229-
? title || ControlGroupStrings.emptyState.getTwoLineLoadingTitle()
230-
: undefined
231-
}
218+
<FloatingActions
219+
className={classNames('controlFrameFloatingActions', {
220+
'controlFrameFloatingActions--twoLine': usingTwoLineLayout,
221+
'controlFrameFloatingActions--oneLine': !usingTwoLineLayout,
222+
})}
223+
usingTwoLineLayout={usingTwoLineLayout}
224+
actions={floatingActions}
225+
isEnabled={embeddable && enableActions}
232226
>
233-
{form}
234-
</EuiFormRow>
227+
<EuiFormRow
228+
data-test-subj="control-frame-title"
229+
fullWidth
230+
label={
231+
usingTwoLineLayout
232+
? title || ControlGroupStrings.emptyState.getTwoLineLoadingTitle()
233+
: undefined
234+
}
235+
>
236+
{form}
237+
</EuiFormRow>
238+
</FloatingActions>
235239
</>
236240
);
237241
};

src/plugins/controls/public/control_group/control_group.scss

Lines changed: 19 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -181,48 +181,6 @@ $controlMinWidth: $euiSize * 14;
181181
}
182182
}
183183

184-
.controlFrameFloatingActions {
185-
visibility: hidden;
186-
opacity: 0;
187-
188-
// slower transition on hover leave in case the user accidentally stops hover
189-
transition: visibility .3s, opacity .3s;
190-
191-
z-index: 1;
192-
position: absolute;
193-
194-
&--oneLine {
195-
right: $euiSizeXS;
196-
top: -$euiSizeL;
197-
padding: $euiSizeXS;
198-
border-radius: $euiBorderRadius;
199-
background-color: $euiColorEmptyShade;
200-
box-shadow: 0 0 0 1px $euiColorLightShade;
201-
}
202-
203-
&--fatalError {
204-
right: $euiSizeXS;
205-
top: -$euiSizeL;
206-
padding: $euiSizeXS;
207-
border-radius: $euiBorderRadius;
208-
background-color: $euiColorEmptyShade;
209-
box-shadow: 0 0 0 1px $euiColorLightShade;
210-
}
211-
212-
&--twoLine {
213-
right: $euiSizeXS;
214-
top: -$euiSizeXS;
215-
}
216-
}
217-
218-
&:hover {
219-
.controlFrameFloatingActions {
220-
transition: visibility .1s, opacity .1s;
221-
visibility: visible;
222-
opacity: 1;
223-
}
224-
}
225-
226184
&-isDragging {
227185
.euiFormRow__labelWrapper {
228186
opacity: 0;
@@ -232,3 +190,22 @@ $controlMinWidth: $euiSize * 14;
232190
}
233191
}
234192
}
193+
194+
.controlFrameFloatingActions {
195+
z-index: 1;
196+
position: absolute;
197+
198+
&--oneLine {
199+
padding: $euiSizeXS;
200+
border-radius: $euiBorderRadius;
201+
background-color: $euiColorEmptyShade;
202+
box-shadow: 0 0 0 1px $euiColorLightShade;
203+
}
204+
205+
&--fatalError {
206+
padding: $euiSizeXS;
207+
border-radius: $euiBorderRadius;
208+
background-color: $euiColorEmptyShade;
209+
box-shadow: 0 0 0 1px $euiColorLightShade;
210+
}
211+
}

src/plugins/dashboard/public/dashboard_app/_dashboard_app.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
@import 'src/core/public/mixins';
2+
3+
.dshAppWrapper {
4+
@include kibanaFullBodyHeight();
5+
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
110
.dshUnsavedListingItem {
211
margin-top: $euiSizeM;
312
}

src/plugins/dashboard/public/dashboard_app/dashboard_app.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export function DashboardApp({
184184
}, [dashboardContainer, kbnUrlStateStorage]);
185185

186186
return (
187-
<>
187+
<div className={'dshAppWrapper'}>
188188
{showNoDataPage && (
189189
<DashboardAppNoDataPage onDataViewCreated={() => setShowNoDataPage(false)} />
190190
)}
@@ -204,6 +204,6 @@ export function DashboardApp({
204204
/>
205205
</>
206206
)}
207-
</>
207+
</div>
208208
);
209209
}

src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_editing_toolbar.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
* Side Public License, v 1.
77
*/
88

9-
import { EuiHorizontalRule } from '@elastic/eui';
109
import { METRIC_TYPE } from '@kbn/analytics';
1110
import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
1211
import {
@@ -19,6 +18,8 @@ import {
1918
import { BaseVisType, VisTypeAlias } from '@kbn/visualizations-plugin/public';
2019
import React from 'react';
2120
import { useCallback } from 'react';
21+
import { useEuiTheme } from '@elastic/eui';
22+
import { css } from '@emotion/react';
2223
import { dashboardReplacePanelActionStrings } from '../../dashboard_actions/_dashboard_actions_strings';
2324
import { DASHBOARD_APP_ID, DASHBOARD_UI_METRIC_ID } from '../../dashboard_constants';
2425
import { useDashboardContainerContext } from '../../dashboard_container/dashboard_container_renderer';
@@ -36,6 +37,7 @@ export function DashboardEditingToolbar() {
3637
embeddable: { getStateTransfer, getEmbeddableFactory },
3738
visualizations: { get: getVisualization, getAliases: getVisTypeAliases },
3839
} = pluginServices.getServices();
40+
const { euiTheme } = useEuiTheme();
3941

4042
const { embeddableInstance: dashboardContainer } = useDashboardContainerContext();
4143

@@ -178,8 +180,11 @@ export function DashboardEditingToolbar() {
178180
}
179181

180182
return (
181-
<>
182-
<EuiHorizontalRule margin="none" />
183+
<div
184+
css={css`
185+
padding: 0 ${euiTheme.size.s} ${euiTheme.size.s} ${euiTheme.size.s};
186+
`}
187+
>
183188
<SolutionToolbar isDarkModeEnabled={IS_DARK_THEME}>
184189
{{
185190
primaryActionButton: (
@@ -195,6 +200,6 @@ export function DashboardEditingToolbar() {
195200
extraButtons,
196201
}}
197202
</SolutionToolbar>
198-
</>
203+
</div>
199204
);
200205
}

src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_top_nav.tsx

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import {
1616
} from '@kbn/presentation-util-plugin/public';
1717
import { ViewMode } from '@kbn/embeddable-plugin/public';
1818
import type { DataView } from '@kbn/data-views-plugin/public';
19-
import type { TopNavMenuProps } from '@kbn/navigation-plugin/public';
2019

20+
import { EuiHorizontalRule } from '@elastic/eui';
2121
import {
2222
getDashboardTitle,
2323
leaveConfirmStrings,
@@ -67,7 +67,6 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
6767
} = pluginServices.getServices();
6868
const isLabsEnabled = uiSettings.get(UI_SETTINGS.ENABLE_LABS_UI);
6969
const { setHeaderActionMenu, onAppLeave } = useDashboardMountContext();
70-
7170
/**
7271
* Unpack dashboard state from redux
7372
*/
@@ -186,10 +185,9 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
186185
setIsLabsShown,
187186
});
188187

189-
const getNavBarProps = (): TopNavMenuProps => {
188+
const visibilityProps = useMemo(() => {
190189
const shouldShowNavBarComponent = (forceShow: boolean): boolean =>
191190
(forceShow || isChromeVisible) && !fullScreenMode;
192-
193191
const shouldShowFilterBar = (forceHide: boolean): boolean =>
194192
!forceHide && (filterManager.getFilters().length > 0 || !fullScreenMode);
195193

@@ -201,46 +199,15 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
201199
const showFilterBar = shouldShowFilterBar(Boolean(embedSettings?.forceHideFilterBar));
202200
const showQueryBar = showQueryInput || showDatePicker || showFilterBar;
203201
const showSearchBar = showQueryBar || showFilterBar;
204-
const topNavConfig = viewMode === ViewMode.EDIT ? editModeTopNavConfig : viewModeTopNavConfig;
205-
206-
const badges =
207-
hasUnsavedChanges && viewMode === ViewMode.EDIT
208-
? [
209-
{
210-
'data-test-subj': 'dashboardUnsavedChangesBadge',
211-
badgeText: unsavedChangesBadgeStrings.getUnsavedChangedBadgeText(),
212-
color: 'success',
213-
},
214-
]
215-
: undefined;
216202

217203
return {
218-
query,
219-
badges,
220-
savedQueryId,
204+
showTopNavMenu,
221205
showSearchBar,
222206
showFilterBar,
223-
showSaveQuery,
224207
showQueryInput,
225208
showDatePicker,
226-
screenTitle: title,
227-
useDefaultBehaviors: true,
228-
appName: LEGACY_DASHBOARD_APP_ID,
229-
visible: viewMode !== ViewMode.PRINT,
230-
indexPatterns: allDataViews,
231-
config: showTopNavMenu ? topNavConfig : undefined,
232-
setMenuMountPoint: embedSettings ? undefined : setHeaderActionMenu,
233-
className: fullScreenMode ? 'kbnTopNavMenu-isFullScreen' : undefined,
234-
onQuerySubmit: (_payload, isUpdate) => {
235-
if (isUpdate === false) {
236-
dashboardContainer.forceRefresh();
237-
}
238-
},
239-
onSavedQueryIdChange: (newId: string | undefined) => {
240-
dispatch(setSavedQueryId(newId));
241-
},
242209
};
243-
};
210+
}, [embedSettings, filterManager, fullScreenMode, isChromeVisible, viewMode]);
244211

245212
UseUnmount(() => {
246213
dashboardContainer.clearOverlays();
@@ -254,13 +221,52 @@ export function DashboardTopNav({ embedSettings, redirectTo }: DashboardTopNavPr
254221
ref={dashboardTitleRef}
255222
tabIndex={-1}
256223
>{`${getDashboardBreadcrumb()} - ${dashboardTitle}`}</h1>
257-
<TopNavMenu {...getNavBarProps()} />
224+
<TopNavMenu
225+
{...visibilityProps}
226+
query={query}
227+
screenTitle={title}
228+
useDefaultBehaviors={true}
229+
indexPatterns={allDataViews}
230+
savedQueryId={savedQueryId}
231+
showSaveQuery={showSaveQuery}
232+
appName={LEGACY_DASHBOARD_APP_ID}
233+
visible={viewMode !== ViewMode.PRINT}
234+
setMenuMountPoint={embedSettings || fullScreenMode ? undefined : setHeaderActionMenu}
235+
className={fullScreenMode ? 'kbnTopNavMenu-isFullScreen' : undefined}
236+
config={
237+
visibilityProps.showTopNavMenu
238+
? viewMode === ViewMode.EDIT
239+
? editModeTopNavConfig
240+
: viewModeTopNavConfig
241+
: undefined
242+
}
243+
badges={
244+
hasUnsavedChanges && viewMode === ViewMode.EDIT
245+
? [
246+
{
247+
'data-test-subj': 'dashboardUnsavedChangesBadge',
248+
badgeText: unsavedChangesBadgeStrings.getUnsavedChangedBadgeText(),
249+
color: 'success',
250+
},
251+
]
252+
: undefined
253+
}
254+
onQuerySubmit={(_payload, isUpdate) => {
255+
if (isUpdate === false) {
256+
dashboardContainer.forceRefresh();
257+
}
258+
}}
259+
onSavedQueryIdChange={(newId: string | undefined) => {
260+
dispatch(setSavedQueryId(newId));
261+
}}
262+
/>
258263
{viewMode !== ViewMode.PRINT && isLabsEnabled && isLabsShown ? (
259264
<PresentationUtilContextProvider>
260265
<LabsFlyout solutions={['dashboard']} onClose={() => setIsLabsShown(false)} />
261266
</PresentationUtilContextProvider>
262267
) : null}
263268
{viewMode === ViewMode.EDIT ? <DashboardEditingToolbar /> : null}
269+
<EuiHorizontalRule margin="none" />
264270
</>
265271
);
266272
}

src/plugins/dashboard/public/dashboard_container/_dashboard_container.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
@import './component/panel/index';
55
@import './component/viewport/index';
66

7-
.dashboardViewport {
8-
flex: 1;
7+
.dashboardContainer, .dashboardViewport {
98
display: flex;
9+
flex: 1;
1010
flex-direction: column;
1111
}
1212

src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@
3333
*/
3434
.dshLayout-isMaximizedPanel {
3535
height: 100% !important; /* 1. */
36-
width: 100%;
37-
position: absolute !important; /* 1 */
3836
}
3937

4038
/**

0 commit comments

Comments
 (0)