MM-52365 - fix JS error banner (#23501)

* MM-52365 - fix js error banner

* add null type to bindings as an optional type

webapp/channels/src/packages/mattermost-redux/src/utils/apps.test.ts

@@ -5,7 +5,7 @@ import {AppBinding, AppCall, AppField, AppForm, AppSelectOption} from '@mattermo
 
 import {AppBindingLocations, AppFieldTypes} from 'mattermost-redux/constants/apps';
 
-import {cleanForm, cleanBinding} from './apps';
+import {cleanForm, cleanBinding, validateBindings} from './apps';
 
 describe('Apps Utils', () => {
     const basicCall: AppCall = {
@@ -1315,4 +1315,64 @@ describe('Apps Utils', () => {
             expect(inBinding).toEqual(outBinding);
         });
     });
+
+    describe('validateBindings', () => {
+        test('return validated binding when bindings are NOT empty', () => {
+            const outBinding: AppBinding = {
+                location: '/command',
+                bindings: [
+                    {
+                        app_id: 'app',
+                        location: '/command/loc1',
+                        label: 'loc1',
+                        bindings: [
+                            {
+                                app_id: 'app',
+                                location: '/command/loc1/loc11',
+                                label: 'same',
+                                form: {
+                                    submit: {
+                                        path: '/path',
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        app_id: 'app',
+                        location: '/command/loc2',
+                        label: 'loc2',
+                        form: {
+                            submit: {
+                                path: '/path',
+                            },
+                        },
+                    },
+                ],
+            } as AppBinding;
+
+            const bindings = validateBindings([outBinding]);
+            expect([outBinding]).toEqual(bindings);
+        });
+
+        test('return empty array when bindings are empty', () => {
+            const inBinding: AppBinding = {
+                location: '/command',
+                bindings: [] as AppBinding[],
+            } as AppBinding;
+
+            const bindings = validateBindings([inBinding]);
+            expect([]).toEqual(bindings);
+        });
+
+        test('return empty array when bindings is NULL', () => {
+            const inBinding: AppBinding = {
+                location: '/command',
+                bindings: null,
+            } as unknown as AppBinding;
+
+            const bindings = validateBindings([inBinding]);
+            expect([]).toEqual(bindings);
+        });
+    });
 });

webapp/channels/src/packages/mattermost-redux/src/utils/apps.ts

@@ -101,17 +101,24 @@ function cleanBindingRec(binding: AppBinding, topLocation: string, depth: number
     });
 }
 
-export function validateBindings(bindings: AppBinding[] = []): AppBinding[] {
+export function validateBindings(bindings: AppBinding[] | null = []): AppBinding[] {
-    const channelHeaderBindings = bindings?.filter((b) => b.location === AppBindingLocations.CHANNEL_HEADER_ICON);
+    if (!bindings || (bindings.length && bindings.length === 0)) {
-    const postMenuBindings = bindings?.filter((b) => b.location === AppBindingLocations.POST_MENU_ITEM);
+        return [];
-    const commandBindings = bindings?.filter((b) => b.location === AppBindingLocations.COMMAND);
+    }
+    const filterAndCleanBindings = (location: string): AppBinding[] => {
+        const filteredBindings = bindings.filter((b) => b.location === location);
+        if (filteredBindings?.length === 0) {
+            return [];
+        }
+        filteredBindings.forEach((b) => cleanBinding(b, location));
+        return filteredBindings.filter((b) => b.bindings?.length);
+    };
 
-    channelHeaderBindings.forEach((b) => cleanBinding(b, AppBindingLocations.CHANNEL_HEADER_ICON));
+    const channelHeaderBindings = filterAndCleanBindings(AppBindingLocations.CHANNEL_HEADER_ICON);
-    postMenuBindings.forEach((b) => cleanBinding(b, AppBindingLocations.POST_MENU_ITEM));
+    const postMenuBindings = filterAndCleanBindings(AppBindingLocations.POST_MENU_ITEM);
-    commandBindings.forEach((b) => cleanBinding(b, AppBindingLocations.COMMAND));
+    const commandBindings = filterAndCleanBindings(AppBindingLocations.COMMAND);
 
-    const hasBindings = (b: AppBinding) => b.bindings?.length;
+    return postMenuBindings.concat(channelHeaderBindings, commandBindings);
-    return postMenuBindings.filter(hasBindings).concat(channelHeaderBindings.filter(hasBindings), commandBindings.filter(hasBindings));
 }
 
 export function cleanForm(form?: AppForm) {