@plone/volto 18.0.0-alpha.9 → 18.0.0

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

@@ -9,11 +9,7 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import { getUser } from '@plone/volto/actions';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
-import {
-  flattenToAppURL,
-  getBaseUrl,
-  userHasRoles,
-} from '@plone/volto/helpers';
+import { expandToBackendURL, getBaseUrl } from '@plone/volto/helpers';
 import logoutSVG from '@plone/volto/icons/log-out.svg';
 import rightArrowSVG from '@plone/volto/icons/right-key.svg';
 import backSVG from '@plone/volto/icons/back.svg';
@@ -50,7 +46,11 @@ const PersonalTools = (props) => {
   const token = useSelector((state) => state.userSession.token, shallowEqual);
   const user = useSelector((state) => state.users.user);
   const userId = token ? jwtDecode(token).sub : '';
-
+  const siteSetupAction = useSelector((state) =>
+    state.actions?.actions?.user?.find(
+      (action) => action?.id === 'plone_setup',
+    ),
+  );
   useEffect(() => {
     dispatch(getUser(userId));
   }, [dispatch, userId]);
@@ -97,7 +97,7 @@ const PersonalTools = (props) => {
       <div className={cx('avatar', { default: !user.portrait })}>
         {user.portrait ? (
           <img
-            src={flattenToAppURL(user.portrait)}
+            src={expandToBackendURL(user.portrait)}
             alt={intl.formatMessage(messages.userAvatar)}
           />
         ) : (
@@ -127,7 +127,7 @@ const PersonalTools = (props) => {
             </button>
           </li>
 
-          {userHasRoles(user, ['Site Administrator', 'Manager']) && (
+          {siteSetupAction && (
             <li>
               <Link to="/controlpanel">
                 <FormattedMessage id="Site Setup" defaultMessage="Site Setup" />

package/src/components/manage/Toolbar/PersonalTools.test.jsx

@@ -29,6 +29,16 @@ describe('Toolbar Personal Tools component', () => {
           is_folderish: true,
         },
       },
+      actions: {
+        actions: {
+          user: [
+            {
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+          ],
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -70,6 +80,16 @@ describe('Toolbar Personal Tools component', () => {
           is_folderish: true,
         },
       },
+      actions: {
+        actions: {
+          user: [
+            {
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+          ],
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -112,6 +132,57 @@ describe('Toolbar Personal Tools component', () => {
           is_folderish: true,
         },
       },
+      actions: {
+        actions: {
+          user: [
+            {
+              id: 'plone_setup',
+              title: 'Site Setup',
+            },
+          ],
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <PluggablesProvider>
+          <MemoryRouter>
+            <PersonalTools
+              loadComponent={() => {}}
+              theToolbar={{
+                current: { getBoundingClientRect: () => ({ width: '320' }) },
+              }}
+            />
+          </MemoryRouter>
+        </PluggablesProvider>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders an Toolbar Personal Tools component without Site Setup access', () => {
+    const store = mockStore({
+      users: {
+        user: {
+          fullname: 'regular_user',
+          email: 'user@plone.org',
+          roles: ['Member'],
+        },
+      },
+      userSession: {
+        token: jwt.sign({ sub: 'regular_user' }, 'secret'),
+      },
+      content: {
+        data: {
+          '@type': 'Folder',
+          is_folderish: true,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},

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

@@ -181,7 +181,9 @@ class Toolbar extends Component {
     types: [],
   };
 
+  toolbarRef = React.createRef();
   toolbarWindow = React.createRef();
+  buttonRef = React.createRef();
 
   constructor(props) {
     super(props);
@@ -262,8 +264,9 @@ class Toolbar extends Component {
     );
   };
 
-  closeMenu = () =>
+  closeMenu = () => {
     this.setState(() => ({ showMenu: false, loadedComponents: [] }));
+  };
 
   loadComponent = (type) => {
     const { loadedComponents } = this.state;
@@ -285,6 +288,15 @@ class Toolbar extends Component {
     }));
   };
 
+  toggleButtonPressed = (e) => {
+    const target = e.target;
+    const button =
+      target.tagName === 'BUTTON'
+        ? target
+        : this.findAncestor(e.target, 'button');
+    this.buttonRef.current = button;
+  };
+
   toggleMenu = (e, selector) => {
     if (this.state.showMenu) {
       this.closeMenu();
@@ -310,11 +322,29 @@ class Toolbar extends Component {
         menuStyle: { top: 0 },
       }));
     }
+    this.toggleButtonPressed(e);
     this.loadComponent(selector);
   };
 
+  findAncestor = (el, sel) => {
+    while (
+      (el = el.parentElement) &&
+      !(el.matches || el.matchesSelector).call(el, sel)
+    );
+    return el;
+  };
+
   handleClickOutside = (e) => {
+    const target = e.target;
     if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
+
+    // if the click is on the same button, do not close the menu as it
+    // may be handled by the toggleMenu action
+    const button =
+      doesNodeContainClick(this.toolbarRef.current, e) &&
+      this.findAncestor(target, 'button');
+    if (button && button === this.buttonRef.current) return;
+
     this.closeMenu();
   };
 
@@ -427,7 +457,10 @@ class Toolbar extends Component {
               )}
             </div>
           </div>
-          <div className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}>
+          <div
+            className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}
+            ref={this.toolbarRef}
+          >
             <div className="toolbar-body">
               <div className="toolbar-actions">
                 {this.props.hideDefaultViewButtons && this.props.inner && (
@@ -590,7 +623,7 @@ class Toolbar extends Component {
                 aria-label={this.props.intl.formatMessage(
                   messages.shrinkToolbar,
                 )}
-                className={cx({
+                className={cx('toolbar-handler-button', {
                   [this.props.content?.review_state]:
                     this.props.content?.review_state,
                 })}

package/src/components/manage/UniversalLink/{UniversalLink.stories.mdx → UniversalLink.stories.js}

@@ -1,30 +1,9 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import UniversalLinkComponent from './UniversalLink';
 import { injectIntl } from 'react-intl';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
-<Meta
-  title="UniversalLink"
-  argTypes={{
-    href: { control: 'text' },
-    item: { control: 'object' },
-    text: { control: 'text' },
-  }}
-  decorators={[
-    (Story) => (
-      <div style={{ width: '400px' }}>
-        <Story />
-      </div>
-    ),
-  ]}
-/>
-
-# UniversalLink
-
-Link to url or item
-
-export const UniversalLink = (args) => {
+const UniversalLink = (args) => {
   const mockStore = configureStore();
   const store = mockStore({
     userSession: {
@@ -57,8 +36,37 @@ export const UniversalLink = (args) => {
   );
 };
 
-<Story name="UniversalLink">{injectIntl(UniversalLink).bind({})}</Story>
+export default {
+  title: 'UniversalLink',
 
-# Props
+  argTypes: {
+    href: {
+      control: 'text',
+    },
 
-<ArgsTable of={UniversalLinkComponent} />
+    item: {
+      control: 'object',
+    },
+
+    text: {
+      control: 'text',
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '400px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const UniversalLink_ = {
+  render: injectIntl(UniversalLink).bind({}),
+  name: 'UniversalLink',
+};

package/src/components/manage/Widgets/ArrayWidget.jsx

@@ -30,7 +30,7 @@ import {
   MultiValueContainer,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   select: {
@@ -129,7 +129,7 @@ const compareOption = (inputValue = '', option, accessors) => {
  * @class ArrayWidget
  * @extends Component
  *
- * A createable select array widget will be rendered if the named vocabulary is
+ * A creatable select array widget will be rendered if the named vocabulary is
  * in the widget definition (hint) like:
  *
  * ```
@@ -280,7 +280,7 @@ class ArrayWidget extends Component {
     const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
     const SortableSelect =
-      // It will be only createable if the named vocabulary is in the widget definition
+      // It will be only creatable if the named vocabulary is in the widget definition
       // (hint) like:
       // list_field_voc_unconstrained = schema.List(
       //     title=u"List field with values from vocabulary but not constrained to them.",
@@ -306,12 +306,15 @@ class ArrayWidget extends Component {
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
-          onSortEnd={this.onSortEnd}
+          onSortEnd={(sortProp) => {
+            this.onSortEnd(selectedOption, sortProp);
+          }}
           menuShouldScrollIntoView={false}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}
           id={`field-${this.props.id}`}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
           key={this.props.id}
           isDisabled={this.props.disabled || this.props.isDisabled}
           className="react-select-container"
@@ -323,27 +326,27 @@ class ArrayWidget extends Component {
             this.props.vocabBaseUrl
               ? choices
               : this.props.choices
-              ? [
-                  ...choices,
-                  ...(this.props.noValueOption &&
-                  (this.props.default === undefined ||
-                    this.props.default === null)
-                    ? [
-                        {
-                          label: this.props.intl.formatMessage(
-                            messages.no_value,
-                          ),
-                          value: 'no-value',
-                        },
-                      ]
-                    : []),
-                ]
-              : [
-                  {
-                    label: this.props.intl.formatMessage(messages.no_value),
-                    value: 'no-value',
-                  },
-                ]
+                ? [
+                    ...choices,
+                    ...(this.props.noValueOption &&
+                    (this.props.default === undefined ||
+                      this.props.default === null)
+                      ? [
+                          {
+                            label: this.props.intl.formatMessage(
+                              messages.no_value,
+                            ),
+                            value: 'no-value',
+                          },
+                        ]
+                      : []),
+                  ]
+                : [
+                    {
+                      label: this.props.intl.formatMessage(messages.no_value),
+                      value: 'no-value',
+                    },
+                  ]
           }
           styles={customSelectStyles}
           theme={selectTheme}

package/src/components/manage/Widgets/ButtonsWidget.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { Icon } from '@plone/volto/components';
 import { Button } from 'semantic-ui-react';
 

package/src/components/manage/Widgets/CheckboxWidget.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Checkbox } from 'semantic-ui-react';
 
 import { injectIntl } from 'react-intl';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 /**
  * CheckboxWidget component class.

package/src/components/manage/Widgets/ColorPickerWidget.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form } from 'semantic-ui-react';
 import { Grid, Button } from 'semantic-ui-react';
-import { isEqual } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -26,11 +26,11 @@ type Color =
 export type ColorPickerWidgetProps = {
   id: string;
   title: string;
-  value: string;
-  default: string;
-  required: boolean;
-  missing_value: unknown;
-  className: string;
+  value?: string;
+  default?: string | object;
+  required?: boolean;
+  missing_value?: unknown;
+  className?: string;
   onChange: (id: string, value: any) => void;
   colors: Color[];
 };
@@ -41,7 +41,7 @@ const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
   const intl = useIntl();
 
   React.useEffect(() => {
-    if (!props.value && props.default) {
+    if (isEmpty(props.value) && props.default) {
       props.onChange(props.id, props.default);
     }
     // Yes, this is correct.