Re-style and re-order top menu buttons (#79206)
* 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:
parent
7afb8b4d7b
commit
d9915fdee0
|
@ -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',
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
exports[`TopNavMenu Should render emphasized item which should be clickable 1`] = `
|
||||
<EuiButton
|
||||
fill={true}
|
||||
iconSide="right"
|
||||
iconType="beaker"
|
||||
isDisabled={false}
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
.kbnTopNavMenu {
|
||||
margin-right: $euiSizeXS;
|
||||
}
|
||||
|
||||
.kbnTopNavMenu > * > * {
|
||||
// TEMP fix to adjust spacing between EuiHeaderList__list items
|
||||
margin: 0 $euiSizeXS;
|
||||
|
|
|
@ -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>
|
||||
) : (
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue