Skip to content

Commit

Permalink
Fix panel action sorting
Browse files Browse the repository at this point in the history
  • Loading branch information
@cqliu1
cqliu1 committed Apr 2, 2024
1 parent d88bac0 commit 92c887b
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 32 deletions.
62 changes: 31 additions & 31 deletions src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@ import { PresentableGrouping } from '@kbn/ui-actions-browser';

const createTestAction = ({
type,
dispayName,
displayName,
order,
grouping = undefined,
disabled,
}: {
type?: string;
dispayName: string;
displayName: string;
order?: number;
grouping?: PresentableGrouping;
disabled?: boolean;
}) =>
createAction({
id: type as string,
type,
getDisplayName: () => dispayName,
getDisplayName: () => displayName,
order,
execute: async () => {},
grouping,
Expand All @@ -47,27 +47,27 @@ test('sorts items in DESC order by "order" field first, then by display name', a
createTestAction({
order: 1,
type: 'foo',
dispayName: 'a-1',
displayName: 'a-1',
}),
createTestAction({
order: 2,
type: 'foo',
dispayName: 'a-2',
displayName: 'a-2',
}),
createTestAction({
order: 3,
type: 'foo',
dispayName: 'a-3',
displayName: 'a-3',
}),
createTestAction({
order: 2,
type: 'foo',
dispayName: 'b-2',
displayName: 'b-2',
}),
createTestAction({
order: 2,
type: 'foo',
dispayName: 'c-2',
displayName: 'c-2',
}),
].sort(() => 0.5 - Math.random());

Expand Down Expand Up @@ -133,7 +133,7 @@ test('can build menu with one action', async () => {
actions: [
{
action: createTestAction({
dispayName: 'Foo',
displayName: 'Foo',
}),
context: {},
trigger: {
Expand Down Expand Up @@ -162,11 +162,11 @@ test('orders items according to "order" field', async () => {
const actions = [
createTestAction({
order: 1,
dispayName: 'Foo',
displayName: 'Foo',
}),
createTestAction({
order: 2,
dispayName: 'Bar',
displayName: 'Bar',
}),
];
const menu = await buildContextMenuForActions({
Expand All @@ -179,11 +179,11 @@ test('orders items according to "order" field', async () => {
const actions2 = [
createTestAction({
order: 2,
dispayName: 'Bar',
displayName: 'Bar',
}),
createTestAction({
order: 1,
dispayName: 'Foo',
displayName: 'Foo',
}),
];
const menu2 = await buildContextMenuForActions({
Expand All @@ -197,19 +197,19 @@ test('orders items according to "order" field', async () => {
test('hides items behind in "More" submenu if there are more than 4 actions', async () => {
const actions = [
createTestAction({
dispayName: 'Foo 1',
displayName: 'Foo 1',
}),
createTestAction({
dispayName: 'Foo 2',
displayName: 'Foo 2',
}),
createTestAction({
dispayName: 'Foo 3',
displayName: 'Foo 3',
}),
createTestAction({
dispayName: 'Foo 4',
displayName: 'Foo 4',
}),
createTestAction({
dispayName: 'Foo 5',
displayName: 'Foo 5',
}),
];
const menu = await buildContextMenuForActions({
Expand Down Expand Up @@ -257,16 +257,16 @@ test('hides items behind in "More" submenu if there are more than 4 actions', as
test('separates grouped items from main items with a separator', async () => {
const actions = [
createTestAction({
dispayName: 'Foo 1',
displayName: 'Foo 1',
}),
createTestAction({
dispayName: 'Foo 2',
displayName: 'Foo 2',
}),
createTestAction({
dispayName: 'Foo 3',
displayName: 'Foo 3',
}),
createTestAction({
dispayName: 'Foo 4',
displayName: 'Foo 4',
grouping: [
{
id: 'testGroup',
Expand Down Expand Up @@ -319,16 +319,16 @@ test('separates grouped items from main items with a separator', async () => {
test('separates multiple groups each with its own separator', async () => {
const actions = [
createTestAction({
dispayName: 'Foo 1',
displayName: 'Foo 1',
}),
createTestAction({
dispayName: 'Foo 2',
displayName: 'Foo 2',
}),
createTestAction({
dispayName: 'Foo 3',
displayName: 'Foo 3',
}),
createTestAction({
dispayName: 'Foo 4',
displayName: 'Foo 4',
grouping: [
{
id: 'testGroup',
Expand All @@ -337,7 +337,7 @@ test('separates multiple groups each with its own separator', async () => {
],
}),
createTestAction({
dispayName: 'Foo 5',
displayName: 'Foo 5',
grouping: [
{
id: 'testGroup2',
Expand Down Expand Up @@ -405,7 +405,7 @@ test('separates multiple groups each with its own separator', async () => {
test('does not add separator for first grouping if there are no main items', async () => {
const actions = [
createTestAction({
dispayName: 'Foo 4',
displayName: 'Foo 4',
grouping: [
{
id: 'testGroup',
Expand All @@ -414,7 +414,7 @@ test('does not add separator for first grouping if there are no main items', asy
],
}),
createTestAction({
dispayName: 'Foo 5',
displayName: 'Foo 5',
grouping: [
{
id: 'testGroup2',
Expand Down Expand Up @@ -467,11 +467,11 @@ test('does not add separator for first grouping if there are no main items', asy
test('it creates disabled actions', async () => {
const actions = [
createTestAction({
dispayName: 'Foo 4',
displayName: 'Foo 4',
disabled: true,
}),
createTestAction({
dispayName: 'Foo 5',
displayName: 'Foo 5',
}),
];
const menu = await buildContextMenuForActions({
Expand Down
6 changes: 5 additions & 1 deletion src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,11 @@ export async function buildContextMenuForActions({
for (const panel of Object.values(panels)) {
const items = panel.items.filter(Boolean) as ItemDescriptor[];
panel.items = items.sort(
({ _order: orderA }, { _order: orderB }) => (orderB || 0) - (orderA || 0)
({ _order: orderA, _title: titleA }, { _order: orderB, _title: titleB }) => {
const orderComparison = (orderB || 0) - (orderA || 0);
if (orderComparison !== 0) return orderComparison;
return (titleA || '').localeCompare(titleB || '');
}
);
}

Expand Down

0 comments on commit 92c887b

Please sign in to comment.