@blaze-cms/react-page-builder 0.130.0-admin-updates.4 → 0.130.0-admin-updates.8

package/src/components/SearchFilterSort/helpers/handle-sort-update.js

@@ -5,6 +5,10 @@ import updateSort from './update-sort';
 const handleSortUpdate = (router, value, query, url, selectLabel) => {
   const queryWithoutSort = {};
   const routerOptions = { shallow: true, scroll: false };
+
+  const { asPath } = router;
+  const hashBit = asPath.split('#')[1];
+  const parsedHash = hashBit ? `#${hashBit}` : '';
   Object.keys(query).forEach(key => {
     if (key.indexOf(PAGINATION_QUERY) !== -1) return;
     if (key !== SORTBY && key !== SORT) queryWithoutSort[key] = query[key];
@@ -13,10 +17,10 @@ const handleSortUpdate = (router, value, query, url, selectLabel) => {
     const stringifiedQuery = stringify(queryWithoutSort);
 
     return stringifiedQuery
-      ? router.push(`/Resolver`, `${url}?${stringifiedQuery}`, routerOptions)
-      : router.push(`/Resolver`, url, routerOptions);
+      ? router.push(`/Resolver`, `${url}?${stringifiedQuery}${parsedHash}`, routerOptions)
+      : router.push(`/Resolver`, `${url}${parsedHash}`, routerOptions);
   }
-  const updatedSortUrl = updateSort(value, queryWithoutSort, url);
+  const updatedSortUrl = updateSort(value, queryWithoutSort, url, parsedHash);
   return router.push('/Resolver', updatedSortUrl, routerOptions);
 };
 

package/src/components/SearchFilterSort/helpers/update-sort.js

@@ -1,10 +1,10 @@
 import { stringify } from 'query-string';
 
-const updateSort = (value, query, url) => {
+const updateSort = (value, query, url, hashBit = '') => {
   const [newSortBy, newSort] = value.split(':');
   const updatedQuery = { ...query, sortby: newSortBy, sort: newSort };
   const parsedQuery = stringify(updatedQuery);
-  return `${url}?${parsedQuery}`;
+  return `${url}?${parsedQuery}${hashBit}`;
 };
 
 export default updateSort;

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

@@ -44,19 +44,21 @@ const buildPropsQuery = (entitySchema, extraProps = [], cardOptions = null, link
 const buildComplexProps = (
   shouldAddCategoryProps,
   props,
-  { relations = [], dynamicProperties = {} },
+  { relations = [], dynamicProperties = {}, properties = {} },
   linkProps
 ) =>
   Object.keys(props).map(base => {
     const nestedProps = props[base];
     const hasLink = !!linkProps.find(linkProp => linkProp.includes(base));
+    const matchingProperty = !!properties[base];
     const matchingRelation = relations.find(({ localField }) => localField === base);
     const matchingDynamicProp = Object.keys(dynamicProperties).find(
       dynamicKey => dynamicKey === base
     );
 
     if (matchingRelation && !nestedProps.includes('id')) nestedProps.push('id');
-    if (hasLink && (!!matchingRelation || !!matchingDynamicProp)) nestedProps.push('url');
+    if (hasLink && (!!matchingProperty || !!matchingRelation || !!matchingDynamicProp))
+      nestedProps.push('url');
     const jointNestedProps = nestedProps.join(',');
     if (base === 'category' && shouldAddCategoryProps)
       return `${base}{${jointNestedProps}, ${categoryProps}}`;

package/src/helpers/get-wrapped-value-with-link.js

@@ -6,13 +6,16 @@ const getWrappedValueWithLink = (value, link, keyPrefix = '') => {
     const arrayResults = value.map((arrValue, index) => {
       const { keyField, url } = arrValue;
       const keyValue = arrValue[keyField];
+
       const isLastItem = index === value.length - 1;
-      const keyFieldValue = isLastItem ? keyValue : keyValue.concat(',');
+      const keyFieldValue = isLastItem ? keyValue : <>{keyValue}, </>;
 
       return url ? (
-        <BlazeLink key={[keyPrefix, index].join('-')} href={url}>{`${keyFieldValue} `}</BlazeLink>
+        <BlazeLink key={[keyPrefix, index].join('-')} href={url}>
+          {<>{keyFieldValue} </>}
+        </BlazeLink>
       ) : (
-        `${keyFieldValue} `
+        <>{keyFieldValue} </>
       );
     });
 

package/src/helpers/index.js

@@ -51,3 +51,4 @@ export { default as getParsedPropValues } from './get-parsed-prop-values';
 export { default as getSanitizedPropValues } from './get-sanitized-prop-values';
 export { default as appendImages } from './append-images';
 export { default as parseTextBlock } from './parse-TextBlock';
+export { default as processDataSummaryValue } from './process-data-summary-value';

package/src/helpers/parse-props-to-display.js

@@ -4,35 +4,39 @@ import isObject from './is-object';
 import getParsedPropValues from './get-parsed-prop-values';
 import getSanitizedPropValues from './get-sanitized-prop-values';
 import { BOLD_TAG, BLANK_SPACE_UNICODE_STRING } from '../constants';
+import processDataSummaryValue from './process-data-summary-value';
 
 // TODO this helper should be removed if database is wiped clean and all elements change to new props struc
 const parsePropsToDisplay = (props = {}, propsToDisplay = []) => {
   if (!isObject(propsToDisplay[0])) return at(props, propsToDisplay).filter(Boolean);
 
-  return propsToDisplay.map(
-    ({ bold, propertiesToDisplay, prefix, suffix, shouldStrip, enableLink }, currentIndex) => {
-      const Wrapper = bold ? BOLD_TAG : Fragment;
+  return propsToDisplay.map((options, currentIndex) => {
+    const { bold, propertiesToDisplay, prefix, suffix, shouldStrip, enableLink } = options;
+    const Wrapper = bold ? BOLD_TAG : Fragment;
 
-      const parsedPropValues = getParsedPropValues({
-        propertiesToDisplay,
-        props,
-        enableLink,
-        shouldStrip
-      });
+    const parsedPropValues = getParsedPropValues({
+      propertiesToDisplay,
+      props,
+      enableLink,
+      shouldStrip
+    });
 
-      const sanitizedPropValues = getSanitizedPropValues(parsedPropValues);
-      if (!sanitizedPropValues || !sanitizedPropValues.length) return null;
-      const stringEndBlank =
-        currentIndex + 1 === propsToDisplay.length ? '' : BLANK_SPACE_UNICODE_STRING;
+    const sanitizedPropValues = getSanitizedPropValues(parsedPropValues);
+    if (!sanitizedPropValues || !sanitizedPropValues.length) return null;
+    const stringEndBlank =
+      currentIndex + 1 === propsToDisplay.length ? '' : BLANK_SPACE_UNICODE_STRING;
 
-      return (
-        <Wrapper>
-          {prefix} {sanitizedPropValues} {suffix}
-          {stringEndBlank}
-        </Wrapper>
-      );
-    }
-  );
+    const processedValue = Array.isArray(sanitizedPropValues)
+      ? sanitizedPropValues.map(value => processDataSummaryValue(value, options))
+      : processDataSummaryValue(sanitizedPropValues, options);
+
+    return (
+      <Wrapper>
+        {prefix} {processedValue} {suffix}
+        {stringEndBlank}
+      </Wrapper>
+    );
+  });
 };
 
 export default parsePropsToDisplay;

package/src/helpers/process-data-summary-value.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import components from '../components';
+
+const { code: Code } = components;
+
+const renderCode = value => <Code code={value} disableWrapper />;
+
+const processDataSummaryValue = (objPropValue, { isHtml }) => {
+  let pValue = objPropValue;
+  if (isHtml) {
+    pValue = Array.isArray(objPropValue)
+      ? objPropValue.map(({ keyField, [keyField]: value, ...otherProps }) => ({
+          [keyField]: renderCode(value),
+          keyField,
+          ...otherProps
+        }))
+      : renderCode(objPropValue);
+  }
+  return pValue;
+};
+
+export default processDataSummaryValue;

package/tests/unit/src/components/Code/Code.test.js

@@ -23,6 +23,11 @@ describe('Code component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it('should not render wrapper', () => {
+    const { asFragment } = render(Code, { ...props, disableWrapper: true });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('should return null if there is not embed code', () => {
     const { container } = render(Code, {});
     expect(container.innerHTML).toBe('');

package/tests/unit/src/components/Code/__snapshots__/Code.test.js.snap

@@ -27,3 +27,11 @@ exports[`Code component should not render script tags 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Code component should not render wrapper 1`] = `
+<DocumentFragment>
+  <p>
+    Lorem ipsum
+  </p>
+</DocumentFragment>
+`;

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

@@ -1,6 +1,11 @@
 import '@testing-library/jest-dom/extend-expect';
 import buildLoopPropsContent from '../../../../../../src/components/DataSummary/helpers/build-loop-props-content';
 import { mockedLoopProps, mockedPropsToDisplay, mockedData, mockedResults } from './mocks';
+import processDataSummaryValue from '../../../../../../src/helpers/process-data-summary-value';
+
+jest.mock('../../../../../../src/helpers/process-data-summary-value', () =>
+  jest.fn(value => value)
+);
 
 describe('buildLoopPropsContent helper function', () => {
   const noParamsPassed = buildLoopPropsContent();
@@ -41,6 +46,10 @@ describe('buildLoopPropsContent helper function', () => {
     expect(noDataPassed).toEqual([]);
   });
 
+  it('should call processDataSummaryValue', () => {
+    expect(processDataSummaryValue).toHaveBeenCalledWith('pre data name', mockedPropsToDisplay[0]);
+  });
+
   it('should return regular dataSummary content if no loopable values are found', () => {
     expect(withNoLoopValues).toEqual(mockedResults[0]);
     expect(withNoLoopableValues).toEqual(mockedResults[1]);

package/tests/unit/src/components/SearchFilter/helpers/build-new-query.test.js

@@ -3,13 +3,21 @@ import buildNewQuery from '../../../../../../src/components/SearchFilter/helpers
 const mockedProps = [
   ['', 'current-as-path', 'some=query&params=value'],
   ['urlFromProps', '', 'other=query&with=value'],
-  ['urlFromProps', 'not=used', 'another=query&withthis=value', 'sort=asc&sortby=name']
+  ['urlFromProps', 'not=used', 'another=query&withthis=value', 'sort=asc&sortby=name'],
+  [
+    'urlFromProps',
+    'not=used',
+    'another=query&withthis=value',
+    'sort=asc&sortby=name',
+    'this-is-content'
+  ]
 ];
 
 describe('buildNewQuery helper function', () => {
   const simpleExample = buildNewQuery(...mockedProps[0]);
   const withPropsUrl = buildNewQuery(...mockedProps[1]);
   const withSort = buildNewQuery(...mockedProps[2]);
+  const withHash = buildNewQuery(...mockedProps[3]);
 
   it('should always return a string', () => {
     expect(typeof simpleExample).toBe('string');
@@ -28,4 +36,10 @@ describe('buildNewQuery helper function', () => {
   it('should return new url with sort if passed', () => {
     expect(withSort).toEqual('urlFromProps?another=query&withthis=value&sort=asc&sortby=name');
   });
+
+  it('should return new url with hash if passed', () => {
+    expect(withHash).toEqual(
+      'urlFromProps?another=query&withthis=value&sort=asc&sortby=name#this-is-content'
+    );
+  });
 });

package/tests/unit/src/components/SearchFilterSort/helpers/handle-sort-update.test.js

@@ -2,16 +2,22 @@ import handleSortUpdate from '../../../../../../src/components/SearchFilterSort/
 
 const routerPushResultMock = () => ({ then: jest.fn() });
 const mockedProps = [
-  [{ push: jest.fn(routerPushResultMock) }, 'defaultOption', {}, 'url', 'defaultOption'],
   [
-    { push: jest.fn(routerPushResultMock) },
+    { asPath: 'asPath', push: jest.fn(routerPushResultMock) },
+    'defaultOption',
+    {},
+    'url',
+    'defaultOption'
+  ],
+  [
+    { push: jest.fn(routerPushResultMock), asPath: 'asPath' },
     'defaultOption',
     { sort: 'asc', sortby: 'name', type: 'big' },
     'baseurl',
     'defaultOption'
   ],
   [
-    { push: jest.fn(routerPushResultMock) },
+    { push: jest.fn(routerPushResultMock), asPath: 'asPath' },
     'name:desc',
     { someOther: 'ott' },
     'url',

package/tests/unit/src/components/SearchFilterSort/helpers/update-sort.test.js

@@ -1,10 +1,15 @@
 import updateSort from '../../../../../../src/components/SearchFilterSort/helpers/update-sort';
 
-const mockedProps = [['name:asc', {}, 'aurl'], ['name:asc', { other: '12', query2: 'an' }, 'aurl']];
+const mockedProps = [
+  ['name:asc', {}, 'aurl'],
+  ['name:asc', { other: '12', query2: 'an' }, 'aurl'],
+  ['name:desc', { query1: 'aquery' }, 'theUrl', '#hashBit']
+];
 
 describe('updateSort helper function', () => {
   const basicSort = updateSort(...mockedProps[0]);
   const sortWithOtherQuerys = updateSort(...mockedProps[1]);
+  const sortWithhash = updateSort(...mockedProps[2]);
 
   it('should return a parsed url based on the parameters passed', () => {
     expect(basicSort).toEqual('aurl?sort=asc&sortby=name');
@@ -13,4 +18,8 @@ describe('updateSort helper function', () => {
   it('should return a parsed url with extra query params if passed', () => {
     expect(sortWithOtherQuerys).toEqual('aurl?other=12&query2=an&sort=asc&sortby=name');
   });
+
+  it('should return a parsed url with extra query params and hash if passed', () => {
+    expect(sortWithhash).toEqual('theUrl?query1=aquery&sort=desc&sortby=name#hashBit');
+  });
 });

package/tests/unit/src/helpers/__snapshots__/get-wrapped-value-with-link.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`get wrapped value with link func should return array with correponding value and link 1`] = `
+<React.Fragment>
+  <React.Fragment>
+    test-name
+    , 
+  </React.Fragment>
+   
+</React.Fragment>
+`;
+
+exports[`get wrapped value with link func should return array with correponding value and link 2`] = `
+<React.Fragment>
+  test-name2
+   
+</React.Fragment>
+`;

package/tests/unit/src/helpers/build-props-query.test.js

@@ -182,6 +182,31 @@ describe('get card render props', () => {
       'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},address{country,id}'
     );
   });
+
+  it('should url props where enableLink is set', () => {
+    const _data = {
+      getEntitySchema: {
+        interfaces: [CONTENT_INTERFACE],
+        properties: {
+          id: 'id',
+          nestedProperty: {
+            type: 'object'
+          }
+        },
+        relations: [{ localField: 'address' }],
+        dynamicProperties: {
+          nestedDynamicProperty: {
+            type: 'object'
+          }
+        }
+      }
+    };
+    const linkProps = ['nestedProperty.title', 'nestedDynamicProperty.title', 'address.title'];
+    const query = buildPropsQuery(_data, linkProps, {}, linkProps);
+    expect(query).toEqual(
+      'id,name,url,sponsored,featured,nestedProperty{title,url},nestedDynamicProperty{title,url},address{title,id,url}'
+    );
+  });
 });
 
 function testUrlProperty({ extraProperties = {}, dynamicProperties = {}, cardProps }) {

package/tests/unit/src/helpers/get-wrapped-value-with-link.test.js

@@ -33,7 +33,7 @@ describe('get wrapped value with link func', () => {
     expect(resultWithArray).toHaveLength(2);
     expect(resultWithArray[0].props.href).toEqual(link);
     expect(resultWithArray[0].key).toEqual(`${keyPrefix}-0`);
-    expect(resultWithArray[0].props.children).toEqual(`${arrayOfValues[0][keyField]}, `);
-    expect(resultWithArray[1]).toEqual(`${arrayOfValues[1][keyField]} `);
+    expect(resultWithArray[0].props.children).toMatchSnapshot();
+    expect(resultWithArray[1]).toMatchSnapshot();
   });
 });

package/tests/unit/src/helpers/parse-props-to-display.test.js

@@ -1,5 +1,8 @@
 import '@testing-library/jest-dom/extend-expect';
 import parsePropsToDisplay from '../../../../src/helpers/parse-props-to-display';
+import processDataSummaryValue from '../../../../src/helpers/process-data-summary-value';
+
+jest.mock('../../../../src/helpers/process-data-summary-value', () => jest.fn(value => value));
 
 const mockedPropsToDisplayStringArr = ['name', 'other', 'cat.name', 'tag.name'];
 const mockedPropsToDisplayObjectArr = [
@@ -34,6 +37,7 @@ describe('parsePropsToDisplay func', () => {
   it('should return an array of react elements if an array of objects is passed', () => {
     const nonElement = !!withObjArr.find(({ type }) => typeof type !== 'symbol');
     expect(nonElement).toEqual(false);
+    expect(processDataSummaryValue).toHaveBeenCalled();
   });
 
   it('should display bold tag wrapper when props to display has bold property', () => {

package/tests/unit/src/helpers/prcoess-data-summary-value.test.js

@@ -0,0 +1,52 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import processDataSummaryValue from '../../../../src/helpers/process-data-summary-value';
+import components from '../../../../src/components';
+
+const { code: Code } = components;
+
+const keyField = 'name';
+const john = { keyField, name: 'John', age: 30 };
+const jane = { keyField, name: 'Jane', age: 25 };
+
+describe('processDataSummaryValue', () => {
+  test('should return the same value when isHtml is false', () => {
+    const value = 'Hello, world!';
+    const result = processDataSummaryValue(value, { isHtml: false });
+    expect(result).toBe(value);
+  });
+
+  test('should render code when isHtml is true and objPropValue is a string', () => {
+    const value = 'value';
+    const result = processDataSummaryValue(value, { isHtml: true });
+    const expectedResult = <Code code={value} disableWrapper />;
+    expect(result).toEqual(expectedResult);
+  });
+
+  test('should render code for each object property when isHtml is true and objPropValue is an array of objects', () => {
+    const value = [john, jane];
+    const result = processDataSummaryValue(value, { isHtml: true });
+    const expectedResult = [
+      {
+        keyField,
+        name: <Code code={john.name} disableWrapper />,
+        age: 30
+      },
+      {
+        keyField,
+        name: <Code code={jane.name} disableWrapper />,
+        age: 25
+      }
+    ];
+    expect(result).toEqual(expectedResult);
+  });
+
+  test('should not render code for the only property when isHtml is false and objPropValue is an object', () => {
+    const value = [john];
+    const result = processDataSummaryValue(value, { isHtml: false });
+    const expectedResult = [john];
+    expect(result).toEqual(expectedResult);
+  });
+});