[PP-3820] Add patron blocking rules editor to the Library Settings UI…

src/components/PatronAuthServiceEditForm.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { PatronAuthServicesData } from "../interfaces";
+import {
+  LibraryWithSettingsData,
+  PatronBlockingRule,
+  ProtocolData,
+} from "../interfaces";
+import ServiceEditForm from "./ServiceEditForm";
+import PatronBlockingRulesEditor, {
+  PatronBlockingRulesEditorHandle,
+} from "./PatronBlockingRulesEditor";
+import { supportsPatronBlockingRules } from "../utils/patronBlockingRules";
+
+/** Extends ServiceEditForm with patron-blocking-rules support for protocols that
+ *  support it. The editor is injected via the hook methods added
+ *  to ServiceEditForm; editLibrary and addLibrary are overridden to collect the
+ *  rules from the editor ref and persist them in library state. */
+export default class PatronAuthServiceEditForm extends ServiceEditForm<
+  PatronAuthServicesData
+> {
+  private newLibraryRulesRef = React.createRef<
+    PatronBlockingRulesEditorHandle
+  >();
+  private libraryRulesRefs = new Map<
+    string,
+    React.RefObject<PatronBlockingRulesEditorHandle>
+  >();
+
+  private getOrCreateLibraryRef(
+    shortName: string
+  ): React.RefObject<PatronBlockingRulesEditorHandle> {
+    if (!this.libraryRulesRefs.has(shortName)) {
+      this.libraryRulesRefs.set(
+        shortName,
+        React.createRef<PatronBlockingRulesEditorHandle>()
+      );
+    }
+    return this.libraryRulesRefs.get(shortName);
+  }
+
+  protocolHasLibrarySettings(protocol: ProtocolData): boolean {
+    return (
+      super.protocolHasLibrarySettings(protocol) ||
+      supportsPatronBlockingRules(protocol && protocol.name)
+    );
+  }
+
+  renderExtraExpandedLibrarySettings(
+    library: LibraryWithSettingsData,
+    protocol: ProtocolData,
+    disabled: boolean
+  ): React.ReactNode {
+    if (!supportsPatronBlockingRules(protocol && protocol.name)) {
+      return null;
+    }
+    return (
+      <PatronBlockingRulesEditor
+        ref={this.getOrCreateLibraryRef(library.short_name)}
+        value={(library.patron_blocking_rules as PatronBlockingRule[]) || []}
+        disabled={disabled}
+        error={this.props.error}
+      />
+    );
+  }
+
+  renderExtraNewLibrarySettings(
+    protocol: ProtocolData,
+    disabled: boolean
+  ): React.ReactNode {
+    if (!supportsPatronBlockingRules(protocol && protocol.name)) {
+      return null;
+    }
+    return (
+      <PatronBlockingRulesEditor
+        ref={this.newLibraryRulesRef}
+        value={[]}
+        disabled={disabled}
+        error={this.props.error}
+      />
+    );
+  }
+
+  editLibrary(library: LibraryWithSettingsData, protocol: ProtocolData) {
+    const libraries = this.state.libraries.filter(
+      (stateLibrary) => stateLibrary.short_name !== library.short_name
+    );
+    const expandedLibraries = this.state.expandedLibraries.filter(
+      (shortName) => shortName !== library.short_name
+    );
+    const newLibrary: LibraryWithSettingsData = {
+      short_name: library.short_name,
+    };
+    for (const setting of this.protocolLibrarySettings(protocol)) {
+      const value = (this.refs[
+        `${library.short_name}_${setting.key}`
+      ] as any).getValue();
+      if (value) {
+        newLibrary[setting.key] = value;
+      }
+    }
+    if (supportsPatronBlockingRules(protocol && protocol.name)) {
+      const editorRef = this.libraryRulesRefs.get(library.short_name);
+      if (editorRef?.current) {
+        newLibrary.patron_blocking_rules = editorRef.current.getValue();
+      }
+    }
+    libraries.push(newLibrary);
+    this.setState(
+      Object.assign({}, this.state, { libraries, expandedLibraries })
+    );
+  }
+
+  addLibrary(protocol: ProtocolData) {
+    const name = this.state.selectedLibrary;
+    const newLibrary: LibraryWithSettingsData = { short_name: name };
+    for (const setting of this.protocolLibrarySettings(protocol)) {
+      const value = (this.refs[setting.key] as any).getValue();
+      if (value) {
+        newLibrary[setting.key] = value;
+      }
+      (this.refs[setting.key] as any).clear();
+    }
+    if (supportsPatronBlockingRules(protocol && protocol.name)) {
+      if (this.newLibraryRulesRef.current) {
+        newLibrary.patron_blocking_rules = this.newLibraryRulesRef.current.getValue();
+      }
+    }
+    const libraries = this.state.libraries.concat(newLibrary);
+    this.setState(
+      Object.assign({}, this.state, { libraries, selectedLibrary: null })
+    );
+  }
+}

src/components/PatronAuthServices.tsx

@@ -7,7 +7,7 @@ import EditableConfigList, {
 import { connect } from "react-redux";
 import ActionCreator from "../actions";
 import { PatronAuthServicesData, PatronAuthServiceData } from "../interfaces";
-import ServiceEditForm from "./ServiceEditForm";
+import PatronAuthServiceEditForm from "./PatronAuthServiceEditForm";
 import NeighborhoodAnalyticsForm from "./NeighborhoodAnalyticsForm";
 
 /** Right panel for patron authentication services on the system
@@ -18,7 +18,7 @@ export class PatronAuthServices extends EditableConfigList<
   PatronAuthServicesData,
   PatronAuthServiceData
 > {
-  EditForm = ServiceEditForm;
+  EditForm = PatronAuthServiceEditForm;
   ExtraFormSection = NeighborhoodAnalyticsForm;
   extraFormKey = "neighborhood_mode";
   listDataKey = "patron_auth_services";

src/components/PatronBlockingRulesEditor.tsx

@@ -0,0 +1,193 @@
+import * as React from "react";
+import { Button } from "library-simplified-reusable-components";
+import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces";
+import { PatronBlockingRule } from "../interfaces";
+import EditableInput from "./EditableInput";
+import WithRemoveButton from "./WithRemoveButton";
+
+function extractErrorMessage(error: FetchErrorData): string | null {
+  if (!error || error.status < 400) return null;
+  const resp = error.response as string;
+  if (!resp) return null;
+  try {
+    return JSON.parse(resp).detail || resp;
+  } catch {
+    return resp;
+  }
+}
+
+export interface PatronBlockingRulesEditorProps {
+  value?: PatronBlockingRule[];
+  disabled?: boolean;
+  error?: FetchErrorData;
+}
+
+export interface PatronBlockingRulesEditorHandle {
+  getValue: () => PatronBlockingRule[];
+  validateAndGetValue: () => PatronBlockingRule[] | null;
+}
+
+type ClientErrors = { [index: number]: { name?: boolean; rule?: boolean } };
+
+/** Protocol-agnostic editor for a list of patron blocking rules stored in library settings. */
+const PatronBlockingRulesEditor = React.forwardRef<
+  PatronBlockingRulesEditorHandle,
+  PatronBlockingRulesEditorProps
+>(({ value = [], disabled = false, error }, ref) => {
+  const [rules, setRules] = React.useState<PatronBlockingRule[]>(() =>
+    (value || []).map((r) => ({ ...r }))
+  );
+  const [clientErrors, setClientErrors] = React.useState<ClientErrors>({});
+
+  const serverErrorMessage = extractErrorMessage(error);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      getValue: () => rules,
+      validateAndGetValue: () => {
+        const errors: ClientErrors = {};
+        let valid = true;
+        rules.forEach((r, i) => {
+          const rowErrors: { name?: boolean; rule?: boolean } = {};
+          if (!r.name) {
+            rowErrors.name = true;
+            valid = false;
+          }
+          if (!r.rule) {
+            rowErrors.rule = true;
+            valid = false;
+          }
+          if (Object.keys(rowErrors).length > 0) {
+            errors[i] = rowErrors;
+          }
+        });
+        setClientErrors(errors);
+        return valid ? rules : null;
+      },
+    }),
+    [rules]
+  );
+
+  const addRule = () => {
+    setRules((prev) => [...prev, { name: "", rule: "", message: "" }]);
+  };
+
+  const removeRule = (index: number) => {
+    setRules((prev) => prev.filter((_, i) => i !== index));
+    setClientErrors((prev) => {
+      const next = { ...prev };
+      delete next[index];
+      return next;
+    });
+  };
+
+  const updateRule = (
+    index: number,
+    field: keyof PatronBlockingRule,
+    value: string
+  ) => {
+    setRules((prev) =>
+      prev.map((r, i) => (i === index ? { ...r, [field]: value } : r))
+    );
+    if (field === "name" || field === "rule") {
+      setClientErrors((prev) => {
+        if (!prev[index]) return prev;
+        return { ...prev, [index]: { ...prev[index], [field]: !value } };
+      });
+    }
+  };
+
+  return (
+    <div className="patron-blocking-rules-editor">
+      <div className="patron-blocking-rules-header">
+        <label className="control-label">Patron Blocking Rules</label>
+        <Button
+          type="button"
+          className="add-patron-blocking-rule"
+          disabled={disabled}
+          callback={addRule}
+          content="Add Rule"
+        />
+      </div>
+      {serverErrorMessage && rules.length > 0 && (
+        <p className="patron-blocking-rule-field-error text-danger">
+          {serverErrorMessage}
+        </p>
+      )}
+      {rules.length === 0 && (
+        <p className="no-rules-message">No patron blocking rules defined.</p>
+      )}
+      <ul className="patron-blocking-rules-list list-unstyled">
+        {rules.map((rule, index) => {
+          const rowErrors = clientErrors[index] || {};
+          const nameClientError = !!rowErrors.name;
+          const ruleClientError = !!rowErrors.rule;
+
+          return (
+            <li key={index} className="patron-blocking-rule-row">
+              <WithRemoveButton
+                disabled={disabled}
+                onRemove={() => removeRule(index)}
+              >
+                <div className="patron-blocking-rule-fields">
+                  {nameClientError && (
+                    <p className="patron-blocking-rule-field-error text-danger">
+                      Rule Name is required.
+                    </p>
+                  )}
+                  <EditableInput
+                    elementType="input"
+                    type="text"
+                    label="Rule Name"
+                    name={`patron_blocking_rule_name_${index}`}
+                    value={rule.name}
+                    required={true}
+                    disabled={disabled}
+                    readOnly={disabled}
+                    optionalText={false}
+                    clientError={rowErrors.name}
+                    error={error}
+                    onChange={(value) => updateRule(index, "name", value)}
+                  />
+                  {ruleClientError && (
+                    <p className="patron-blocking-rule-field-error text-danger">
+                      Rule Expression is required.
+                    </p>
+                  )}
+                  <EditableInput
+                    elementType="textarea"
+                    label="Rule Expression"
+                    name={`patron_blocking_rule_rule_${index}`}
+                    value={rule.rule}
+                    required={true}
+                    disabled={disabled}
+                    readOnly={disabled}
+                    optionalText={false}
+                    clientError={rowErrors.rule}
+                    error={error}
+                    onChange={(value) => updateRule(index, "rule", value)}
+                  />
+                  <EditableInput
+                    elementType="textarea"
+                    label="Message (optional)"
+                    name={`patron_blocking_rule_message_${index}`}
+                    value={rule.message || ""}
+                    disabled={disabled}
+                    readOnly={disabled}
+                    optionalText={false}
+                    onChange={(value) => updateRule(index, "message", value)}
+                  />
+                </div>
+              </WithRemoveButton>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+});
+
+PatronBlockingRulesEditor.displayName = "PatronBlockingRulesEditor";
+
+export default PatronBlockingRulesEditor;