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

package/src/components/UserMenu/ApplicationsMenuItem.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import {
+  Pluggable,
+  PluggablesProvider,
+} from '@plone/volto/components/manage/Pluggable';
+import ApplicationsMenuItem from './ApplicationsMenuItem';
+import { withPersonalTools } from '../../storybook/withUserMenu';
+import { LOADED, USER, withStore } from '../../stories/fixtures';
+
+const meta: Meta<typeof ApplicationsMenuItem> = {
+  title: 'Identity/UserMenu/ApplicationsMenuItem',
+  component: ApplicationsMenuItem,
+  decorators: [withPersonalTools],
+  parameters: { fullBleed: true },
+};
+export default meta;
+
+type Story = StoryObj<typeof ApplicationsMenuItem>;
+
+/**
+ * The plug renders nothing on its own -- it registers a renderer -- so every
+ * story includes the pluggable that consumes it, the way the user menu does.
+ */
+const inTheMenu = () => (
+  <PluggablesProvider>
+    <ApplicationsMenuItem />
+    <ul>
+      <Pluggable name="toolbar-user-menu" />
+    </ul>
+  </PluggablesProvider>
+);
+
+const withGrants = (grants: Record<string, unknown>) =>
+  withStore({
+    userProfile: { ...LOADED, data: USER },
+    oauthGrants: grants,
+  });
+
+/** A site running the `[server]` layer: the endpoint answered. */
+export const OnAnAuthorizationServer: Story = {
+  render: inTheMenu,
+  decorators: [withGrants({ ...LOADED, data: { items: [] } })],
+};
+
+/**
+ * A site without that layer.
+ *
+ * Nothing publishes `@oauth-grants` there, so the entry is absent rather
+ * than leading to a page that can only report a failure.
+ */
+export const OnAnOrdinarySite: Story = {
+  render: inTheMenu,
+  decorators: [withGrants({ loaded: false, error: new Error('404') })],
+};
+
+/** Before the answer arrives. */
+export const StillAsking: Story = {
+  render: inTheMenu,
+  decorators: [withGrants({ loading: true, loaded: false, error: null })],
+};

package/src/components/UserMenu/ApplicationsMenuItem.test.tsx

@@ -0,0 +1,109 @@
+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 {
+  Pluggable,
+  PluggablesProvider,
+} from '@plone/volto/components/manage/Pluggable';
+import ApplicationsMenuItem from './ApplicationsMenuItem';
+
+interface State {
+  /** The signed-in user, or nobody. */
+  userid?: string | null;
+  /** The `@oauth-grants` request state. */
+  grants?: Record<string, unknown>;
+}
+
+/**
+ * Render the plug the way Volto's user menu does.
+ *
+ * @param state What the store says.
+ * @returns The dispatch spy, so a test can see whether it asked.
+ */
+function renderInMenu(state: State = {}) {
+  const { userid = 'alice', grants = {} } = state;
+  const dispatch = vi.fn();
+  const store = {
+    getState: () => ({
+      userProfile: { data: userid ? { id: userid } : null },
+      oauthGrants: grants,
+    }),
+    dispatch,
+    subscribe: () => () => {},
+  };
+  render(
+    <Provider store={store as never}>
+      <MemoryRouter>
+        <PluggablesProvider>
+          <ApplicationsMenuItem />
+          <ul>
+            <Pluggable name="toolbar-user-menu" />
+          </ul>
+        </PluggablesProvider>
+      </MemoryRouter>
+    </Provider>,
+  );
+  return { dispatch };
+}
+
+/** The entry, if it rendered. */
+const entry = () => screen.queryByRole('link', { name: 'Applications' });
+
+describe('ApplicationsMenuItem', () => {
+  it('links to the applications page once the endpoint answered', () => {
+    renderInMenu({ grants: { loaded: true } });
+
+    expect(entry()?.getAttribute('href')).toBe('/applications');
+  });
+
+  it('renders nothing on a site without the [server] layer', () => {
+    // Nothing publishes `@oauth-grants` there, so the entry would lead to a
+    // page that can only report a failure.
+    renderInMenu({ grants: { error: new Error('404') } });
+
+    expect(entry()).toBeNull();
+  });
+
+  it('renders nothing before the answer arrives', () => {
+    renderInMenu({ grants: { loading: true } });
+
+    expect(entry()).toBeNull();
+  });
+
+  it('asks the endpoint once somebody is signed in', () => {
+    const { dispatch } = renderInMenu();
+
+    expect(dispatch).toHaveBeenCalled();
+  });
+
+  it('asks nothing for an anonymous visitor', () => {
+    // `appExtras` mounts this on every route, logged in or not, and asking
+    // would be a guaranteed 401 on every anonymous page view.
+    const { dispatch } = renderInMenu({ userid: null });
+
+    expect(dispatch).not.toHaveBeenCalled();
+  });
+
+  it('does not ask again once it has an answer', () => {
+    const { dispatch } = renderInMenu({ grants: { loaded: true } });
+
+    expect(dispatch).not.toHaveBeenCalled();
+  });
+
+  it('does not retry a site that answered 404', () => {
+    // Retrying on every render would be a request loop rather than a
+    // feature detection.
+    const { dispatch } = renderInMenu({ grants: { error: new Error('404') } });
+
+    expect(dispatch).not.toHaveBeenCalled();
+  });
+
+  it('does not ask twice while one request is in flight', () => {
+    const { dispatch } = renderInMenu({ grants: { loading: true } });
+
+    expect(dispatch).not.toHaveBeenCalled();
+  });
+});

package/src/components/UserMenu/ApplicationsMenuItem.tsx

@@ -0,0 +1,82 @@
+/**
+ * A link to the authorized-applications page, plugged into Volto's user menu.
+ *
+ * Ordered right after "Sign-in methods", because it is the same question
+ * asked the other way round: that entry is what you sign in *with*, this one
+ * is what you have signed in *to*. Between it and Site Setup, which the
+ * ten-spaced orders in :mod:`components/UserMenu/UserMenuPlugs` exist to
+ * allow without renumbering anything.
+ *
+ * **Shown only where it leads somewhere.** `@oauth-grants` is published by
+ * the `[server]` layer alone, so on a site that never became an
+ * authorization server the route would render a page that can only report a
+ * failure. There is nothing in the user payload that says whether that layer
+ * is installed -- `core` may not depend on `server`, so its serializer
+ * cannot mention it -- and rather than reach across that boundary this asks
+ * the endpoint itself, once, and shows the entry when it answered.
+ *
+ * The cost is one request per session: on a site with the layer it is the
+ * data the page needs anyway, and on a site without it, one 404 that nobody
+ * sees. The alternative was a menu entry leading to an error page, which is
+ * the thing this package has refused everywhere else.
+ * @module components/UserMenu/ApplicationsMenuItem
+ */
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+
+import { listGrants } from '../../actions';
+import { APPLICATIONS_PATH } from '../../config/routes';
+import MenuItem from './MenuItem';
+
+const messages = defineMessages({
+  title: { id: 'Applications', defaultMessage: 'Applications' },
+});
+
+const ApplicationsMenuItem: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const userid = useSelector((state: any) => state.userProfile?.data?.id);
+  const loaded = useSelector((state: any) =>
+    Boolean(state.oauthGrants?.loaded),
+  );
+  const pending = useSelector((state: any) =>
+    Boolean(state.oauthGrants?.loading),
+  );
+  const failed = useSelector((state: any) => Boolean(state.oauthGrants?.error));
+
+  useEffect(() => {
+    // Only once somebody is signed in: anonymous has authorized nothing, and
+    // asking would be a guaranteed 401 on every anonymous page view.
+    //
+    // `loaded` and `error` both stop it. A site without the `[server]` layer
+    // answers 404, and retrying that on every render would be a request loop
+    // rather than a feature detection.
+    if (!userid || loaded || pending || failed) {
+      return;
+    }
+    dispatch(listGrants());
+  }, [dispatch, userid, loaded, pending, failed]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <Plug
+      pluggable="toolbar-user-menu"
+      id="applications"
+      order={35}
+      dependencies={[loaded]}
+    >
+      <MenuItem
+        id="toolbar-applications"
+        label={intl.formatMessage(messages.title)}
+        to={APPLICATIONS_PATH}
+      />
+    </Plug>
+  );
+};
+
+export default ApplicationsMenuItem;

package/src/components/UserMenu/IdentitiesMenuItem.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import {
+  Pluggable,
+  PluggablesProvider,
+} from '@plone/volto/components/manage/Pluggable';
+import IdentitiesMenuItem from './IdentitiesMenuItem';
+import { withPersonalTools } from '../../storybook/withUserMenu';
+
+const meta: Meta<typeof IdentitiesMenuItem> = {
+  title: 'Identity/UserMenu/IdentitiesMenuItem',
+  component: IdentitiesMenuItem,
+  decorators: [withPersonalTools],
+  parameters: { fullBleed: true },
+};
+export default meta;
+
+type Story = StoryObj<typeof IdentitiesMenuItem>;
+
+/**
+ * The plug renders nothing on its own -- it registers a renderer -- so the
+ * story has to include the pluggable that consumes it, the way Volto's user
+ * menu does.
+ */
+export const InTheUserMenu: Story = {
+  render: () => (
+    <PluggablesProvider>
+      <IdentitiesMenuItem />
+      <ul>
+        <Pluggable name="toolbar-user-menu" />
+      </ul>
+    </PluggablesProvider>
+  ),
+};

package/src/components/UserMenu/IdentitiesMenuItem.test.tsx

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../testing';
+import { MemoryRouter } from 'react-router-dom';
+import React from 'react';
+
+import {
+  Pluggable,
+  PluggablesProvider,
+} from '@plone/volto/components/manage/Pluggable';
+import IdentitiesMenuItem from './IdentitiesMenuItem';
+import install from '../../config/menu';
+import { IDENTITIES_PATH } from '../../config/routes';
+
+/**
+ * Render the plug the way Volto's user menu does: inside a provider, with the
+ * matching `Pluggable` standing in for the one at the end of `PersonalTools`'
+ * list. Rendering the plug on its own would prove nothing -- a `Plug` returns
+ * null and registers a renderer, so the assertion has to come from the
+ * pluggable that consumes it.
+ */
+function renderInMenu() {
+  render(
+    <MemoryRouter>
+      <PluggablesProvider>
+        <IdentitiesMenuItem />
+        <ul>
+          <Pluggable name="toolbar-user-menu" />
+        </ul>
+      </PluggablesProvider>
+    </MemoryRouter>,
+  );
+}
+
+describe('IdentitiesMenuItem', () => {
+  it('renders a link into the identities view', () => {
+    renderInMenu();
+
+    const link = screen.getByRole('link', { name: /sign-in methods/i });
+
+    expect(link.getAttribute('href')).toBe(IDENTITIES_PATH);
+  });
+
+  it('renders as a list item, because it lands inside the menu list', () => {
+    renderInMenu();
+
+    expect(screen.getByRole('listitem').tagName).toBe('LI');
+  });
+
+  it('renders nothing without a pluggable to land in', () => {
+    render(
+      <MemoryRouter>
+        <PluggablesProvider>
+          <IdentitiesMenuItem />
+        </PluggablesProvider>
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByRole('link')).toBeNull();
+  });
+});
+
+describe('the menu install step', () => {
+  it('registers the plug so it is mounted on every path', () => {
+    const config = { settings: { appExtras: [] } } as any;
+
+    install(config);
+
+    const entry = config.settings.appExtras.find(
+      (e: any) => e.component === IdentitiesMenuItem,
+    );
+    expect(entry).toBeTruthy();
+    // Volto hands `match` to `matchPath`, and an empty path matches every
+    // route -- which is what makes the plug reachable wherever the user
+    // menu is opened.
+    expect(entry.match).toBe('');
+  });
+
+  it('registers everything the menu needs on every path', () => {
+    const config = { settings: { appExtras: [] } } as any;
+
+    install(config);
+
+    // The loader, plus one per menu entry -- including the three Volto used
+    // to write into the list itself. The loader renders nothing: the entries
+    // beside it read the user it puts in the store.
+    expect(config.settings.appExtras).toHaveLength(7);
+    expect(config.settings.appExtras.every((e: any) => e.match === '')).toBe(
+      true,
+    );
+  });
+
+  it('keeps whatever another add-on already registered', () => {
+    const other = () => null;
+    const config = {
+      settings: { appExtras: [{ match: '', component: other, props: {} }] },
+    } as any;
+
+    install(config);
+
+    expect(config.settings.appExtras).toHaveLength(8);
+    expect(config.settings.appExtras[0].component).toBe(other);
+  });
+});

package/src/components/UserMenu/IdentitiesMenuItem.tsx

@@ -0,0 +1,34 @@
+/**
+ * A link into the identities view, plugged into Volto's user menu.
+ * @module components/UserMenu/IdentitiesMenuItem
+ */
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+
+import { IDENTITIES_PATH } from '../../config/routes';
+import MenuItem from './MenuItem';
+
+const messages = defineMessages({
+  title: { id: 'Sign-in methods', defaultMessage: 'Sign-in methods' },
+});
+
+/**
+ * Ordered right after Preferences, because it is one: this is where a person
+ * adds a way of getting in or drops one they no longer use. See
+ * :mod:`components/UserMenu/UserMenuPlugs` for the whole ordering.
+ */
+const IdentitiesMenuItem: React.FC = () => {
+  const intl = useIntl();
+  return (
+    <Plug pluggable="toolbar-user-menu" id="identities" order={30}>
+      <MenuItem
+        id="toolbar-identities"
+        label={intl.formatMessage(messages.title)}
+        to={IDENTITIES_PATH}
+      />
+    </Plug>
+  );
+};
+
+export default IdentitiesMenuItem;

package/src/components/UserMenu/MenuItem.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MenuItem from './MenuItem';
+import { withMenuList, withPersonalTools } from '../../storybook/withUserMenu';
+
+/**
+ * One entry of the personal-tools menu.
+ *
+ * Shown inside a `<ul>` because that is where it lands: it renders the
+ * `<li>` itself, and the menu's stylesheet is written against that nesting.
+ */
+const meta: Meta<typeof MenuItem> = {
+  title: 'Identity/UserMenu/MenuItem',
+  component: MenuItem,
+  args: { id: 'toolbar-example', label: 'Preferences' },
+  // Innermost first, so this reads in the order the DOM nests.
+  decorators: [withMenuList, withPersonalTools],
+  parameters: { fullBleed: true },
+};
+export default meta;
+
+type Story = StoryObj<typeof MenuItem>;
+
+/** Most entries go somewhere. */
+export const ALink: Story = { args: { to: '/personal-information' } };
+
+/** Preferences does not: it slides another panel over the toolbar. */
+export const AButton: Story = { args: { onClick: () => {} } };
+
+/** A label long enough to meet the arrow. */
+export const LongLabel: Story = {
+  args: { label: 'Sign-in methods and connected accounts', to: '/identities' },
+};

package/src/components/UserMenu/MenuItem.tsx

@@ -0,0 +1,48 @@
+/**
+ * One entry in the personal-tools menu.
+ *
+ * Every entry in that menu is the same thing -- a label, a right arrow, and
+ * either a route to go to or a panel to slide in -- and there are now five of
+ * them, each registered separately so a site can reorder or remove any one.
+ * Written once here so that "the same thing" stays true: five copies of this
+ * markup would drift, and the menu's stylesheet keys on it.
+ *
+ * It renders the `<li>` because it lands inside the menu's own `<ul>`.
+ * @module components/UserMenu/MenuItem
+ */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+
+interface MenuItemProps {
+  /** DOM id, so a stylesheet or a test can name this entry. */
+  id: string;
+  /** The visible label, already translated. */
+  label: string;
+  /** Where it goes. Mutually exclusive with `onClick`. */
+  to?: string;
+  /** What it does instead of going anywhere -- sliding a panel in. */
+  onClick?: () => void;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ id, label, to, onClick }) => (
+  <li>
+    {to ? (
+      <Link id={id} to={to}>
+        {label}
+        <Icon name={rightArrowSVG} size="24px" />
+      </Link>
+    ) : (
+      // `aria-label` as well as the text: the arrow is inside the button, and
+      // an accessible name assembled from the label plus an icon's title is
+      // what a screen reader would otherwise read out.
+      <button id={id} aria-label={label} onClick={onClick}>
+        {label}
+        <Icon name={rightArrowSVG} size="24px" />
+      </button>
+    )}
+  </li>
+);
+
+export default MenuItem;

package/src/components/UserMenu/ProfileMenuItem.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import {
+  Pluggable,
+  PluggablesProvider,
+} from '@plone/volto/components/manage/Pluggable';
+import ProfileMenuItem from './ProfileMenuItem';
+import { withPersonalTools } from '../../storybook/withUserMenu';
+import { withUser } from '../../stories/fixtures';
+
+const meta: Meta<typeof ProfileMenuItem> = {
+  title: 'Identity/UserMenu/ProfileMenuItem',
+  component: ProfileMenuItem,
+  decorators: [withPersonalTools],
+  parameters: { fullBleed: true },
+};
+export default meta;
+
+type Story = StoryObj<typeof ProfileMenuItem>;
+
+/**
+ * The plug renders nothing on its own -- it registers a renderer -- so every
+ * story has to include the pluggable that consumes it, the way Volto's user
+ * menu does.
+ */
+const inTheMenu = () => (
+  <PluggablesProvider>
+    <ProfileMenuItem />
+    <ul>
+      <Pluggable name="toolbar-user-menu" />
+    </ul>
+  </PluggablesProvider>
+);
+
+/** A user whose account *is* a Profile content object. */
+export const StoredAsAProfile: Story = {
+  render: inTheMenu,
+  decorators: [
+    withUser({ profile_url: 'https://example.org/identity-profiles/alice' }),
+  ],
+};
+
+/**
+ * A user who *has* a Profile but is not stored as one.
+ *
+ * Their account lives in `source_users`, so `/personal-information` is still
+ * where their fields are edited and Volto's own Profile entry keeps the slot.
+ */
+export const StoredElsewhere: Story = {
+  render: inTheMenu,
+  decorators: [
+    withUser({
+      source: 'source_users',
+      profile_url: 'https://example.org/identity-profiles/alice',
+    }),
+  ],
+};
+
+/**
+ * No Profile: the entry is absent rather than disabled.
+ *
+ * Either this account predates the add-on, or first login has not minted a
+ * Profile for it yet. A menu entry leading nowhere is worse than no menu
+ * entry, which is why this renders an empty list.
+ */
+export const WithoutAProfile: Story = {
+  render: inTheMenu,
+  decorators: [withUser({ profile_url: null })],
+};
+
+/** Before the user has loaded, there is nothing to decide on yet. */
+export const Anonymous: Story = {
+  render: inTheMenu,
+  decorators: [withUser(null)],
+};

package/src/components/UserMenu/ProfileMenuItem.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '../../testing';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import React from 'react';
+
+import {
+  Pluggable,
+  PluggablesProvider,
+} from '@plone/volto/components/manage/Pluggable';
+import ProfileMenuItem from './ProfileMenuItem';
+
+/**
+ * Render the plug the way Volto's user menu does, over a store holding
+ * exactly the profile state the component selects.
+ */
+function renderInMenu(userProfile: unknown) {
+  const store = {
+    getState: () => ({ userProfile }),
+    dispatch: (action: unknown) => action,
+    subscribe: () => () => {},
+  };
+  render(
+    <Provider store={store as never}>
+      <MemoryRouter>
+        <PluggablesProvider>
+          <ProfileMenuItem />
+          <ul>
+            <Pluggable name="toolbar-user-menu" />
+          </ul>
+        </PluggablesProvider>
+      </MemoryRouter>
+    </Provider>,
+  );
+}
+
+const loaded = (profileUrl: string | null, source = 'identity_profile') => ({
+  loading: false,
+  loaded: true,
+  error: null,
+  data: { id: 'alice', profile_url: profileUrl, source },
+});
+
+/** The entry, if it rendered. */
+const entry = () => screen.queryByRole('link', { name: 'Profile' });
+
+describe('ProfileMenuItem', () => {
+  it('links to the Profile of a user whose account is one', () => {
+    renderInMenu(loaded('http://localhost:8080/Plone/identity-profiles/alice'));
+
+    // Flattened: the store holds the backend's absolute URL, and a
+    // react-router link has to be a path on this site.
+    expect(entry()?.getAttribute('href')).toBe('/identity-profiles/alice');
+  });
+
+  it('renders nothing when the user has no Profile', () => {
+    // An account that predates the add-on, or a user first login has not
+    // minted one for. An entry leading nowhere is worse than no entry.
+    renderInMenu(loaded(null));
+
+    expect(entry()).toBeNull();
+  });
+
+  it('does not care which plugin authenticated the account', () => {
+    // It never could: every account this package creates lives in
+    // `source_users`, and keying on that hid this entry for everybody. What
+    // decides is whether a Profile holds the user's fields.
+    renderInMenu(
+      loaded(
+        'http://localhost:8080/Plone/identity-profiles/alice',
+        'source_users',
+      ),
+    );
+
+    expect(entry()).toBeTruthy();
+  });
+
+  it('renders nothing before the user has loaded', () => {
+    renderInMenu({ loading: true, loaded: false, error: null, data: null });
+
+    expect(entry()).toBeNull();
+  });
+
+  it('renders nothing for an anonymous visitor', () => {
+    // `appExtras` mounts this on every route, logged in or not.
+    renderInMenu(undefined);
+
+    expect(entry()).toBeNull();
+  });
+});