@blaze-cms/react-page-builder 0.122.0 → 0.123.0-alpha.2

package/src/components/SearchContent/index.js

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { gql, useQuery } from '@apollo/client';
+import { useRouter } from 'next/router';
+import { getPublishedContent } from '../../application/query';
+
+const SearchContent = ({ searchInputAlignment, entityName, entityField }) => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [searchTerm, setSearchTerm] = useState(null);
+  const router = useRouter();
+
+  let alignmentModifier = '';
+
+  if (searchInputAlignment && searchInputAlignment !== '') {
+    alignmentModifier = searchInputAlignment === 'left' ? 'left-6' : 'right-16';
+  }
+
+  const rawQueryStringified = JSON.stringify({
+    size: 0,
+    query: {
+      bool: {
+        filter: {
+          bool: {
+            should: [
+              {
+                match: {
+                  docType: entityField
+                }
+              }
+            ],
+            minimum_should_match: 1
+          }
+        }
+      }
+    }
+  });
+
+  const query = gql`
+    ${getPublishedContent(entityName)}
+  `;
+
+  const { loading, error, data } = useQuery(query, {
+    variables: { rawQueryStringified, offset: 0, limit: 5 }
+  });
+
+  if (loading) return null;
+  if (error) return `Error! ${error}`;
+
+  const renderResults = () => {
+    // eslint-disable-next-line no-undef
+    const { results } = data?.searchPublishedContent;
+
+    const handleClick = (e, url) => {
+      e.preventDefault();
+      router.push(url);
+    };
+
+    if (results && searchTerm && searchTerm !== '') {
+      return results.map(({ name, url }) => {
+        if (name.match(searchTerm)) {
+          return (
+            <a href={url} onClick={e => handleClick(e, url)}>
+              {name}
+            </a>
+          );
+        }
+
+        return null;
+      });
+    }
+
+    return [];
+  };
+
+  return collapsed ? (
+    <div className={`absolute rounded-3xl overflow-auto top-3 ${alignmentModifier}`}>
+      <div className="w-11 mx-auto">
+        <label className="relative block">
+          <span className="absolute inset-y-0 right-3 flex items-center pl-2 cursor-pointer">
+            <svg className="h-5 w-5 fill-slate-300" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </span>
+          <span className="sr-only">Search</span>
+          <input
+            onFocus={() => setCollapsed(false)}
+            onChange={e => setSearchTerm(e.target.value)}
+            type="text"
+            name="search"
+            value=""
+            className="disabled:bg-white block bg-white w-full rounded-full py-2 pl-5 pr-3 placeholder:italic placeholder:text-gray-400 focus:outline-none sm:text-sm"
+          />
+        </label>
+      </div>
+    </div>
+  ) : (
+    <>
+      <div className={`absolute  overflow-auto top-3 ${alignmentModifier}`}>
+        <div className="w-96 mx-auto rounded-3xl">
+          <label className="relative block">
+            <span className="absolute inset-y-0 right-3 flex items-center pl-2">
+              <svg className="h-5 w-5 fill-slate-300" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </span>
+            <span className="sr-only">Search</span>
+            <input
+              type="text"
+              name="search"
+              onChange={e => setSearchTerm(e.target.value)}
+              className="block bg-white w-full rounded-full py-2 pl-3 pr-3 placeholder:italic placeholder:text-slate-400 focus:outline-none sm:text-sm"
+              placeholder="Search for anything..."
+              onBlur={() => setCollapsed(true)}
+            />
+          </label>
+        </div>
+        <div className="bg-white ml-3 mr-3 relative">
+          <div>Search Results</div>
+          {data && renderResults()}
+        </div>
+      </div>
+    </>
+  );
+};
+
+SearchContent.propTypes = {
+  searchInputAlignment: PropTypes.string,
+  entityName: PropTypes.string,
+  entityField: PropTypes.string
+};
+
+SearchContent.defaultProps = {
+  searchInputAlignment: '',
+  entityName: 'PublishedPage',
+  entityField: 'published_page'
+};
+
+export default SearchContent;

package/src/components/index.js

@@ -17,6 +17,9 @@ export default {
   textblock: dynamic(() => import(/* webpackChunkName: "blazePbTextBlock" */ './TextBlock')),
   video: dynamic(() => import(/* webpackChunkName: "blazePbVideo" */ './Video')),
   wrapper: dynamic(() => import(/* webpackChunkName: "blazePbWrapper" */ './Wrapper')),
+  searchcontent: dynamic(() =>
+    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent')
+  ),
   searchfilter: dynamic(() =>
     import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchFilter')
   ),
@@ -37,6 +40,5 @@ export default {
   ),
   passwordresetrequest: dynamic(() =>
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
-  ),
-  breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb'))
+  )
 };

package/src/helpers/get-filter-props.js

@@ -17,13 +17,16 @@ const getFilterProps = (
   {
     relations: currentEntityRelations = [],
     properties: currentEntityProperties = {},
+    dynamicProperties: currentEntityDynamicProperties = {},
     identifier: currentEntityId
   } = {},
   { relations: filterEntityRelations = [], identifier: filteryEntityId } = {}
 ) => {
   const [filterName] = filter.split('/');
   const [relationName, relationProp] = filterName.split('.');
-  const hasProperty = !!currentEntityProperties[filterName];
+  const hasProperty = !!(
+    currentEntityProperties[filterName] || currentEntityDynamicProperties[filterName]
+  );
   const relationEntityName = relationProp
     ? getFilterLocalKeys(relationName, currentEntityRelations)
     : null;

package/tests/helpers/mocks.js

@@ -20,6 +20,12 @@ const GTM_CLASSNAME = 'gtm-classname';
 
 const MOCKED_SCHEMA_FOR_FILTERS = {
   identifier: 'page',
+  dynamicProperties: {
+    dynamicProp: {
+      type: 'string',
+      searchable: true
+    }
+  },
   relations: [
     {
       relationType: 'hasOne',

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

@@ -2,6 +2,8 @@ import '@testing-library/jest-dom/extend-expect';
 import { getLinkToPublishedContent } from '../../../../../../src/components/DataSummary/helpers';
 
 describe('get link to published content', () => {
+  const publishedKey = 'content.published';
+  const content = { url: 'url' };
   it('should be a function', () => {
     expect(typeof getLinkToPublishedContent).toEqual('function');
   });
@@ -17,14 +19,26 @@ describe('get link to published content', () => {
   });
 
   it('should return url if key does include "published" and there is related content published', () => {
-    const props = { content: [{ url: 'url' }] };
-    const result = getLinkToPublishedContent('content.published', props);
-    expect(result).toEqual('url');
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props);
+    expect(result).toEqual(content.url);
   });
 
   it('should return blank string if key does include "published" but there is no related content published', () => {
+    const props = { content: [] };
+    const result = getLinkToPublishedContent(publishedKey, props);
+    expect(result).toEqual('');
+  });
+
+  it('should return url if key does include "published" and content is not an array', () => {
+    const props = { content };
+    const result = getLinkToPublishedContent(publishedKey, props);
+    expect(result).toEqual(content.url);
+  });
+
+  it('should return blank string if key does include "published" but there is no url', () => {
     const props = { content: {} };
-    const result = getLinkToPublishedContent('content.published', props);
+    const result = getLinkToPublishedContent(publishedKey, props);
     expect(result).toEqual('');
   });
 });

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

@@ -2,14 +2,18 @@
 
 exports[`Menu component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
-  <ul
-    class="menu-mod"
+  <div
+    class="menu--desktop-wrapper"
   >
-    <div
-      class="child_1"
+    <ul
+      class="menu-mod"
     >
-      only child
-    </div>
-  </ul>
+      <div
+        class="child_1"
+      >
+        only child
+      </div>
+    </ul>
+  </div>
 </DocumentFragment>
 `;

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

@@ -6,10 +6,6 @@ Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
-  "breadcrumb": Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
-  },
   "button": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
@@ -74,6 +70,10 @@ Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "searchcontent": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "searchfilter": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],

package/tests/unit/src/helpers/get-filter-props.test.js

@@ -55,6 +55,16 @@ describe('getFilterProps function', () => {
     expect(!!relationProp.relationEntityName).toBe(true);
   });
 
+  it('should return relationEntityName key as true if relationName exists and matches in schema', () => {
+    const dyanmicPropFilter = getFilterProps(
+      'dynamicProp',
+      MOCKED_SCHEMA_FOR_FILTERS,
+      MOCKED_SCHEMA_FOR_FILTERS
+    );
+    expect(dyanmicPropFilter).toHaveProperty('hasProperty', true);
+    expect(dyanmicPropFilter).toHaveProperty('shouldIgnoreFilter', false);
+  });
+
   // todo: add test case
   // it('should return relationForeignKeys array with values if it isnt a schema or relation prop', () => {
   //   expect(withRelationKeys.relationForeignKeys).toBeDefined();