configuration-management 0.1.0

package/web/src/hooks/useConfirm.js

@@ -0,0 +1,355 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { PALETTE, RADIUS, SHADOW } from '../theme'
+
+/**
+ * Promise-based confirmation dialog rendered as a portal modal. Does NOT
+ * depend on Spectrum's DialogContainer / DialogTrigger — those didn't fire
+ * reliably from the redesigned shell, so this implementation owns the
+ * overlay, focus, ESC handling, and resolve lifecycle directly.
+ *
+ * Returns:
+ *   - confirm(options) → Promise<boolean>
+ *   - dialog            — JSX element to render once at the page root
+ *
+ * Options:
+ *   - title          (default: "Are you sure?")
+ *   - body           (string | ReactNode)
+ *   - confirmLabel   (default: "Confirm")
+ *   - cancelLabel    (default: "Cancel")
+ *   - variant        ('confirmation' | 'destructive' | 'warning' | 'information')
+ *   - choices        (optional) array of { label, value, variant?, description? }
+ *                    When provided, the confirm/cancel buttons are replaced by
+ *                    this set. Resolves to the chosen `value` (or null when
+ *                    cancelled via overlay/Esc).
+ */
+export function useConfirm () {
+  const [state, setState] = useState(null)   // { options } | null
+  const resolverRef = useRef(null)
+
+  const confirm = useCallback((opts = {}) => {
+    return new Promise((resolve) => {
+      resolverRef.current = resolve
+      setState({ options: opts })
+    })
+  }, [])
+
+  const finish = useCallback((result) => {
+    const resolve = resolverRef.current
+    resolverRef.current = null
+    setState(null)
+    if (resolve) resolve(result)
+  }, [])
+
+  // Esc to cancel
+  useEffect(() => {
+    if (!state) return
+    const onKey = (e) => {
+      if (e.key === 'Escape') finish(state.options && state.options.choices ? null : false)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [state, finish])
+
+  // Lock body scroll while open
+  useEffect(() => {
+    if (!state) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => { document.body.style.overflow = prev }
+  }, [state])
+
+  const dialog = state
+    ? ReactDOM.createPortal(
+      <ConfirmModal
+        options={state.options}
+        onConfirm={() => finish(true)}
+        onCancel={() => finish(state.options && state.options.choices ? null : false)}
+        onChoose={(value) => finish(value)}
+      />,
+      document.body
+    )
+    : null
+
+  return { confirm, dialog }
+}
+
+const VARIANT_STYLES = {
+  destructive:  { color: PALETTE.danger,  primaryBg: PALETTE.danger,  primaryBgHover: PALETTE.dangerHover,  tint: PALETTE.dangerTint,  icon: '⚠' },
+  warning:      { color: PALETTE.warning, primaryBg: PALETTE.warning, primaryBgHover: PALETTE.warningHover, tint: PALETTE.warningTint, icon: '!' },
+  information:  { color: PALETTE.accent,  primaryBg: PALETTE.accent,  primaryBgHover: PALETTE.accentHover,  tint: PALETTE.accentTint,  icon: 'i' },
+  confirmation: { color: PALETTE.accent,  primaryBg: PALETTE.accent,  primaryBgHover: PALETTE.accentHover,  tint: PALETTE.accentTint,  icon: '?' }
+}
+
+function ConfirmModal ({ options, onConfirm, onCancel, onChoose }) {
+  const variant = options.variant || 'confirmation'
+  const styles = VARIANT_STYLES[variant] || VARIANT_STYLES.confirmation
+  const confirmRef = useRef(null)
+  const hasChoices = Array.isArray(options.choices) && options.choices.length > 0
+
+  useEffect(() => {
+    // Focus the primary action so Enter confirms.
+    if (confirmRef.current) confirmRef.current.focus()
+  }, [])
+
+  const renderBody = (body) => {
+    if (body == null) return null
+    if (typeof body !== 'string') return body
+    return body.split('\n').map((line, i) => (
+      <React.Fragment key={i}>
+        {line}
+        {i < body.split('\n').length - 1 && <br />}
+      </React.Fragment>
+    ))
+  }
+
+  // Spectrum font stack so the modal blends with the rest of the admin UI
+  // instead of falling back to the browser's serif default.
+  const SPECTRUM_FONT = "adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif"
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="confirm-title"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 100000,
+        background: PALETTE.overlay,
+        backdropFilter: 'blur(2px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 16,
+        fontFamily: SPECTRUM_FONT,
+        animation: 'sm-fade-in 120ms ease-out'
+      }}
+      onClick={(e) => { if (e.target === e.currentTarget) onCancel() }}
+    >
+<div
+        style={{
+          background: PALETTE.surface,
+          borderRadius: RADIUS.xl,
+          boxShadow: SHADOW.modal,
+          width: '100%',
+          maxWidth: 520,
+          maxHeight: 'calc(100vh - 32px)',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          animation: 'sm-pop-in 160ms cubic-bezier(0.16, 1, 0.3, 1)'
+        }}
+      >
+        <div
+          style={{
+            padding: '20px 24px 12px',
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 14
+          }}
+        >
+          <div
+            aria-hidden="true"
+            style={{
+              flex: '0 0 auto',
+              width: 36,
+              height: 36,
+              borderRadius: RADIUS.pill,
+              background: styles.tint,
+              color: styles.color,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 18,
+              fontWeight: 700,
+              lineHeight: 1,
+              fontFamily: SPECTRUM_FONT
+            }}
+          >
+            {styles.icon}
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div
+              id="confirm-title"
+              style={{
+                fontFamily: SPECTRUM_FONT,
+                fontSize: 17,
+                fontWeight: 700,
+                lineHeight: 1.3,
+                letterSpacing: '-0.005em',
+                color: PALETTE.textStrong
+              }}
+            >
+              {options.title || 'Are you sure?'}
+            </div>
+            {options.body != null && (
+              <div
+                style={{
+                  marginTop: 6,
+                  fontFamily: SPECTRUM_FONT,
+                  color: PALETTE.textSoft,
+                  fontSize: 13,
+                  lineHeight: 1.55,
+                  maxHeight: '40vh',
+                  overflowY: 'auto'
+                }}
+              >
+                {renderBody(options.body)}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {hasChoices
+          ? (
+            <div
+              style={{
+                padding: '4px 16px 16px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 8
+              }}
+            >
+              {options.choices.map((c, i) => {
+                const cStyles = VARIANT_STYLES[c.variant] || VARIANT_STYLES.confirmation
+                const isPrimary = i === 0
+                return (
+                  <button
+                    key={c.value ?? i}
+                    type="button"
+                    ref={isPrimary ? confirmRef : null}
+                    onClick={() => onChoose(c.value)}
+                    style={{
+                      textAlign: 'left',
+                      padding: '10px 14px',
+                      borderRadius: RADIUS.lg,
+                      border: isPrimary ? `1px solid ${cStyles.primaryBg}` : `1px solid ${PALETTE.borderStrong}`,
+                      background: isPrimary ? cStyles.primaryBg : PALETTE.surface,
+                      color: isPrimary ? PALETTE.textInverse : PALETTE.textStrong,
+                      fontFamily: SPECTRUM_FONT,
+                      fontSize: 14,
+                      fontWeight: 600,
+                      lineHeight: 1.35,
+                      cursor: 'pointer',
+                      transition: 'background 120ms ease, border-color 120ms ease',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 2
+                    }}
+                    onMouseOver={(e) => {
+                      e.currentTarget.style.background = isPrimary ? cStyles.primaryBgHover : PALETTE.surfaceMuted
+                      if (isPrimary) e.currentTarget.style.borderColor = cStyles.primaryBgHover
+                    }}
+                    onMouseOut={(e) => {
+                      e.currentTarget.style.background = isPrimary ? cStyles.primaryBg : PALETTE.surface
+                      if (isPrimary) e.currentTarget.style.borderColor = cStyles.primaryBg
+                    }}
+                  >
+                    <span>{c.label}</span>
+                    {c.description && (
+                      <span
+                        style={{
+                          fontSize: 12,
+                          fontWeight: 400,
+                          opacity: isPrimary ? 0.9 : 0.7
+                        }}
+                      >
+                        {c.description}
+                      </span>
+                    )}
+                  </button>
+                )
+              })}
+              <button
+                type="button"
+                onClick={onCancel}
+                style={{
+                  marginTop: 4,
+                  padding: '8px 14px',
+                  borderRadius: RADIUS.lg,
+                  border: '1px solid transparent',
+                  background: 'transparent',
+                  color: PALETTE.textMuted,
+                  fontFamily: SPECTRUM_FONT,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  lineHeight: 1.3,
+                  cursor: 'pointer'
+                }}
+                onMouseOver={(e) => { e.currentTarget.style.background = PALETTE.surfaceMuted }}
+                onMouseOut={(e) => { e.currentTarget.style.background = 'transparent' }}
+              >
+                {options.cancelLabel || 'Cancel'}
+              </button>
+            </div>
+            )
+          : (
+            <div
+              style={{
+                padding: '12px 16px',
+                background: PALETTE.surfacePanel,
+                borderTop: `1px solid ${PALETTE.border}`,
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: 10
+              }}
+            >
+              <button
+                type="button"
+                onClick={onCancel}
+                style={{
+                  padding: '8px 16px',
+                  minHeight: 36,
+                  borderRadius: RADIUS.md,
+                  border: `1px solid ${PALETTE.borderStrong}`,
+                  background: PALETTE.surface,
+                  color: PALETTE.textStrong,
+                  fontFamily: SPECTRUM_FONT,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  lineHeight: 1.3,
+                  cursor: 'pointer',
+                  transition: 'background 120ms ease'
+                }}
+                onMouseOver={(e) => { e.currentTarget.style.background = PALETTE.surfaceMuted }}
+                onMouseOut={(e) => { e.currentTarget.style.background = PALETTE.surface }}
+              >
+                {options.cancelLabel || 'Cancel'}
+              </button>
+              <button
+                type="button"
+                ref={confirmRef}
+                onClick={onConfirm}
+                style={{
+                  padding: '8px 16px',
+                  minHeight: 36,
+                  borderRadius: RADIUS.md,
+                  border: `1px solid ${styles.primaryBg}`,
+                  background: styles.primaryBg,
+                  color: PALETTE.textInverse,
+                  fontFamily: SPECTRUM_FONT,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  lineHeight: 1.3,
+                  cursor: 'pointer',
+                  transition: 'background 120ms ease'
+                }}
+                onMouseOver={(e) => { e.currentTarget.style.background = styles.primaryBgHover; e.currentTarget.style.borderColor = styles.primaryBgHover }}
+                onMouseOut={(e) => { e.currentTarget.style.background = styles.primaryBg; e.currentTarget.style.borderColor = styles.primaryBg }}
+              >
+                {options.confirmLabel || 'Confirm'}
+              </button>
+            </div>
+            )}
+      </div>
+    </div>
+  )
+}

package/web/src/hooks/useSystemConfig.js

@@ -0,0 +1,238 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { callAction } from '../utils'
+import { getActionKey } from '../settings'
+import { flattenFields, isFieldVisibleAtScope } from '../schema/systemConfigSchema'
+import { buildStoreMappingsFromCommercePayload } from '../utils/storeMappingsFromCommerceRest'
+
+const SENSITIVE_PLACEHOLDER = '__SENSITIVE_UNCHANGED__'
+const USE_DEFAULT_SENTINEL = '__USE_DEFAULT__'
+const DEFAULT_SCOPE = { scope: 'default', scopeId: '0' }
+const STORE_MAPPINGS_PATH = 'general/settings/store_mappings'
+
+/**
+ * @param {object} props
+ * @param {object} schema – the dynamic schema fetched from abdb via useSystemConfigSchema
+ */
+export function useSystemConfig (props, schema) {
+  const fields = useMemo(() => flattenFields(schema), [schema])
+  const allPaths = useMemo(() => fields.map((f) => f.path), [fields])
+  const sensitivePaths = useMemo(
+    () => fields.filter((f) => f.sensitive).map((f) => f.path),
+    [fields]
+  )
+
+  const [scopeTree, setScopeTree] = useState({ websites: [], storeGroups: [], stores: [], loading: true, error: null })
+  const [scope, setScope] = useState(DEFAULT_SCOPE)
+
+  const [serverItems, setServerItems] = useState({})
+  const [localValues, setLocalValues] = useState({})
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
+  const [savedAt, setSavedAt] = useState(null)
+
+  const parentWebsiteId = useMemo(() => {
+    if (scope.scope !== 'stores') return undefined
+    const store = scopeTree.stores.find((s) => String(s.id) === String(scope.scopeId))
+    return store?.website_id
+  }, [scope, scopeTree.stores])
+
+  const fetchScopeTree = useCallback(async () => {
+    setScopeTree((prev) => ({ ...prev, loading: true, error: null }))
+    try {
+      // commerce-rest-get appends `rest/<store>/V1/` itself, so operation
+      // must be the resource path without the rest/V1 prefix.
+      const [websitesRes, groupsRes, storesRes, configsRes] = await Promise.all([
+        callAction(props, getActionKey('commerceRestGet'), 'store/websites'),
+        callAction(props, getActionKey('commerceRestGet'), 'store/storeGroups'),
+        callAction(props, getActionKey('commerceRestGet'), 'store/storeViews'),
+        callAction(props, getActionKey('commerceRestGet'), 'store/storeConfigs').catch(() => null)
+      ])
+      const websitesRaw = websitesRes?.body || websitesRes
+      const groupsRaw = groupsRes?.body || groupsRes
+      const storesRaw = storesRes?.body || storesRes
+      const configsRaw = configsRes?.body || configsRes
+      const websites = Array.isArray(websitesRaw) ? websitesRaw.filter((w) => w.id !== 0 && w.code !== 'admin') : []
+      const storeGroups = Array.isArray(groupsRaw) ? groupsRaw.filter((g) => g.id !== 0) : []
+      const stores = Array.isArray(storesRaw) ? storesRaw.filter((s) => s.id !== 0 && s.code !== 'admin') : []
+      setScopeTree({ websites, storeGroups, stores, loading: false, error: null })
+
+      const storeMappings = buildStoreMappingsFromCommercePayload(websitesRaw, storesRaw, configsRaw)
+      if (Object.keys(storeMappings).length > 0) {
+        try {
+          await callAction(props, getActionKey('systemConfigSave'), '', {
+            values: { [STORE_MAPPINGS_PATH]: JSON.stringify(storeMappings, null, 2) },
+            sensitivePaths: [],
+            scope: 'default',
+            scopeId: '0'
+          })
+        } catch (err) {
+          console.error('Failed to persist store_mappings to ABDB after loading Commerce stores', err)
+        }
+      }
+    } catch (e) {
+      console.error('Failed to load stores from Commerce', e)
+      setScopeTree({ websites: [], storeGroups: [], stores: [], loading: false, error: e.message || 'Failed to fetch stores' })
+    }
+  }, [props])
+
+  useEffect(() => {
+    fetchScopeTree()
+  }, [fetchScopeTree])
+
+  const fetchAtScope = useCallback(async () => {
+    if (allPaths.length === 0) {
+      setServerItems({})
+      setLocalValues({})
+      setLoading(false)
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const response = await callAction(
+        props,
+        getActionKey('systemConfigList'),
+        '',
+        {
+          paths: allPaths,
+          sensitivePaths,
+          scope: scope.scope,
+          scopeId: scope.scopeId,
+          parentWebsiteId
+        }
+      )
+      const items = response?.items || response?.body?.items || {}
+      setServerItems(items)
+      setLocalValues({})
+    } catch (e) {
+      console.error('Failed to load system config', e)
+      setError(e.message || 'Failed to load system config')
+    } finally {
+      setLoading(false)
+    }
+  }, [props, allPaths, sensitivePaths, scope, parentWebsiteId])
+
+  useEffect(() => {
+    fetchAtScope()
+  }, [fetchAtScope])
+
+  const getDisplayValue = useCallback((path, fallback) => {
+    if (Object.prototype.hasOwnProperty.call(localValues, path)) {
+      return localValues[path]
+    }
+    const item = serverItems[path]
+    if (item && item.value !== undefined) return item.value
+    return fallback
+  }, [localValues, serverItems])
+
+  const getOrigin = useCallback((path) => {
+    const item = serverItems[path]
+    return item?.origin || null
+  }, [serverItems])
+
+  const isInheritedAtScope = useCallback((path) => {
+    if (scope.scope === 'default') return false
+    if (Object.prototype.hasOwnProperty.call(localValues, path)) {
+      return localValues[path] === USE_DEFAULT_SENTINEL
+    }
+    const origin = getOrigin(path)
+    if (!origin) return true
+    return !(origin.scope === scope.scope && String(origin.scopeId) === String(scope.scopeId))
+  }, [scope, localValues, getOrigin])
+
+  const setFieldValue = useCallback((path, value) => {
+    setLocalValues((prev) => ({ ...prev, [path]: value }))
+  }, [])
+
+  const setUseDefault = useCallback((path, useDefault) => {
+    setLocalValues((prev) => {
+      const next = { ...prev }
+      if (useDefault) {
+        next[path] = USE_DEFAULT_SENTINEL
+      } else {
+        const current = serverItems[path]?.value
+        next[path] = current !== undefined ? current : ''
+      }
+      return next
+    })
+  }, [serverItems])
+
+  const dirtyCount = useMemo(() => Object.keys(localValues).length, [localValues])
+
+  const save = useCallback(async () => {
+    if (dirtyCount === 0) return true
+    setSaving(true)
+    setError(null)
+    try {
+      const visibleFieldsByPath = new Map(
+        fields
+          .filter((f) => isFieldVisibleAtScope(f.field, scope.scope))
+          .map((f) => [f.path, f])
+      )
+      const payload = {}
+      for (const [path, value] of Object.entries(localValues)) {
+        if (!visibleFieldsByPath.has(path)) continue
+        payload[path] = value
+      }
+      if (Object.keys(payload).length === 0) {
+        setSaving(false)
+        return true
+      }
+      await callAction(
+        props,
+        getActionKey('systemConfigSave'),
+        '',
+        {
+          values: payload,
+          sensitivePaths,
+          scope: scope.scope,
+          scopeId: scope.scopeId
+        }
+      )
+      setSavedAt(Date.now())
+      await fetchAtScope()
+      return true
+    } catch (e) {
+      console.error('Failed to save system config', e)
+      setError(e.message || 'Failed to save system config')
+      return false
+    } finally {
+      setSaving(false)
+    }
+  }, [props, dirtyCount, localValues, sensitivePaths, scope, fields, fetchAtScope])
+
+  const reset = useCallback(() => {
+    setLocalValues({})
+  }, [])
+
+  return {
+    fields,
+    scope,
+    setScope,
+    scopeTree,
+    refreshScopeTree: fetchScopeTree,
+    getDisplayValue,
+    getOrigin,
+    isInheritedAtScope,
+    setFieldValue,
+    setUseDefault,
+    dirtyCount,
+    loading,
+    saving,
+    error,
+    savedAt,
+    save,
+    reset,
+    refresh: fetchAtScope,
+    SENSITIVE_PLACEHOLDER,
+    USE_DEFAULT_SENTINEL
+  }
+}

package/web/src/hooks/useSystemConfigSchema.js

@@ -0,0 +1,102 @@
+/*
+Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+*/
+
+import { useCallback, useEffect, useState } from 'react'
+import { callAction } from '../utils'
+import { getActionKey } from '../settings'
+import { emptySchema } from '../schema/systemConfigSchema'
+
+export function useSystemConfigSchema (props) {
+  const [schema, setSchema] = useState(emptySchema())
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
+
+  const fetchSchema = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const response = await callAction(
+        props,
+        getActionKey('systemConfigSchema'),
+        'get'
+      )
+      const fetched = response?.schema || response?.body?.schema || emptySchema()
+      setSchema(fetched)
+    } catch (e) {
+      console.error('Failed to load schema', e)
+      setError(e.message || 'Failed to load schema')
+      setSchema(emptySchema())
+    } finally {
+      setLoading(false)
+    }
+  }, [props])
+
+  useEffect(() => {
+    fetchSchema()
+  }, [fetchSchema])
+
+  /**
+   * Save a schema.
+   *
+   * If removing fields/groups/sections would orphan stored values, the action
+   * returns 409 with a `removedPaths` list. The caller can re-invoke with
+   * `confirmCascade: true` to acknowledge the cascade-delete. The hook keeps
+   * the UI in charge of asking the user.
+   */
+  const saveSchema = useCallback(async (nextSchema, { confirmCascade = false } = {}) => {
+    setSaving(true)
+    setError(null)
+    try {
+      let response
+      try {
+        response = await callAction(
+          props,
+          getActionKey('systemConfigSchema'),
+          'save',
+          { schema: nextSchema, ...(confirmCascade ? { confirmCascade: true } : {}) }
+        )
+      } catch (err) {
+        // 409 = cascade confirmation required. callAction throws on non-2xx
+        // so we have to inspect err.response (set by utils.callAction).
+        const removed = err?.response?.removedPaths || err?.response?.body?.removedPaths
+        if (err?.status === 409 && Array.isArray(removed)) {
+          return { needsConfirmation: true, removedPaths: removed }
+        }
+        throw err
+      }
+      const saved = response?.schema || response?.body?.schema
+      if (!saved) {
+        await fetchSchema()
+        setError('Schema save did not return the saved schema. See server logs.')
+        return { ok: false }
+      }
+      setSchema(saved)
+      return {
+        ok: true,
+        removedPaths: response?.removedPaths || response?.body?.removedPaths || [],
+        deletedCount: response?.deletedCount ?? response?.body?.deletedCount ?? 0
+      }
+    } catch (e) {
+      console.error('Failed to save schema', e)
+      setError(e.message || 'Failed to save schema')
+      return { ok: false }
+    } finally {
+      setSaving(false)
+    }
+  }, [props, fetchSchema])
+
+  return {
+    schema,
+    setSchema,
+    saveSchema,
+    refresh: fetchSchema,
+    loading,
+    saving,
+    error
+  }
+}