configuration-management 0.1.0

package/src/system-config-crypto.js

@@ -0,0 +1,113 @@
+/*
+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
+*/
+
+// Equivalent of Magento's env.php `crypt.key`: a project-wide secret used to
+// derive an AES-256-GCM key that protects sensitive system_config values at
+// rest in App Builder DB (aio-lib-state).
+//
+// Key material is taken from action params/env (never from request payload):
+//   SYSTEM_CONFIG_CRYPT_KEY   – preferred, dedicated secret
+//   OAUTH_CLIENT_SECRET       – fallback, the workspace's client secret
+//
+// Wire format for ciphertext (string):
+//   enc:v1:<base64url(salt)>:<base64url(iv)>:<base64url(tag)>:<base64url(ct)>
+// `v1` lets us rotate the algorithm later without breaking previously stored
+// values. `salt` is per-record so the derived key changes even if the same
+// master secret is reused across records.
+
+const crypto = require('crypto')
+
+const ENC_PREFIX = 'enc:v1:'
+const KEY_BYTES = 32
+const IV_BYTES = 12
+const SALT_BYTES = 16
+const SCRYPT_PARAMS = { N: 16384, r: 8, p: 1 }
+
+function b64uEncode (buf) {
+  return Buffer.from(buf).toString('base64url')
+}
+
+function b64uDecode (str) {
+  return Buffer.from(str, 'base64url')
+}
+
+function resolveMasterSecret (params = {}) {
+  const secret =
+    params.SYSTEM_CONFIG_CRYPT_KEY ||
+    params.OAUTH_CLIENT_SECRET ||
+    process.env.SYSTEM_CONFIG_CRYPT_KEY ||
+    process.env.OAUTH_CLIENT_SECRET ||
+    ''
+  if (!secret || typeof secret !== 'string' || secret.length < 8) {
+    throw new Error(
+      'Encryption key not configured: set SYSTEM_CONFIG_CRYPT_KEY or OAUTH_CLIENT_SECRET'
+    )
+  }
+  return secret
+}
+
+function deriveKey (masterSecret, salt) {
+  return crypto.scryptSync(masterSecret, salt, KEY_BYTES, SCRYPT_PARAMS)
+}
+
+function isEncrypted (value) {
+  return typeof value === 'string' && value.startsWith(ENC_PREFIX)
+}
+
+function encrypt (plaintext, params) {
+  if (plaintext == null || plaintext === '') {
+    return plaintext
+  }
+  const text = typeof plaintext === 'string' ? plaintext : String(plaintext)
+  const secret = resolveMasterSecret(params)
+  const salt = crypto.randomBytes(SALT_BYTES)
+  const iv = crypto.randomBytes(IV_BYTES)
+  const key = deriveKey(secret, salt)
+  const cipher = crypto.createCipheriv('aes-256-gcm', key, iv)
+  const ct = Buffer.concat([cipher.update(text, 'utf8'), cipher.final()])
+  const tag = cipher.getAuthTag()
+  return [
+    ENC_PREFIX,
+    b64uEncode(salt),
+    ':',
+    b64uEncode(iv),
+    ':',
+    b64uEncode(tag),
+    ':',
+    b64uEncode(ct)
+  ].join('')
+}
+
+function decrypt (encrypted, params) {
+  if (!isEncrypted(encrypted)) {
+    return encrypted
+  }
+  const body = encrypted.slice(ENC_PREFIX.length)
+  const parts = body.split(':')
+  if (parts.length !== 4) {
+    throw new Error('Malformed encrypted value')
+  }
+  const [saltB64, ivB64, tagB64, ctB64] = parts
+  const secret = resolveMasterSecret(params)
+  const salt = b64uDecode(saltB64)
+  const iv = b64uDecode(ivB64)
+  const tag = b64uDecode(tagB64)
+  const ct = b64uDecode(ctB64)
+  const key = deriveKey(secret, salt)
+  const decipher = crypto.createDecipheriv('aes-256-gcm', key, iv)
+  decipher.setAuthTag(tag)
+  const pt = Buffer.concat([decipher.update(ct), decipher.final()])
+  return pt.toString('utf8')
+}
+
+module.exports = {
+  ENC_PREFIX,
+  isEncrypted,
+  encrypt,
+  decrypt,
+  resolveMasterSecret
+}

package/src/system-config-shared.js

@@ -0,0 +1,89 @@
+/*
+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
+*/
+
+// Mirrors Magento's core_config_data: (scope, scope_id, path, value).
+// aio-lib-state keys allow [a-zA-Z0-9_-] only, so we encode
+//   scope=`default` scopeId=0  path=`web/secure/base_url`
+// as the state key
+//   sysconfig__default__0__web__secure__base_url
+
+const STATE_KEY_PREFIX = 'sysconfig__'
+const SCOPES = ['default', 'websites', 'stores']
+const PATH_SEGMENT = /^[a-zA-Z0-9_-]+$/
+const SCOPE_ID_RE = /^[a-zA-Z0-9_-]+$/
+const SENSITIVE_PLACEHOLDER = '__SENSITIVE_UNCHANGED__'
+const USE_DEFAULT_SENTINEL = '__USE_DEFAULT__'
+
+function isValidPath (path) {
+  if (typeof path !== 'string') return false
+  const parts = path.split('/')
+  if (parts.length !== 3) return false
+  return parts.every((p) => PATH_SEGMENT.test(p))
+}
+
+function normalizeScope (scope) {
+  if (!scope) return 'default'
+  if (!SCOPES.includes(scope)) {
+    throw new Error(`Invalid scope "${scope}". Expected one of: ${SCOPES.join(', ')}`)
+  }
+  return scope
+}
+
+function normalizeScopeId (scope, scopeId) {
+  if (scope === 'default') return '0'
+  const id = String(scopeId ?? '').trim()
+  if (!id || !SCOPE_ID_RE.test(id)) {
+    throw new Error(`Invalid scopeId "${scopeId}" for scope "${scope}"`)
+  }
+  return id
+}
+
+function toStateKey (scope, scopeId, path) {
+  if (!isValidPath(path)) {
+    throw new Error(`Invalid config path: ${path}`)
+  }
+  const s = normalizeScope(scope)
+  const sid = normalizeScopeId(s, scopeId)
+  return [STATE_KEY_PREFIX, s, '__', sid, '__', path.split('/').join('__')].join('')
+}
+
+/**
+ * Magento-style fallback chain. When reading at store scope we look up:
+ *   stores:<storeId>  →  websites:<websiteId>  →  default:0
+ * `parentWebsiteId` is supplied by the caller (resolved from /rest/V1/store/storeViews).
+ */
+function buildInheritanceChain (scope, scopeId, parentWebsiteId) {
+  const s = normalizeScope(scope)
+  if (s === 'default') {
+    return [{ scope: 'default', scopeId: '0' }]
+  }
+  if (s === 'websites') {
+    return [
+      { scope: 'websites', scopeId: normalizeScopeId('websites', scopeId) },
+      { scope: 'default', scopeId: '0' }
+    ]
+  }
+  // stores
+  const chain = [{ scope: 'stores', scopeId: normalizeScopeId('stores', scopeId) }]
+  if (parentWebsiteId !== undefined && parentWebsiteId !== null && String(parentWebsiteId) !== '') {
+    chain.push({ scope: 'websites', scopeId: normalizeScopeId('websites', parentWebsiteId) })
+  }
+  chain.push({ scope: 'default', scopeId: '0' })
+  return chain
+}
+
+module.exports = {
+  STATE_KEY_PREFIX,
+  SCOPES,
+  SENSITIVE_PLACEHOLDER,
+  USE_DEFAULT_SENTINEL,
+  isValidPath,
+  normalizeScope,
+  normalizeScopeId,
+  toStateKey,
+  buildInheritanceChain
+}

package/web/src/components/App.js

@@ -0,0 +1,47 @@
+/*
+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 from 'react'
+import { Provider, lightTheme } from '@adobe/react-spectrum'
+import { ErrorBoundary } from 'react-error-boundary'
+import { Route, Routes, HashRouter } from 'react-router-dom'
+import ExtensionRegistration from './ExtensionRegistration'
+
+function App (props) {
+  props.runtime.on('configuration', ({ imsOrg, imsToken }) => {
+    console.log('configuration change', { imsOrg, imsToken })
+  })
+
+  return (
+    <ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
+      <HashRouter>
+        <Provider
+          theme={lightTheme}
+          colorScheme="light"
+          UNSAFE_className="sm-provider"
+        >
+          <Routes>
+            <Route index element={<ExtensionRegistration runtime={props.runtime} ims={props.ims} />} />
+          </Routes>
+        </Provider>
+      </HashRouter>
+    </ErrorBoundary>
+  )
+
+  function onError (e, componentStack) {}
+
+  function fallbackComponent ({ componentStack, error }) {
+    return (
+      <React.Fragment>
+        <h1 style={{ textAlign: 'center', marginTop: '20px' }}>Something went wrong :(</h1>
+        <pre>{componentStack + '\n' + error.message}</pre>
+      </React.Fragment>
+    )
+  }
+}
+
+export default App

package/web/src/components/AppSectionNav.js

@@ -0,0 +1,49 @@
+/*
+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 { useLocation, useNavigate } from 'react-router-dom'
+import Settings from '@spectrum-icons/workflow/Settings'
+
+/**
+ * Top-level navigation. Add a new sync-entity tab by appending an entry here
+ * and adding a matching render branch in MainPage.js. Styling lives in
+ * index.css under `.sm-tab*`.
+ */
+export const NAV_ITEMS = [
+  { key: '/',          label: 'System Configurations', Icon: Settings }
+]
+
+export default function AppSectionNav () {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const activeKey = NAV_ITEMS.some((it) => it.key === location.pathname) ? location.pathname : '/'
+
+  return (
+    <div className="sm-tab-bar">
+      <div className="sm-tab-bar__track" role="tablist" aria-label="Application sections">
+        {NAV_ITEMS.map(({ key, label, Icon }) => {
+          const active = key === activeKey
+          return (
+            <button
+              key={key}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              className={`sm-tab${active ? ' is-active' : ''}`}
+              onClick={() => { if (!active) navigate(key) }}
+            >
+              <span className="sm-tab__icon">
+                <Icon size="XS" />
+              </span>
+              {label}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/web/src/components/ExtensionRegistration.js

@@ -0,0 +1,33 @@
+/*
+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
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { register } from '@adobe/uix-guest'
+import { MainPage } from './MainPage'
+import { useEffect } from 'react'
+import { getExtensionId } from '../settings'
+
+export default function ExtensionRegistration(props) {
+
+  useEffect(() => {
+    (async () => {
+
+      await register({
+        id: getExtensionId(),
+        methods: {
+        }
+      })
+
+    })()
+  }, [])
+
+  return <MainPage ims={props.ims} runtime={props.runtime} />
+}

package/web/src/components/MainPage.js

@@ -0,0 +1,46 @@
+/*
+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 { View } from '@adobe/react-spectrum'
+import { attach } from '@adobe/uix-guest'
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { getExtensionId } from '../settings'
+import AppSectionNav from './AppSectionNav'
+import SystemConfig from './SystemConfig'
+
+export const MainPage = props => {
+  const location = useLocation()
+
+  useEffect(() => {
+    const fetchCredentials = async () => {
+      if (!props.ims.token) {
+        const guestConnection = await attach({ id: getExtensionId() })
+        props.ims.token = guestConnection?.sharedContext?.get('imsToken')
+        props.ims.org = guestConnection?.sharedContext?.get('imsOrgId')
+      }
+    }
+    fetchCredentials()
+  }, [])
+
+  // Add a new route branch here when a new tab is added in AppSectionNav.NAV_ITEMS.
+  const renderContent = () => {
+    switch (location.pathname) {
+      default:
+        return <SystemConfig runtime={props.runtime} ims={props.ims} />
+    }
+  }
+
+  return (
+    <View UNSAFE_style={{ overflowX: 'clip' }}>
+      <AppSectionNav />
+      <View>
+        {renderContent()}
+      </View>
+    </View>
+  )
+}