UI to manage users/permissions for the content libraries [FC-0062]

src/library-authoring/LibraryLayout.tsx

@@ -7,6 +7,7 @@ import {
 import LibraryAuthoringPage from './LibraryAuthoringPage';
 import { LibraryProvider } from './common/context';
 import { CreateCollectionModal } from './create-collection';
+import { LibraryTeamModal } from './library-team';
 import LibraryCollectionPage from './collections/LibraryCollectionPage';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 
@@ -32,6 +33,7 @@ const LibraryLayout = () => {
       </Routes>
       <CreateCollectionModal />
       <ComponentEditorModal />
+      <LibraryTeamModal />
     </LibraryProvider>
   );
 };

src/library-authoring/common/context.tsx

@@ -18,6 +18,10 @@ export interface LibraryContextData {
   openInfoSidebar: () => void;
   openComponentInfoSidebar: (usageKey: string) => void;
   currentComponentUsageKey?: string;
+  // "Library Team" modal
+  isLibraryTeamModalOpen: boolean;
+  openLibraryTeamModal: () => void;
+  closeLibraryTeamModal: () => void;
   // "Create New Collection" modal
   isCreateCollectionModalOpen: boolean;
   openCreateCollectionModal: () => void;
@@ -48,6 +52,7 @@ const LibraryContext = React.createContext<LibraryContextData | undefined>(undef
 export const LibraryProvider = (props: { children?: React.ReactNode, libraryId: string }) => {
   const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
   const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string>();
+  const [isLibraryTeamModalOpen, openLibraryTeamModal, closeLibraryTeamModal] = useToggle(false);
   const [currentCollectionId, setcurrentCollectionId] = React.useState<string>();
   const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
   const [componentBeingEdited, openComponentEditor] = React.useState<string | undefined>();
@@ -93,6 +98,9 @@ export const LibraryProvider = (props: { children?: React.ReactNode, libraryId:
     openInfoSidebar,
     openComponentInfoSidebar,
     currentComponentUsageKey,
+    isLibraryTeamModalOpen,
+    openLibraryTeamModal,
+    closeLibraryTeamModal,
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
     closeCreateCollectionModal,
@@ -109,6 +117,9 @@ export const LibraryProvider = (props: { children?: React.ReactNode, libraryId:
     openInfoSidebar,
     openComponentInfoSidebar,
     currentComponentUsageKey,
+    isLibraryTeamModalOpen,
+    openLibraryTeamModal,
+    closeLibraryTeamModal,
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
     closeCreateCollectionModal,

src/library-authoring/data/api.ts

@@ -13,6 +13,16 @@
  */
 export const getCreateLibraryBlockUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/blocks/`;
 
+/**
+ * Get the URL for the content library team API.
+ */
+export const getLibraryTeamApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/team/`;
+
+/**
+ * Get the URL for updating/deleting a content library team member.
+ */
+export const getLibraryTeamMemberApiUrl = (libraryId: string, username: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/team/user/${username}/`;
+
 /**
  * Get the URL for library block metadata.
  */
@@ -86,6 +96,25 @@
   updated: string | null;
 }
 
+export interface AddLibraryTeamMember {
+  libraryId: string,
+  email: string;
+  accessLevel: string;
+}
+
+export interface LibraryTeamMember extends AddLibraryTeamMember {
+  username: string;
+}
+
+export interface DeleteLibraryTeamMember {
+  libraryId: string,
+  username: string;
+}
+
+export interface UpdateLibraryTeamMember extends DeleteLibraryTeamMember {
+  accessLevel: string;
+}
+
 export interface Collection {
   id: number;
   key: string;
@@ -254,6 +283,45 @@
   await client.delete(getCommitLibraryChangesUrl(libraryId));
 }
 
+/**
+ * Fetch  content library's team by library ID.
+ */
+export async function getLibraryTeam(libraryId: string): Promise<LibraryTeamMember[]> {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.get(getLibraryTeamApiUrl(libraryId));
+  return camelCaseObject(data);
+}
+
+/**
+ * Add a new member to the library's team by email.
+ */
+export async function addLibraryTeamMember(memberData: AddLibraryTeamMember): Promise<LibraryTeamMember> {
+  const client = getAuthenticatedHttpClient();
+  const url = getLibraryTeamApiUrl(memberData.libraryId);
+  const { data } = await client.post(url, snakeCaseObject(memberData));
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete an existing member from the library's team by username.
+ */
+export async function deleteLibraryTeamMember(memberData: DeleteLibraryTeamMember): Promise<LibraryTeamMember> {
+  const client = getAuthenticatedHttpClient();
+  const url = getLibraryTeamMemberApiUrl(memberData.libraryId, memberData.username);
+  const { data } = await client.delete(url);
+  return camelCaseObject(data);
+}
+
+/**
+ * Update an existing member's access to the library's team by username.
+ */
+export async function updateLibraryTeamMember(memberData: UpdateLibraryTeamMember): Promise<LibraryTeamMember> {
+  const client = getAuthenticatedHttpClient();
+  const url = getLibraryTeamMemberApiUrl(memberData.libraryId, memberData.username);
+  const { data } = await client.put(url, snakeCaseObject(memberData));
+  return camelCaseObject(data);
+}
+
 /**
  * Paste clipboard content into library.
  */

src/library-authoring/data/apiHooks.ts

@@ -19,6 +19,10 @@
   commitLibraryChanges,
   revertLibraryChanges,
   updateLibraryMetadata,
+  getLibraryTeam,
+  addLibraryTeamMember,
+  deleteLibraryTeamMember,
+  updateLibraryTeamMember,
   libraryPasteClipboard,
   getLibraryBlockMetadata,
   getXBlockFields,
@@ -62,6 +66,11 @@
     'list',
     ...(customParams ? [customParams] : []),
   ],
+  libraryTeam: (libraryId?: string) => [
+    ...libraryAuthoringQueryKeys.all,
+    'list',
+    libraryId,
+  ],
   collection: (libraryId?: string, collectionId?: string) => [
     ...libraryAuthoringQueryKeys.all,
     libraryId,
@@ -136,7 +145,7 @@
 
       const newLibraryData = {
         ...previousLibraryData,
-        title: data.title,
+        ...data,
       };
 
       queryClient.setQueryData(queryKey, newLibraryData);
@@ -187,6 +196,62 @@
   });
 };
 
+/**
+ * Hook to fetch a content library's team members
+ */
+export const useLibraryTeam = (libraryId: string | undefined) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.libraryTeam(libraryId),
+    queryFn: () => getLibraryTeam(libraryId!),
+    enabled: libraryId !== undefined,
+  })
+);
+
+/**
+ * Hook to add a new member to a content library's team
+ */
+export const useAddLibraryTeamMember = (libraryId: string | undefined) => {
+  const queryClient = useQueryClient();
+  const queryKey = libraryAuthoringQueryKeys.libraryTeam(libraryId);
+
+  return useMutation({
+    mutationFn: addLibraryTeamMember,
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+};
+
+/**
+ * Hook to delete an existing member from a content library's team
+ */
+export const useDeleteLibraryTeamMember = (libraryId: string | undefined) => {
+  const queryClient = useQueryClient();
+  const queryKey = libraryAuthoringQueryKeys.libraryTeam(libraryId);
+
+  return useMutation({
+    mutationFn: deleteLibraryTeamMember,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+};
+
+/**
+ * Hook to update an existing member's access in a content library's team
+ */
+export const useUpdateLibraryTeamMember = (libraryId: string | undefined) => {
+  const queryClient = useQueryClient();
+  const queryKey = libraryAuthoringQueryKeys.libraryTeam(libraryId);
+
+  return useMutation({
+    mutationFn: updateLibraryTeamMember,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+};
+
 export const useLibraryPasteClipboard = () => {
   const queryClient = useQueryClient();
   return useMutation({

src/library-authoring/library-info/LibraryInfo.test.tsx

@@ -12,6 +12,7 @@ import {
   waitFor,
 } from '@testing-library/react';
 import LibraryInfo from './LibraryInfo';
+import { LibraryProvider } from '../common/context';
 import { ToastProvider } from '../../generic/toast-context';
 import { ContentLibrary, getCommitLibraryChangesUrl } from '../data/api';
 import initializeStore from '../../store';
@@ -59,7 +60,9 @@ const RootWrapper = ({ data } : WrapperProps) => (
     <IntlProvider locale="en" messages={{}}>
       <QueryClientProvider client={queryClient}>
         <ToastProvider>
-          <LibraryInfo library={data} />
+          <LibraryProvider libraryId={data.id}>
+            <LibraryInfo library={data} />
+          </LibraryProvider>
         </ToastProvider>
       </QueryClientProvider>
     </IntlProvider>
@@ -238,10 +241,27 @@ describe('<LibraryInfo />', () => {
     expect(discardButton).toBeDisabled();
   });
 
-  it('discard changes btn should be enabled for new libraries if components are added', async () => {
+  it('publish and discard changes btns should be enabled for new libraries if components are added', async () => {
     render(<RootWrapper data={{ ...libraryData, lastPublished: null, numBlocks: 2 }} />);
+    const publishButton = screen.getByRole('button', { name: /publish/i });
     const discardButton = screen.getByRole('button', { name: /discard changes/i });
 
+    expect(publishButton).not.toBeDisabled();
     expect(discardButton).not.toBeDisabled();
   });
+
+  it('publish and discard changes btns should be absent for users who cannot edit the library', async () => {
+    const data = {
+      ...libraryData,
+      lastPublished: null,
+      numBlocks: 2,
+      canEditLibrary: false,
+    };
+    render(<RootWrapper data={data} />);
+    const publishButton = screen.queryByRole('button', { name: /publish/i });
+    const discardButton = screen.queryByRole('button', { name: /discard changes/i });
+
+    expect(publishButton).not.toBeInTheDocument();
+    expect(discardButton).not.toBeInTheDocument();
+  });
 });

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Stack } from '@openedx/paragon';
+import { Button, Stack } from '@openedx/paragon';
 import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import LibraryPublishStatus from './LibraryPublishStatus';
+import { useLibraryContext } from '../common/context';
 import { ContentLibrary } from '../data/api';
 
 type LibraryInfoProps = {
@@ -11,6 +12,7 @@ type LibraryInfoProps = {
 
 const LibraryInfo = ({ library } : LibraryInfoProps) => {
   const intl = useIntl();
+  const { openLibraryTeamModal } = useLibraryContext();
 
   return (
     <Stack direction="vertical" gap={2.5}>
@@ -22,6 +24,11 @@ const LibraryInfo = ({ library } : LibraryInfoProps) => {
         <span>
           {library.org}
         </span>
+        {library.canEditLibrary && (
+          <Button variant="outline-primary" onClick={openLibraryTeamModal}>
+            {intl.formatMessage(messages.libraryTeamButtonTitle)}
+          </Button>
+        )}
       </Stack>
       <Stack gap={3}>
         <span className="font-weight-bold">

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

@@ -38,8 +38,8 @@ const LibraryPublishStatus = ({ library } : LibraryPublishStatusProps) => {
   return (
     <StatusWidget
       {...library}
-      onCommit={commit}
-      onRevert={revert}
+      onCommit={library.canEditLibrary ? commit : undefined}
+      onRevert={library.canEditLibrary ? revert : undefined}
     />
   );
 };

src/library-authoring/library-info/messages.ts

@@ -11,6 +11,11 @@ const messages = defineMessages({
     defaultMessage: 'Organization',
     description: 'Title for Organization section in Library info sidebar.',
   },
+  libraryTeamButtonTitle: {
+    id: 'course-authoring.library-authoring.sidebar.info.library-team.button.title',
+    defaultMessage: 'Manage Access',
+    description: 'Title to use for the button that allows viewing/editing the Library Team user access.',
+  },
   libraryHistorySectionTitle: {
     id: 'course-authoring.library-authoring.sidebar.info.history.title',
     defaultMessage: 'Library History',