maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Re-style and re-order top menu buttons (#79206)

Browse source 
* Re-style and re-order top menu buttons

* Update snapshot due to removed fill prop

* Fix link order for Maps
This commit is contained in:
Ryan Keairns 2020-10-02 11:47:20 -05:00 committed by GitHub
parent 7afb8b4d7b
commit d9915fdee0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 204 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts
View file

@ -48,12 +48,12 @@ export function getTopNavConfig(
];
case ViewMode.EDIT:
return [
getCreateNewConfig(actions[TopNavIds.VISUALIZE]),
getSaveConfig(actions[TopNavIds.SAVE]),
getViewConfig(actions[TopNavIds.EXIT_EDIT_MODE]),
getAddConfig(actions[TopNavIds.ADD_EXISTING]),
getOptionsConfig(actions[TopNavIds.OPTIONS]),
getShareConfig(actions[TopNavIds.SHARE]),
getAddConfig(actions[TopNavIds.ADD_EXISTING]),
getViewConfig(actions[TopNavIds.EXIT_EDIT_MODE]),
getSaveConfig(actions[TopNavIds.SAVE]),
getCreateNewConfig(actions[TopNavIds.VISUALIZE]),
];
default:
return [];
@ -79,7 +79,9 @@ function getFullScreenConfig(action: NavAction) {
*/
function getEditConfig(action: NavAction) {
return {
emphasize: true,
id: 'edit',
iconType: 'pencil',
label: i18n.translate('dashboard.topNave.editButtonAriaLabel', {
defaultMessage: 'edit',
}),
@ -168,7 +170,7 @@ function getAddConfig(action: NavAction) {
function getCreateNewConfig(action: NavAction) {
return {
emphasize: true,
iconType: 'plusInCircle',
iconType: 'plusInCircleFilled',
id: 'addNew',
label: i18n.translate('dashboard.topNave.addNewButtonAriaLabel', {
defaultMessage: 'Create new',

1
src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap generated
View file

@ -2,7 +2,6 @@
exports[`TopNavMenu Should render emphasized item which should be clickable 1`] = `
<EuiButton
fill={true}
iconSide="right"
iconType="beaker"
isDisabled={false}

4
src/plugins/navigation/public/top_nav_menu/_index.scss
View file

@ -1,3 +1,7 @@
.kbnTopNavMenu {
margin-right: $euiSizeXS;
}
.kbnTopNavMenu > * > * {
// TEMP fix to adjust spacing between EuiHeaderList__list items
margin: 0 $euiSizeXS;

2
src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
View file

@ -48,7 +48,7 @@ export function TopNavMenuItem(props: TopNavMenuData) {
};
const btn = props.emphasize ? (
<EuiButton size="s" fill {...commonButtonProps}>
<EuiButton size="s" {...commonButtonProps}>
{upperFirst(props.label || props.id!)}
</EuiButton>
) : (

185
src/plugins/visualize/public/application/utils/get_top_nav_config.tsx
View file

@ -175,54 +175,61 @@ export const getTopNavConfig = (
};
const topNavMenu: TopNavMenuData[] = [
...(originatingApp && ((savedVis && savedVis.id) || embeddableId)
? [
{
id: 'saveAndReturn',
label: i18n.translate('visualize.topNavMenu.saveAndReturnVisualizationButtonLabel', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'check',
description: i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
{
defaultMessage: 'Finish editing visualization and return to the last app',
}
),
testId: 'visualizesaveAndReturnButton',
disableButton: hasUnappliedChanges,
tooltip() {
if (hasUnappliedChanges) {
return i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationDisabledButtonTooltip',
{
defaultMessage: 'Apply or Discard your changes before finishing',
}
);
}
{
id: 'inspector',
label: i18n.translate('visualize.topNavMenu.openInspectorButtonLabel', {
defaultMessage: 'inspect',
}),
description: i18n.translate('visualize.topNavMenu.openInspectorButtonAriaLabel', {
defaultMessage: 'Open Inspector for visualization',
}),
testId: 'openInspectorButton',
disableButton() {
return !embeddableHandler.hasInspector || !embeddableHandler.hasInspector();
},
run: openInspector,
tooltip() {
if (!embeddableHandler.hasInspector || !embeddableHandler.hasInspector()) {
return i18n.translate('visualize.topNavMenu.openInspectorDisabledButtonTooltip', {
defaultMessage: `This visualization doesn't support any inspectors.`,
});
}
},
},
{
id: 'share',
label: i18n.translate('visualize.topNavMenu.shareVisualizationButtonLabel', {
defaultMessage: 'share',
}),
description: i18n.translate('visualize.topNavMenu.shareVisualizationButtonAriaLabel', {
defaultMessage: 'Share Visualization',
}),
testId: 'shareTopNavButton',
run: (anchorElement) => {
if (share && !embeddableId) {
// TODO: support sharing in by-value mode
share.toggleShareContextMenu({
anchorElement,
allowEmbed: true,
allowShortUrl: visualizeCapabilities.createShortUrl,
shareableUrl: unhashUrl(window.location.href),
objectId: savedVis?.id,
objectType: 'visualization',
sharingData: {
title: savedVis?.title,
},
run: async () => {
const saveOptions = {
confirmOverwrite: false,
returnToOrigin: true,
};
if (
originatingApp === 'dashboards' &&
dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables &&
!savedVis
) {
return createVisReference();
}
return doSave(saveOptions);
},
},
]
: []),
isDirty: hasUnappliedChanges || hasUnsavedChanges,
});
}
},
// disable the Share button if no action specified
disableButton: !share || !!embeddableId,
},
...(visualizeCapabilities.save && !embeddableId
? [
{
id: 'save',
iconType: savedVis?.id && originatingApp ? undefined : 'save',
label:
savedVis?.id && originatingApp
? i18n.translate('visualize.topNavMenu.saveVisualizationAsButtonLabel', {
@ -303,56 +310,50 @@ export const getTopNavConfig = (
},
]
: []),
{
id: 'share',
label: i18n.translate('visualize.topNavMenu.shareVisualizationButtonLabel', {
defaultMessage: 'share',
}),
description: i18n.translate('visualize.topNavMenu.shareVisualizationButtonAriaLabel', {
defaultMessage: 'Share Visualization',
}),
testId: 'shareTopNavButton',
run: (anchorElement) => {
if (share && !embeddableId) {
// TODO: support sharing in by-value mode
share.toggleShareContextMenu({
anchorElement,
allowEmbed: true,
allowShortUrl: visualizeCapabilities.createShortUrl,
shareableUrl: unhashUrl(window.location.href),
objectId: savedVis?.id,
objectType: 'visualization',
sharingData: {
title: savedVis?.title,
...(originatingApp && ((savedVis && savedVis.id) || embeddableId)
? [
{
id: 'saveAndReturn',
label: i18n.translate('visualize.topNavMenu.saveAndReturnVisualizationButtonLabel', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'checkInCircleFilled',
description: i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
{
defaultMessage: 'Finish editing visualization and return to the last app',
}
),
testId: 'visualizesaveAndReturnButton',
disableButton: hasUnappliedChanges,
tooltip() {
if (hasUnappliedChanges) {
return i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationDisabledButtonTooltip',
{
defaultMessage: 'Apply or Discard your changes before finishing',
}
);
}
},
isDirty: hasUnappliedChanges || hasUnsavedChanges,
});
}
},
// disable the Share button if no action specified
disableButton: !share || !!embeddableId,
},
{
id: 'inspector',
label: i18n.translate('visualize.topNavMenu.openInspectorButtonLabel', {
defaultMessage: 'inspect',
}),
description: i18n.translate('visualize.topNavMenu.openInspectorButtonAriaLabel', {
defaultMessage: 'Open Inspector for visualization',
}),
testId: 'openInspectorButton',
disableButton() {
return !embeddableHandler.hasInspector || !embeddableHandler.hasInspector();
},
run: openInspector,
tooltip() {
if (!embeddableHandler.hasInspector || !embeddableHandler.hasInspector()) {
return i18n.translate('visualize.topNavMenu.openInspectorDisabledButtonTooltip', {
defaultMessage: `This visualization doesn't support any inspectors.`,
});
}
},
},
run: async () => {
const saveOptions = {
confirmOverwrite: false,
returnToOrigin: true,
};
if (
originatingApp === 'dashboards' &&
dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables &&
!savedVis
) {
return createVisReference();
}
return doSave(saveOptions);
},
},
]
: []),
];
return topNavMenu;

56
x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
View file

@ -30,33 +30,6 @@ export function getLensTopNavConfig(options: {
defaultMessage: 'Save',
});
if (showSaveAndReturn) {
topNavMenu.push({
label: i18n.translate('xpack.lens.app.saveAndReturn', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'check',
run: actions.saveAndReturn,
testId: 'lnsApp_saveAndReturnButton',
disableButton: !savingPermitted,
description: i18n.translate('xpack.lens.app.saveAndReturnButtonAriaLabel', {
defaultMessage: 'Save the current lens visualization and return to the last app',
}),
});
}
topNavMenu.push({
label: saveButtonLabel,
emphasize: !showSaveAndReturn,
run: actions.showSaveModal,
testId: 'lnsApp_saveButton',
description: i18n.translate('xpack.lens.app.saveButtonAriaLabel', {
defaultMessage: 'Save the current lens visualization',
}),
disableButton: !savingPermitted,
});
if (showCancel) {
topNavMenu.push({
label: i18n.translate('xpack.lens.app.cancel', {
@ -69,5 +42,34 @@ export function getLensTopNavConfig(options: {
}),
});
}
topNavMenu.push({
label: saveButtonLabel,
iconType: !showSaveAndReturn ? 'save' : undefined,
emphasize: !showSaveAndReturn,
run: actions.showSaveModal,
testId: 'lnsApp_saveButton',
description: i18n.translate('xpack.lens.app.saveButtonAriaLabel', {
defaultMessage: 'Save the current lens visualization',
}),
disableButton: !savingPermitted,
});
if (showSaveAndReturn) {
topNavMenu.push({
label: i18n.translate('xpack.lens.app.saveAndReturn', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'checkInCircleFilled',
run: actions.saveAndReturn,
testId: 'lnsApp_saveAndReturnButton',
disableButton: !savingPermitted,
description: i18n.translate('xpack.lens.app.saveAndReturnButtonAriaLabel', {
defaultMessage: 'Save the current lens visualization and return to the last app',
}),
});
}
return topNavMenu;
}

139
x-pack/plugins/maps/public/routing/routes/maps_app/top_nav_config.tsx
View file

@ -123,75 +123,6 @@ export function getTopNavConfig({
return { id: savedObjectId };
}
if (hasSaveAndReturnConfig) {
topNavConfigs.push({
id: 'saveAndReturn',
label: i18n.translate('xpack.maps.topNav.saveAndReturnButtonLabel', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'check',
run: () => {
onSave({
newTitle: savedMap.title ? savedMap.title : '',
newDescription: savedMap.description ? savedMap.description : '',
newCopyOnSave: false,
isTitleDuplicateConfirmed: false,
returnToOrigin: true,
onTitleDuplicate: () => {},
});
},
testId: 'mapSaveAndReturnButton',
});
}
if (hasWritePermissions) {
topNavConfigs.push({
id: 'save',
label: hasSaveAndReturnConfig
? i18n.translate('xpack.maps.topNav.saveAsButtonLabel', {
defaultMessage: 'Save as',
})
: i18n.translate('xpack.maps.topNav.saveMapButtonLabel', {
defaultMessage: `save`,
}),
description: i18n.translate('xpack.maps.topNav.saveMapDescription', {
defaultMessage: `Save map`,
}),
emphasize: !hasSaveAndReturnConfig,
testId: 'mapSaveButton',
disableButton() {
return isSaveDisabled;
},
tooltip() {
if (isSaveDisabled) {
return i18n.translate('xpack.maps.topNav.saveMapDisabledButtonTooltip', {
defaultMessage: 'Confirm or Cancel your layer changes before saving',
});
}
},
run: () => {
const saveModal = (
<SavedObjectSaveModalOrigin
originatingApp={originatingApp}
getAppNameFromId={stateTransfer?.getAppNameFromId}
onSave={onSave}
onClose={() => {}}
documentInfo={{
description: savedMap.description,
id: savedMap.id,
title: savedMap.title,
}}
objectType={i18n.translate('xpack.maps.topNav.saveModalType', {
defaultMessage: 'map',
})}
/>
);
showSaveModal(saveModal, getCoreI18n().Context);
},
});
}
topNavConfigs.push(
{
id: 'mapSettings',
@ -238,5 +169,75 @@ export function getTopNavConfig({
}
);
if (hasWritePermissions) {
topNavConfigs.push({
id: 'save',
iconType: hasSaveAndReturnConfig ? undefined : 'save',
label: hasSaveAndReturnConfig
? i18n.translate('xpack.maps.topNav.saveAsButtonLabel', {
defaultMessage: 'Save as',
})
: i18n.translate('xpack.maps.topNav.saveMapButtonLabel', {
defaultMessage: `save`,
}),
description: i18n.translate('xpack.maps.topNav.saveMapDescription', {
defaultMessage: `Save map`,
}),
emphasize: !hasSaveAndReturnConfig,
testId: 'mapSaveButton',
disableButton() {
return isSaveDisabled;
},
tooltip() {
if (isSaveDisabled) {
return i18n.translate('xpack.maps.topNav.saveMapDisabledButtonTooltip', {
defaultMessage: 'Confirm or Cancel your layer changes before saving',
});
}
},
run: () => {
const saveModal = (
<SavedObjectSaveModalOrigin
originatingApp={originatingApp}
getAppNameFromId={stateTransfer?.getAppNameFromId}
onSave={onSave}
onClose={() => {}}
documentInfo={{
description: savedMap.description,
id: savedMap.id,
title: savedMap.title,
}}
objectType={i18n.translate('xpack.maps.topNav.saveModalType', {
defaultMessage: 'map',
})}
/>
);
showSaveModal(saveModal, getCoreI18n().Context);
},
});
}
if (hasSaveAndReturnConfig) {
topNavConfigs.push({
id: 'saveAndReturn',
label: i18n.translate('xpack.maps.topNav.saveAndReturnButtonLabel', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'checkInCircleFilled',
run: () => {
onSave({
newTitle: savedMap.title ? savedMap.title : '',
newDescription: savedMap.description ? savedMap.description : '',
newCopyOnSave: false,
isTitleDuplicateConfirmed: false,
returnToOrigin: true,
onTitleDuplicate: () => {},
});
},
testId: 'mapSaveAndReturnButton',
});
}
return topNavConfigs;
}