@eeacms/volto-clms-theme 1.0.156 → 1.0.158

package/CHANGELOG.md

@@ -4,11 +4,40 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.0.156](https://github.com/eea/volto-clms-theme/compare/1.0.155...1.0.156) - 12 December 2022
+### [1.0.158](https://github.com/eea/volto-clms-theme/compare/1.0.157...1.0.158) - 22 December 2022
+
+#### :bug: Bug Fixes
+
+- fix: add b_size to the FAQ search request and remove duplicates from categories [ionlizarazu - [`94c0b19`](https://github.com/eea/volto-clms-theme/commit/94c0b19b9c990e675125b45522d15d896ee53792)]
+
+### [1.0.157](https://github.com/eea/volto-clms-theme/compare/1.0.156...1.0.157) - 22 December 2022
 
 #### :rocket: New Features
 
-- feat: sort UseCases shown in related listings alphabetically. CLMS-1618 [Mikel Larreategi - [`87cd56d`](https://github.com/eea/volto-clms-theme/commit/87cd56d0a0adb78b70049aa67dc033dd3000b2a2)]
+- feat: copy to customize [Mikel Larreategi - [`84bb8d6`](https://github.com/eea/volto-clms-theme/commit/84bb8d6de43acccf70dd009088f91a09168259af)]
+- feat: use volto-addon-ci from 15.x tag [Mikel Larreategi - [`f21deaa`](https://github.com/eea/volto-clms-theme/commit/f21deaaf20b8873886f10b05c42470c9e12d0686)]
+- feat: do not show View in the mapviewer link if this item will not bee shown [Mikel Larreategi - [`fbda05f`](https://github.com/eea/volto-clms-theme/commit/fbda05f25c62e5dd9a4a66a1bdc53170e93ca0a2)]
+- feat: show dataset names in the download pop-up when a custom selection and prepackaged are requested to be downloaded [Mikel Larreategi - [`cdb2564`](https://github.com/eea/volto-clms-theme/commit/cdb25648d6ae44d5c0892a4ea3cddb5c03b04e4c)]
+- feat: FAQ Block [Mikel Larreategi - [`8ffabf7`](https://github.com/eea/volto-clms-theme/commit/8ffabf7c1f1353020a40b3f2c14ee979872ed607)]
+
+#### :bug: Bug Fixes
+
+- fix: add import/no-resolver ignore [Mikel Larreategi - [`ba527ba`](https://github.com/eea/volto-clms-theme/commit/ba527ba3bbedbcf44a70ef68ee641d5bc97d50f3)]
+- fix: use Grid instead of Table [Mikel Larreategi - [`4d9bed0`](https://github.com/eea/volto-clms-theme/commit/4d9bed05301b6e4361e0ab27ae5650e44f703cde)]
+
+#### :house: Internal changes
+
+- chore: fix [Mikel Larreategi - [`c12a7c3`](https://github.com/eea/volto-clms-theme/commit/c12a7c3aaae93a37776de1eefadda523941de82f)]
+- chore: fix [Mikel Larreategi - [`3ac089a`](https://github.com/eea/volto-clms-theme/commit/3ac089a9ba82c444104f8b43fb7e2e16ff7a7be3)]
+
+#### :hammer_and_wrench: Others
+
+- add edit button [ionlizarazu - [`d84f322`](https://github.com/eea/volto-clms-theme/commit/d84f3229c33dd41ae6741d46109cbafe25e01c54)]
+- faq block [ionlizarazu - [`db09537`](https://github.com/eea/volto-clms-theme/commit/db095378f91b839cc8cdc40e395e8110aa6d19a7)]
+- add dep [Mikel Larreategi - [`408b499`](https://github.com/eea/volto-clms-theme/commit/408b499a1caa7a1f1a48b18f37df7dc96aeec78b)]
+- fix [Mikel Larreategi - [`840b896`](https://github.com/eea/volto-clms-theme/commit/840b89671d722e04c3b060bc527bdc68c25390cc)]
+- remove console.log [Mikel Larreategi - [`bee5ceb`](https://github.com/eea/volto-clms-theme/commit/bee5ceb3273f0983c25a99782abff4490adbed5d)]
+### [1.0.156](https://github.com/eea/volto-clms-theme/compare/1.0.155...1.0.156) - 12 December 2022
 
 ### [1.0.155](https://github.com/eea/volto-clms-theme/compare/1.0.154...1.0.155) - 12 December 2022
 

package/Jenkinsfile

@@ -41,19 +41,22 @@ pipeline {
 
           "ES lint": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci eslint'''
+              sh '''docker pull plone/volto-addon-ci:15.x'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-eslint" -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci:15.x eslint'''
             }
           },
 
           "Style lint": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci stylelint'''
+              sh '''docker pull plone/volto-addon-ci:15.x'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-stylelint" -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci:15.x stylelint'''
             }
           },
 
           "Prettier": {
             node(label: 'docker') {
-              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci prettier'''
+              sh '''docker pull plone/volto-addon-ci:15.x'''
+              sh '''docker run -i --rm --name="$BUILD_TAG-prettier" -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci:15.x prettier'''
             }
           }
         )
@@ -77,8 +80,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone/volto-addon-ci'''
-                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e VOLTO=$VOLTO -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
+                  sh '''docker pull plone/volto-addon-ci:15.x'''
+                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e VOLTO=$VOLTO -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci:15.x'''
                   sh '''rm -rf xunit-reports'''
                   sh '''mkdir -p xunit-reports'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/'''
@@ -126,7 +129,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
+                  sh '''docker pull plone/volto-addon-ci:15.x; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci:15.x cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.156",
+  "version": "1.0.158",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -60,7 +60,8 @@
     "volto-form-block": "2.8.0",
     "react-input-range": "^1.3.0",
     "lightgallery": "^2.4.0",
-    "validator": "13.7.0"
+    "validator": "13.7.0",
+    "connected-react-router": "6.8.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/components/Blocks/CclFAQBlock/CclFAQBlockEdit.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CclFAQBlockView from './CclFAQBlockView';
+
+const CclFAQBlockEdit = (props) => {
+  return <CclFAQBlockView props={props} isEditMode={true} />;
+};
+
+export default CclFAQBlockEdit;

package/src/components/Blocks/CclFAQBlock/CclFAQBlockView.jsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { CclTabs } from '@eeacms/volto-clms-theme/components/CclTab';
+import { useDispatch, useSelector } from 'react-redux';
+import { searchContent } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+import { Accordion, Segment } from 'semantic-ui-react';
+import { Icon, UniversalLink } from '@plone/volto/components';
+import AnimateHeight from 'react-animate-height';
+import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
+import penSVG from '@plone/volto/icons/pen.svg';
+
+const CclFAQBlockView = (props) => {
+  const { isEditMode } = props;
+  const dispatch = useDispatch();
+  const path = useSelector((state) => state.router.location.pathname);
+  const search = useSelector((state) => state.search);
+  const handleClick = ({ index }) => {
+    const newIndex =
+      activeIndex.indexOf(index) === -1
+        ? [...activeIndex, index]
+        : activeIndex.filter((item) => item !== index);
+
+    setActiveIndex(newIndex);
+  };
+  React.useEffect(() => {
+    dispatch(
+      searchContent(path.replace('/edit', ''), {
+        fullobjects: 1,
+        portal_type: 'FAQ',
+        b_size: 999,
+      }),
+    );
+  }, [path, dispatch]);
+  let categories =
+    search.items.length > 0
+      ? [
+          ...new Set(
+            search.items.map((item) => item.taxonomy_faqcategories).flat(),
+          ),
+        ]
+          .map((cat) => {
+            const cat_family = cat.title?.split(' » ');
+            if (cat_family.length > 1) {
+              cat['subTab'] = true;
+            }
+            return cat;
+          })
+          .filter(
+            (thing, index, self) =>
+              index === self.findIndex((t) => t.token === thing.token),
+          )
+          .sort((a, b) => {
+            if (a.title < b.title) {
+              return -1;
+            } else if (a.title > b.title) {
+              return 1;
+            }
+            return 0;
+          })
+      : [];
+  categories.forEach((cat, index) => {
+    if (cat.subTab && !categories[index - 1].subTab) {
+      categories[index - 1]['parent'] = true;
+    }
+  });
+  const [activeIndex, setActiveIndex] = React.useState([0]);
+  const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
+
+  return (
+    <div id="faq-listing" className="ccl-container tab-container">
+      {search.loaded ? (
+        search.items?.length > 0 &&
+        categories.length > 0 && (
+          <CclTabs routing={true}>
+            {categories.map((cat, key) => {
+              const cat_family = cat.title.split(' » ');
+              const cat_title =
+                cat_family.length > 1
+                  ? cat_family[1].split('#')[1]
+                  : cat_family[0].split('#')[1];
+              return (
+                <div
+                  key={key}
+                  tabTitle={cat_title}
+                  className={cat_family.length > 1 ? 'subcard' : ''}
+                  parent={cat.parent}
+                >
+                  <div className="accordion-block">
+                    {search.items.map((item, item_key) => {
+                      return (
+                        item.taxonomy_faqcategories.filter((faq_cat) =>
+                          faq_cat.title.includes(cat.title),
+                        ).length > 0 && (
+                          <Accordion fluid styled key={item_key}>
+                            <Accordion.Title
+                              as={'h2'}
+                              onClick={() => handleClick({ index: item_key })}
+                              className={'accordion-title align-arrow-right'}
+                            >
+                              {activeIndex.includes(item_key) ? (
+                                <Icon name={titleIcons.opened.rightPosition} />
+                              ) : (
+                                <Icon name={titleIcons.closed.rightPosition} />
+                              )}
+                              {isEditMode && (
+                                <UniversalLink
+                                  openLinkInNewTab={true}
+                                  href={`${item['@id']}/edit`}
+                                >
+                                  <Icon
+                                    name={penSVG}
+                                    className="circled"
+                                    title={'Edit'}
+                                  />
+                                </UniversalLink>
+                              )}
+                              <span>{item.title}</span>
+                            </Accordion.Title>
+                            <Accordion.Content
+                              active={activeIndex.includes(item_key)}
+                            >
+                              <AnimateHeight
+                                animateOpacity
+                                duration={500}
+                                height={'auto'}
+                              >
+                                <StringToHTML
+                                  string={item.text ? item.text.data : ''}
+                                />
+                              </AnimateHeight>
+                            </Accordion.Content>
+                          </Accordion>
+                        )
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </CclTabs>
+        )
+      ) : (
+        <Segment loading={search.loading}></Segment>
+      )}
+    </div>
+  );
+};
+
+export default CclFAQBlockView;

package/src/components/Blocks/customBlocks.js

@@ -58,6 +58,8 @@ import TextLinkCarouselEdit from '@eeacms/volto-clms-theme/components/Blocks/Ccl
 import TextLinkCarouselView from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView';
 import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionView';
 import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
+import CclFAQBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclFAQBlock/CclFAQBlockEdit';
+import CclFAQBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclFAQBlock/CclFAQBlockView';
 import containerSVG from '@plone/volto/icons/apps.svg';
 import {
   customIdFieldSchema,
@@ -590,6 +592,22 @@ const customBlocks = (config) => ({
     ...config.blocks.blocksConfig.maps,
     restricted: false,
   },
+  cclFAQ: {
+    id: 'cclFAQ', // The name (id) of the block
+    title: 'FAQ Block', // The display name of the block
+    icon: containerSVG, // The icon used in the block chooser
+    group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
+    view: CclFAQBlockView, // The view mode component
+    edit: CclFAQBlockEdit, // The edit mode component
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+  },
 });
 
 export default customBlocks;

package/src/components/Blocks/utils.js

@@ -28,7 +28,9 @@ export const getPanels = (data) => {
 
 export const slugify = (string) => {
   return string
-    .toLowerCase()
-    .replace(/[\s-]+/g, '_')
-    .replace(/[^\w]+/g, '');
+    ? string
+        .toLowerCase()
+        .replace(/[\s-]+/g, '_')
+        .replace(/[^\w]+/g, '')
+    : '';
 };

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -64,6 +64,12 @@ const CLMSDatasetDetailView = ({ content, token }) => {
   const [open, setOpen] = React.useState({});
   const locale = useSelector((state) => state.intl.locale);
 
+  const isAuxiliary = content.mapviewer_viewservice
+    .toLowerCase()
+    .startsWith(
+      'https://trial.discomap.eea.europa.eu/arcgis/services/clms/worldcountries/mapserver/wmsserver',
+    );
+
   return (
     <div className="ccl-container ">
       <h1 className="page-title">{content.title}</h1>
@@ -422,7 +428,7 @@ const CLMSDatasetDetailView = ({ content, token }) => {
                 />
               </div>
             )}
-            {content?.mapviewer_viewservice?.length > 0 && (
+            {content?.mapviewer_viewservice?.length > 0 && !isAuxiliary && (
               <div className="menu-detail-button">
                 <CclButton
                   url={'/' + locale + '/map-viewer?dataset=' + content.UID}

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -461,12 +461,18 @@ const CLMSCartContent = (props) => {
               }
               <br />
               <br />
-              <strong>Selected pre-packaged files:</strong>
+              <strong>Selected pre-packaged files from:</strong>
               <ul>
-                {getSelectedCartItems()
-                  .filter((item) => item.file_id)
+                {[
+                  ...new Set(
+                    getSelectedCartItems()
+                      .filter((item) => item.file_id)
+                      .map((item) => item.name),
+                  ),
+                ]
+                  .sort()
                   .map((item, key) => (
-                    <li key={key}>{item.area || item.file || item.title}</li>
+                    <li key={key}>{item}</li>
                   ))}
               </ul>
               <br />

package/src/components/CclTab/CclTab.jsx

@@ -17,6 +17,8 @@ function CclTab(props) {
     routing,
     redirect,
     loginRequired,
+    className = '',
+    hasSubtab = false,
   } = props;
   const token = useSelector((state) => state.userSession?.token);
   function onTabClick() {
@@ -25,22 +27,24 @@ function CclTab(props) {
   const [redirecting, setRedirecting] = React.useState(false);
   return (
     <div
-      className={cx('card', activeTab === tabId ? 'active' : '')}
+      className={cx('card ' + className, activeTab === tabId ? 'active ' : '')}
       onClick={(e) => {
         !loginRequired
-          ? onTabClick(e)
+          ? !hasSubtab && onTabClick(e)
           : loginRequired && token && onTabClick(e);
       }}
       onKeyDown={(e) => {
         !loginRequired
-          ? onTabClick(e)
+          ? !hasSubtab && onTabClick(e)
           : loginRequired && token && onTabClick(e);
       }}
       tabIndex="0"
       role="button"
       id={tabId}
     >
-      {loginRequired && !token ? (
+      {hasSubtab ? (
+        <span>{tabTitle}</span>
+      ) : loginRequired && !token ? (
         <CclLoginModal
           otherPath={redirect ? redirect : undefined}
           triggerComponent={() => (

package/src/components/CclTab/CclTabs.jsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 
 import CclTab from './CclTab';
 import PropTypes from 'prop-types';
+import { slugify } from '../Blocks/utils';
 
 /**
  * Tabs component documentation.
@@ -23,8 +24,7 @@ import PropTypes from 'prop-types';
 const CclTabs = (props) => {
   let { children, routing = false } = props;
   let [activeTab, setActiveTab] = useState(
-    props.children[0].props.tabId ||
-      props.children[0].props.tabTitle.split(' ').join('-'),
+    props.children[0].props.tabId || slugify(props.children[0].props.tabTitle),
   );
 
   function onClickTabItem(tab) {
@@ -35,11 +35,11 @@ const CclTabs = (props) => {
     const firstTab = children.filter((item) => !!item?.props?.tabTitle)[0];
     if (routing) {
       if (hash.startsWith('b_size')) {
-        setActiveTab(firstTab.props?.tabTitle?.split(' ').join('-'));
+        setActiveTab(slugify(firstTab.props?.tabTitle));
       } else if (hash) {
         setActiveTab(hash);
       } else {
-        setActiveTab(firstTab.props?.tabTitle?.split(' ').join('-'));
+        setActiveTab(slugify(firstTab.props?.tabTitle));
       }
     }
   }, [children, routing]);
@@ -53,7 +53,14 @@ const CclTabs = (props) => {
             .filter((item) => !!item?.props?.tabTitle)
             .map((child, key) => {
               const { tabTitle, redirect } = child.props;
-              const tabId = tabTitle?.split(' ').join('-');
+              const tabId = slugify(tabTitle);
+              let hasSubtab = false;
+              const currentTab = children.filter(
+                (item) => slugify(item?.props?.tabTitle) === tabId,
+              )[0];
+              if (currentTab?.props?.parent) {
+                hasSubtab = true;
+              }
               return (
                 <CclTab
                   activeTab={activeTab}
@@ -63,6 +70,7 @@ const CclTabs = (props) => {
                   tabTitle={tabTitle}
                   onClick={onClickTabItem}
                   redirect={redirect}
+                  hasSubtab={hasSubtab}
                   {...child.props}
                 />
               );
@@ -85,8 +93,7 @@ const CclTabs = (props) => {
             .flat()
             .filter((item) => !!item?.props?.tabTitle)
             .map((child, index) => {
-              return child.props?.tabTitle?.split(' ').join('-') !==
-                activeTab ? (
+              return slugify(child.props?.tabTitle) !== activeTab ? (
                 <div key={index} className="deactivate-content">
                   {child.props.children}
                 </div>

package/src/customizations/volto/components/manage/Diff/DiffField.jsx

@@ -0,0 +1,195 @@
+/**
+ * Diff field component.
+ * @module components/manage/Diff/DiffField
+ */
+
+import React from 'react';
+// import { diffWords as dWords } from 'diff';
+import { join, map } from 'lodash';
+import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
+import ReactDOMServer from 'react-dom/server';
+import { Provider } from 'react-intl-redux';
+import { createBrowserHistory } from 'history';
+// eslint-disable-next-line import/no-unresolved
+import { ConnectedRouter } from 'connected-react-router';
+import { useSelector } from 'react-redux';
+
+import { Api } from '@plone/volto/helpers';
+import configureStore from '@plone/volto/store';
+import { DefaultView } from '@plone/volto/components/';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+/**
+ * Enhanced diff words utility
+ * @function diffWords
+ * @param oneStr Field one
+ * @param twoStr Field two
+ */
+
+/**
+ * Diff field component.
+ * @function DiffField
+ * @param {*} one Field one
+ * @param {*} two Field two
+ * @param {Object} schema Field schema
+ * @returns {string} Markup of the component.
+ */
+const DiffField = ({
+  one,
+  two,
+  contentOne,
+  contentTwo,
+  view,
+  schema,
+  diffLib,
+}) => {
+  const language = useSelector((state) => state.intl.locale);
+  const readable_date_format = {
+    dateStyle: 'full',
+    timeStyle: 'short',
+  };
+  const diffWords = (oneStr, twoStr) => {
+    return diffLib.diffWords(String(oneStr), String(twoStr));
+  };
+
+  let parts, oneArray, twoArray;
+  if (schema.widget) {
+    switch (schema.widget) {
+      case 'richtext':
+        parts = diffWords(one?.data, two?.data);
+        break;
+      case 'datetime':
+        parts = diffWords(
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(one),
+          ),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(two),
+          ),
+        );
+        break;
+      case 'json':
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                <DefaultView content={contentOne} />
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                <DefaultView content={contentTwo} />
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      case 'textarea':
+      default:
+        parts = diffWords(one, two);
+        break;
+    }
+  } else if (schema.type === 'object') {
+    parts = diffWords(one?.filename || one, two?.filename || two);
+  } else if (schema.type === 'array') {
+    oneArray = (one || []).map((i) => i?.title || i);
+    twoArray = (two || []).map((j) => j?.title || j);
+    parts = diffWords(oneArray, twoArray);
+  } else {
+    parts = diffWords(one?.title || one, two?.title || two);
+  }
+  return (
+    <Grid compact data-testid="DiffField">
+      <Grid.Row inverted>
+        <Grid.Column width={12}>{schema.title}</Grid.Column>
+      </Grid.Row>
+      {view === 'split' && (
+        <Grid.Row>
+          <Grid.Column width={6} verticalAlign="top">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: join(
+                  map(
+                    parts,
+                    (part) =>
+                      (part.removed &&
+                        `<span class="deletion">${part.value}</span>`) ||
+                      (!part.added && `<span>${part.value}</span>`) ||
+                      '',
+                  ),
+                  '',
+                ),
+              }}
+            />
+          </Grid.Column>
+          <Grid.Column width={6} verticalAlign="top">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: join(
+                  map(
+                    parts,
+                    (part) =>
+                      (part.added &&
+                        `<span class="addition">${part.value}</span>`) ||
+                      (!part.removed && `<span>${part.value}</span>`) ||
+                      '',
+                  ),
+                  '',
+                ),
+              }}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      )}
+      {view === 'unified' && (
+        <Grid.Row>
+          <Grid.Column width={16} verticalAlign="top">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: join(
+                  map(
+                    parts,
+                    (part) =>
+                      (part.removed &&
+                        `<span class="deletion">${part.value}</span>`) ||
+                      (part.added &&
+                        `<span class="addition">${part.value}</span>`) ||
+                      (!part.added && `<span>${part.value}</span>`),
+                  ),
+                  '',
+                ),
+              }}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      )}
+    </Grid>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+DiffField.propTypes = {
+  one: PropTypes.any.isRequired,
+  two: PropTypes.any.isRequired,
+  contentOne: PropTypes.any,
+  contentTwo: PropTypes.any,
+  view: PropTypes.string.isRequired,
+  schema: PropTypes.shape({
+    widget: PropTypes.string,
+    type: PropTypes.string,
+    title: PropTypes.string,
+  }).isRequired,
+};
+
+export default injectLazyLibs('diffLib')(DiffField);