@plone/volto 19.0.0-alpha.35 → 19.0.0-alpha.37

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.35",
+  "version": "19.0.0-alpha.37",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -134,7 +134,7 @@
     "react-animate-height": "2.0.17",
     "react-aria-components": "^1.17.0",
     "react-beautiful-dnd": "13.0.0",
-    "react-cookie": "4.1.1",
+    "react-cookie": "8.1.2",
     "react-dates": "21.8.0",
     "react-detect-click-outside": "1.1.1",
     "react-dom": "18.2.0",
@@ -172,18 +172,18 @@
     "slate": "0.118.1",
     "slate-hyperscript": "0.115.0",
     "slate-react": "0.117.4",
-    "superagent": "3.8.2",
+    "superagent": "10.3.0",
     "tlds": "1.203.1",
     "undoo": "0.5.0",
-    "universal-cookie": "4.0.4",
-    "universal-cookie-express": "4.0.3",
+    "universal-cookie": "8.1.2",
+    "universal-cookie-express": "8.1.2",
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
-    "@plone/scripts": "4.0.0-alpha.7",
+    "@plone/components": "4.0.0-alpha.8",
+    "@plone/scripts": "4.0.0-alpha.8",
     "@plone/registry": "3.0.0-alpha.12",
-    "@plone/volto-slate": "19.0.0-alpha.16",
-    "@plone/components": "4.0.0-alpha.8"
+    "@plone/volto-slate": "19.0.0-alpha.19"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -287,11 +287,11 @@
     "wait-on": "^9.0.4",
     "webpack": "5.105.4",
     "webpack-bundle-analyzer": "4.10.1",
-    "webpack-dev-server": "^5.2.3",
+    "webpack-dev-server": "^5.2.4",
     "webpack-node-externals": "3.0.0",
     "@plone/razzle": "1.0.0-alpha.5",
+    "@plone/types": "2.0.0-alpha.20",
     "@plone/babel-preset-razzle": "^1.0.0-alpha.1",
-    "@plone/types": "2.0.0-alpha.19",
     "@plone/volto-coresandbox": "1.0.0",
     "@plone/razzle-dev-utils": "1.0.0-alpha.3"
   },

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import config from '@plone/volto/registry';
 import Add from './Add';
 
@@ -43,7 +44,9 @@ describe('Add', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        <CookiesProvider>
+          <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        </CookiesProvider>
       </Provider>,
     );
     expect(container).toMatchSnapshot();
@@ -70,7 +73,9 @@ describe('Add', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        <CookiesProvider>
+          <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -109,7 +114,9 @@ describe('Add', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        <CookiesProvider>
+          <Add location={{ pathname: '/blog', search: { type: 'Document' } }} />
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -46,8 +47,10 @@ describe('Aliases', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <Aliases location={{ pathname: '/blog/aliases' }} />
-        <div id="toolbar"></div>
+        <CookiesProvider>
+          <Aliases location={{ pathname: '/blog/aliases' }} />
+          <div id="toolbar"></div>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -10,6 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import AnimateHeight from 'react-animate-height';
 import config from '@plone/volto/registry';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import BlockChooserSearch from './BlockChooserSearch';
@@ -98,16 +99,10 @@ const BlockChooser = ({
   }
   const [filterValue, setFilterValue] = React.useState('');
 
-  const getFormatMessage = (message) =>
-    intl.formatMessage({
-      id: message,
-      defaultMessage: message,
-    });
-
   function blocksAvailableFilter(blocks) {
     return blocks.filter(
       (block) =>
-        getFormatMessage(block.title)
+        formatMessageWithFallback(intl, block.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) ||
         block.title.toLowerCase().includes(filterValue.toLowerCase()) ||
@@ -117,7 +112,7 @@ const BlockChooser = ({
   function filterVariations(block) {
     return block.variations?.filter(
       (variation) =>
-        getFormatMessage(variation.title)
+        formatMessageWithFallback(intl, variation.title)
           .toLowerCase()
           .includes(filterValue.toLowerCase()) &&
         !variation.title.toLowerCase().includes('default'),
@@ -145,9 +140,11 @@ const BlockChooser = ({
           }}
         >
           <Icon name={block.icon} size="36px" />
-          {getFormatMessage(block.title)}
+          {formatMessageWithFallback(intl, block.title)}
           {filterValue && variations?.[0]?.title && (
-            <small>{getFormatMessage(variations[0].title)}</small>
+            <small>
+              {formatMessageWithFallback(intl, variations[0].title)}
+            </small>
           )}
         </Button>
       </Button.Group>

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

@@ -149,15 +149,6 @@ export class Edit extends Component {
                 this.props.setUIState({ hovered: this.props.id });
               }
             }}
-            onFocus={(e) => {
-              // TODO: This `onFocus` steals somehow the focus from the slate block
-              // we have to investigate why this is happening
-              // Apparently, I can't see any difference in the behavior
-              // If any, we can fix it in successive iterations
-              // if (this.props.hovered !== this.props.id) {
-              //   this.props.setUIState({ hovered: this.props.id });
-              // }
-            }}
             onMouseLeave={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -172,6 +163,24 @@ export class Edit extends Component {
                   e,
                 );
             }}
+            // onFocus={(e) => {
+            //   // TODO: This `onFocus` steals somehow the focus from the slate block
+            //   // we have to investigate why this is happening
+            //   // Apparently, I can't see any difference in the behavior
+            //   // If any, we can fix it in successive iterations
+            //   // if (this.props.hovered !== this.props.id) {
+            //   //   this.props.setUIState({ hovered: this.props.id });
+            //   // }
+            // }}
+            onFocus={(e) => {
+              const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+              !this.props.selected &&
+                this.props.onSelectBlock(
+                  this.props.id,
+                  this.props.selected ? false : isMultipleSelection,
+                  e,
+                );
+            }}
             onKeyDown={
               !(blockHasOwnFocusManagement || disableNewBlocks)
                 ? (e) =>
@@ -218,6 +227,7 @@ export class Edit extends Component {
               e.stopPropagation();
               this.props.setUIState({ hovered: this.props.id });
             }}
+            // Mantenha apenas este onFocus ou remova se não for necessário
             onFocus={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -245,7 +255,6 @@ export class Edit extends Component {
             className={cx(`block ${type}`, { selected: this.props.selected })}
             style={{ outline: 'none' }}
             ref={this.blockNode}
-            // The tabIndex is required for the keyboard navigation
             tabIndex={-1}
           >
             {this.props.intl.formatMessage(messages.unknownBlock, {

package/src/components/manage/Blocks/Block/Order/Item.jsx

@@ -5,7 +5,9 @@ import includes from 'lodash/includes';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { setUIState } from '@plone/volto/actions/form/form';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import config from '@plone/volto/registry';
+import { useIntl } from 'react-intl';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -34,6 +36,7 @@ export const Item = forwardRef(
     },
     ref,
   ) => {
+    const intl = useIntl();
     const selected = useSelector((state) => state.form.ui.selected);
     const hovered = useSelector((state) => state.form.ui.hovered);
     const multiSelected = useSelector((state) => state.form.ui.multiSelected);
@@ -49,7 +52,11 @@ export const Item = forwardRef(
         ? data.required
         : includes(config.blocks.requiredBlocks, data?.['@type']);
     const fixed = !!data?.fixed;
-
+    const configTitle = config.blocks.blocksConfig[data?.['@type']]?.title;
+    const blockTitle =
+      data?.plaintext ||
+      formatMessageWithFallback(intl, configTitle) ||
+      data?.title;
     return (
       <li
         className={classNames(
@@ -122,9 +129,7 @@ export const Item = forwardRef(
                 style={{ verticalAlign: 'middle' }}
               />
             )}{' '}
-            {data?.plaintext ||
-              config.blocks.blocksConfig[data?.['@type']]?.title ||
-              data?.title}
+            {blockTitle}
           </span>
           {!clone && onRemove && !required && (
             <button

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

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import { ContentsComponent as Contents } from './Contents';
 
@@ -111,10 +112,12 @@ describe('Contents', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Contents location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Contents location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Contents/DropZoneContent.jsx

@@ -113,6 +113,7 @@ const DropZoneContent = (props) => {
   };
 
   const onDrop = async (e) => {
+    e.preventDefault();
     if (!hasFiles(e)) {
       return;
     }

package/src/components/manage/Controlpanels/AddonsControlpanel.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import AddonsControlpanel from './AddonsControlpanel';
 
@@ -80,10 +81,12 @@ describe('AddonsControlpanel', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <div>
-          <AddonsControlpanel location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </div>
+        <CookiesProvider>
+          <div>
+            <AddonsControlpanel location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </div>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/Aliases.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import Aliases from './Aliases';
 import { MemoryRouter } from 'react-router';
@@ -95,10 +96,12 @@ describe('Aliases', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Aliases location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Aliases location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/BlockType.tsx

@@ -2,6 +2,7 @@ import { getBlockTypes } from '@plone/volto/actions/blockTypes/blockTypes';
 import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { getParentUrl, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { formatMessageWithFallback } from '@plone/volto/helpers/I18n/I18n';
 import { useClient } from '@plone/volto/hooks';
 import config from '@plone/volto/registry';
 import { useEffect } from 'react';
@@ -86,9 +87,7 @@ const BlockTypeControlpanel = (props: RouteProps) => {
     return <Error error={blockTypes.error} />;
   }
 
-  const translatedTitle = block?.title
-    ? intl.formatMessage({ id: block.title, defaultMessage: block.title })
-    : id;
+  const translatedTitle = formatMessageWithFallback(intl, block?.title) || id;
 
   return (
     blockTypes.loaded && (

package/src/components/manage/Controlpanels/ContentType.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { render } from '@testing-library/react';
 
 import ContentType from './ContentType';
@@ -58,15 +59,17 @@ describe('ContentType', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter
-          initialEntries={['/controlpanel/dexterity-types/Document']}
-        >
-          <Route
-            path={'/controlpanel/dexterity-types/:id'}
-            component={ContentType}
-          />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter
+            initialEntries={['/controlpanel/dexterity-types/Document']}
+          >
+            <Route
+              path={'/controlpanel/dexterity-types/:id'}
+              component={ContentType}
+            />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/ContentTypeLayout.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import ContentTypeLayout from './ContentTypeLayout';
 
@@ -41,15 +42,17 @@ describe('ContentTypeLayout', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter
-          initialEntries={['/controlpanel/dexterity-types/Document/layout']}
-        >
-          <Route
-            path={'/controlpanel/dexterity-types/:id/layout'}
-            component={ContentTypeLayout}
-          />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter
+            initialEntries={['/controlpanel/dexterity-types/Document/layout']}
+          >
+            <Route
+              path={'/controlpanel/dexterity-types/:id/layout'}
+              component={ContentTypeLayout}
+            />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/ContentTypes.jsx

@@ -227,6 +227,7 @@ class ContentTypes extends Component {
       addTypeError: undefined,
       addTypeSetFormDataCallback: undefined,
     });
+    this._addTypeTrigger?.focus();
     toast.success(
       <Toast
         success
@@ -369,10 +370,13 @@ class ContentTypes extends Component {
           />
           <ModalForm
             open={this.state.showAddType}
-            className="modal"
+            className="modal add-content-type"
             onSubmit={this.onAddTypeSubmit}
             submitError={this.state.addTypeError}
-            onCancel={() => this.setState({ showAddType: false })}
+            onCancel={() => {
+              this.setState({ showAddType: false });
+              this._addTypeTrigger?.focus();
+            }}
             title={this.props.intl.formatMessage(messages.addTypeFormTitle)}
             loading={this.props.cpanelRequest.post.loading}
             schema={{
@@ -474,6 +478,9 @@ class ContentTypes extends Component {
                     aria-label={this.props.intl.formatMessage(messages.add)}
                     tabIndex={0}
                     id="toolbar-add"
+                    ref={(el) => {
+                      this._addTypeTrigger = el;
+                    }}
                     onClick={() => {
                       this.setState({ showAddType: true });
                     }}

package/src/components/manage/Controlpanels/ContentTypes.test.jsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import ContentTypes from './ContentTypes';
 
@@ -84,10 +85,12 @@ describe('ContentTypes', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/controlpanel/dexterity-types']}>
-          <Route path={'/controlpanel/:id'} component={ContentTypes} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/controlpanel/dexterity-types']}>
+            <Route path={'/controlpanel/:id'} component={ContentTypes} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/Controlpanel.test.jsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import Controlpanel from './Controlpanel';
 
 const mockStore = configureStore();
@@ -70,10 +71,12 @@ describe('Controlpanel', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
-          <Route path={'/controlpanel/:id'} component={Controlpanel} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter initialEntries={['/controlpanel/date-and-time']}>
+            <Route path={'/controlpanel/:id'} component={Controlpanel} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
@@ -108,10 +109,12 @@ describe('Controlpanels', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Controlpanels location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Controlpanels location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -186,10 +189,12 @@ describe('Controlpanels', () => {
     store.dispatch = vi.fn(() => Promise.resolve());
     const { container } = render(
       <Provider store={store}>
-        <MemoryRouter>
-          <Controlpanels location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </MemoryRouter>
+        <CookiesProvider>
+          <MemoryRouter>
+            <Controlpanels location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </MemoryRouter>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/Groups/GroupsControlpanel.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, act } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import jwt from 'jsonwebtoken';
 
 import GroupsControlpanel from './GroupsControlpanel';
@@ -41,10 +42,12 @@ describe('UsersControlpanel', () => {
     const { container } = await act(async () => {
       return render(
         <Provider store={store}>
-          <>
-            <GroupsControlpanel location={{ pathname: '/blog' }} />
-            <div id="toolbar"></div>
-          </>
+          <CookiesProvider>
+            <>
+              <GroupsControlpanel location={{ pathname: '/blog' }} />
+              <div id="toolbar"></div>
+            </>
+          </CookiesProvider>
         </Provider>,
       );
     });

package/src/components/manage/Controlpanels/ModerateComments.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import ModerateComments from './ModerateComments';
 
 const mockStore = configureStore();
@@ -53,10 +54,12 @@ describe('ModerateComments', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <div>
-          <ModerateComments location={{ pathname: '/blog' }} />
-          <div id="toolbar"></div>
-        </div>
+        <CookiesProvider>
+          <div>
+            <ModerateComments location={{ pathname: '/blog' }} />
+            <div id="toolbar"></div>
+          </div>
+        </CookiesProvider>
       </Provider>,
     );
 

package/src/components/manage/Controlpanels/Rules/AddRule.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -25,10 +26,12 @@ describe('AddRule', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <AddRule location={{ pathname: '/controlpanel/rules/add' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <AddRule location={{ pathname: '/controlpanel/rules/add' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );