Merge branch 'main' into prefix_path_router

.stylelintignore

@@ -0,0 +1 @@
+dist

docs/source/addons/theme.md

@@ -136,7 +136,7 @@ THEME='volto-my-theme' yarn start
 
 ## Using your own theming escape hatch
 
-Volto theming uses SemanticUI theming capabilities to define and extend a theme for your site.
+Volto theming uses Semantic UI theming capabilities to define and extend a theme for your site.
 However, while maintaining and playing well with the Semantic UI Volto base, using a traditional CSS approach can be done using the LESS preprocessor-based `extras` escape hatch.
 
 At the same time, one can either discard or complement the extras escape hatch and add your own, by customizing the `theme.js` module in Volto.
@@ -168,10 +168,10 @@ However, there is a problem with this approach.
 You cannot use existing theme variables, including breakpoints, on these new styles.
 Similarly, it gets somewhat detached from the normal flow of the loaded theme.
 The same applies for add-ons, as they are detached from the current theme.
-One could use a SemanticUI approach for making this work, but it's SemanticUI bound.
+One could use a Semantic UI approach for making this work, but it's Semantic UI bound.
 
 ```{warning}
-This is only possible when using your own escape hatch, and works only with SCSS-based themes, and not with SemanticUI themes, since it enables a couple of entry points that only support SCSS files.
+This is only possible when using your own escape hatch, and works only with SCSS-based themes, and not with Semantic UI themes, since it enables a couple of entry points that only support SCSS files.
 For an example of how it could be used, see: https://github.com/kitconcept/volto-light-theme
 ```
 

docs/source/deploying/performance.md

@@ -38,7 +38,7 @@ critical-cli https://example.com/ -o critical.css
 
 You can pass multiple URLs and screen dimmensions and the extracted CSS will be
 optimized (duplicate rules will be eliminated, etc). See the [Advanced preset
-of cssnano](https://web.archive.org/web/20230101000000*/https://cssnano.co/docs/what-are-optimisations/) for details. One last
+of cssnano](https://cssnano.github.io/cssnano/docs/what-are-optimisations/) for details. One last
 optimization applied strips all `@import` declarations from the generated CSS.
 
 After that, copy this file to the `public/critical.css` path (configurable

docs/source/development/folder-structure.md

@@ -49,7 +49,7 @@ Inside you can find the `theme.config` file that is used to set the theme
 general settings.
 
 The site customizations also should be located inside this folder following
-[SemanticUI folder naming](https://github.com/Semantic-Org/Semantic-UI/tree/master/src/themes/default).
+[Semantic UI folder naming](https://github.com/Semantic-Org/Semantic-UI/tree/master/src/themes/default).
 
  * assets
  * collections

docs/source/release-notes/index.md

@@ -6987,7 +6987,7 @@ refer to all of them in https://github.com/plone/volto/releases
 ### Internal
 
 - Added `forest.eea.europa.eu` as deployed Volto in production @tiberiuichim
-- Add SemanticUI responsive variables to the responsive utils @sneridagh
+- Add Semantic UI responsive variables to the responsive utils @sneridagh
 - Added `yarnhook` to the build @sneridagh
 
 ## 4.0.0-alpha.36 (2020-02-03)

docs/source/upgrade-guide/index.md

@@ -2110,7 +2110,7 @@ diffing the new ones with your versions.
 ### Testing lazy loaded components
 
 The whole process has been designed to have a minimal impact in existing projects.
-However, only one thing should be changed in your components tests, especially if your components are composed of original Volto components (not SemanticUI ones, though).
+However, only one thing should be changed in your components tests, especially if your components are composed of original Volto components (not Semantic UI ones, though).
 
 You should adapt them by mocking the Volto component or resolve (await) in an
 async construction before the test is fired. See this Codepen example:

package.json

@@ -19,7 +19,7 @@
     "prettier": "prettier --check '{apps,packages}/**/*.{js,jsx,ts,tsx}'",
     "prettier:fix": "prettier --write '{apps,packages}/**/*.{js,jsx,ts,tsx}' ",
     "stylelint": "stylelint '{apps,packages}/**/*.{css,scss,less}'",
-    "stylelint:fix": "stylelint '{packages}/**/*.{css,scss,less}' --fix",
+    "stylelint:fix": "stylelint '{apps,packages}/**/*.{css,scss,less}' --fix",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "lint-staged": "lint-staged",
     "lockhook": "node packages/scripts/lockhook.js",

packages/components/news/5849.bugfix

@@ -0,0 +1 @@
+Missing CSS in build for `Container` @sneridagh

packages/components/src/styles/container.css → packages/components/src/styles/basic/Container.css

@@ -1,6 +1,4 @@
-@import 'layout';
-
-.a.container {
+.q.container {
   container-type: inline-size;
 
   &.layout {

packages/components/src/styles/basic/main.css

@@ -38,6 +38,7 @@
 @import './Breadcrumbs.css';
 @import './BlockToolbar.css';
 
+@import './Container.css';
 @import './icons.css';
 
 @import './theme.css';

packages/volto-slate/.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": ["stylelint-config-idiomatic-order"],
+  "plugins": ["stylelint-prettier"],
+  "overrides": [
+    {
+      "files": ["**/*.less"],
+      "customSyntax": "postcss-less"
+    }
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "order/properties-alphabetical-order": null
+  }
+}

packages/volto-slate/news/5849.internal

@@ -0,0 +1 @@
+Fix CSS lint @sneridagh

packages/volto-slate/news/5859.bugfix

@@ -0,0 +1 @@
+Fix other occurrences of mutable (referenced) objects when assigning the default inner `blocksConfig` object for the `grid` block, pass by value instead. sneridagh

packages/volto-slate/src/blocks/Text/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import TextBlockView from './TextBlockView';
 import TextBlockEdit from './TextBlockEdit';
 import TextBlockSchema from './TextBlockSchema';
+import { cloneDeep } from 'lodash';
 
 import {
   goDown,
@@ -145,7 +146,9 @@ export default function applyConfig(config) {
     // This is required in order to initialize the inner blocksConfig
     // for the grid block, since the slate block lives in an add-on
     // it should be responsible to fill itself into the grid configuration
-    config.blocks.blocksConfig.gridBlock.blocksConfig.slate = slateBlockConfig;
+    // The cloneDeep is mandatory in order to not mess with pass by reference problems
+    config.blocks.blocksConfig.gridBlock.blocksConfig.slate =
+      cloneDeep(slateBlockConfig);
   }
 
   return config;

packages/volto-slate/src/editor/less/editor.less

@@ -41,8 +41,8 @@
     box-sizing: border-box;
     padding: 3px;
     border: none;
-    background: #fff;
     border-radius: 2px;
+    background: #fff;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
     font-family: 'Poppins', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-size: 1rem;
@@ -74,8 +74,8 @@
         box-sizing: border-box;
         padding: 4px !important;
         border: 0;
-        background: rgba(255, 255, 255, 0.975);
         border-radius: 1px;
+        background: rgba(255, 255, 255, 0.975);
         color: @brown;
         font-size: 18px;
         vertical-align: bottom;
@@ -91,9 +91,9 @@
         }
 
         &.active {
+          border-radius: 3px;
           // TODO: stop using !important, use smth better
           background: #efefef !important;
-          border-radius: 3px;
           box-shadow: inset 0 0 0 1px @blue !important;
           color: @blue !important;
 
@@ -151,9 +151,11 @@
   top: 29px;
   left: -9px;
   width: 210px;
-  background-color: rgba(255, 255, 255, 0.975);
   border-radius: 2px;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
+  background-color: rgba(255, 255, 255, 0.975);
+  box-shadow:
+    0 0 8px rgba(0, 0, 0, 0.1),
+    0 2px 4px rgba(0, 0, 0, 0.05);
 
   .ui.menu {
     border: 0;

packages/volto-slate/src/editor/less/slate.less

@@ -22,7 +22,9 @@ h4 {
       fill: #42526e;
       opacity: 0;
       transform: rotate(15deg) translate(-8px, 2px);
-      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
+      transition:
+        opacity 0.2s ease 0s,
+        transform 0.2s ease 0s;
     }
   }
 }

packages/volto/CHANGELOG.md

@@ -6987,7 +6987,7 @@ refer to all of them in https://github.com/plone/volto/releases
 ### Internal
 
 - Added `forest.eea.europa.eu` as deployed Volto in production @tiberiuichim
-- Add SemanticUI responsive variables to the responsive utils @sneridagh
+- Add Semantic UI responsive variables to the responsive utils @sneridagh
 - Added `yarnhook` to the build @sneridagh
 
 ## 4.0.0-alpha.36 (2020-02-03)

packages/volto/cypress/tests/core/controlpanels/groups-controlpanel.js

@@ -52,6 +52,7 @@ describe('Groups Control Panel Test', () => {
 
     // select first group with name, delete it and search if its exists or not!
     cy.get('div[role="listbox"]').first().click();
+    cy.get('div[role="option"]').should('be.visible');
     cy.get('div[role="option"]').first().click();
     cy.contains('Delete Group');
     cy.get('button.ui.primary.button').should('have.text', 'OK').click();

packages/volto/news/5244.feature

@@ -0,0 +1 @@
+Do not display options for Site Administrator to create, modify, or delete Manager users. @wesleybl

packages/volto/news/5853.documentation

@@ -0,0 +1 @@
+Update link to cssnano documentation. @stevepiercy

packages/volto/news/5855.documentation

@@ -0,0 +1 @@
+The proper name is Semantic UI. @stevepiercy

packages/volto/news/5859.bugfix

@@ -0,0 +1 @@
+Fix other occurrences of mutable (referenced) objects when assigning the default inner `blocksConfig` object for the `grid` block, pass by value instead. sneridagh

packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx

@@ -10,7 +10,9 @@ import {
   listRoles,
   updateGroup,
   authenticatedRole,
+  getUser,
 } from '@plone/volto/actions';
+import jwtDecode from 'jwt-decode';
 import {
   Icon,
   ModalForm,
@@ -21,7 +23,12 @@ import {
   Error,
 } from '@plone/volto/components';
 import { Link } from 'react-router-dom';
-import { Helmet, messages } from '@plone/volto/helpers';
+import {
+  Helmet,
+  messages,
+  isManager,
+  canAssignRole,
+} from '@plone/volto/helpers';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import addUserSvg from '@plone/volto/icons/add-user.svg';
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -75,6 +82,19 @@ class GroupsControlpanel extends Component {
         groupname: PropTypes.string,
       }),
     ).isRequired,
+    user: PropTypes.shape({
+      '@id': PropTypes.string,
+      id: PropTypes.string,
+      description: PropTypes.string,
+      email: PropTypes.string,
+      fullname: PropTypes.string,
+      groups: PropTypes.object,
+      location: PropTypes.string,
+      portrait: PropTypes.string,
+      home_page: PropTypes.string,
+      roles: PropTypes.arrayOf(PropTypes.string),
+      username: PropTypes.string,
+    }).isRequired,
   };
 
   /**
@@ -118,6 +138,7 @@ class GroupsControlpanel extends Component {
         groupEntries: this.props.groups,
       });
     }
+    await this.props.getUser(this.props.userId);
   };
   /**
    * Component did mount
@@ -375,6 +396,8 @@ class GroupsControlpanel extends Component {
       ? this.state.groupToDelete.id
       : '';
 
+    const isUserManager = isManager(this.props.user);
+
     return (
       <Container className="users-control-panel">
         <Helmet title={this.props.intl.formatMessage(messages.groups)} />
@@ -460,10 +483,9 @@ class GroupsControlpanel extends Component {
                       messages.addGroupsFormRolesTitle,
                     ),
                     type: 'array',
-                    choices: this.props.roles.map((role) => [
-                      role.id,
-                      role.title,
-                    ]),
+                    choices: this.props.roles
+                      .filter((role) => canAssignRole(isUserManager, role))
+                      .map((role) => [role.id, role.title]),
                     noValueOption: false,
                     description: '',
                   },
@@ -553,6 +575,7 @@ class GroupsControlpanel extends Component {
                           group={group}
                           updateGroups={this.updateGroupRole}
                           inheritedRole={this.state.authenticatedRole}
+                          isUserManager={isUserManager}
                         />
                       ))}
                   </Table.Body>
@@ -640,6 +663,10 @@ export default compose(
   injectIntl,
   connect(
     (state, props) => ({
+      user: state.users.user,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
       roles: state.roles.roles,
       groups: state.groups.groups,
       description: state.description,
@@ -661,6 +688,7 @@ export default compose(
           createGroup,
           updateGroup,
           authenticatedRole,
+          getUser,
         },
         dispatch,
       ),

packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.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 jwt from 'jsonwebtoken';
 
 import GroupsControlpanel from './GroupsControlpanel';
 
@@ -11,6 +12,17 @@ jest.mock('../../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 describe('UsersControlpanel', () => {
   it('renders a user control component', () => {
     const store = mockStore({
+      userSession: {
+        token: jwt.sign({ sub: 'john' }, 'secret'),
+      },
+      users: {
+        users: [],
+        create: { loading: false },
+        user: {
+          roles: ['Manager'],
+          '@id': 'admin',
+        },
+      },
       roles: { roles: [] },
       groups: {
         groups: [],

packages/volto/src/components/manage/Controlpanels/Groups/RenderGroups.jsx

@@ -9,6 +9,7 @@ import { Dropdown, Table, Checkbox } from 'semantic-ui-react';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import ploneSVG from '@plone/volto/icons/plone.svg';
 import { Icon } from '@plone/volto/components';
+import { canAssignRole } from '@plone/volto/helpers';
 
 /**
  * UsersControlpanelGroups class.
@@ -38,6 +39,7 @@ class RenderGroups extends Component {
     ).isRequired,
     inheritedRole: PropTypes.array,
     onDelete: PropTypes.func.isRequired,
+    isUserManager: PropTypes.bool.isRequired,
   };
 
   /**
@@ -69,6 +71,12 @@ class RenderGroups extends Component {
   isAuthGroup = (roleId) => {
     return this.props.inheritedRole.includes(roleId);
   };
+
+  canDeleteGroup() {
+    if (this.props.isUserManager) return true;
+    return !this.props.group.roles.includes('Manager');
+  }
+
   /**
    * Render method.
    * @method render
@@ -98,22 +106,25 @@ class RenderGroups extends Component {
                 }
                 onChange={this.onChange}
                 value={`${this.props.group.id}&role=${role.id}`}
+                disabled={!canAssignRole(this.props.isUserManager, role)}
               />
             )}
           </Table.Cell>
         ))}
         <Table.Cell textAlign="right">
-          <Dropdown icon="ellipsis horizontal">
-            <Dropdown.Menu className="left">
-              <Dropdown.Item
-                onClick={this.props.onDelete}
-                value={this.props.group['@id']}
-              >
-                <Icon name={trashSVG} size="15px" />
-                <FormattedMessage id="Delete" defaultMessage="Delete" />
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
+          {this.canDeleteGroup() && (
+            <Dropdown icon="ellipsis horizontal">
+              <Dropdown.Menu className="left">
+                <Dropdown.Item
+                  onClick={this.props.onDelete}
+                  value={this.props.group['@id']}
+                >
+                  <Icon name={trashSVG} size="15px" />
+                  <FormattedMessage id="Delete" defaultMessage="Delete" />
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
         </Table.Cell>
       </Table.Row>
     );