data-role attributes are missing from self-hosted site

[MichaelJLiu]

Bug description

After the recent role changes from Anonymous/Authenticated to Administrators/Developers/Guests in the Azure Developer Portal, data-role="anonymous" and data-role="authenticated" attributes are missing from buttons and menus that are restricted to certain roles, causing them to incorrectly appear for all roles in self-hosted sites.

Reproduction steps

1. In the Azure Developer Portal (<my-site>.developer.azure-api.net), create a button that's viewable by Developers only.
2. Clone this repo, configure the managementApiUrl and managementApiAccessToken settings in config.publish.json, and run npm run publish.
3. In the running site, observe that the button is visible even to anonymous users.

Expected behavior

A button that's configured to be viewable by Guests only or Developers only should not be visible to authenticated users or anonymous users, respectively.

Is your portal managed or self-hosted?

Self-hosted

Release tag

2.24.0

Analysis

In https://<my-site>.developer.azure-api.net/editors/scripts/paperbits.js, I see that ApimDesignModule injects a module named AccessDesignModule (which currently does not exist in this repo). AccessDesignModule in turns injects AccessSecurityModelEditor, which changes the security model into a format (e.g., { type: "group", allow: ["guests"] }) that is incompatible with the format expected by paperbits (e.g., { roles: ["anonymous"] }).

[ghost]

@MichaelJLiu, thank you for opening this issue. We will triage it within the next few business days.