@plone/volto 16.26.1 → 16.28.0

package/src/components/manage/LinksToItem/LinksToItem.test.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import LinksToItem from './LinksToItem';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+jest.mock('react-portal', () => ({
+  Portal: jest.fn(() => <div id="Portal" />),
+}));
+jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+
+describe('LinksToItem', () => {
+  it('renders "links and references" view', () => {
+    const store = mockStore({
+      relations: {
+        subrequests: {
+          '/page-1': {
+            data: {
+              isReferencing: {
+                items: [
+                  {
+                    source: {
+                      '@id': 'http://localhost:3000/page-basil',
+                      '@type': 'Document',
+                      UID: 'SOMEUID008',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Basil',
+                      type_title: 'Document',
+                    },
+                    target: {
+                      '@id': 'http://localhost:3000/page-tomato',
+                      '@type': 'Document',
+                      UID: 'SOMEUID007',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Tomato',
+                      type_title: 'Document',
+                    },
+                  },
+                ],
+                items_total: 1,
+              },
+              relatedItems: {
+                items: [
+                  {
+                    source: {
+                      '@id': 'http://localhost:3000/page-cucumber',
+                      '@type': 'Document',
+                      UID: 'SOMEUID008',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Cucumber',
+                      type_title: 'Document',
+                    },
+                    target: {
+                      '@id': 'http://localhost:3000/page-tomato',
+                      '@type': 'Document',
+                      UID: 'SOMEUID007',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Tomato',
+                      type_title: 'Document',
+                    },
+                  },
+                ],
+                items_total: 1,
+              },
+            },
+          },
+        },
+      },
+      content: {
+        data: {
+          UID: 'SOMEUID007',
+          title: 'page #1',
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/manage/Toolbar/More.jsx

@@ -53,6 +53,10 @@ const messages = defineMessages({
     id: 'URL Management',
     defaultMessage: 'URL Management',
   },
+  linkstoitem: {
+    id: 'Links and references',
+    defaultMessage: 'Links and references',
+  },
   ManageTranslations: {
     id: 'Manage Translations',
     defaultMessage: 'Manage Translations',
@@ -227,6 +231,7 @@ class More extends Component {
     const aliasesAction = find(this.props.actions.object_buttons, {
       id: 'redirection',
     });
+
     const { content, intl } = this.props;
 
     const dateOptions = {
@@ -317,6 +322,16 @@ class More extends Component {
                 </li>
               )}
             </Plug>
+            {path !== '' && !config.settings.excludeLinksAndReferencesMenuItem && (
+              <Plug pluggable="toolbar-more-menu-list" id="linkstoitems">
+                <li>
+                  <Link to={`${path}/links-to-item`}>
+                    {this.props.intl.formatMessage(messages.linkstoitem)}
+                    <Icon name={rightArrowSVG} size="24px" />
+                  </Link>
+                </li>
+              </Plug>
+            )}
             <Plug pluggable="toolbar-more-menu-list" id="rules">
               {rulesAction && (
                 <li>

package/src/components/theme/ContentMetadataTags/ContentMetadataTags.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { toPublicURL, Helmet } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
@@ -16,8 +15,21 @@ const ContentMetadataTags = (props) => {
 
   const getContentImageInfo = () => {
     const { contentMetadataTagsImageField } = config.settings;
-    const image = props.content[contentMetadataTagsImageField];
+    const image_field = props.content[contentMetadataTagsImageField];
+    const preview_image = props.content.preview_image;
+    const preview_image_link = props.content.preview_image_link;
     const { opengraph_image } = props.content;
+    let image = undefined;
+
+    if (opengraph_image !== undefined && opengraph_image) {
+      image = opengraph_image;
+    } else if (preview_image_link !== undefined && preview_image_link) {
+      image = preview_image_link[contentMetadataTagsImageField];
+    } else if (preview_image !== undefined && preview_image) {
+      image = preview_image;
+    } else if (image_field !== undefined && image_field) {
+      image = image_field;
+    }
 
     const contentImageInfo = {
       contentHasImage: false,
@@ -25,10 +37,7 @@ const ContentMetadataTags = (props) => {
       height: null,
       width: null,
     };
-    contentImageInfo.contentHasImage =
-      opengraph_image?.scales?.large?.download ||
-      image?.scales?.large?.download ||
-      false;
+    contentImageInfo.contentHasImage = image?.scales?.large?.download || false;
 
     if (contentImageInfo.contentHasImage && opengraph_image?.scales?.large) {
       contentImageInfo.url = opengraph_image.scales.large.download;
@@ -54,6 +63,7 @@ const ContentMetadataTags = (props) => {
           property="og:title"
           content={opengraph_title || seo_title || title}
         />
+        <meta property="og:type" content={'website'} />
         <meta
           property="og:url"
           content={seo_canonical_url || toPublicURL(props.content['@id'])}
@@ -65,6 +75,12 @@ const ContentMetadataTags = (props) => {
             content={toPublicURL(contentImageInfo.url)}
           />
         )}
+        {contentImageInfo.contentHasImage && (
+          <meta
+            property="twitter:image"
+            content={toPublicURL(contentImageInfo.url)}
+          />
+        )}
         {contentImageInfo.contentHasImage && (
           <meta property="og:image:width" content={contentImageInfo.width} />
         )}
@@ -78,6 +94,21 @@ const ContentMetadataTags = (props) => {
           />
         )}
         <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={seo_canonical_url || toPublicURL(props.content['@id'])}
+        />
+        {/* TODO: Improve SEO backend metadata providers by adding the twitter handler */}
+        {/* <meta property="twitter:site" content={'@my_twitter_handler'} /> */}
+        <meta
+          property="twitter:title"
+          content={opengraph_title || seo_title || title}
+        />
+        <meta
+          property="twitter:description"
+          content={seo_description || description}
+        />
+        <meta property="twitter:domain" content={config.settings.publicURL} />
       </Helmet>
     </>
   );

package/src/config/NonContentRoutes.jsx

@@ -12,6 +12,7 @@ export const nonContentRoutes = [
   '/diff',
   /\/edit$/,
   '/historyview',
+  '/links-to-item',
   '/layout',
   '/login',
   '/logout',

package/src/config/index.js

@@ -183,6 +183,8 @@ let config = {
     hashLinkSmoothScroll: false,
     styleClassNameExtenders,
     querystringSearchGet: false,
+    blockSettingsTabFieldsetsInitialStateOpen: true,
+    excludeLinksAndReferencesMenuItem: true,
   },
   experimental: {
     addBlockButton: {

package/src/constants/ActionTypes.js

@@ -36,6 +36,11 @@ export const GET_NAVIGATION = 'GET_NAVIGATION';
 export const GET_PRINCIPALS = 'GET_PRINCIPALS';
 export const GET_QUERYSTRING = 'GET_QUERYSTRING';
 export const GET_QUERYSTRING_RESULTS = 'GET_QUERYSTRING_RESULTS';
+export const CREATE_RELATIONS = 'CREATE_RELATIONS';
+export const DELETE_RELATIONS = 'DELETE_RELATIONS';
+export const LIST_RELATIONS = 'LIST_RELATIONS';
+export const STATS_RELATIONS = 'STATS_RELATIONS';
+export const REBUILD_RELATIONS = 'REBUILD_RELATIONS';
 export const GET_SCHEMA = 'GET_SCHEMA';
 export const POST_SCHEMA = 'POST_SCHEMA';
 export const PUT_SCHEMA = 'PUT_SCHEMA';

package/src/reducers/index.js

@@ -25,6 +25,7 @@ import messages from '@plone/volto/reducers/messages/messages';
 import navigation from '@plone/volto/reducers/navigation/navigation';
 import querystring from '@plone/volto/reducers/querystring/querystring';
 import querystringsearch from '@plone/volto/reducers/querystringsearch/querystringsearch';
+import relations from '@plone/volto/reducers/relations/relations';
 import roles from '@plone/volto/reducers/roles/roles';
 import rules from '@plone/volto/reducers/rules/rules';
 import controlpanelrule from '@plone/volto/reducers/controlPanelRule/controlPanelRule';
@@ -80,6 +81,7 @@ const reducers = {
   navigation,
   querystring,
   querystringsearch,
+  relations,
   roles,
   rules,
   controlpanelrule,

package/src/reducers/relations/relations.js

@@ -0,0 +1,201 @@
+/**
+ * Relations reducer.
+ * @module reducers/relations/relations
+ */
+
+import {
+  CREATE_RELATIONS,
+  DELETE_RELATIONS,
+  LIST_RELATIONS,
+  STATS_RELATIONS,
+  REBUILD_RELATIONS,
+} from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  relations: {
+    error: null,
+    loaded: false,
+    loading: false,
+    data: null,
+  },
+  stats: {
+    error: null,
+    loaded: false,
+    loading: false,
+    data: null,
+  },
+  create: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  delete: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  rebuild: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  subrequests: {},
+};
+
+/**
+ * Get request key
+ * @function getRequestKey
+ * @param {string} actionType Action type.
+ * @returns {string} Request key.
+ */
+function getRequestKey(actionType) {
+  return actionType.split('_')[0].toLowerCase();
+}
+
+/**
+ * Relations reducer.
+ * @function relations
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function relations(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${LIST_RELATIONS}_PENDING`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                data: null,
+                loaded: false,
+                loading: true,
+                error: null,
+              },
+            },
+          }
+        : {
+            ...state,
+            relations: {
+              data: null,
+              loading: true,
+              loaded: false,
+              error: null,
+            },
+          };
+    case `${LIST_RELATIONS}_SUCCESS`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                data: action.result.relations,
+                loading: false,
+                loaded: true,
+                error: null,
+              },
+            },
+          }
+        : {
+            ...state,
+            relations: {
+              data: action.result.relations,
+              loading: false,
+              loaded: true,
+              error: null,
+            },
+          };
+    case `${LIST_RELATIONS}_FAIL`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                data: null,
+                loading: false,
+                loaded: false,
+                error: action.error,
+              },
+            },
+          }
+        : {
+            ...state,
+            relations: {
+              data: null,
+              loading: false,
+              loaded: false,
+              error: action.error,
+            },
+          };
+
+    case `${STATS_RELATIONS}_PENDING`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: true,
+          loaded: false,
+          error: null,
+          data: null,
+        },
+      };
+    case `${STATS_RELATIONS}_SUCCESS`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: true,
+          error: null,
+          data: action.result,
+        },
+      };
+    case `${STATS_RELATIONS}_FAIL`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: false,
+          error: action.error,
+          data: null,
+        },
+      };
+
+    case `${CREATE_RELATIONS}_PENDING`:
+    case `${DELETE_RELATIONS}_PENDING`:
+    case `${REBUILD_RELATIONS}_PENDING`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: true,
+          loaded: false,
+          error: null,
+        },
+      };
+    case `${CREATE_RELATIONS}_SUCCESS`:
+    case `${DELETE_RELATIONS}_SUCCESS`:
+    case `${REBUILD_RELATIONS}_SUCCESS`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      };
+    case `${CREATE_RELATIONS}_FAIL`:
+    case `${DELETE_RELATIONS}_FAIL`:
+    case `${REBUILD_RELATIONS}_FAIL`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: false,
+          error: action.error,
+        },
+      };
+    default:
+      return state;
+  }
+}

package/src/routes.js

@@ -23,6 +23,7 @@ import {
   Diff,
   Edit,
   History,
+  LinksToItem,
   Login,
   Logout,
   ManageTranslations,
@@ -280,6 +281,14 @@ export const defaultRoutes = [
     path: '/**/manage-translations',
     component: ManageTranslations,
   },
+  {
+    path: '/links-to-item',
+    component: LinksToItem,
+  },
+  {
+    path: '/**/links-to-item',
+    component: LinksToItem,
+  },
   {
     path: '/register',
     component: Register,

package/theme/themes/pastanaga/extras/contents.less

@@ -192,6 +192,10 @@
     white-space: normal;
     word-break: break-all;
   }
+
+  .broken-links-list {
+    margin-top: 30px;
+  }
 }
 
 .contenttype-event {