perf(site): no longer load language switcher and optimized image bloc…

…k rendering refs #161141 (#238)

* Added back ObjectBrowserWidget.jsx from 17.x.x branch

- before any changes to the anchor adding logic

* style: Automated code fix

* feat(teaser): modified ObjectBrowserWidget and UniversalLink to show links with hashes for manual links

* change(draft-image): to remove image when published date is set to the future

* change(draft-image): show draft image for items with publishing date in the future

- this flips the return value of the previous commit after ticket feedback

* feat(draft-image): added docstrings and unittests for checkIfPublished logic

* fix(performance): Moved language selection logic to LanguageSwitcher.jsx

- This way we don't have to use language selectors in Header.jsx if we are not using this feature which we are not on the EEA website

* perf(header): lazy load LanguageSwitcher

* fix(tests): load the loadable components within Header.test.jsx

* fix(tests): Header.test.jsx after loadable introduction and key missing from TopicsWidget.test.jsx

* fix(tests): several warnings due to bad test configuration

* fix(tests): use render froim testing-library as react-testing-library is depreacated in favor of the previous

* fix(tests): of header giving warning due to Dropdown text with function usage

- Per the upgrade step we need to have an object with children see
  Semantic-Org/Semantic-UI-React#4029

* fix(perf): preload voltoCustom.css in order to avoid layout shift

* Added Image.jsx from Volto 17.x.x before code changes

* style: Automated code fix

* fix(image): block default value selection for Image block size and align option

* change(image): use only mini, preview and large scales for image rendering

- unless the image is full-width from the align section in which case we use the huge scale

* revert lazy loading of voltoCustom.css as it didn't properly parse it as stylesheet

---------

Co-authored-by: eea-jenkins <[email protected]>

src/components/theme/CustomCSS/CustomCSS.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import config from '@plone/volto/registry';
 
 const CustomCSS = (props) => {
+  const href = `${config.settings.apiPath}/voltoCustom.css`;
   return (
-    <link
-      rel={'stylesheet'}
-      href={`${config.settings.apiPath}/voltoCustom.css`}
-    />
+    <>
+      <link rel="stylesheet" href={href} />
+    </>
   );
 };
 export default CustomCSS;

src/components/theme/Widgets/TopicsWidget.test.jsx

@@ -18,12 +18,17 @@ describe('TopicsWidget Component', () => {
       },
     });
 
+    const tags = [
+      { title: 'Environment', token: '1' },
+      { title: 'Climate', token: '2' },
+    ];
+
     const { container } = render(
       <Provider store={store}>
         <Router history={history}>
           <TopicsWidget
-            value={['Value1', 'Value2']}
-            children={''}
+            value={tags}
+            children={(tagTitle) => <span>{tagTitle}</span>}
             className={'test'}
           />
         </Router>

src/customizations/volto/components/manage/Blocks/Image/Edit.jsx

@@ -313,6 +313,7 @@ class Edit extends Component {
                         '@id': data.url,
                         image_field: data.image_field,
                         image_scales: data.image_scales,
+                        data: data,
                       }
                     : undefined
                 }
@@ -323,7 +324,9 @@ class Edit extends Component {
                     ? // Backwards compat in the case that the block is storing the full server URL
                       (() => {
                         if (data.size === 'l')
-                          return `${flattenToAppURL(data.url)}/@@images/image`;
+                          return `${flattenToAppURL(
+                            data.url,
+                          )}/@@images/image/large`;
                         if (data.size === 'm')
                           return `${flattenToAppURL(
                             data.url,
@@ -332,7 +335,9 @@ class Edit extends Component {
                           return `${flattenToAppURL(
                             data.url,
                           )}/@@images/image/mini`;
-                        return `${flattenToAppURL(data.url)}/@@images/image`;
+                        return `${flattenToAppURL(
+                          data.url,
+                        )}/@@images/image/large`;
                       })()
                     : data.url
                 }

src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -76,6 +76,7 @@ export const View = (props) => {
                               '@id': data.url,
                               image_field: data.image_field,
                               image_scales: data.image_scales,
+                              data: data,
                             }
                           : undefined
                       }
@@ -88,7 +89,7 @@ export const View = (props) => {
                               if (data.size === 'l')
                                 return `${flattenToAppURL(
                                   data.url,
-                                )}/@@images/image`;
+                                )}/@@images/image/large`;
                               if (data.size === 'm')
                                 return `${flattenToAppURL(
                                   data.url,
@@ -99,7 +100,7 @@ export const View = (props) => {
                                 )}/@@images/image/mini`;
                               return `${flattenToAppURL(
                                 data.url,
-                              )}/@@images/image`;
+                              )}/@@images/image/large`;
                             })()
                           : data.url
                       }

src/customizations/volto/components/manage/Blocks/Image/schema.js

@@ -95,10 +95,12 @@ export function ImageSchema({ formData, intl }) {
       align: {
         title: intl.formatMessage(messages.Align),
         widget: 'align',
+        default: 'center',
       },
       size: {
         title: intl.formatMessage(messages.size),
         widget: 'image_size',
+        default: 'l',
       },
       href: {
         title: intl.formatMessage(messages.LinkTo),

src/customizations/volto/components/theme/Header/Header.jsx

@@ -9,23 +9,20 @@ import { connect, useDispatch, useSelector } from 'react-redux';
 
 import { withRouter } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
-import {
-  getBaseUrl,
-  hasApiExpander,
-  flattenToAppURL,
-} from '@plone/volto/helpers';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
 import { getNavigation } from '@plone/volto/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
-import { find } from 'lodash';
-import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
 
 import config from '@plone/volto/registry';
 import { compose } from 'recompose';
 import { BodyClass } from '@plone/volto/helpers';
 
 import cx from 'classnames';
+import loadable from '@loadable/component';
+
+const LazyLanguageSwitcher = loadable(() => import('./LanguageSwitcher'));
 
 function removeTrailingSlash(path) {
   return path.replace(/\/+$/, '');
@@ -35,11 +32,6 @@ function removeTrailingSlash(path) {
  * EEA Specific Header component.
  */
 const EEAHeader = ({ pathname, token, items, history, subsite }) => {
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-
   const router_pathname = useSelector((state) => {
     return removeTrailingSlash(state.router?.location?.pathname) || '';
   });
@@ -61,31 +53,25 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
   const { eea } = config.settings;
   const headerOpts = eea.headerOpts || {};
   const headerSearchBox = eea.headerSearchBox || [];
-  const { logo, logoWhite } = headerOpts || {};
+  const { logo, logoWhite } = headerOpts;
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
   const previousToken = usePrevious(token);
-  const [language, setLanguage] = React.useState(
-    currentLang || eea.defaultLanguage,
-  );
 
   React.useEffect(() => {
-    const { settings } = config;
     const base_url = getBaseUrl(pathname);
+    const { settings } = config;
+
+    // Check if navigation data needs to be fetched based on the API expander availability
     if (!hasApiExpander('navigation', base_url)) {
       dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [pathname, dispatch]);
 
-  React.useEffect(() => {
+    // Additional check for token changes
     if (token !== previousToken) {
-      const { settings } = config;
-      const base = getBaseUrl(pathname);
-      if (!hasApiExpander('navigation', base)) {
-        dispatch(getNavigation(base, settings.navDepth));
-      }
+      dispatch(getNavigation(base_url, settings.navDepth));
     }
-  }, [token, dispatch, pathname, previousToken]);
+  }, [pathname, token, dispatch, previousToken]);
 
   return (
     <Header menuItems={items}>
@@ -155,50 +141,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
         {config.settings.isMultilingual &&
           config.settings.supportedLanguages.length > 1 &&
           config.settings.hasLanguageDropdown && (
-            <Header.TopDropdownMenu
-              id="language-switcher"
-              className="item"
-              text={`${language.toUpperCase()}`}
-              mobileText={`${language.toUpperCase()}`}
-              icon={
-                <Image
-                  src={globeIcon}
-                  alt="language dropdown globe icon"
-                ></Image>
-              }
-              viewportWidth={width}
-            >
-              <ul
-                className="wrapper language-list"
-                role="listbox"
-                aria-label="language switcher"
-              >
-                {eea.languages.map((item, index) => (
-                  <Dropdown.Item
-                    as="li"
-                    key={index}
-                    text={
-                      <span>
-                        {item.name}
-                        <span className="country-code">
-                          {item.code.toUpperCase()}
-                        </span>
-                      </span>
-                    }
-                    onClick={() => {
-                      const translation = find(translations, {
-                        language: item.code,
-                      });
-                      const to = translation
-                        ? flattenToAppURL(translation['@id'])
-                        : `/${item.code}`;
-                      setLanguage(item.code);
-                      history.push(to);
-                    }}
-                  ></Dropdown.Item>
-                ))}
-              </ul>
-            </Header.TopDropdownMenu>
+            <LazyLanguageSwitcher width={width} history={history} />
           )}
       </Header.TopHeader>
       <Header.Main