Add Global Settings tab to system configuration page (PP-4127)

Adds a new "Global Settings" tab visible to system admins in the System
Configuration section. The tab fetches GET /admin/global_settings and renders
a schema-driven form (backed by the Pydantic GlobalSettings model) pre-populated
with the current values. Submitting POSTs the updated values back.

Changes:
- GlobalSettingsData interface (interfaces.ts)
- GLOBAL_SETTINGS / EDIT_GLOBAL_SETTINGS action constants and
  fetchGlobalSettings / editGlobalSettings action methods (actions.ts)
- globalSettings reducer via createFetchEditReducer factory (reducers/)
- GlobalSettings component extending EditableConfigList with a custom
  render() that uses ProtocolFormField for schema-driven field rendering
- ConfigTabContainer wired with import, COMPONENT_CLASSES entry, and
  DISPLAY_NAMES entry (system-admin only via SYSTEM_ADMIN_TABS)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dbernstein

src/actions.ts

@@ -22,6 +22,7 @@ import {
   DiagnosticsData,
   FeatureFlags,
   SitewideAnnouncementsData,
+  GlobalSettingsData,
   StatisticsData,
   QuickSightEmbeddedURLData,
 } from "./interfaces";
@@ -75,6 +76,8 @@ export default class ActionCreator extends BaseActionCreator {
   static readonly DELETE_PATRON_AUTH_SERVICE = "DELETE_PATRON_AUTH_SERVICE";
   static readonly SITEWIDE_ANNOUNCEMENTS = "SITEWIDE_ANNOUNCEMENTS";
   static readonly EDIT_SITEWIDE_ANNOUNCEMENTS = "EDIT_SITEWIDE_ANNOUNCEMENTS";
+  static readonly GLOBAL_SETTINGS = "GLOBAL_SETTINGS";
+  static readonly EDIT_GLOBAL_SETTINGS = "EDIT_GLOBAL_SETTINGS";
   static readonly METADATA_SERVICES = "METADATA_SERVICES";
   static readonly EDIT_METADATA_SERVICE = "EDIT_METADATA_SERVICE";
   static readonly DELETE_METADATA_SERVICE = "DELETE_METADATA_SERVICE";
@@ -994,6 +997,21 @@ export default class ActionCreator extends BaseActionCreator {
     ).bind(this);
   }
 
+  fetchGlobalSettings() {
+    const url = "/admin/global_settings";
+    return this.fetchJSON<GlobalSettingsData>(
+      ActionCreator.GLOBAL_SETTINGS,
+      url
+    ).bind(this);
+  }
+
+  editGlobalSettings(data: FormData) {
+    const url = "/admin/global_settings";
+    return this.postForm(ActionCreator.EDIT_GLOBAL_SETTINGS, url, data).bind(
+      this
+    );
+  }
+
   setFeatureFlags(featureFlags: FeatureFlags) {
     return {
       type: ActionCreator.SET_FEATURE_FLAGS,

src/components/ConfigTabContainer.tsx

@@ -5,6 +5,7 @@ import Collections from "./Collections";
 import IndividualAdmins from "./IndividualAdmins";
 import PatronAuthServices from "./PatronAuthServices";
 import SitewideAnnouncements from "./SitewideAnnouncements";
+import GlobalSettings from "./GlobalSettings";
 import MetadataServices from "./MetadataServices";
 import CatalogServices from "./CatalogServices";
 import DiscoveryServices from "./DiscoveryServices";
@@ -46,6 +47,7 @@ export default class ConfigTabContainer extends TabContainer<
     catalogServices: CatalogServices,
     discovery: DiscoveryServices,
     sitewideAnnouncements: SitewideAnnouncements,
+    globalSettings: GlobalSettings,
   };
 
   LIBRARIAN_TABS = ["libraries"];
@@ -56,6 +58,7 @@ export default class ConfigTabContainer extends TabContainer<
     individualAdmins: "Admins",
     patronAuth: "Patron Authentication",
     sitewideAnnouncements: "Sitewide Announcements",
+    globalSettings: "Global Settings",
     catalogServices: "External Catalogs",
   };
 

src/components/GlobalSettings.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { Alert } from "react-bootstrap";
+import { Form } from "library-simplified-reusable-components";
+import LoadingIndicator from "@thepalaceproject/web-opds-client/lib/components/LoadingIndicator";
+import ActionCreator from "../actions";
+import { GlobalSettingsData } from "../interfaces";
+import EditableConfigList, {
+  EditableConfigListStateProps,
+  EditableConfigListDispatchProps,
+  EditableConfigListOwnProps,
+  EditableConfigListProps,
+} from "./EditableConfigList";
+import ErrorMessage from "./ErrorMessage";
+import ProtocolFormField from "./ProtocolFormField";
+
+/** Settings panel for sitewide global configuration (country, state, etc.). */
+export class GlobalSettings extends EditableConfigList<
+  GlobalSettingsData,
+  never
+> {
+  EditForm = null;
+  listDataKey = "schema";
+  itemTypeName = "global setting";
+  urlBase = "/admin/web/config/globalSettings/";
+  identifierKey = "key";
+  labelKey = "label";
+
+  render() {
+    const {
+      data,
+      fetchError,
+      formError,
+      isFetching,
+      responseBody,
+    } = this.props;
+
+    const canEdit = this.context.admin.isSystemAdmin();
+
+    return (
+      <div className="global-settings">
+        <h2>Global Settings</h2>
+        {responseBody && (
+          <Alert bsStyle="success">Global settings saved successfully.</Alert>
+        )}
+        {fetchError && <ErrorMessage error={fetchError} />}
+        {formError && <ErrorMessage error={formError} />}
+        {isFetching && <LoadingIndicator />}
+        {!isFetching && data?.schema && (
+          <Form
+            onSubmit={this.editItem}
+            className="no-border edit-form"
+            disableButton={!canEdit}
+            content={data.schema.map((setting) => (
+              <ProtocolFormField
+                key={setting.key}
+                setting={setting}
+                disabled={!canEdit}
+                value={data.settings?.[setting.key]}
+                readOnly={!canEdit}
+              />
+            ))}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    data: state.editor.globalSettings.data,
+    responseBody: state.editor.globalSettings.successMessage,
+    fetchError: state.editor.globalSettings.fetchError,
+    formError: state.editor.globalSettings.formError,
+    isFetching:
+      state.editor.globalSettings.isFetching ||
+      state.editor.globalSettings.isEditing,
+  };
+}
+
+function mapDispatchToProps(dispatch, ownProps) {
+  const actions = new ActionCreator(null, ownProps.csrfToken);
+  return {
+    fetchData: () => dispatch(actions.fetchGlobalSettings()),
+    editItem: (data: FormData) => dispatch(actions.editGlobalSettings(data)),
+  };
+}
+
+const ConnectedGlobalSettings = connect<
+  EditableConfigListStateProps<GlobalSettingsData>,
+  EditableConfigListDispatchProps<GlobalSettingsData>,
+  EditableConfigListOwnProps
+>(
+  mapStateToProps,
+  mapDispatchToProps
+)(GlobalSettings);
+
+export default ConnectedGlobalSettings;

src/interfaces.ts

@@ -531,6 +531,13 @@ export interface SitewideAnnouncementsData {
   settings: SettingData[];
 }
 
+export interface GlobalSettingsData {
+  /** Current setting values keyed by field name. */
+  settings: { [key: string]: string };
+  /** Form schema returned by the backend, one entry per configurable field. */
+  schema: SettingData[];
+}
+
 export interface AdvancedSearchQuery {
   id?: string;
   key?: string;

src/reducers/globalSettings.ts

@@ -0,0 +1,7 @@
+import { GlobalSettingsData } from "../interfaces";
+import ActionCreator from "../actions";
+import createFetchEditReducer from "./createFetchEditReducer";
+
+export default createFetchEditReducer<GlobalSettingsData>(
+  ActionCreator.GLOBAL_SETTINGS
+);

src/reducers/index.ts

@@ -10,6 +10,7 @@ import collections from "./collections";
 import individualAdmins from "./individualAdmins";
 import patronAuthServices from "./patronAuthServices";
 import sitewideAnnouncements from "./sitewideAnnouncements";
+import globalSettings from "./globalSettings";
 import metadataServices from "./metadataServices";
 import catalogServices from "./catalogServices";
 import discoveryServices from "./discoveryServices";
@@ -43,6 +44,7 @@ import {
   IndividualAdminsData,
   PatronAuthServicesData,
   SitewideAnnouncementsData,
+  GlobalSettingsData,
   MetadataServicesData,
   CatalogServicesData,
   DiscoveryServicesData,
@@ -70,6 +72,7 @@ export interface State {
   individualAdmins: FetchEditState<IndividualAdminsData>;
   patronAuthServices: FetchEditState<PatronAuthServicesData>;
   sitewideAnnouncements: FetchEditState<SitewideAnnouncementsData>;
+  globalSettings: FetchEditState<GlobalSettingsData>;
   metadataServices: FetchEditState<MetadataServicesData>;
   catalogServices: FetchEditState<CatalogServicesData>;
   discoveryServices: FetchEditState<DiscoveryServicesData>;
@@ -106,6 +109,7 @@ export default combineReducers<State>({
   individualAdmins,
   patronAuthServices,
   sitewideAnnouncements,
+  globalSettings,
   metadataServices,
   catalogServices,
   discoveryServices,