feat: Implement querying openedx-authz for publish permissions

Author: rodmgwgu

src/authz/constants.ts

@@ -0,0 +1,18 @@
+export const appId = 'org.openedx.frontend.app.adminConsole';
+
+export const CONTENT_LIBRARY_PERMISSIONS = {
+  DELETE_LIBRARY: 'content_libraries.delete_library',
+  MANAGE_LIBRARY_TAGS: 'content_libraries.manage_library_tags',
+  VIEW_LIBRARY: 'content_libraries.view_library',
+
+  EDIT_LIBRARY_CONTENT: 'content_libraries.edit_library_content',
+  PUBLISH_LIBRARY_CONTENT: 'content_libraries.publish_library_content',
+  REUSE_LIBRARY_CONTENT: 'content_libraries.reuse_library_content',
+
+  CREATE_LIBRARY_COLLECTION: 'content_libraries.create_library_collection',
+  EDIT_LIBRARY_COLLECTION: 'content_libraries.edit_library_collection',
+  DELETE_LIBRARY_COLLECTION: 'content_libraries.delete_library_collection',
+
+  MANAGE_LIBRARY_TEAM: 'content_libraries.manage_library_team',
+  VIEW_LIBRARY_TEAM: 'content_libraries.view_library_team',
+};

src/authz/data/api.ts

@@ -0,0 +1,10 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { PermissionValidationRequest, PermissionValidationResponse } from '@src/authz/types';
+import { getApiUrl } from './utils';
+
+export const validateUserPermissions = async (
+  validations: PermissionValidationRequest[],
+): Promise<PermissionValidationResponse[]> => {
+  const { data } = await getAuthenticatedHttpClient().post(getApiUrl('/api/authz/v1/permissions/validate/me'), validations);
+  return data;
+};

src/authz/data/hooks.ts

@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query';
+import { PermissionValidationRequest, PermissionValidationResponse } from '@src/authz/types';
+import { appId } from '@src/authz/constants';
+import { validateUserPermissions } from './api';
+
+const adminConsoleQueryKeys = {
+  all: [appId] as const,
+  permissions: (permissions: PermissionValidationRequest[]) => [...adminConsoleQueryKeys.all, 'validatePermissions', permissions] as const,
+};
+
+/**
+ * React Query hook to validate if the current user has permissions over a certain object in the instance.
+ * It helps to:
+ * - Determine whether the current user can access certain object.
+ * - Provide role-based rendering logic for UI components.
+ *
+ * @param permissions - The array of objects and actions to validate.
+ *
+ * @example
+ * const { data } = useValidateUserPermissions([{
+           "action": "act:read",
+           "object": "lib:test-lib",
+           "scope": "org:OpenedX"
+       }]);
+ * if (data[0].allowed) { ... }
+ *
+ */
+export const useValidateUserPermissions = (
+  permissions: PermissionValidationRequest[],
+) => useQuery<PermissionValidationResponse[], Error>({
+  queryKey: adminConsoleQueryKeys.permissions(permissions),
+  queryFn: () => validateUserPermissions(permissions),
+  retry: false,
+});

src/authz/data/utils.ts

@@ -0,0 +1,4 @@
+import { getConfig } from '@edx/frontend-platform';
+
+export const getApiUrl = (path: string) => `${getConfig().LMS_BASE_URL}${path || ''}`;
+export const getStudioApiUrl = (path: string) => `${getConfig().STUDIO_BASE_URL}${path || ''}`;

src/authz/types.ts

@@ -0,0 +1,8 @@
+export interface PermissionValidationRequest {
+  action: string;
+  scope?: string;
+}
+
+export interface PermissionValidationResponse extends PermissionValidationRequest {
+  allowed: boolean;
+}

src/library-authoring/common/context/LibraryContext.tsx

@@ -13,6 +13,12 @@ import type { ComponentPicker } from '../../component-picker';
 import type { ContentLibrary, BlockTypeMetadata } from '../../data/api';
 import { useContentLibrary } from '../../data/apiHooks';
 import { useComponentPickerContext } from './ComponentPickerContext';
+import { useValidateUserPermissions } from '@src/authz/data/hooks';
+import { CONTENT_LIBRARY_PERMISSIONS } from '@src/authz/constants';
+
+const LIBRARY_PERMISSIONS = [
+  CONTENT_LIBRARY_PERMISSIONS.PUBLISH_LIBRARY_CONTENT,
+];
 
 export interface ComponentEditorInfo {
   usageKey: string;
@@ -25,6 +31,7 @@ export type LibraryContextData = {
   libraryId: string;
   libraryData?: ContentLibrary;
   readOnly: boolean;
+  canPublish: boolean;
   isLoadingLibraryData: boolean;
   /** The ID of the current collection/container, on the sidebar OR page */
   collectionId: string | undefined;
@@ -107,6 +114,11 @@ export const LibraryProvider = ({
     componentPickerMode,
   } = useComponentPickerContext();
 
+  const permissions = LIBRARY_PERMISSIONS.map(action => ({ action, scope: libraryId }));
+
+  const { isLoading: isLoadingUserPermissions, data: userPermissions } = useValidateUserPermissions(permissions);
+  const canPublish = userPermissions ? userPermissions[0]?.allowed : false;
+  // TODO change to use canEdit from userPermissions later
   const readOnly = !!componentPickerMode || !libraryData?.canEditLibrary;
 
   // Parse the initial collectionId and/or container ID(s) from the current URL params
@@ -131,7 +143,8 @@ export const LibraryProvider = ({
       containerId,
       setContainerId,
       readOnly,
-      isLoadingLibraryData,
+      canPublish,
+      isLoadingLibraryData: isLoadingLibraryData || isLoadingUserPermissions,
       showOnlyPublished,
       extraFilter,
       isCreateCollectionModalOpen,
@@ -154,7 +167,9 @@ export const LibraryProvider = ({
     containerId,
     setContainerId,
     readOnly,
+    canPublish,
     isLoadingLibraryData,
+    isLoadingUserPermissions,
     showOnlyPublished,
     extraFilter,
     isCreateCollectionModalOpen,

src/library-authoring/library-info/LibraryPublishStatus.tsx

@@ -12,7 +12,7 @@ import messages from './messages';
 
 const LibraryPublishStatus = () => {
   const intl = useIntl();
-  const { libraryData, readOnly } = useLibraryContext();
+  const { libraryData, readOnly, canPublish } = useLibraryContext();
   const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useToggle(false);
 
   const commitLibraryChanges = useCommitLibraryChanges();
@@ -51,10 +51,10 @@ const LibraryPublishStatus = () => {
     <>
       <StatusWidget
         {...libraryData}
-        onCommit={!readOnly ? commit : undefined}
+        onCommit={!readOnly && canPublish ? commit : undefined}
         onCommitStatus={commitLibraryChanges.status}
         onCommitLabel={intl.formatMessage(messages.publishLibraryButtonLabel)}
-        onRevert={!readOnly ? openConfirmModal : undefined}
+        onRevert={!readOnly && canPublish ? openConfirmModal : undefined}
       />
       <DeleteModal
         isOpen={isConfirmModalOpen}