feat(authz): [FC-0099] create toggle to make a library public read (#25)

* refactor: modify actions to add splitter

* feat: add API function to update the library metadata

* feat: create a toggle component to make the library public read

* refactor: update behaviour depending on user permissions

* feat: add success toast

* refactor: use stack to display the actions

* style: fix typo

* style: add mx-5 to divider to avoid wide growth

* chore: update paragon to work with useMediaQuery

Author: dcoa

package-lock.json

@@ -41,7 +41,7 @@
     "@edx/frontend-platform": "^8.3.0",
     "@edx/openedx-atlas": "^0.7.0",
     "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.5",
+    "@openedx/paragon": "^23.15.1",
     "@tanstack/react-query": "5.89.0",
     "lodash.debounce": "^4.0.8",
     "react": "^18.3.1",

package.json

@@ -1,7 +1,12 @@
-import { ComponentType, isValidElement, ReactNode } from 'react';
+import {
+  ComponentType, isValidElement, ReactNode, Fragment,
+} from 'react';
 import { Link } from 'react-router-dom';
 import {
   Breadcrumb, Col, Container, Row, Button, Badge,
+  Stack,
+  useMediaQuery,
+  breakpoints,
 } from '@openedx/paragon';
 
 interface BreadcrumbLink {
@@ -23,46 +28,57 @@ export interface AuthZTitleProps {
   actions?: (Action | ReactNode)[];
 }
 
+export const ActionButton = ({ label, icon, onClick }: Action) => (
+  <Button
+    iconBefore={icon}
+    onClick={onClick}
+  >
+    {label}
+  </Button>
+);
+
 const AuthZTitle = ({
   activeLabel, navLinks = [], pageTitle, pageSubtitle, actions = [],
-}: AuthZTitleProps) => (
-  <Container className="p-5 bg-light-100">
-    <Breadcrumb
-      linkAs={Link}
-      links={navLinks}
-      activeLabel={activeLabel}
-    />
-    <Row className="mt-4">
-      <Col xs={12} md={8} className="mb-4">
-        <h1 className="text-primary">{pageTitle}</h1>
-        {typeof pageSubtitle === 'string'
-          ? <h3><Badge className="py-2 px-3 font-weight-normal" variant="light">{pageSubtitle}</Badge></h3>
-          : pageSubtitle}
-      </Col>
-      <Col xs={12} md={4}>
-        <div className="d-flex justify-content-md-end">
-          {
-            actions.map((action) => {
-              if (isValidElement(action)) {
-                return action;
-              }
-
-              const { label, icon, onClick } = action as Action;
+}: AuthZTitleProps) => {
+  const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
+  return (
+    <Container className="p-5 bg-light-100">
+      <Breadcrumb
+        linkAs={Link}
+        links={navLinks}
+        activeLabel={activeLabel}
+      />
+      <Row className="mt-4">
+        <Col xs={12} md={7} className="mb-4">
+          <h1 className="text-primary">{pageTitle}</h1>
+          {typeof pageSubtitle === 'string'
+            ? <h3><Badge className="py-2 px-3 font-weight-normal" variant="light">{pageSubtitle}</Badge></h3>
+            : pageSubtitle}
+        </Col>
+        <Col xs={12} md={5}>
+          <Stack className="justify-content-end" direction={isDesktop ? 'horizontal' : 'vertical'}>
+            {
+            actions.map((action, index) => {
+              const content = isValidElement(action)
+                ? action
+                : <ActionButton {...action as Action} />;
+              const key = isValidElement(action)
+                ? action.key
+                : (action as Action).label;
               return (
-                <Button
-                  key={`authz-header-action-${label}`}
-                  iconBefore={icon}
-                  onClick={onClick}
-                >
-                  {label}
-                </Button>
+                <Fragment key={`authz-header-action-${key}`}>
+                  {content}
+                  {(index === actions.length - 1) ? null
+                    : (<hr className="mx-lg-5" />)}
+                </Fragment>
               );
             })
           }
-        </div>
-      </Col>
-    </Row>
-  </Container>
-);
+          </Stack>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
 
 export default AuthZTitle;

src/authz-module/components/AuthZTitle.tsx

@@ -1,6 +1,6 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { LibraryMetadata, TeamMember } from '@src/types';
-import { camelCaseObject } from '@edx/frontend-platform';
+import { camelCaseObject, snakeCaseObject } from '@edx/frontend-platform';
 import { getApiUrl, getStudioApiUrl } from '@src/data/utils';
 
 export interface QuerySettings {
@@ -85,6 +85,7 @@ export const getLibrary = async (libraryId: string): Promise<LibraryMetadata> =>
     org: data.org,
     title: data.title,
     slug: data.slug,
+    allowPublicRead: data.allow_public_read,
   };
 };
 
@@ -107,3 +108,17 @@ export const revokeUserRoles = async (
   const res = await getAuthenticatedHttpClient().delete(url.toString());
   return camelCaseObject(res.data);
 };
+
+export const updateLibrary = async (libraryId, updatedData): Promise<LibraryMetadata> => {
+  const { data } = await getAuthenticatedHttpClient().patch(
+    getStudioApiUrl(`/api/libraries/v2/${libraryId}/`),
+    snakeCaseObject(updatedData),
+  );
+  return {
+    id: data.id,
+    org: data.org,
+    title: data.title,
+    slug: data.slug,
+    allowPublicRead: data.allow_public_read,
+  };
+};

src/authz-module/data/api.ts

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   useLibrary, usePermissionsByRole, useTeamMembers, useAssignTeamMembersRole, useRevokeUserRoles,
+  useUpdateLibrary,
 } from './hooks';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -340,3 +341,80 @@ describe('useRevokeUserRoles', () => {
     expect(calledUrl.searchParams.get('scope')).toBe(revokeRoleData.scope);
   });
 });
+
+describe('useUpdateLibrary', () => {
+  const queryKeyTest = ['org.openedx.frontend.app.adminConsole', 'authz', 'library', 'lib:123'];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls updateLibrary with correct params and updates cache', async () => {
+    const mockData = { id: 'lib:123', title: 'Library Test' };
+    getAuthenticatedHttpClient.mockReturnValue({
+      patch: jest.fn().mockResolvedValue({ data: mockData }),
+    });
+    const { result } = renderHook(() => useUpdateLibrary(), { wrapper: createWrapper() });
+
+    await act(async () => {
+      await result.current.mutateAsync({
+        libraryId: 'lib:123',
+        updatedData: { title: 'Library Test' },
+      });
+    });
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+  });
+
+  it('sets query data on success', async () => {
+    const mockData = { id: 'lib:123', title: 'Updated Library' };
+    getAuthenticatedHttpClient.mockReturnValue({
+      patch: jest.fn().mockResolvedValue({ data: mockData }),
+    });
+
+    const queryClient = new QueryClient();
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+
+    const { result } = renderHook(() => useUpdateLibrary(), { wrapper });
+
+    await act(async () => {
+      await result.current.mutateAsync({
+        libraryId: 'lib:123',
+        updatedData: { title: 'Updated Library' },
+      });
+    });
+
+    // verify cache updated with the returned data
+    expect(queryClient.getQueryData(queryKeyTest)).toEqual(mockData);
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+  });
+
+  it('invalidates query on settled', async () => {
+    const mockData = { id: 'lib:123', title: 'Final Title' };
+    getAuthenticatedHttpClient.mockReturnValue({
+      patch: jest.fn().mockResolvedValue({ data: mockData }),
+    });
+    const queryClient = new QueryClient();
+    const invalidateSpy = jest.spyOn(queryClient, 'invalidateQueries');
+
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+
+    const { result } = renderHook(() => useUpdateLibrary(), { wrapper });
+
+    await act(async () => {
+      await result.current.mutateAsync({
+        libraryId: 'lib:123',
+        updatedData: { title: 'Final Title' },
+      });
+    });
+
+    expect(invalidateSpy).toHaveBeenCalledWith({
+      queryKey: queryKeyTest,
+    });
+    expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+  });
+});