@blaze-cms/react-page-builder 0.135.0-admin-updates.0 → 0.135.0-alpha.0

package/src/helpers/build-raw-query.js

@@ -15,7 +15,7 @@ const buildRawQuery = ({
   azOptions
 }) => {
   const {
-    searchValuesText,
+    searchValuesText: { must: searchValuesText, should: shouldValuesText = [] },
     searchValuesCheckboxSelectRange,
     searchValuesCheckboxOr
   } = searchValues;
@@ -47,7 +47,10 @@ const buildRawQuery = ({
       : finalValueIfNoCheckboxOrValues;
   } else {
     finalValue = {
-      must: [...searchValuesCheckboxSelectRange, { bool: { should: searchValuesTextCheckboxOr } }]
+      must: [
+        ...searchValuesCheckboxSelectRange,
+        { bool: { should: [...searchValuesTextCheckboxOr, ...shouldValuesText] } }
+      ]
     };
   }
   const mustValues = [
@@ -58,10 +61,20 @@ const buildRawQuery = ({
 
   buildAzFilter(azFilter, mustValues, azSortProperty);
 
+  const { should: baseShould = [], ...baseQuery } = buildRawQueryBase({
+    docType,
+    id,
+    filterValues,
+    filterOperator,
+    relations,
+    stringProps
+  });
+  const shouldValue = [...baseShould, ...shouldValuesText];
   const query = {
     bool: {
       must: mustValues,
-      ...buildRawQueryBase({ docType, id, filterValues, filterOperator, relations, stringProps })
+      should: shouldValue.length ? shouldValue : undefined,
+      ...baseQuery
     }
   };
   const azQueryBits = getExtraAzBits({ ...azOptions, azSortProperty, azFilter });

package/src/helpers/build-search-values-text.js

@@ -1,26 +1,29 @@
 const buildSearchValuesText = ({ propsToDisplay }, { search_term: searchTerm }) =>
-  propsToDisplay.reduce((acc, field, index) => {
-    if (field && searchTerm) {
-      if (index === 0) {
-        acc[index] = {
+  propsToDisplay.reduce(
+    (acc, field, index) => {
+      if (field && searchTerm) {
+        if (index === 0) {
+          acc.should.push({
+            match: {
+              pageBuilderIndexed: {
+                query: searchTerm,
+                fuzziness: 'AUTO'
+              }
+            }
+          });
+        }
+        acc.must.push({
           match: {
-            pageBuilderIndexed: {
+            [field]: {
               query: searchTerm,
               fuzziness: 'AUTO'
             }
           }
-        };
+        });
       }
-      acc[index + 1] = {
-        match: {
-          [field]: {
-            query: searchTerm,
-            fuzziness: 'AUTO'
-          }
-        }
-      };
-    }
-    return acc;
-  }, []);
+      return acc;
+    },
+    { should: [], must: [] }
+  );
 
 export default buildSearchValuesText;

package/tests/helpers/mocks.js

@@ -1006,7 +1006,7 @@ const ITEMS_TO_DISPLAY = [
 const MOCKED_ARGS = {
   docType: 'published_page',
   operator: 'should',
-  searchValuesText: [{ match: { name: 'search' } }, { match: { metaTitle: 'search' } }],
+  searchValuesText: { must: [{ match: { name: 'search' } }, { match: { metaTitle: 'search' } }] },
   searchValuesCheckboxSelectRange: [],
   searchValuesCheckboxOrEmpty: [],
   id: 'itemId',
@@ -1025,7 +1025,7 @@ const MOCKED_ARGS = {
   ]
 };
 
-const SEARCH_VALUES_TEXT_EMPTY = [];
+const SEARCH_VALUES_TEXT_EMPTY = { must: [] };
 
 const SEARCH_VALUES_CHECKBOX_SELECT = [
   { match: { metaDescription: 'test' } },
@@ -1034,7 +1034,11 @@ const SEARCH_VALUES_CHECKBOX_SELECT = [
 
 const AND_OPERATOR = 'must';
 
-const SEARCH_VALUES_TEXT = [{ match: { name: 'search' } }, { match: { metaTitle: 'search' } }];
+const EXAMPLE_SHOULD_TEXT = [{ match: { pageBuilderIndexed: 'search' } }];
+const SEARCH_VALUES_TEXT = {
+  should: EXAMPLE_SHOULD_TEXT,
+  must: [{ match: { name: 'search' } }, { match: { metaTitle: 'search' } }]
+};
 
 const SEARCH_PUBLISHED_MOCK = [
   {
@@ -1339,6 +1343,7 @@ const RAW_QUERY_ALL_SEARCH_VALUE_SAME_OPERATOR = {
         }
       }
     ],
+    should: EXAMPLE_SHOULD_TEXT,
     filter: {
       bool: {
         should: [{ match: { docType: 'published_page' } }],
@@ -1359,12 +1364,19 @@ const RAW_QUERY_ALL_SEARCH_VALUE_DIFFERENT_OPERATOR = {
             { match: { metaDescription: 'test' } },
             { match: { category: 'cat' } },
             {
-              bool: { should: [{ match: { name: 'search' } }, { match: { metaTitle: 'search' } }] }
+              bool: {
+                should: [
+                  { match: { name: 'search' } },
+                  { match: { metaTitle: 'search' } },
+                  ...EXAMPLE_SHOULD_TEXT
+                ]
+              }
             }
           ]
         }
       }
     ],
+    should: EXAMPLE_SHOULD_TEXT,
     filter: {
       bool: {
         should: [{ match: { docType: 'published_page' } }],
@@ -1391,6 +1403,7 @@ const RAW_QUERY_ALL_SEARCH_VALUE_SAME_OPERATOR_TEXT_CHECKBOX_HAS_OR_OPERATOR = {
         }
       }
     ],
+    should: EXAMPLE_SHOULD_TEXT,
     filter: {
       bool: {
         should: [{ match: { docType: 'published_page' } }],
@@ -1416,7 +1429,8 @@ const RAW_QUERY_ALL_SEARCH_VALUE_DIFFERENT_OPERATOR_TEXT_CHECKBOX_HAS_OR_OPERATO
                   { match: { name: 'search' } },
                   { match: { metaTitle: 'search' } },
                   { match: { name: 'someName' } },
-                  { match: { name: 'another' } }
+                  { match: { name: 'another' } },
+                  ...EXAMPLE_SHOULD_TEXT
                 ]
               }
             }
@@ -1424,6 +1438,7 @@ const RAW_QUERY_ALL_SEARCH_VALUE_DIFFERENT_OPERATOR_TEXT_CHECKBOX_HAS_OR_OPERATO
         }
       }
     ],
+    should: EXAMPLE_SHOULD_TEXT,
     filter: {
       bool: {
         should: [{ match: { docType: 'published_page' } }],

package/tests/unit/src/components/Banner/AdSlotRender.test.js

@@ -50,17 +50,17 @@ describe('Banner render component', () => {
       <AdSlotRender {...defaultProps} shouldShowBanner={false} />
     );
 
-    expect(container.childNodes[0].nodeName).toEqual('DIV');
-    expect(getByTestId('ad-slot')).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+    expect(container.childNodes[0].nodeName).toEqual('STYLE');
+    expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
     expect(() => getByTestId(slotTestId)).toThrow();
     expect(asFragment()).toMatchSnapshot();
   });
 
   describe('AdSlot loading', () => {
     it('should render AdSlot', () => {
-      const { asFragment, getByTestId } = render(<AdSlotRender {...defaultProps} />);
+      const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
       expect(getByTestId('adslot-test')).toBeDefined();
-      expect(getByTestId('ad-slot')).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+      expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
       expect(asFragment()).toMatchSnapshot();
     });
 
@@ -69,11 +69,16 @@ describe('Banner render component', () => {
       const adSlot = getByTestId(slotTestId);
 
       fireEvent.mouseOver(adSlot);
-      await waitFor(() => expect(container.childNodes[0]).toHaveClass('banner banner-loaded'));
+      await waitFor(() =>
+        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-loaded banner-sizeId')
+      );
+      expect(container.childNodes[0]).toHaveStyle('min-height: 250px');
       expect(asFragment()).toMatchSnapshot();
 
       fireEvent.mouseLeave(adSlot);
-      await waitFor(() => expect(container.childNodes[0]).toHaveClass('banner banner-empty'));
+      await waitFor(() =>
+        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-empty banner-sizeId')
+      );
       expect(asFragment()).toMatchSnapshot();
     });
   });

package/tests/unit/src/components/Banner/__snapshots__/AdSlotRender.test.js.snap

@@ -3,18 +3,13 @@
 exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 1`] = `
 <DocumentFragment>
   <div
-    class="banner  banner-loaded"
+    class="ad-slot ad-slot-loaded banner-sizeId"
+    style="min-height: 250px;"
   >
     <div
-      class="ad-slot ad-slot-loaded banner-sizeId"
-      data-testid="ad-slot"
-      style="min-height: 250px;"
-    >
-      <div
-        data-testid="adslot-test"
-        role="button"
-      />
-    </div>
+      data-testid="adslot-test"
+      role="button"
+    />
   </div>
 </DocumentFragment>
 `;
@@ -22,59 +17,44 @@ exports[`Banner render component AdSlot loading should change class and remove r
 exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 2`] = `
 <DocumentFragment>
   <div
-    class="banner  banner-empty"
+    class="ad-slot ad-slot-empty banner-sizeId"
+    style=""
   >
     <div
-      class="ad-slot ad-slot-empty banner-sizeId"
-      data-testid="ad-slot"
-      style=""
-    >
-      <div
-        data-testid="adslot-test"
-        role="button"
-      />
-    </div>
+      data-testid="adslot-test"
+      role="button"
+    />
   </div>
 </DocumentFragment>
 `;
 
 exports[`Banner render component AdSlot loading should render AdSlot 1`] = `
 <DocumentFragment>
-  <div
-    class="banner  banner-loading"
-  >
-    <style>
-      @media(min-width:320px){.banner-sizeId{min-height:100px;}
+  <style>
+    @media(min-width:320px){.banner-sizeId{min-height:100px;}
 @media(min-width:728px){.banner-sizeId{min-height:100px;}
 @media(min-width:970px){.banner-sizeId{min-height:250px;}
-    </style>
+  </style>
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  >
     <div
-      class="ad-slot ad-slot-loading banner-sizeId"
-      data-testid="ad-slot"
-    >
-      <div
-        data-testid="adslot-test"
-        role="button"
-      />
-    </div>
+      data-testid="adslot-test"
+      role="button"
+    />
   </div>
 </DocumentFragment>
 `;
 
 exports[`Banner render component should not render AdSlot if shouldShowBanner=false but should render styles and wrapper 1`] = `
 <DocumentFragment>
-  <div
-    class="banner  banner-loading"
-  >
-    <style>
-      @media(min-width:320px){.banner-sizeId{min-height:100px;}
+  <style>
+    @media(min-width:320px){.banner-sizeId{min-height:100px;}
 @media(min-width:728px){.banner-sizeId{min-height:100px;}
 @media(min-width:970px){.banner-sizeId{min-height:250px;}
-    </style>
-    <div
-      class="ad-slot ad-slot-loading banner-sizeId"
-      data-testid="ad-slot"
-    />
-  </div>
+  </style>
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  />
 </DocumentFragment>
 `;

package/tests/unit/src/components/Banner/__snapshots__/BannerRender.test.js.snap

@@ -2,14 +2,9 @@
 
 exports[`Banner render component should render 1`] = `
 <DocumentFragment>
+  <style />
   <div
-    class="banner  banner-loading"
-  >
-    <style />
-    <div
-      class="ad-slot ad-slot-loading banner-sizeId"
-      data-testid="ad-slot"
-    />
-  </div>
+    class="ad-slot ad-slot-loading banner-sizeId"
+  />
 </DocumentFragment>
 `;

package/tests/unit/src/components/DataSummary/helpers/build-loop-props-content.test.js

@@ -90,45 +90,4 @@ describe('buildLoopPropsContent helper function', () => {
     });
     expect.hasAssertions();
   });
-
-  it('should nested items with urls', () => {
-    const data = {
-      nestedLoopProp: [
-        {
-          nestedValue: 'abc',
-          url: 'http://blazecms.app/abc'
-        },
-        {
-          nestedValue: '123',
-          url: 'http://blazecms.app/123'
-        },
-        {
-          nestedValue: 'no url',
-          url: null
-        }
-      ]
-    };
-    const withUrl = buildLoopPropsContent(
-      mockedLoopProps,
-      [
-        {
-          bold: false,
-          enableLink: true,
-          label: '',
-          modifier: '',
-          prefix: '',
-          propertiesToDisplay: ['nestedLoopProp.nestedValue'],
-          shouldStrip: true
-        }
-      ],
-      0,
-      data
-    );
-
-    withUrl.forEach(([, value, url], index) => {
-      expect(value).toEqual(data.nestedLoopProp[index].nestedValue);
-      expect(url).toEqual(data.nestedLoopProp[index].url || '');
-    });
-    expect.hasAssertions();
-  });
 });

package/tests/unit/src/components/DataSummary/helpers/get-link-to-published-content.test.js

@@ -38,25 +38,4 @@ describe('get link to published content', () => {
     const result = getLinkToPublishedContent(publishedKey, props);
     expect(result).toEqual('');
   });
-
-  it('should return url from the currentValue', () => {
-    const currentValue = { url: 'currentValueUrl' };
-    const props = { content: [content] };
-    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
-    expect(result).toEqual(currentValue.url);
-  });
-
-  it('should return url from the currentValue even if falsey', () => {
-    const currentValue = { url: null };
-    const props = { content: [content] };
-    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
-    expect(result).toEqual(currentValue.url);
-  });
-
-  it('should not return url from the currentValue if not set', () => {
-    const currentValue = {};
-    const props = { content: [content] };
-    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
-    expect(result).toEqual(content.url);
-  });
 });

package/tests/unit/src/helpers/build-search-values-text.test.js

@@ -17,20 +17,31 @@ describe('build search values for text input', () => {
   const searchValuesNoQueryParams = buildSearchValuesText(textFilter, {});
 
   it('should always return an array', () => {
-    expect(Array.isArray(searchValues)).toEqual(true);
-    expect(Array.isArray(searchValuesEmpty)).toEqual(true);
+    [searchValues, searchValuesEmpty].forEach(searchValue => {
+      expect(Array.isArray(searchValues.should)).toEqual(true);
+      expect(Array.isArray(searchValues.must)).toEqual(true);
+    });
+  });
+
+  it('should have no filters set', () => {
+    [searchValues, searchValuesEmpty].forEach(searchValue => {
+      expect(searchValuesEmpty.should.length).toEqual(0);
+      expect(searchValuesEmpty.must.length).toEqual(0);
+    });
   });
 
   it('should return an array with correct data', () => {
-    const searchArray = [
-      { match: { pageBuilderIndexed: { query: 'something', fuzziness: 'AUTO' } } },
-      { match: { name: { query: 'something', fuzziness: 'AUTO' } } },
-      { match: { metaTitle: { query: 'something', fuzziness: 'AUTO' } } }
-    ];
+    const searchArray = {
+      should: [{ match: { pageBuilderIndexed: { query: 'something', fuzziness: 'AUTO' } } }],
+      must: [
+        { match: { name: { query: 'something', fuzziness: 'AUTO' } } },
+        { match: { metaTitle: { query: 'something', fuzziness: 'AUTO' } } }
+      ]
+    };
     expect(searchValues).toEqual(searchArray);
-    expect(searchValuesEmpty).toEqual([]);
-    expect(searchValues.length).toBe(3);
-    expect(searchValuesEmpty.length).toBe(0);
-    expect(searchValuesNoQueryParams.length).toBe(0);
+    expect(searchValuesEmpty).toEqual({ should: [], must: [] });
+    expect(searchValues.must.length).toBe(2);
+    expect(searchValuesEmpty.must.length).toBe(0);
+    expect(searchValuesNoQueryParams.must.length).toBe(0);
   });
 });

package/tests/unit/src/components/PlaceholderIcon/__snapshots__/index.test.js.snap

@@ -1,87 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Placeholder component should render PlaceholderIcon 1`] = `
-<DocumentFragment>
-  <div
-    class="editor-view__placeholder"
-    data-testid="placeholder-icon"
-  >
-    <svg
-      height="25px"
-      version="1.1"
-      viewBox="0 0 20 20"
-      width="25px"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <title>
-        card
-      </title>
-      <g
-        fill="none"
-        fill-rule="evenodd"
-        id="Icons"
-        stroke="none"
-        stroke-width="1"
-      >
-        <g
-          id="card"
-          transform="translate(-259, -214)"
-        >
-          <g
-            transform="translate(259, 214)"
-          >
-            <g
-              id="Group-7"
-              transform="translate(1, 1)"
-            >
-              <path
-                d="M1.07,10 C3.04212623,8.18723771 4.14171262,7.28085657 4.36875916,7.28085657 C4.79707626,7.28085657 7,9 7.5,9 C8.40867615,9 12.0764465,4.56171314 12.9,4.56171314 C13.4490356,4.56171314 14.8390356,5.81447543 17.07,8.32"
-                fill-rule="nonzero"
-                id="Path-3"
-                stroke="none"
-                stroke-width="1.3"
-              />
-              <path
-                d="M5.00003877,4.07973585 C5.00003879,3.4834142 5.50109477,3 6.11917864,3 C6.73726251,3 7.2383185,3.4834142 7.2383185,4.07973585 C7.2383185,4.6760575 6.73726252,5.15947172 6.11917864,5.15947172 C5.82268209,5.15728623 5.53857972,5.04442179 5.32645457,4.84454876 C5.11586241,4.64208328 4.99827309,4.36656405 5.00003877,4.07973585 Z"
-                fill="#899BBC"
-                fill-rule="nonzero"
-                id="Path"
-              />
-              <path
-                d="M3.375,14.625 C3.375,14.3143398 3.62683983,14.0625 3.9375,14.0625 L14.0625,14.0625 C14.3731602,14.0625 14.625,14.3143398 14.625,14.625 C14.625,14.9356602 14.3731602,15.1875 14.0625,15.1875 L3.9375,15.1875 C3.62683983,15.1875 3.375,14.9356602 3.375,14.625 Z"
-                fill="#899BBC"
-                fill-rule="nonzero"
-                id="Shape"
-              />
-              <rect
-                height="16.7"
-                id="Rectangle"
-                rx="2"
-                stroke="#899BBC"
-                stroke-width="1.3"
-                width="16.7"
-                x="0.65"
-                y="0.65"
-              />
-              <line
-                id="Line-2"
-                stroke="#899BBC"
-                stroke-linecap="square"
-                stroke-width="1.3"
-                x1="1"
-                x2="16.5625"
-                y1="11.8125"
-                y2="11.8125"
-              />
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-    <span>
-      card
-    </span>
-  </div>
-</DocumentFragment>
-`;

package/tests/unit/src/components/PlaceholderIcon/index.test.js

@@ -1,20 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render } from '@blaze-cms/tools/test-helpers/test-functions';
-
-import PlaceholderIcon from '../../../../../../blaze-plugin-page-builder-ui/src/components/EditorView/PlaceholderIcon';
-import { CardIcon } from '../../../../../../blaze-plugin-page-builder-ui/src/Icons';
-
-const mockedProps = {
-  type: 'card',
-  icon: CardIcon
-};
-
-describe('Placeholder component', () => {
-  it('should render PlaceholderIcon', () => {
-    const { asFragment, getByTestId } = render(PlaceholderIcon, mockedProps);
-    expect(getByTestId('placeholder-icon')).toBeDefined();
-    expect(asFragment()).toMatchSnapshot();
-  });
-});