@plone/volto 15.0.0-alpha.4 → 15.0.0-alpha.8

package/src/components/manage/Blocks/HeroImageLeft/Edit.jsx

@@ -7,15 +7,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { Map } from 'immutable';
 import { readAsDataURL } from 'promise-file-reader';
 import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
-import { stateFromHTML } from 'draft-js-import-html';
-import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js';
 import { isEqual } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import { Icon, SidebarPortal, LinkMore } from '@plone/volto/components';
@@ -51,32 +49,12 @@ const messages = defineMessages({
   },
 });
 
-const blockTitleRenderMap = Map({
-  unstyled: {
-    element: 'h1',
-  },
-});
-
-const blockDescriptionRenderMap = Map({
-  unstyled: {
-    element: 'div',
-  },
-});
-
-const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-  blockTitleRenderMap,
-);
-
-const extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-  blockDescriptionRenderMap,
-);
-
 /**
  * Edit image block class.
  * @class Edit
  * @extends Component
  */
-class Edit extends Component {
+class EditComponent extends Component {
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -126,7 +104,32 @@ class Edit extends Component {
       uploading: false,
     };
 
+    const { Map } = this.props.immutableLib;
+
     if (!__SERVER__) {
+      const { DefaultDraftBlockRenderMap, EditorState } = props.draftJs;
+      const { stateFromHTML } = props.draftJsImportHtml;
+
+      const blockTitleRenderMap = Map({
+        unstyled: {
+          element: 'h1',
+        },
+      });
+
+      const blockDescriptionRenderMap = Map({
+        unstyled: {
+          element: 'div',
+        },
+      });
+
+      this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+        blockTitleRenderMap,
+      );
+
+      this.extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+        blockDescriptionRenderMap,
+      );
+
       let titleEditorState;
       let descriptionEditorState;
       if (props.data && props.data.title) {
@@ -187,6 +190,9 @@ class Edit extends Component {
       });
     }
 
+    const { EditorState } = this.props.draftJs;
+    const { stateFromHTML } = this.props.draftJsImportHtml;
+
     if (
       nextProps.data.title &&
       this.props.data.title !== nextProps.data.title &&
@@ -299,6 +305,7 @@ class Edit extends Component {
     if (__SERVER__) {
       return <div />;
     }
+    const { Editor } = this.props.draftJs;
     const placeholder =
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.placeholder);
@@ -374,7 +381,7 @@ class Edit extends Component {
                 readOnly={!this.props.editable}
                 onChange={this.onChangeTitle}
                 editorState={this.state.titleEditorState}
-                blockRenderMap={extendedBlockRenderMap}
+                blockRenderMap={this.extendedBlockRenderMap}
                 handleReturn={() => true}
                 placeholder={this.props.intl.formatMessage(messages.title)}
                 blockStyleFn={() => 'title-editor'}
@@ -416,7 +423,7 @@ class Edit extends Component {
                 readOnly={!this.props.editable}
                 onChange={this.onChangeDescription}
                 editorState={this.state.descriptionEditorState}
-                blockRenderMap={extendedDescripBlockRenderMap}
+                blockRenderMap={this.extendedDescripBlockRenderMap}
                 handleReturn={() => true}
                 placeholder={this.props.intl.formatMessage(
                   messages.description,
@@ -460,6 +467,10 @@ class Edit extends Component {
   }
 }
 
+const Edit = injectLazyLibs(['draftJs', 'immutableLib', 'draftJsImportHtml'])(
+  EditComponent,
+);
+
 export default compose(
   injectIntl,
   connect(

package/src/components/manage/Blocks/HeroImageLeft/Edit.test.jsx

@@ -5,6 +5,12 @@ import { Provider } from 'react-intl-redux';
 
 import Edit from './Edit';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 const mockStore = configureStore();

package/src/components/manage/Blocks/Search/README.md

@@ -0,0 +1,20 @@
+## Terminology
+
+Facet: a filter control that allows the final users of search block to tweak
+the query that's sent to the `@querystringsearch` endpoint. Usually, a facet is
+a list of all possible values for a field, so that it can be set to either
+a single value or a list of those selected values.
+
+Facets: a control that renders the list of facet filters.
+
+FilterList: a control rendered at the top of the block, it shows a list of all
+applied facet values, with quick access to the users to clear either the facet
+or the entire searchblock state.
+
+`<FacetType>FilterListEntry`: components used to render the selected value for
+a particular facet, in the FilterList component. They can be registered per
+facet type.
+
+Layout: a high-level component that controls the way the results are layed out
+in relation to the facet list (facets can be displayed at top, left or right of
+results).

package/src/components/manage/Blocks/Search/components/CheckboxFacet.jsx

@@ -1,13 +1,22 @@
 import React from 'react';
 import { Checkbox, Header } from 'semantic-ui-react';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from './base';
 
-const SelectFacet = (props) => {
+/**
+ * A facet that uses radio/checkboxes to provide an explicit list of values for
+ * filtering
+ */
+const CheckboxFacet = (props) => {
   const { facet, choices, isMulti, onChange, value, isEditMode } = props;
   const facetValue = value;
 
   return (
     <div className="checkbox-facet">
-      <Header as="h4">{facet.title}</Header>
+      <Header as="h4">{facet.title ?? facet?.field?.label}</Header>
       <div className="entries">
         {choices.map(({ label, value }, i) => (
           <div className="entry" key={value}>
@@ -43,4 +52,8 @@ const SelectFacet = (props) => {
   );
 };
 
-export default SelectFacet;
+CheckboxFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxFacet.stateToValue = selectFacetStateToValue;
+CheckboxFacet.valueToQuery = selectFacetValueToQuery;
+
+export default CheckboxFacet;

package/src/components/manage/Blocks/Search/components/DateRangeFacet.jsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { Header } from 'semantic-ui-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { compose } from 'redux';
+import { Icon } from '@plone/volto/components';
+
+import leftKey from '@plone/volto/icons/left-key.svg';
+import rightKey from '@plone/volto/icons/right-key.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
+
+const messages = defineMessages({
+  startDate: {
+    id: 'Start Date',
+    defaultMessage: 'Start Date',
+  },
+  endDate: {
+    id: 'End Date',
+    defaultMessage: 'End Date',
+  },
+});
+
+const PrevIcon = () => (
+  <div
+    className="prev-icon"
+    style={{
+      color: '#000',
+      left: '22px',
+      padding: '5px',
+      position: 'absolute',
+      top: '15px',
+    }}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex="0"
+  >
+    <Icon name={leftKey} size="30px" />
+  </div>
+);
+const NextIcon = () => (
+  <div
+    className="next-icon"
+    style={{
+      color: '#000',
+      right: '22px',
+      padding: '5px',
+      position: 'absolute',
+      top: '15px',
+    }}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex="0"
+  >
+    <Icon name={rightKey} size="30px" />
+  </div>
+);
+
+const CloseIcon = () => <Icon name={clearSVG} size="24px" className="close" />;
+
+const DateRangeFacet = (props) => {
+  const { facet, isEditMode, onChange, value, reactDates, intl } = props;
+  const moment = props.moment.default;
+  const { DateRangePicker } = reactDates;
+  const [focused, setFocused] = useState(null);
+
+  return (
+    <div className="daterange-facet">
+      <Header as="h4">{facet?.title ?? facet?.field?.label}</Header>
+      <div className="ui form date-time-widget-wrapper">
+        <div className="ui input date-input">
+          <DateRangePicker
+            startDate={value && value[0] ? moment(value[0]) : null}
+            startDateId={`${facet['@id']}-start-date`}
+            startDatePlaceholderText={intl.formatMessage(messages.startDate)}
+            endDate={value && value[1] ? moment(value[1]) : null}
+            endDateId={`${facet['@id']}-end-date`}
+            endDatePlaceholderText={intl.formatMessage(messages.endDate)}
+            numberOfMonths={1}
+            disabled={isEditMode}
+            noBorder
+            showClearDates
+            customCloseIcon={<CloseIcon />}
+            displayFormat={moment.localeData(intl.locale).longDateFormat('L')}
+            focusedInput={focused}
+            onFocusChange={(focusedInput) => setFocused(focusedInput)}
+            onDatesChange={({ startDate, endDate }) => {
+              onChange(facet.field.value, [
+                startDate ? startDate.format('YYYY-MM-DD') : null,
+                endDate ? endDate.format('YYYY-MM-DD') : null,
+              ]);
+            }}
+            isOutsideRange={() => false}
+            navPrev={<PrevIcon />}
+            navNext={<NextIcon />}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+DateRangeFacet.stateToValue = ({ facetSettings, index, selectedValue }) => {
+  return selectedValue || [null, null];
+};
+
+DateRangeFacet.valueToQuery = ({ value, facet }) => {
+  return value && typeof value[0] === 'string' && typeof value[1] === 'string'
+    ? {
+        i: facet.field.value,
+        o: 'plone.app.querystring.operation.date.between',
+        v: value,
+      }
+    : null;
+};
+
+export default compose(
+  injectLazyLibs(['reactDates', 'moment']),
+  injectIntl,
+)(DateRangeFacet);

package/src/components/manage/Blocks/Search/components/DateRangeFacet.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen } from '@testing-library/react';
+
+import DateRangeFacet from './DateRangeFacet';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+describe('DateRangeFaceg', () => {
+  it('renders a facet component with a date range widget', async () => {
+    const store = mockStore({
+      userSession: { token: null },
+      content: { data: { '@id': 'myid' } },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const { container } = render(
+      <Provider store={store}>
+        <DateRangeFacet facet={{ title: 'Test Facet', field: {} }} />
+      </Provider>,
+    );
+    await waitFor(() => screen.getByText('Test Facet'));
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/manage/Blocks/Search/components/DateRangeFacetFilterListEntry.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Label, Icon } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  yes: {
+    id: 'yes',
+    defaultMessage: 'Yes',
+  },
+  no: {
+    id: 'no',
+    defaultMessage: 'No',
+  },
+});
+
+function DateRangeFacetFilterListEntry(props) {
+  const { facet, isEditMode, setFacets, facets } = props;
+  const intl = useIntl();
+
+  return (
+    <Label size="small">
+      {intl.formatMessage(facets[facet] ? messages.yes : messages.no)}
+      <Icon
+        name="delete"
+        onClick={() => {
+          const filteredFacets = Object.assign(
+            {},
+            ...Object.keys(facets)
+              .filter((f) => f !== facet)
+              .map((f) => ({ [f]: facets[f] })),
+          );
+          !isEditMode && setFacets(filteredFacets);
+        }}
+      />
+    </Label>
+  );
+}
+
+export default DateRangeFacetFilterListEntry;

package/src/components/manage/Blocks/Search/components/Facets.jsx

@@ -1,6 +1,17 @@
 import React from 'react';
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
+import { hasNonValueOperation, hasDateOperation } from '../utils';
+
+const showFacet = (index) => {
+  const { values } = index;
+  return index
+    ? hasNonValueOperation(index.operations || []) ||
+      hasDateOperation(index.operations || [])
+      ? true
+      : values && Object.keys(values).length > 0
+    : values && Object.keys(values).length > 0;
+};
 
 const Facets = (props) => {
   const {
@@ -22,9 +33,9 @@ const Facets = (props) => {
   return (
     <>
       {data?.facets
-        ?.filter((facet) => !facet.hidden)
-        .map((facet) => {
-          const field = facet?.field?.value;
+        ?.filter((facetSettings) => !facetSettings.hidden)
+        .map((facetSettings) => {
+          const field = facetSettings?.field?.value;
           const index = querystring.indexes[field] || {};
           const { values = {} } = index;
 
@@ -41,40 +52,28 @@ const Facets = (props) => {
                 : true,
             );
 
-          const isMulti = facet.multiple;
-          const selectedValue = facets[facet?.field?.value];
+          const isMulti = facetSettings.multiple;
+          const selectedValue = facets[facetSettings?.field?.value];
 
           // TODO :handle changing the type of facet (multi/nonmulti)
 
-          let value = selectedValue
-            ? isMulti
-              ? Array.isArray(selectedValue)
-                ? selectedValue.map((v) => ({
-                    value: v,
-                    label: index.values?.[v]?.title,
-                  }))
-                : []
-              : {
-                  value: selectedValue,
-                  label: index.values?.[selectedValue]?.title,
-                }
-            : [];
-
-          const { view: FacetWidget } = resolveExtension(
+          const { view: FacetWidget, stateToValue } = resolveExtension(
             'type',
             search.extensions.facetWidgets.types,
-            facet,
+            facetSettings,
           );
 
+          let value = stateToValue({ facetSettings, index, selectedValue });
+
           const {
             rewriteOptions = (name, options) => options,
           } = search.extensions.facetWidgets;
 
-          return FacetWrapper && Object.keys(values).length ? (
-            <FacetWrapper key={facet['@id']}>
+          return FacetWrapper && (isEditMode || showFacet(index)) ? (
+            <FacetWrapper key={facetSettings['@id']}>
               <FacetWidget
-                facet={facet}
-                choices={rewriteOptions(facet?.field?.value, choices)}
+                facet={facetSettings}
+                choices={rewriteOptions(facetSettings?.field?.value, choices)}
                 isMulti={isMulti}
                 value={value}
                 isEditMode={isEditMode}

package/src/components/manage/Blocks/Search/components/FilterList.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Accordion, Button, Label, Icon } from 'semantic-ui-react';
+import { Accordion, Button, Icon } from 'semantic-ui-react';
 import { Icon as VoltoIcon } from '@plone/volto/components';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import { defineMessages, useIntl } from 'react-intl';
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   currentFilters: {
@@ -15,26 +17,27 @@ const messages = defineMessages({
   },
 });
 
+/**
+ * A list of active filtered values and controls to clear those filters.
+ *
+ */
 const FilterList = (props) => {
-  const { data, facets, setFacets, isEditMode } = props;
+  const { data = {}, facets = {}, setFacets, isEditMode } = props;
+  const definedFacets = data.facets || [];
   const [isOpened, setIsOpened] = React.useState(false);
 
-  // TODO: the facets are merged with the default query. We need to untangle
-  // and claim only the original facet values
-  const showFilterList = !Object.values(facets).every((facet) => !facet.length);
+  const totalFilters = definedFacets.filter(
+    ({ field }) =>
+      field && Object.keys(facets).includes(field.value) && facets[field.value],
+  ).length;
 
-  const currentFilters = Object.fromEntries(
-    Object.entries(facets).filter((v) => v[1] && v[0] !== 'SearchableText'),
-  );
-
-  const totalFilters = [].concat.apply([], Object.values(currentFilters))
-    .length;
-
-  // console.log({ data, facets, showFilterList, currentFilters, totalFilters });
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
 
   const intl = useIntl();
 
-  return showFilterList && Object.keys(currentFilters).length ? (
+  return totalFilters ? (
     <Accordion className="filter-listing">
       <Accordion.Title
         className="filter-list-header"
@@ -61,59 +64,26 @@ const FilterList = (props) => {
       </Accordion.Title>
       <Accordion.Content className="filter-list-content" active={isOpened}>
         <div className="filter-list">
-          {Object.keys(facets || {}).map((facet, i) => (
-            <div key={i}>
-              {facets[facet].length > 0 && (
-                <div className="filter-list-group" key={i}>
-                  {data?.facets?.map((f, i) => {
-                    return facet === f?.field?.value ? (
-                      <span className="label-title" key={i}>
-                        {f.title || f?.field?.label}:
-                      </span>
-                    ) : (
-                      ''
-                    );
-                  })}
-                  {typeof facets[facet] === 'string' ? (
-                    <Label size="small" key={i}>
-                      {facets[facet]}
-                      <Icon
-                        name="delete"
-                        onClick={() => {
-                          !isEditMode &&
-                            setFacets({
-                              ...facets,
-                              [facet]: '',
-                            });
-                        }}
-                      />
-                    </Label>
-                  ) : (
-                    <>
-                      {facets[facet].map((entry, i) => (
-                        <Label size="small" key={i}>
-                          {entry}
-                          <Icon
-                            name="delete"
-                            onClick={() => {
-                              const entries = facets[facet].filter(
-                                (item) => item !== entry,
-                              );
-                              !isEditMode &&
-                                setFacets({
-                                  ...facets,
-                                  [facet]: entries,
-                                });
-                            }}
-                          />
-                        </Label>
-                      ))}
-                    </>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
+          {data.facets?.map((facetSettings, i) => {
+            const {
+              filterListComponent: FilterListComponent,
+            } = resolveExtension('type', facetWidgetTypes, facetSettings);
+            const facet = facetSettings?.field?.value;
+            if (!facet) return null;
+
+            return (
+              <div key={i}>
+                {Object.keys(facets).includes(facet) && !!facets[facet] && (
+                  <div className="filter-list-group" key={i}>
+                    <span className="label-title">
+                      {facetSettings.title ?? facetSettings?.field?.label}
+                    </span>
+                    <FilterListComponent {...props} facet={facet} />
+                  </div>
+                )}
+              </div>
+            );
+          })}
         </div>
       </Accordion.Content>
     </Accordion>

package/src/components/manage/Blocks/Search/components/FilterList.test.jsx

@@ -2,11 +2,45 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
 
 import FilterList from './FilterList';
+import SelectFacet from './SelectFacet';
+import SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
 
 const mockStore = configureStore();
 
+config.blocks.blocksConfig = {
+  search: {
+    id: 'search',
+    title: 'Search',
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+    extensions: {
+      facetWidgets: {
+        types: [
+          {
+            id: 'selectFacet',
+            title: 'Select',
+            view: SelectFacet,
+            isDefault: true,
+            schemaEnhancer: SelectFacet.schemaEnhancer,
+            stateToValue: SelectFacet.stateToValue,
+            valueToQuery: SelectFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
+          },
+        ],
+      },
+    },
+  },
+};
+
 describe('FilterList', () => {
   it('renders filters listing component for search block', () => {
     const store = mockStore({
@@ -17,9 +51,23 @@ describe('FilterList', () => {
         messages: {},
       },
     });
+    const data = {
+      facets: [
+        {
+          '@id': 'a',
+          field: {
+            value: 'portal_type',
+            label: 'Portal type',
+          },
+        },
+      ],
+    };
     const component = renderer.create(
       <Provider store={store}>
-        <FilterList facets={{ portal_type: ['Document', 'Folder'] }} />
+        <FilterList
+          data={data}
+          facets={{ portal_type: ['Document', 'Folder'] }}
+        />
       </Provider>,
     );
     const json = component.toJSON();