feat: Adds Library Team modal

which allows Library Admins to add Readers, Authors, and other Admin
users to the list of people who can access a Library.

* Readers can only see the library, but not its Team.
* Authors can see the Library Team, but cannot alter it.
* Admins can update the Library Team.

Modal is triggered from a button on the LibraryInfo sidebar which is
only accessible to users who can edit the library.

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 getContentLibraryApiUrl = (libraryId: string) => `${getApiBaseUrl()
  */
 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 @@ export interface ContentLibrary {
   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 @@ export async function revertLibraryChanges(libraryId: string) {
   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 @@ import {
   commitLibraryChanges,
   revertLibraryChanges,
   updateLibraryMetadata,
+  getLibraryTeam,
+  addLibraryTeamMember,
+  deleteLibraryTeamMember,
+  updateLibraryTeamMember,
   libraryPasteClipboard,
   getLibraryBlockMetadata,
   getXBlockFields,
@@ -62,6 +66,11 @@ export const libraryAuthoringQueryKeys = {
     'list',
     ...(customParams ? [customParams] : []),
   ],
+  libraryTeam: (libraryId?: string) => [
+    ...libraryAuthoringQueryKeys.all,
+    'list',
+    libraryId,
+  ],
   collection: (libraryId?: string, collectionId?: string) => [
     ...libraryAuthoringQueryKeys.all,
     libraryId,
@@ -136,7 +145,7 @@ export const useUpdateLibraryMetadata = () => {
 
       const newLibraryData = {
         ...previousLibraryData,
-        title: data.title,
+        ...data,
       };
 
       queryClient.setQueryData(queryKey, newLibraryData);
@@ -187,6 +196,62 @@ export const useRevertLibraryChanges = () => {
   });
 };
 
+/**
+ * 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>

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/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',

src/library-authoring/library-team/AddLibraryTeamMember.tsx

@@ -0,0 +1,61 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Form,
+  ActionRow,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+
+import messages from './messages';
+import FormikControl from '../../generic/FormikControl';
+import { EXAMPLE_USER_EMAIL } from './constants';
+
+const AddLibraryTeamMember = ({ onSubmit, onCancel }: {
+  onSubmit: ({ email } : { email: string }) => void,
+  onCancel: () => void,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <div className="add-user-form" data-testid="add-user-form">
+      <Formik
+        initialValues={{ email: '' }}
+        onSubmit={onSubmit}
+        validateOnBlur
+      >
+        {({ handleSubmit, values }) => (
+          <Form onSubmit={handleSubmit}>
+            <Form.Group size="sm" className="form-field">
+              <h3 className="form-title">{intl.formatMessage(messages.addMemberFormTitle)}</h3>
+              <Form.Label size="sm" className="form-label font-weight-bold">
+                {intl.formatMessage(messages.addMemberFormEmailLabel)}
+              </Form.Label>
+              <FormikControl
+                name="email"
+                value={values.email}
+                placeholder={intl.formatMessage(messages.addMemberFormEmailPlaceholder, { email: EXAMPLE_USER_EMAIL })}
+              />
+              <Form.Control.Feedback className="form-helper-text">
+                {intl.formatMessage(messages.addMemberFormEmailHelperText)}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <ActionRow>
+              <Button variant="tertiary" size="sm" onClick={onCancel}>
+                {intl.formatMessage(messages.cancelButton)}
+              </Button>
+              <Button
+                size="sm"
+                type="submit"
+                disabled={!values.email.length}
+              >
+                {intl.formatMessage(messages.addMemberFormSubmitButton)}
+              </Button>
+            </ActionRow>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+export default AddLibraryTeamMember;