Skip to content

Commit

Permalink
fix reordering of slots function (plone#5840)
Browse files Browse the repository at this point in the history
  • Loading branch information
@steffenri
steffenri authored Mar 19, 2024
1 parent 6f49e38 commit 482bced
Show file tree
Hide file tree
Showing 3 changed files with 221 additions and 42 deletions.
1 change: 1 addition & 0 deletions packages/registry/news/5840.bugfix
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Fix slots reordering function for "before" and "after" keyword @steffenri
18 changes: 14 additions & 4 deletions packages/registry/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,11 +360,21 @@ class Config {
}
switch (action) {
case 'after':
result.splice(targetIdx, 0, removed);
break;
if (targetIdx < origin) {
result.splice(targetIdx + 1, 0, removed);
break;
} else {
result.splice(targetIdx, 0, removed);
break;
}
case 'before':
result.splice(targetIdx - 1, 0, removed);
break;
if (targetIdx > origin) {
result.splice(targetIdx - 1, 0, removed);
break;
} else {
result.splice(targetIdx, 0, removed);
break;
}
case 'last':
result.push(removed);
break;
Expand Down
244 changes: 206 additions & 38 deletions packages/registry/src/registry.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,24 +474,24 @@ describe('Slots registry', () => {
expect(config.getSlotComponents('toolbar')).toEqual(['edit', 'save']);
});

it('reorderSlotComponent - after', () => {
it('reorderSlotComponent - after (target after origin)', () => {
config.registerSlotComponent({
slot: 'toolbar',
name: 'save',
name: '1',
component: 'this is a toolbar save component with a true predicate',
predicates: [RouteConditionTrue('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: 'edit',
name: '2',
component: 'this is a toolbar component with a false predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: 'cancel',
name: '3',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
Expand All @@ -501,52 +501,42 @@ describe('Slots registry', () => {

config.registerSlotComponent({
slot: 'toolbar',
name: 'bold',
name: '4',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
ContentTypeConditionTrue(['News Item']),
],
});

expect(config.getSlotComponents('toolbar')).toEqual([
'save',
'edit',
'cancel',
'bold',
]);
expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
config.reorderSlotComponent({
slot: 'toolbar',
name: 'save',
name: '1',
action: 'after',
target: 'cancel',
target: '3',
});
expect(config.getSlotComponents('toolbar')).toEqual([
'edit',
'cancel',
'save',
'bold',
]);
expect(config.getSlotComponents('toolbar')).toEqual(['2', '3', '1', '4']);
});

it('reorderSlotComponent - before', () => {
it('reorderSlotComponent - after (target before origin)', () => {
config.registerSlotComponent({
slot: 'toolbar',
name: 'save',
name: '1',
component: 'this is a toolbar save component with a true predicate',
predicates: [RouteConditionTrue('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: 'edit',
name: '2',
component: 'this is a toolbar component with a false predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: 'cancel',
name: '3',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
Expand All @@ -556,32 +546,210 @@ describe('Slots registry', () => {

config.registerSlotComponent({
slot: 'toolbar',
name: 'bold',
name: '4',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
ContentTypeConditionTrue(['News Item']),
],
});

expect(config.getSlotComponents('toolbar')).toEqual([
'save',
'edit',
'cancel',
'bold',
]);
expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
// Reorder Slot with original position 1 before Slot with position 3
// Before reordering the positions should be ["1", "2", "3", "4"]
// After the reordering the positions should be ["2", "1", "3", "4"]
config.reorderSlotComponent({
slot: 'toolbar',
name: 'save',
name: '3',
action: 'after',
target: '1',
});

expect(config.getSlotComponents('toolbar')).toEqual(['1', '3', '2', '4']);
});

it('reorderSlotComponent - after (target = origin)', () => {
config.registerSlotComponent({
slot: 'toolbar',
name: '1',
component: 'this is a toolbar save component with a true predicate',
predicates: [RouteConditionTrue('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '2',
component: 'this is a toolbar component with a false predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '3',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
ContentTypeConditionTrue(['News Item']),
],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '4',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
ContentTypeConditionTrue(['News Item']),
],
});

expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
// Reorder Slot with original position 1 before Slot with position 3
// Before reordering the positions should be ["1", "2", "3", "4"]
// After the reordering the positions should be ["2", "1", "3", "4"]
config.reorderSlotComponent({
slot: 'toolbar',
name: '3',
action: 'after',
target: '3',
});

expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
});

it('reorderSlotComponent - before (target before origin)', () => {
config.registerSlotComponent({
slot: 'toolbar',
name: '1',
component: 'this is a toolbar save component with a true predicate',
predicates: [RouteConditionTrue('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '2',
component: 'this is a toolbar component with a false predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '3',
component: 'this is a toolbar edit component with true predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '4',
component: 'this is a toolbar edit component with true predicate',
predicates: [RouteConditionFalse('/de')],
});

expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
// Reorder Slot with original position 4 before Slot with position 3
// Before reordering the positions should be ["1", "2", "3", "4"]
// After the reordering the positions should be ["1", "2", "4", "3 "]
config.reorderSlotComponent({
slot: 'toolbar',
name: '3',
action: 'before',
target: 'cancel',
target: '1',
});
expect(config.getSlotComponents('toolbar')).toEqual([
'edit',
'save',
'cancel',
'bold',
]);

expect(config.getSlotComponents('toolbar')).toEqual(['3', '1', '2', '4']);
});

it('reorderSlotComponent - before (target after origin)', () => {
config.registerSlotComponent({
slot: 'toolbar',
name: '1',
component: 'this is a toolbar save component with a true predicate',
predicates: [RouteConditionTrue('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '2',
component: 'this is a toolbar component with a false predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '3',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
ContentTypeConditionTrue(['News Item']),
],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '4',
component: 'this is a toolbar edit component with true predicate',
predicates: [
RouteConditionTrue('/folder/path'),
ContentTypeConditionTrue(['News Item']),
],
});

expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
// Reorder Slot with original position 1 before Slot with position 3
// Before reordering the positions should be ["1", "2", "3", "4"]
// After the reordering the positions should be ["2", "1", "3", "4"]
config.reorderSlotComponent({
slot: 'toolbar',
name: '1',
action: 'before',
target: '3',
});

expect(config.getSlotComponents('toolbar')).toEqual(['2', '1', '3', '4']);
});

it('reorderSlotComponent - before (target = origin)', () => {
config.registerSlotComponent({
slot: 'toolbar',
name: '1',
component: 'this is a toolbar save component with a true predicate',
predicates: [RouteConditionTrue('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '2',
component: 'this is a toolbar component with a false predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '3',
component: 'this is a toolbar edit component with true predicate',
predicates: [RouteConditionFalse('/de')],
});

config.registerSlotComponent({
slot: 'toolbar',
name: '4',
component: 'this is a toolbar edit component with true predicate',
predicates: [RouteConditionFalse('/de')],
});

expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
// Reorder Slot with original position 4 before Slot with position 3
// Before reordering the positions should be ["1", "2", "3", "4"]
// After the reordering the positions should be ["1", "2", "4", "3 "]
config.reorderSlotComponent({
slot: 'toolbar',
name: '3',
action: 'before',
target: '3',
});

expect(config.getSlotComponents('toolbar')).toEqual(['1', '2', '3', '4']);
});

it('reorderSlotComponent - last', () => {
Expand Down

0 comments on commit 482bced

Please sign in to comment.