[Bugfix] Search and category filter sorting bug (magento#3888)

* Fix category filter sorting and filtering * Fix formatting
brendanfalkowski · Jun 22, 2022 · 80db006 · 80db006
1 parent a9f0639
commit 80db006
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 2 deletions.
diff --git a/packages/peregrine/lib/talons/FilterModal/__tests__/helpers.spec.js b/packages/peregrine/lib/talons/FilterModal/__tests__/helpers.spec.js
@@ -171,4 +171,74 @@ describe('#sortFiltersArray', () => {
             ]
         `);
     });
+    test('returns sorted filters array with entry containing category_uid attribute code', () => {
+        const initialFiltersArray = [
+            {
+                attribute_code: 'code_c',
+                label: 'C - Label',
+                position: 0
+            },
+            {
+                attribute_code: 'code_b',
+                label: 'B - Label',
+                position: 0
+            },
+            {
+                attribute_code: 'code_f',
+                label: 'Label - F',
+                position: 20
+            },
+            {
+                attribute_code: 'category_uid',
+                label: 'label',
+                position: null
+            },
+            {
+                attribute_code: 'code_e',
+                label: 'Label - E',
+                position: 10
+            },
+            {
+                attribute_code: 'code_a',
+                label: 'A - Label',
+                position: 0
+            }
+        ];
+        const sortedFilters = sortFiltersArray(initialFiltersArray);
+
+        expect(sortedFilters).toMatchInlineSnapshot(`
+            Array [
+              Object {
+                "attribute_code": "category_uid",
+                "label": "label",
+                "position": null,
+              },
+              Object {
+                "attribute_code": "code_a",
+                "label": "A - Label",
+                "position": 0,
+              },
+              Object {
+                "attribute_code": "code_b",
+                "label": "B - Label",
+                "position": 0,
+              },
+              Object {
+                "attribute_code": "code_c",
+                "label": "C - Label",
+                "position": 0,
+              },
+              Object {
+                "attribute_code": "code_e",
+                "label": "Label - E",
+                "position": 10,
+              },
+              Object {
+                "attribute_code": "code_f",
+                "label": "Label - F",
+                "position": 20,
+              },
+            ]
+        `);
+    });
 });
diff --git a/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterModal.spec.js b/packages/peregrine/lib/talons/FilterModal/__tests__/useFilterModal.spec.js
@@ -46,6 +46,9 @@ jest.mock('@apollo/client', () => {
                 {
                     name: 'category_id'
                 },
+                {
+                    name: 'category_uid'
+                },
                 {
                     name: 'foo'
                 },
@@ -94,6 +97,20 @@ const defaultProps = {
                 }
             ]
         },
+        {
+            attribute_code: 'category_uid',
+            label: 'Category 2',
+            options: [
+                {
+                    label: 'Bottoms',
+                    value: '28'
+                },
+                {
+                    label: 'Tops',
+                    value: '19'
+                }
+            ]
+        },
         {
             attribute_code: 'foo',
             label: 'Foo',
@@ -167,12 +184,15 @@ describe('#useFilterModal', () => {
         createTestInstance(<Component />);
         const { filterNames } = log.mock.calls[0][0];
         expect(filterNames.get('category_id')).toBeTruthy();
+        expect(filterNames.get('category_uid')).toBeTruthy();
     });
 
     it('only renders filters that are valid and enabled', () => {
         createTestInstance(<Component />);
         const { filterNames } = log.mock.calls[0][0];
         expect(filterNames.get('foo')).toBeTruthy();
+        expect(filterNames.get('category_id')).toBeFalsy();
+        expect(filterNames.get('category_uid')).toBeFalsy();
     });
 
     it('renders boolean filters', () => {

diff --git a/packages/peregrine/lib/talons/FilterModal/helpers.js b/packages/peregrine/lib/talons/FilterModal/helpers.js
@@ -111,10 +111,16 @@ export const getFiltersFromSearch = initialValue => {
 export const sortFiltersArray = initialArray => {
     return initialArray.sort((a, b) => {
         // Place Category filter first
-        if (a['attribute_code'] === 'category_id') {
+        if (
+            a['attribute_code'] === 'category_id' ||
+            a['attribute_code'] === 'category_uid'
+        ) {
             return -1;
         }
-        if (b['attribute_code'] === 'category_id') {
+        if (
+            b['attribute_code'] === 'category_id' ||
+            b['attribute_code'] === 'category_uid'
+        ) {
             return 1;
         }
 

diff --git a/packages/peregrine/lib/talons/FilterModal/useFilterModal.js b/packages/peregrine/lib/talons/FilterModal/useFilterModal.js
@@ -55,6 +55,7 @@ export const useFilterModal = props => {
         // Disable category filtering when not on a search page.
         if (pathname !== '/search.html') {
             disabled.add('category_id');
+            disabled.add('category_uid');
         }
 
         return disabled;

diff --git a/packages/peregrine/lib/talons/FilterSidebar/__tests__/useFilterSidebar.spec.js b/packages/peregrine/lib/talons/FilterSidebar/__tests__/useFilterSidebar.spec.js
@@ -46,6 +46,9 @@ jest.mock('@apollo/client', () => {
                 {
                     name: 'category_id'
                 },
+                {
+                    name: 'category_uid'
+                },
                 {
                     name: 'foo'
                 },
@@ -94,6 +97,20 @@ const defaultProps = {
                 }
             ]
         },
+        {
+            attribute_code: 'category_uid',
+            label: 'Category 2',
+            options: [
+                {
+                    label: 'Bottoms',
+                    value: '28'
+                },
+                {
+                    label: 'Tops',
+                    value: '19'
+                }
+            ]
+        },
         {
             attribute_code: 'foo',
             label: 'Foo',
@@ -167,12 +184,15 @@ describe('#useFilterSidebar', () => {
         createTestInstance(<Component />);
         const { filterNames } = log.mock.calls[0][0];
         expect(filterNames.get('category_id')).toBeTruthy();
+        expect(filterNames.get('category_uid')).toBeTruthy();
     });
 
     it('only renders filters that are valid and enabled', () => {
         createTestInstance(<Component />);
         const { filterNames } = log.mock.calls[0][0];
         expect(filterNames.get('foo')).toBeTruthy();
+        expect(filterNames.get('category_id')).toBeFalsy();
+        expect(filterNames.get('category_uid')).toBeFalsy();
     });
 
     it('writes filter state to history when "isApplying"', () => {

diff --git a/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js b/packages/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js
@@ -45,6 +45,7 @@ export const useFilterSidebar = props => {
         // Disable category filtering when not on a search page.
         if (pathname !== '/search.html') {
             disabled.add('category_id');
+            disabled.add('category_uid');
         }
 
         return disabled;