(feat):App extras exceptions (#5621)

Co-authored-by: ichim-david <ichim.david@gmail.com>
Co-authored-by: Steve Piercy <web@stevepiercy.com>

docs/source/recipes/appextras.md

@@ -9,6 +9,14 @@ myst:
 
 # AppExtras component
 
+```{versionchanged} 17.11.6
+Added the `ignore` property.
+```
+
+```{versionchanged} 16.30.3
+Added the `ignore` property.
+```
+
 The `AppExtras` component is a general use insertion point for things like
 analytics, general purpose code spanning the whole application or third party
 services code. AppExtras component inserts will be rendered by the `App`
@@ -22,15 +30,15 @@ a custom `src/customizations/components/theme/AppExtras/AppExtras.jsx`...
 Or you can use the new key of `config.settings`, the `appExtras`. This is
 a list of registrations, each registration is an object with:
 
-- `match`: The `match` key is for objects compatible with [react-router's
-matchPath](https://v5.reactrouter.com/web/api/matchPath), so it can be either
-a simple string or a match object.
+- `match`: The `match` key is for objects compatible with [react-router's `matchPath`](https://v5.reactrouter.com/web/api/matchPath). It can be either a string or a [`match`](https://v5.reactrouter.com/web/api/match) object.
+- `ignore`: The `ignore` key is for routes compatible with the [react-router's `matchPath`](https://v5.reactrouter.com/web/api/matchPath) property, and ignores all the results in the `ignore` rule.
+  It can be either a string or a [`match`](https://v5.reactrouter.com/web/api/match) object.
 - `component`. Use the `component` to link the component to be used.
-- `props`: Extra props to be inject to the actual component used.
+- `props`: Extra props to be injected into the actual component used.
 
 For example:
 
-``` jsx
+```jsx
 import { settings as defaultSettings } from '@plone/volto/config'
 
 export settings = {
@@ -54,10 +62,21 @@ export settings = {
     {
       path: '/blog/**/edit',
       component: ExtraToolbarButton,
-    }
+    },
+     {
+      match: {
+       match: '/frontpage',
+       ignore: '/frontpage/images',
+      },
+      component: FrontPage
+    },
   ]
 }
 ```
 
-You can use this to render, for example, `<Portal>` components to be inserted
-somewhere in the website.
+The above example will apply the rules to their respective routes.
+
+-   Insert a Google Analytics tag everywhere.
+-   Insert the `WordClouds` component to the `/blogs` route.
+-   Insert the `ExtraToolbarButton` component when editing objects under the path `/blog/**/edit`.
+-   Insert the `FrontPage` component to the `frontpage` route, except under `/frontpage/images`.

packages/volto/news/5621.feature

@@ -0,0 +1 @@
+Added the `ignore` property to allow exceptions to rules that are applied to all routes. @dobri1408

src/components/theme/AppExtras/AppExtras.jsx

@@ -8,6 +8,8 @@ const AppExtras = (props) => {
   const { pathname } = props;
   const active = appExtras
     .map((reg) => {
+      const ignored = matchPath(pathname, reg.ignore);
+      if (ignored) return null;
       const match = matchPath(pathname, reg.match);
       return match ? { reg, match } : null;
     })

src/components/theme/AppExtras/AppExtras.test.jsx

@@ -46,6 +46,13 @@ beforeAll(() => {
         <div className="something">{JSON.stringify(props.match)}</div>
       )),
     },
+    {
+      match: '/frontpage',
+      ignore: '/frontpage/images',
+      component: jest.fn((props) => (
+        <div className="frontpage-content">{JSON.stringify(props.match)}</div>
+      )),
+    },
   ];
 });
 
@@ -85,4 +92,17 @@ describe('AppExtras', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+  it('ignore property works', () => {
+    const componentView = renderer.create(
+      <AppExtras pathname="/frontpage"></AppExtras>,
+    );
+    const componentEdit = renderer.create(
+      <AppExtras pathname="/frontpage/images"></AppExtras>,
+    );
+
+    const jsonView = componentView.toJSON();
+    expect(jsonView).toMatchSnapshot();
+    const jsonEdit = componentEdit.toJSON();
+    expect(jsonEdit).toMatchSnapshot();
+  });
 });

src/components/theme/AppExtras/__snapshots__/AppExtras.test.jsx.snap

@@ -30,6 +30,29 @@ Array [
 ]
 `;
 
+exports[`AppExtras ignore property works 1`] = `
+Array [
+  <div
+    className="everywhere"
+  >
+    /frontpage
+  </div>,
+  <div
+    className="frontpage-content"
+  >
+    {"path":"/frontpage","url":"/frontpage","isExact":true,"params":{}}
+  </div>,
+]
+`;
+
+exports[`AppExtras ignore property works 2`] = `
+<div
+  className="everywhere"
+>
+  /frontpage/images
+</div>
+`;
+
 exports[`AppExtras renders 2 app extras on specific path /blog/edit 1`] = `
 Array [
   <div