Content Hub External component get user rights

Question

In Content Hub DAM I want to create an external component, but want to be able to show or hide information based on the user permissions. Everyone is able to see my entity, but not everyone is allowed to edit.

Would this be possible in a React app? Can any one give me pointers on how to solve this?

Answer 1

You can use the following code to fetch user group in an external component.

import ReactDOM from "react-dom";
export default function createExternalRoot(container: HTMLElement) {
  return {
    async render(context: any) {
     console.log(context.user.userGroups);
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

Based on the user role read, you can disable the component to whom you would not like the component to be editable.

Moreover with the new version, there is a flexibility to show/hide component using settings on component. This can be enabled by clicking on the new experience at the page level on the top right corner.

With this setting, you can show/hide component based on the user member role as below:

You can also read permission of the user group using below code, which enlist all the permissions on the entity.

import { IEntity } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/entity";
import { IUserGroupPolicy } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/policies/user-group-policy";

var group:IEntity = await context.client.users.getUserGroupAsync("${UserGroupName}", EntityLoadConfiguration.Full);
var policy: IUserGroupPolicy = await context.client.policies.getUserGroupPolicyAsync(group.id);
console.log(policy);

Above query will return all the permissions to entity on user group such as read, write etc as below.

Hope this helps!!!

Answer 2

Just for additional information and follow-up.

I was able to get my component working with above answer from @ckhanna. I found the following call to receive permissions based on an Entity.

const permissions = await context.client.permissions.getPermissionsAsync(entityId);

This will give you a list based on the current user of the permissions that are available. I then check if "Update" is in the permissions.

Then I can handle the rest of my component one way or the other.