Hide suppression unless library administrator (PP-1463)

src/components/BookDetailsContainer.tsx

@@ -2,12 +2,14 @@ import * as React from "react";
 import { Store } from "@reduxjs/toolkit";
 import * as PropTypes from "prop-types";
 
+import Admin from "../models/Admin";
 import BookDetailsTabContainer from "./BookDetailsTabContainer";
 import BookDetails from "./BookDetails";
 import { BookDetailsContainerProps } from "@thepalaceproject/web-opds-client/lib/components/Root";
 import { RootState } from "../store";
 
 export interface BookDetailsContainerContext {
+  admin: Admin;
   csrfToken: string;
   tab: string;
   editorStore: Store<RootState>;
@@ -34,13 +36,17 @@ const BookDetailsContainer = (
         library={context.library}
         csrfToken={context.csrfToken}
         store={context.editorStore}
+        canSuppress={context.admin.isLibraryManager(
+          context.library(props.collectionUrl, props.bookUrl)
+        )}
       >
         {book}
       </BookDetailsTabContainer>
     </div>
   );
 };
 BookDetailsContainer.contextTypes = {
+  admin: PropTypes.object.isRequired,
   csrfToken: PropTypes.string.isRequired,
   tab: PropTypes.string,
   editorStore: PropTypes.object.isRequired,

src/components/BookDetailsEditor.tsx

@@ -18,6 +18,7 @@ export interface BookDetailsEditorOwnProps {
   csrfToken: string;
   store?: Store<RootState>;
   refreshCatalog?: () => Promise<any>;
+  canSuppress: boolean;
 }
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -54,6 +55,14 @@ export class BookDetailsEditor extends React.Component<BookDetailsEditorProps> {
 
   render(): React.ReactElement {
     const { bookData } = this.props;
+    const canSuppress =
+      !!bookData?.suppressPerLibraryLink && this.props.canSuppress;
+    const canUnsuppress =
+      !!bookData?.unsuppressPerLibraryLink && this.props.canSuppress;
+    // A button row will be present if:
+    // - There is a refresh link; or
+    // - There is a un/suppress link and the admin is allowed to use it.
+    const hasButtonRow = bookData?.refreshLink || canSuppress || canUnsuppress;
     return (
       <div className="book-details-editor">
         {bookData && !this.props.fetchError && (
@@ -66,11 +75,9 @@ export class BookDetailsEditor extends React.Component<BookDetailsEditorProps> {
               <ErrorMessage error={this.props.editError} />
             )}
 
-            {(bookData.suppressPerLibraryLink ||
-              bookData.unsuppressPerLibraryLink ||
-              bookData.refreshLink) && (
+            {hasButtonRow && (
               <div className="form-group form-inline">
-                {!!bookData.suppressPerLibraryLink && (
+                {canSuppress && (
                   <BookDetailsEditorSuppression
                     link={bookData.suppressPerLibraryLink}
                     onConfirm={() =>
@@ -100,7 +107,7 @@ export class BookDetailsEditor extends React.Component<BookDetailsEditorProps> {
                     }
                   />
                 )}
-                {!!bookData.unsuppressPerLibraryLink && (
+                {canUnsuppress && (
                   <BookDetailsEditorSuppression
                     link={bookData.unsuppressPerLibraryLink}
                     onConfirm={() =>
@@ -109,7 +116,9 @@ export class BookDetailsEditor extends React.Component<BookDetailsEditorProps> {
                       )
                     }
                     onComplete={this.refresh}
-                    buttonDisabled={this.props.isFetching}
+                    buttonDisabled={
+                      this.props.isFetching || !this.props.canSuppress
+                    }
                     buttonContent="Restore"
                     buttonTitle="Restore availability for this library."
                     className="left-align"

src/components/BookDetailsTabContainer.tsx

@@ -9,12 +9,14 @@ import BookCoverEditor from "./BookCoverEditor";
 import CustomListsForBook from "./CustomListsForBook";
 import { TabContainer, TabContainerProps } from "./TabContainer";
 import { RootState } from "../store";
+import Admin from "../models/Admin";
 
 interface BookDetailsTabContainerOwnProps extends TabContainerProps {
   bookUrl: string;
   collectionUrl: string;
   refreshCatalog: () => Promise<any>;
   library: (collectionUrl, bookUrl) => string;
+  canSuppress: boolean;
   // extended from TabContainerProps in superclass
   //   store?: Store<RootState>;
   //   csrfToken?: string;
@@ -61,6 +63,7 @@ export class BookDetailsTabContainer extends TabContainer<
         csrfToken={this.props.csrfToken}
         bookUrl={this.props.bookUrl}
         refreshCatalog={this.props.refreshCatalog}
+        canSuppress={this.props.canSuppress}
       />
     );
     tabs["classifications"] = (

src/components/__tests__/BookDetailsContainer-test.tsx

@@ -32,6 +32,7 @@ describe("BookDetailsContainer", () => {
       editorStore: store,
       csrfToken: "token",
       library: stub(),
+      admin: { isLibraryManager: () => true },
     };
     refreshCatalog = stub();
 

src/components/__tests__/BookDetailsEditor-test.tsx

@@ -49,6 +49,7 @@ describe("BookDetailsEditor", () => {
         bookUrl={permalink}
         {...dispatchProps}
         csrfToken={"token"}
+        canSuppress={true}
       />
     );
 
@@ -68,6 +69,7 @@ describe("BookDetailsEditor", () => {
         bookUrl={permalink}
         {...dispatchProps}
         csrfToken={"token"}
+        canSuppress={true}
       />
     );
     wrapper.setProps({ bookUrl: newPermalink });
@@ -83,6 +85,7 @@ describe("BookDetailsEditor", () => {
         bookData={{ id: "id", title: "title" }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         {...dispatchProps}
       />
     );
@@ -101,6 +104,7 @@ describe("BookDetailsEditor", () => {
         bookData={{ id: "id", title: "title", suppressPerLibraryLink }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         {...dispatchProps}
       />
     );
@@ -118,6 +122,7 @@ describe("BookDetailsEditor", () => {
         bookData={{ id: "id", title: "title", unsuppressPerLibraryLink }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         {...dispatchProps}
       />
     );
@@ -137,6 +142,7 @@ describe("BookDetailsEditor", () => {
         bookData={{ id: "id", title: "title", refreshLink: refreshLink }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         {...dispatchProps}
       />
     );
@@ -158,6 +164,7 @@ describe("BookDetailsEditor", () => {
         bookData={{ id: "id", title: "title" }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         fetchError={fetchError}
         {...dispatchProps}
       />
@@ -184,6 +191,7 @@ describe("BookDetailsEditor", () => {
         bookData={{ id: "id", title: "title", editLink: editLink }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         editError={editError}
         {...dispatchProps}
       />
@@ -217,6 +225,7 @@ describe("BookDetailsEditor", () => {
         bookData={{ id: "id", title: "title", editLink }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         {...dispatchProps}
         roles={roles}
         media={media}

src/components/__tests__/BookDetailsTabContainer-test.tsx

@@ -33,6 +33,7 @@ describe("BookDetailsTabContainer", () => {
         refreshCatalog={stub()}
         store={store}
         library={(a, b) => "library"}
+        canSuppress={true}
         // from store
         complaintsCount={0}
         bookData={null}

tests/jest/components/BookEditor.test.tsx

@@ -80,6 +80,40 @@ describe("BookDetails", () => {
     fetchMock.restore();
   });
 
+  it("don't show hide button if not a library's admin", () => {
+    const { queryByRole } = renderWithProviders(
+      <BookDetailsEditor
+        bookData={{ id: "id", title: "title", suppressPerLibraryLink }}
+        bookUrl="url"
+        csrfToken="token"
+        canSuppress={false}
+        {...dispatchProps}
+      />
+    );
+    const hideButton = queryByRole("button", { name: "Hide" });
+    const restoreButton = queryByRole("button", { name: "Restore" });
+
+    expect(hideButton).to.be.null;
+    expect(restoreButton).to.be.null;
+  });
+
+  it("don't show restore button if not a library's admin", () => {
+    const { queryByRole } = renderWithProviders(
+      <BookDetailsEditor
+        bookData={{ id: "id", title: "title", unsuppressPerLibraryLink }}
+        bookUrl="url"
+        csrfToken="token"
+        canSuppress={false}
+        {...dispatchProps}
+      />
+    );
+    const hideButton = queryByRole("button", { name: "Hide" });
+    const restoreButton = queryByRole("button", { name: "Restore" });
+
+    expect(hideButton).to.be.null;
+    expect(restoreButton).to.be.null;
+  });
+
   it("uses modal for suppress book confirmation", async () => {
     // Configure standard constructors so that RTK Query works in tests with FetchMockJest
     Object.assign(fetchMock.config, {
@@ -96,6 +130,7 @@ describe("BookDetails", () => {
         bookData={{ id: "id", title: "title", suppressPerLibraryLink }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         {...dispatchProps}
       />
     );
@@ -154,6 +189,7 @@ describe("BookDetails", () => {
         bookData={{ id: "id", title: "title", unsuppressPerLibraryLink }}
         bookUrl="url"
         csrfToken="token"
+        canSuppress={true}
         {...dispatchProps}
       />
     );