Make the XB UI show only UI elements/operations available to the current user

Overview

XB UI needs to be able to check permissions and alter the UI accordingly. We need some basic utilities that will allow this to be handled consistently throughout the app.

There are 3 types of checks:

Config entities

See #3516648: Update `ExperienceBuilderController` to pass current user's XB high-level permissions to the client

drupalSettings.permissions => [
            'globalRegions' => bool,
            'sections' => bool,
            'codeComponents' => bool,
            'contentTemplates' => bool,
],

Creating new content entities

TBD, #3529895: Provide the client with `create` operation access information similar to #3516657.
Still to be defined, but potentially something like:

drupalSettings.permissions => [
     "contentEntityCreateOperations' => {
             "entity_type": {
                   "bundle": label/FALSE,
              }
              "xb_page" :  {
                    "xb_page": "Page" // The singular label for "New Page"
              }
              "node": {
                   "article": "Article",  // The singular label for "New Article"
                   "blogpost": FALSE,
               }
      ],
],

Existing content entities

See #3516657: Update `ApiContentControllers::list()` to expose available content entity operations in `meta` and \Drupal\experience_builder\XbUriDefinitions[link])

Calling /xb/api/v0/content/{entity_type} for the list of entities, returns a set of allowed links for each content entity:

'entity_id': {
    'id': 1,
    'title': "Page 1",
    "status" => TRUE,
    "path" => '/page-1',
     ...,
     "links": {
            "edit-form": "/xb/xb_page/1",
            "delete-form':  "/xb/xb_page/1",
            "https://drupal.org/project/experience_builder#link-rel-duplicate": "/xb/api/v0/content/xb_page"
            "https://drupal.org/project/experience_builder#link-rel-set-as-homepage":  "/xb/api/v0/content/xb_page"
     }
}
...

Proposed resolution

Communicate permissions

Provide a list of permissions to the FE within drupalSettings.xb.permissions or similar.

type Permissions = string[];
interface DrupalSettings {
  xb: {
     ...
     permissions: Permissions;
  }
}

Utility functions

Create utility functions to help manage and check permissions:

• Check if a user has an individual permission
  

  const hasPermission = (permission: string, userPermissions: Permissions): boolean => {
    return userPermissions.includes(permission);
  };
  

• Check if a user has multiple permissions
  

  const hasPermissions = (requiredPermissions: Permissions, userPermissions: Permissions): boolean => {
    return requiredPermissions.every(permission => userPermissions.includes(permission));
  };
  

• Check if a user has one or more of a given list of permissions
  

  const hasAnyPermission = (requiredPermissions: Permissions, userPermissions: Permissions): boolean => {
    return requiredPermissions.some(permission => userPermissions.includes(permission));
  };
  

React Component

A reusable React component that can be used to conditionally render UI elements based on permissions:

import React, { ReactNode } from 'react';

interface PermissionCheckProps {
  hasPermission?: string;
  hasAnyPermission?: Permissions;
  hasPermissions?: Permissions;
  denied?: ReactNode;
  children: ReactNode;
  userPermissions: Permissions;
}

const PermissionCheck: React.FC<PermissionCheckProps> = ({
  hasPermission,
  hasAnyPermission,
  hasPermissions,
  denied = <div>You don’t have permission</div>,
  children,
  userPermissions
}) => {
  const isAllowed = 
    (hasPermission && hasPermission(userPermissions)) ||
    (hasAnyPermission && hasAnyPermission(hasAnyPermission, userPermissions)) ||
    (hasPermissions && hasPermissions(hasPermissions, userPermissions));

  return <>{isAllowed ? children : denied}</>;
};

export default PermissionCheck;

Example of how it would be used:

<PermissionCheck hasPermission="canAdd" denied={(<button disabled title="You do not have permission to add">Add</button>)}>
  <button>Add</button>
</PermissionCheck>

Important Note

Backend Enforcement: Always enforce permissions on the backend as frontend checks can be bypassed.

Out of scope

Real-time Updates: Real-time updates to permissions don't need to be supported; users must reload the page to get updated permissions.

User interface changes

Design Considerations:

We need to come up with a set of common rules/UX guidelines to cover the following and when they should be used

• UI Element Visibility: Show or remove UI elements based on permissions.
• UI Element State: Enable or disable UI (visuals for disabled states) elements based on permissions.
• Custom UI: Display custom UI in place of the regular UI when a permission is missing.
• Custom dialog: Display custom dialog when a user performs an action they don't have permission to do.