fix: correctly remove items and layout elements if they are desync (#175

)
gravity-ui · Aug 21, 2024 · 93b7278 · 93b7278
1 parent 2d76466
commit 93b7278
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 7 deletions.
diff --git a/src/utils/__tests__/update-manager.test.ts b/src/utils/__tests__/update-manager.test.ts
@@ -190,6 +190,151 @@ beforeEach(() => {
 });
 
 describe('UpdateManager', () => {
+    describe('addItem', () => {
+        it('add new item', () => {
+            expect(
+                UpdateManager.addItem({
+                    item: {
+                        data: {},
+                        type: 'widget',
+                    },
+                    namespace: 'default',
+                    layout: {h: 4, w: 4, x: 0, y: 0},
+                    config: config,
+                }),
+            ).toEqual({
+                ...config,
+                salt: '0.09852189776033704',
+                counter: 15,
+                items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ],
+                layout: [...config.layout, {h: 4, w: 4, x: 0, y: 32, i: 'EZ'}],
+            });
+        });
+
+        it('add new item excludeIds', () => {
+            expect(
+                UpdateManager.addItem({
+                    item: {
+                        data: {},
+                        type: 'widget',
+                    },
+                    namespace: 'default',
+                    layout: {h: 4, w: 4, x: 0, y: 0},
+                    config: config,
+                    options: {
+                        excludeIds: ['EZ'],
+                    },
+                }),
+            ).toEqual({
+                ...config,
+                salt: '0.09852189776033704',
+                counter: 16,
+                items: [
+                    ...config.items,
+                    {
+                        id: '1n',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ],
+                layout: [...config.layout, {h: 4, w: 4, x: 0, y: 32, i: '1n'}],
+            });
+        });
+
+        it('add new item with layout update', () => {
+            const updateLayout = [
+                {h: 4, i: 'al', w: 4, x: 8, y: 4},
+                {h: 16, i: 'Q8', w: 12, x: 12, y: 4},
+                {h: 2, i: 'L5', w: 8, x: 0, y: 6},
+                {h: 2, i: 'C8', w: 8, x: 10, y: 34},
+                {h: 2, i: 'lko', w: 8, x: 0, y: 16},
+                {h: 2, i: 'qY', w: 8, x: 0, y: 28},
+            ];
+
+            expect(
+                UpdateManager.addItem({
+                    item: {
+                        data: {},
+                        type: 'widget',
+                    },
+                    namespace: 'default',
+                    layout: {h: 4, w: 12, x: 0, y: 0},
+                    config: config,
+                    options: {
+                        updateLayout,
+                    },
+                }),
+            ).toEqual({
+                ...config,
+                salt: '0.09852189776033704',
+                counter: 15,
+                items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ],
+                layout: [...updateLayout, {h: 4, w: 12, x: 0, y: 0, i: 'EZ'}],
+            });
+        });
+    });
+
+    describe('removeItem', () => {
+        it('remove item by id', () => {
+            const deleteId = 'lko';
+
+            expect(
+                UpdateManager.removeItem({id: deleteId, config, itemsStateAndParams: {}}),
+            ).toEqual({
+                config: {
+                    ...config,
+                    items: config.items.filter(({id}) => id !== deleteId),
+                    layout: config.layout.filter(({i}) => i !== deleteId),
+                },
+                itemsStateAndParams: {
+                    __meta__: {queue: [], version: 2},
+                },
+            });
+        });
+
+        it('remove item when items and layout not sorted', () => {
+            const deleteId = 'lko';
+            const configCopy = {
+                ...config,
+                layout: config.layout.reverse(),
+            };
+
+            expect(
+                UpdateManager.removeItem({
+                    id: deleteId,
+                    config: configCopy,
+                    itemsStateAndParams: {},
+                }),
+            ).toEqual({
+                config: {
+                    ...config,
+                    items: config.items.filter(({id}) => id !== deleteId),
+                    layout: config.layout.filter(({i}) => i !== deleteId),
+                },
+                itemsStateAndParams: {
+                    __meta__: {queue: [], version: 2},
+                },
+            });
+        });
+    });
+
     describe('changeStateAndParams', () => {
         it('control adds params to empty itemsStateAndParams: common control', () => {
             expect(

diff --git a/src/utils/register-manager.ts b/src/utils/register-manager.ts
@@ -7,8 +7,8 @@ interface RegisterManagerDefaultLayout {
     y: number;
     w: number;
     h: number;
-    minW: number;
-    minH: number;
+    minW?: number;
+    minH?: number;
 }
 
 export type RegisterManagerPluginLayout = RegisterManagerDefaultLayout & PluginDefaultLayout;

diff --git a/src/utils/update-manager.ts b/src/utils/update-manager.ts
@@ -390,13 +390,13 @@ export class UpdateManager {
         namespace = DEFAULT_NAMESPACE,
         layout,
         config,
-        options,
+        options = {},
     }: {
         item: AddConfigItem;
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options: SetNewItemOptions;
+        options?: SetNewItemOptions;
     }) {
         const salt = config.salt;
 
@@ -440,12 +440,12 @@ export class UpdateManager {
         item,
         namespace = DEFAULT_NAMESPACE,
         config,
-        options,
+        options = {},
     }: {
         item: ConfigItem;
         namespace: string;
         config: Config;
-        options: SetItemOptions;
+        options?: SetItemOptions;
     }) {
         const itemIndex = config.items.findIndex(({id}) => item.id === id);
 
@@ -471,6 +471,7 @@ export class UpdateManager {
             return removeItemVersion1({id, config, itemsStateAndParams});
         }
         const itemIndex = config.items.findIndex((item) => item.id === id);
+        const layoutIndex = config.layout.findIndex((item) => item.i === id);
         const item = config.items[itemIndex];
         let itemIds = [id];
         if (isItemWithTabs(item)) {
@@ -488,7 +489,7 @@ export class UpdateManager {
                     $splice: [[itemIndex, 1]],
                 },
                 layout: {
-                    $splice: [[itemIndex, 1]],
+                    $splice: [[layoutIndex, 1]],
                 },
                 connections: {
                     $set: connections,