@plone-collective/volto-identity 1.0.0-alpha.1

package/src/components/Toolbar/PersonalTools.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * The shadowed personal-tools menu.
+ *
+ * Upstream ships no test for this component, and once it is rewritten rather
+ * than patched it is this package's code: the things that differ from Volto
+ * are the things worth pinning, so a future upgrade that quietly reverts one
+ * of them fails here instead of in somebody's browser.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '../../testing';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import React from 'react';
+
+import {
+  Plug,
+  PluggablesProvider,
+} from '@plone/volto/components/manage/Pluggable';
+import PersonalTools from './PersonalTools';
+
+const ALICE = {
+  id: 'alice',
+  username: 'alice@example.com',
+  fullname: 'Alice Liddell',
+};
+
+function renderMenu(
+  user: unknown = ALICE,
+  props: Record<string, unknown> = {},
+  actions: unknown[] = [],
+  plugs: React.ReactNode = null,
+) {
+  const store = {
+    getState: () => ({
+      userProfile: { loading: false, loaded: true, error: null, data: user },
+      actions: { actions: { user: actions } },
+    }),
+    dispatch: vi.fn(),
+    subscribe: () => () => {},
+  };
+  const result = render(
+    <Provider store={store as never}>
+      <MemoryRouter>
+        <PluggablesProvider>
+          {plugs}
+          <PersonalTools
+            loadComponent={vi.fn()}
+            unloadComponent={vi.fn()}
+            theToolbar={{ current: null }}
+            {...props}
+          />
+        </PluggablesProvider>
+      </MemoryRouter>
+    </Provider>,
+  );
+  return { ...result, store };
+}
+
+describe('PersonalTools', () => {
+  it('writes no entry of its own into the list', () => {
+    // Upstream writes three and puts the pluggable after them, so an add-on
+    // can only append. Every entry is a plug now -- what they are and what
+    // order they come in is `UserMenuPlugs`' test -- and this component's
+    // share of it is an empty list waiting for them.
+    const { container } = renderMenu();
+
+    expect(container.querySelector('.pastanaga-menu-list ul')).toBeTruthy();
+    expect(container.querySelectorAll('.pastanaga-menu-list li')).toHaveLength(
+      0,
+    );
+  });
+
+  it('renders whatever plugged into the user menu', () => {
+    renderMenu(
+      ALICE,
+      {},
+      [],
+      <Plug pluggable="toolbar-user-menu" id="probe">
+        <li id="probe-entry">Probe</li>
+      </Plug>,
+    );
+
+    expect(document.querySelector('#probe-entry')).toBeTruthy();
+  });
+
+  it('hands the plugs the prop only it has', () => {
+    // `loadComponent` belongs to this component; the Preferences entry is a
+    // plug and would otherwise have no way to reach it.
+    const loadComponent = vi.fn();
+    renderMenu(
+      ALICE,
+      { loadComponent },
+      [],
+      <Plug pluggable="toolbar-user-menu" id="probe">
+        {({ loadComponent: given }: { loadComponent: () => void }) => (
+          <li>
+            <button onClick={() => given()}>Probe</button>
+          </li>
+        )}
+      </Plug>,
+    );
+
+    screen.getByRole('button', { name: 'Probe' }).click();
+
+    expect(loadComponent).toHaveBeenCalled();
+  });
+
+  it('names the user from the store this package fills', () => {
+    renderMenu();
+
+    expect(screen.getByRole('heading').textContent).toBe('Alice Liddell');
+  });
+
+  it('never leaves the header empty', () => {
+    // A blank header reads as a broken menu rather than as a user who has
+    // not filled their name in.
+    renderMenu({ id: 'alice', username: 'alice@example.com' });
+    expect(screen.getByRole('heading').textContent).toBe('alice@example.com');
+
+    screen.getByRole('heading').remove();
+    renderMenu({ id: 'alice' });
+    expect(screen.getByRole('heading').textContent).toBe('alice');
+  });
+
+  it('does not fetch the user itself', () => {
+    // Upstream decodes the JWT and dispatches getUser on every mount. This
+    // add-on already loaded the same `@users/<userid>` once, per userid.
+    const { store } = renderMenu();
+
+    expect(store.dispatch).not.toHaveBeenCalled();
+  });
+
+  it('slides out through the prop it was given', () => {
+    const unloadComponent = vi.fn();
+    renderMenu(ALICE, { unloadComponent });
+
+    screen.getByRole('button', { name: /back/i }).click();
+
+    expect(unloadComponent).toHaveBeenCalled();
+  });
+
+  it('names the back button and the logout link', () => {
+    // Upstream leaves both unnamed: an `<Icon>` with a `title` inside an
+    // element with no label of its own is announced as "button".
+    renderMenu();
+
+    expect(screen.getByRole('button', { name: /back/i })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /logout/i })).toBeTruthy();
+  });
+
+  it('renders no avatar block', () => {
+    // It moved to the toolbar button that opens this menu.
+    const { container } = renderMenu();
+
+    expect(container.querySelector('.avatar')).toBeNull();
+  });
+
+  it('keeps the class names the stylesheet is written against', () => {
+    const { container } = renderMenu(ALICE, { hasActions: true });
+
+    const root = container.querySelector('.personal-tools');
+    expect(root?.className).toContain('pastanaga-menu');
+    expect(root?.className).toContain('has-inner-actions');
+  });
+});

package/src/components/Toolbar/PersonalTools.tsx

@@ -0,0 +1,177 @@
+/**
+ * The personal-tools menu, rewritten.
+ *
+ * Takes Volto's place through
+ * `customizations/volto/components/manage/Toolbar/PersonalTools`, which is
+ * where the reason for shadowing it is written down.
+ *
+ * **Not** a verbatim copy of `@plone/volto/components/manage/Toolbar/PersonalTools`
+ * (Volto 19.3.0) with a patch: it is a rewrite in TypeScript that keeps the
+ * markup, the class names and the behaviour Volto's stylesheet and tests
+ * expect, and changes what was worth changing. On a Volto upgrade, read
+ * upstream's diff for *behavioural* changes and port those -- a literal file
+ * diff will not be meaningful.
+ *
+ * WHAT DIFFERS FROM UPSTREAM, and why:
+ *
+ * - **The menu list is nothing but the pluggable.** Upstream writes Profile,
+ *   Preferences and Site Setup into the list and puts `toolbar-user-menu`
+ *   after them, so an add-on can only append: wanting an entry *between* two
+ *   of Volto's, or wanting one of them gone, meant shadowing this component
+ *   again. All three are plugs now -- see
+ *   `components/UserMenu/UserMenuPlugs` -- so the menu is one ordered list a
+ *   site composes. `loadComponent` reaches the Preferences entry through the
+ *   pluggable's `params`, which is what that mechanism is for.
+ *
+ * - **The avatar block is gone.** It drew a 96px portrait, or a camera icon
+ *   for the many users who have never uploaded one -- the same picture for
+ *   everybody, saying "no image here" rather than "this is you". Who is
+ *   signed in is shown by `<UserAvatar>` on the toolbar button that opens
+ *   this menu, where it is visible without opening anything.
+ *
+ * - **The Profile link has a stable id.** Upstream sets
+ *   `id={intl.formatMessage(messages.profile)}`, so the DOM id is the
+ *   *translated* label: `id="Profile"` in English, `id="Perfil"` in
+ *   Portuguese. Anything keying on it -- a test, a stylesheet, an
+ *   integration -- works in one language and silently not in the next. It is
+ *   `id="toolbar-profile"` in the plug that now renders it, matching the
+ *   `toolbar-logout` in the header here, which upstream already spells that
+ *   way.
+ *
+ * - **It does not fetch the user.** Upstream decodes the JWT and dispatches
+ *   `getUser` on mount. This add-on already holds the signed-in user, loaded
+ *   once per userid by `UserProfileLoader` from the same `@users/<userid>`
+ *   endpoint, so fetching again on every menu open is a duplicate request for
+ *   data already in the store. `jwt-decode` goes with it.
+ *
+ * - **The back button and the logout link have accessible names.** Both were
+ *   an `<Icon>` with a `title` inside an element with no label of its own, so
+ *   a screen reader announced them as an unnamed button and an unnamed link.
+ *   The Preferences button beside them already carried an `aria-label`; these
+ *   two now do too.
+ *
+ * - **No `classnames`.** Upstream uses it for one conditional class. It is
+ *   Volto's dependency rather than this package's, and this add-on declares
+ *   no runtime dependencies at all -- so the one class is joined by hand.
+ *
+ * - **Dead code is gone.** `const [, setPushed] = useState(false)` -- the
+ *   value was never read, so the only effect of setting it was a re-render
+ *   per menu push. The commented-out `<Stats />` and the "should be a
+ *   Component by itself" note went too.
+ *
+ * @module components/Toolbar/PersonalTools
+ */
+import React from 'react';
+import type { RefObject } from 'react';
+import { useSelector } from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
+import { useIntl, defineMessages } from 'react-intl';
+
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import logoutSVG from '@plone/volto/icons/log-out.svg';
+import backSVG from '@plone/volto/icons/back.svg';
+
+const messages = defineMessages({
+  back: { id: 'Back', defaultMessage: 'Back' },
+  logout: { id: 'Logout', defaultMessage: 'Logout' },
+});
+
+export interface PersonalToolsProps {
+  /** Slide another panel into the toolbar, by its registered name. */
+  loadComponent: (selector: string) => void;
+  /** Slide this panel back out. */
+  unloadComponent: () => void;
+  /** The toolbar element, read for the width this panel matches. */
+  theToolbar: RefObject<HTMLElement | null>;
+  /** Whether the toolbar is showing content actions beside this menu. */
+  hasActions?: boolean;
+}
+
+/**
+ * The name to show for the signed-in user.
+ *
+ * Never empty: a header with nothing in it reads as a broken menu rather
+ * than as a user who has not filled their name in.
+ *
+ * @param user The user held in the store, if loaded.
+ * @returns The full name, the login name, or the userid.
+ */
+function displayName(user: {
+  fullname?: string | null;
+  username?: string | null;
+  id?: string | null;
+}): string {
+  return user?.fullname || user?.username || user?.id || '';
+}
+
+const PersonalTools: React.FC<PersonalToolsProps> = ({
+  loadComponent,
+  unloadComponent,
+  theToolbar,
+  hasActions,
+}) => {
+  const intl = useIntl();
+  const { pathname } = useLocation();
+  const user = useSelector((state: any) => state.userProfile?.data) ?? {};
+  // Memoized because `Pluggable` memoizes its render on the params object: a
+  // fresh one every render would rebuild every entry on every render.
+  const pluggableParams = React.useMemo(
+    () => ({ loadComponent }),
+    [loadComponent],
+  );
+
+  return (
+    <div
+      className={
+        hasActions
+          ? 'personal-tools pastanaga-menu has-inner-actions'
+          : 'personal-tools pastanaga-menu'
+      }
+      style={{
+        // Read during render, as upstream does. The panel slides in over the
+        // toolbar and has to be exactly its width; a layout effect would
+        // size it one frame late, which is visible as a jump.
+        flex: theToolbar?.current
+          ? `0 0 ${theToolbar.current.getBoundingClientRect().width}px`
+          : undefined,
+      }}
+    >
+      <header className="header">
+        <button
+          className="back"
+          aria-label={intl.formatMessage(messages.back)}
+          onClick={unloadComponent}
+        >
+          <Icon
+            name={backSVG}
+            size="30px"
+            title={intl.formatMessage(messages.back)}
+          />
+        </button>
+        <div className="vertical divider" />
+        <h2>{displayName(user)}</h2>
+        <Link
+          id="toolbar-logout"
+          aria-label={intl.formatMessage(messages.logout)}
+          to={`${getBaseUrl(pathname)}/logout`}
+        >
+          <Icon
+            className="logout"
+            name={logoutSVG}
+            size="30px"
+            title={intl.formatMessage(messages.logout)}
+          />
+        </Link>
+      </header>
+      <div className="pastanaga-menu-list">
+        <ul>
+          <Pluggable name="toolbar-user-menu" params={pluggableParams} />
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default PersonalTools;