@things-factory/integration-ui 10.0.0-beta.92 → 10.0.0-beta.96

package/client/pages/connection.ts

@@ -14,47 +14,12 @@ import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato
 import { isMobileDevice } from '@operato/utils'
 import { FetchOption } from '@operato/data-grist'
 import { p13n } from '@operato/p13n'
-import { PropertySpec } from '../types.js'
+import {
+  createEnvVarActionInjector,
+  diagnoseReadiness,
+  resolveEnvVars
+} from '../viewparts/env-var-action-injector.js'
 
-async function copyToClipboard(text: string): Promise<void> {   try {     await navigator.clipboard.writeText(text)
- } catch (err) {     // fallback: old way
-    const textArea = document.createElement('textarea')
-    textArea.value = text
-    document.body.appendChild(textArea)
-    textArea.select()
-    document.execCommand('copy')
-    document.body.removeChild(textArea)
- }
-}
-
-function createActionInjector(
-  connectionName: string
-): (propName: string, propSpec: PropertySpec) => HTMLElement | null {   return (propName: string, propSpec: PropertySpec): HTMLElement | null => {     if (!propSpec.useDomainAttribute) {       return null
- }
-
-    const attributeName = `Connection::${connectionName}::${propName}`
-
-    const copyIcon = document.createElement('md-icon')
-    copyIcon.textContent = 'dictionary'
-    copyIcon.style.cssText =
-      'cursor: pointer; color: var(--md-sys-color-primary); font-size: 16px; --md-icon-size: 16px;'
-    copyIcon.title = `Copy ${attributeName}`
-
-    copyIcon.addEventListener('click', () => {       copyToClipboard(attributeName)
-
-      // 복사 성공 피드백
-      const originalText = copyIcon.textContent
-      copyIcon.textContent = 'check'
-      copyIcon.style.color = 'var(--md-sys-color-tertiary)'
-
-      setTimeout(() => {         copyIcon.textContent = originalText
-        copyIcon.style.color = 'var(--md-sys-color-primary)'
- }, 1000)
- })
-
-    return copyIcon
- }
-}
 
 @customElement('connection-page')
 export class Connection extends p13n(localize(i18next)(PageView)) {   static styles = [
@@ -197,6 +162,27 @@ export class Connection extends p13n(localize(i18next)(PageView)) {   static sty
           record: {             editable: true
  },
           width: 120
+ },
+        {
+          type: 'select',
+          name: 'inheritanceMode',
+          label: true,
+          header: i18next.t('field.inheritance-mode') || '상속 모드',
+          record: {
+            editable: true,
+            // GraphQL enum 이름 (대문자) 을 value 로 사용 — type-graphql registerEnumType 이
+            // 노출하는 형식과 일치해야 함. 서버 내부 runtime 값('isolate'/'share') 으로의
+            // 변환은 GraphQL 레이어가 자동.
+            options: [
+              { display: '(connector 기본)', value: null },
+              { display: 'ISOLATE — 자식별 격리 인스턴스 (기본·안전)', value: 'ISOLATE' },
+              { display: 'SHARE — 자식이 부모 인스턴스 공유', value: 'SHARE' }
+            ]
+          },
+          // SHARE 의 의미는 select 옵션 라벨에 명시 ("자식이 부모 인스턴스 공유").
+          // 운영자가 의식적으로 선택. native confirm() 차단 다이얼로그 제거 — 잘못 선택해도
+          // 즉시 ISOLATE / (connector 기본) 으로 되돌릴 수 있음.
+          width: 200
  },
         {           type: 'connector',
           name: 'type',
@@ -225,20 +211,53 @@ export class Connection extends p13n(localize(i18next)(PageView)) {   static sty
           name: 'params',
           header: i18next.t('field.params'),
           record: {             editable: true,
-            options: async (value, column, record, row, field) => {               const { name, help, parameterSpec: spec } = record.type ? this.connectors?.[record.type] : ({} as any)
+            options: async (value, column, record, row, field) => {               // 등록된 connector 가 아닌 type 을 가진 Connection 에서 디스트럭처 죽음을 막고,
+              // 동시에 운영자가 데이터 측 문제를 인지할 수 있도록 콘솔 경고를 남김.
+              let connectorEntry: any = null
+              if (record.type) {                 connectorEntry = this.connectors?.[record.type] || null
+                if (!connectorEntry && this.connectors) {                   console.warn(
+                    `[connection] connector type '${record.type}' (connection '${record.name}') is not registered. ` +
+                      `Server-side package missing or not bootstrapped.`
+                  )
+ }
+ }
+              const { name, help, parameterSpec: spec } = connectorEntry || ({} as any)
               const context = this.grist
 
+              // useDomainAttribute params 의 EnvVar 해소 상태 사전 조회
+              const domainAttrParams = (Array.isArray(spec) ? spec : []).filter((p: any) => p?.useDomainAttribute && p?.name)
+              const keys = domainAttrParams.map((p: any) => `Connection::${record.name}::${p.name}`)
+              const resolutions = await resolveEnvVars(keys)
+
               return {                 name,
                 help,
                 spec,
                 context,
                 objectified: true,
-                actionInjector: createActionInjector(record.name)
+                actionInjector: createEnvVarActionInjector(
+                  (propName: string) => `Connection::${record.name}::${propName}`,
+                  resolutions,
+                  () => this.grist.fetch()
+                )
  }
  },
             renderer: 'json5'
  },
           width: 100
+ },
+        {
+          type: 'string',
+          name: '_readiness',
+          header: i18next.t('field.domain-attribute-readiness') || '준비 상태',
+          record: {
+            editable: false,
+            renderer: (_v: any, _c: any, r: any) => {
+              const d = r?._readiness
+              if (!d) return ''
+              return d.label
+            }
+          },
+          width: 180
  },
         {           type: 'resource-object',
           name: 'edge',
@@ -292,6 +311,7 @@ export class Connection extends p13n(localize(i18next)(PageView)) {   static sty
               endpoint
               active
               onDemand
+              inheritanceMode
               state
               params
               updater {                 id
@@ -310,9 +330,43 @@ export class Connection extends p13n(localize(i18next)(PageView)) {   static sty
  }
  })
 
+    const items = response.data.responses.items || []
+    const records = await this._annotateReadiness(items)
+
     return {       total: response.data.responses.total || 0,
-      records: response.data.responses.items || []
+      records
+ }
+ }
+
+  /**
+   * 한 페이지 분 connections 에 대해 useDomainAttribute params 키를 모두 모아 단일
+   * envVarResolutions 호출로 해소한다. 그 후 각 connection 의 키 부분집합에 대해
+   * diagnoseReadiness 로 _readiness 를 주입.
+   */
+  async _annotateReadiness(items: any[]): Promise<any[]> {     if (!items || items.length === 0) return items
+    if (!this.connectors) {       // connectors 로딩 전 호출되었으면 일단 그대로
+      return items
+ }
+
+    type ConnKeys = { conn: any; keys: string[] }
+    const perConn: ConnKeys[] = []
+    const allKeys: string[] = []
+
+    for (const conn of items) {       const connector = this.connectors[conn.type]
+      const spec = Array.isArray(connector?.parameterSpec) ? connector.parameterSpec : []
+      const keys = spec
+        .filter((p: any) => p?.useDomainAttribute && p?.name)
+        .map((p: any) => `Connection::${conn.name}::${p.name}`)
+      perConn.push({ conn, keys })
+      allKeys.push(...keys)
  }
+
+    const uniqueKeys = Array.from(new Set(allKeys))
+    const resolutions = await resolveEnvVars(uniqueKeys)
+
+    return perConn.map(({ conn, keys }) => ({       ...conn,
+      _readiness: diagnoseReadiness(resolutions, keys)
+ }))
  }
 
   async fetchConnectors() {     const response = await client.query({       query: gql`
@@ -335,6 +389,10 @@ export class Connection extends p13n(localize(i18next)(PageView)) {   static sty
     if (!response.errors) {       this.connectors = response.data.connectors.items.reduce((connectors, connector) => {         connectors[connector.name] = connector
         return connectors
  }, {})
+
+      // connectors 가 준비된 시점에 readiness 가 비어있다면 한 번 더 fetch
+      if (this.grist?.dirtyData?.records?.some?.((r: any) => !r._readiness)) {         this.grist.fetch()
+ }
  } else {       console.error('fetch connectors error')
  }
  }

package/client/pages/scenario-detail.ts

@@ -13,6 +13,8 @@ import { isMobileDevice } from '@operato/utils'
 import { CommonHeaderStyles } from '@operato/styles'
 import { FetchOption } from '@operato/data-grist'
 
+import { createEnvVarActionInjector, resolveEnvVars } from '../viewparts/env-var-action-injector.js'
+
 const SelectFields = ['name', 'description', 'sequence', 'task', 'connection', 'params', 'result', 'skip', 'log']
 
 @customElement('scenario-detail')
@@ -176,10 +178,46 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
           header: i18next.t('field.params'),
           record: {
             editable: true,
-            options: (value, column, record, row, field) => {
-              var { name, parameterSpec: spec, help } = record.task ? this.taskTypes?.[record.task] : ({} as any)
+            options: async (value, column, record, row, field) => {
+              // 등록된 task type 이 아닌 step.task 디스트럭처 보호 + 진단 경고
+              let taskEntry: any = null
+              if (record.task) {
+                taskEntry = this.taskTypes?.[record.task] || null
+                if (!taskEntry && this.taskTypes) {
+                  console.warn(
+                    `[scenario-detail] task type '${record.task}' (step '${record.name}') is not registered. ` +
+                      `Server-side handler missing or not bootstrapped.`
+                  )
+                }
+              }
+              var { name, parameterSpec: spec, help } = taskEntry || ({} as any)
               const context = this.grist
-              return { name, spec, help, context, objectified: true }
+
+              const scenarioName = this.scenario?.name
+              const stepName = record?.name
+              const domainAttrParams = (Array.isArray(spec) ? spec : []).filter(
+                (p: any) => p?.useDomainAttribute && p?.name
+              )
+              const keys = scenarioName && stepName
+                ? domainAttrParams.map((p: any) => `Step::${scenarioName}::${stepName}::${p.name}`)
+                : []
+              const resolutions = await resolveEnvVars(keys)
+
+              return {
+                name,
+                spec,
+                help,
+                context,
+                objectified: true,
+                actionInjector:
+                  scenarioName && stepName
+                    ? createEnvVarActionInjector(
+                        (propName: string) => `Step::${scenarioName}::${stepName}::${propName}`,
+                        resolutions,
+                        () => this.grist.fetch()
+                      )
+                    : undefined
+              }
             },
             renderer: 'json5'
           },

package/client/pages/scenario.ts

@@ -334,6 +334,7 @@ export class Scenario extends p13n(localize(i18next)(PageView)) {   static get s
                 placeholder
                 property
                 styles
+                useDomainAttribute
  }
  }
  }

package/client/viewparts/env-var-action-injector.ts

@@ -0,0 +1,239 @@
+import '@material/web/icon/icon.js'
+import './env-var-quick-editor.js'
+
+import gql from 'graphql-tag'
+import { html } from 'lit'
+import { client } from '@operato/graphql'
+import { notify, openPopup } from '@operato/layout'
+import { i18next } from '@operato/i18n'
+import { PropertySpec } from '../types.js'
+
+export interface EnvVarResolution {
+  key: string
+  status: 'local' | 'inherited' | 'absent'
+  envVarId?: string
+  sourceDomainId?: string
+  sourceDomainName?: string
+  value?: string
+  hasValue?: boolean
+}
+
+/**
+ * useDomainAttribute 속성의 EnvVar 4-상태 칩 + 인라인 편집기 팝업.
+ * Connection / Step params 화면이 공통으로 사용.
+ */
+export async function resolveEnvVars(keys: string[]): Promise<Map<string, EnvVarResolution>> {
+  const map = new Map<string, EnvVarResolution>()
+  if (!keys || keys.length === 0) return map
+
+  try {
+    const response = await client.query({
+      query: gql`
+        query ($keys: [String!]!) {
+          envVarResolutions(keys: $keys) {
+            key
+            status
+            envVarId
+            sourceDomainId
+            sourceDomainName
+            value
+            hasValue
+          }
+        }
+      `,
+      variables: { keys },
+      fetchPolicy: 'network-only'
+    })
+    for (const r of response.data?.envVarResolutions || []) {
+      map.set(r.key, r)
+    }
+  } catch (e) {
+    console.warn('envVarResolutions failed; falling back to absent', e)
+  }
+  return map
+}
+
+async function copyToClipboard(text: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textArea)
+  }
+}
+
+function buildStatusChip(
+  key: string,
+  resolution: EnvVarResolution | undefined,
+  onClick: () => void,
+  onCopy: () => void
+): HTMLElement {
+  const chip = document.createElement('span')
+  chip.style.cssText = [
+    'display:inline-flex',
+    'align-items:center',
+    'gap:4px',
+    'padding:2px 8px',
+    'font-size:11px',
+    'line-height:1.4',
+    'border-radius:10px',
+    'cursor:pointer',
+    'user-select:none',
+    'border:1px solid'
+  ].join(';')
+
+  const status = resolution?.status || 'absent'
+  let icon = 'help'
+  let label = '미설정'
+  let fg = ''
+  let bg = ''
+
+  if (status === 'local') {
+    icon = 'check_circle'
+    label = '이 도메인'
+    fg = 'var(--md-sys-color-on-tertiary-container)'
+    bg = 'var(--md-sys-color-tertiary-container)'
+  } else if (status === 'inherited') {
+    icon = 'inventory'
+    label = `상속${resolution!.sourceDomainName ? ' · ' + resolution!.sourceDomainName : ''}`
+    fg = 'var(--md-sys-color-on-primary-container)'
+    bg = 'var(--md-sys-color-primary-container)'
+  } else {
+    icon = 'warning'
+    label = '미설정'
+    fg = 'var(--md-sys-color-on-error-container)'
+    bg = 'var(--md-sys-color-error-container)'
+  }
+
+  chip.style.color = fg
+  chip.style.background = bg
+  chip.style.borderColor = fg
+  chip.title = `${key} — 클릭: 편집, ⌥ 클릭: 키 복사`
+
+  const iconEl = document.createElement('md-icon')
+  iconEl.textContent = icon
+  iconEl.style.cssText = `font-size:13px; --md-icon-size:13px; color:${fg};`
+  chip.appendChild(iconEl)
+
+  const text = document.createElement('span')
+  text.textContent = label
+  chip.appendChild(text)
+
+  chip.addEventListener('click', (e: MouseEvent) => {
+    if (e.altKey) onCopy()
+    else onClick()
+  })
+
+  return chip
+}
+
+function openEnvVarEditor(
+  key: string,
+  propName: string,
+  propSpec: PropertySpec,
+  resolution: EnvVarResolution,
+  refresh: () => void
+): void {
+  const propLabel = (propSpec.label && i18next.t('label.' + propSpec.label)) || propName
+
+  const popup = openPopup(
+    html`
+      <env-var-quick-editor
+        .key_=${key}
+        .propSpec=${propSpec}
+        .resolution=${resolution}
+        .propLabel=${propLabel}
+        @saved=${() => {
+          popup.close?.()
+          refresh()
+        }}
+        @cancel=${() => popup.close?.()}
+      ></env-var-quick-editor>
+    `,
+    {
+      backdrop: true,
+      size: 'small',
+      title: `${propLabel} — ${key}`
+    }
+  )
+}
+
+/**
+ * actionInjector 팩토리.
+ *
+ * @param keyBuilder  속성 이름을 받아 EnvVar 키를 생성. 예:
+ *                    Connection 화면: `(p) => 'Connection::' + connName + '::' + p`
+ *                    Step    화면: `(p) => 'Step::' + scenarioName + '::' + stepName + '::' + p`
+ * @param resolutions 사전 조회한 해소 상태 맵 (key → resolution)
+ * @param refresh     저장·삭제 후 부모 grist 새로고침 콜백
+ */
+export function createEnvVarActionInjector(
+  keyBuilder: (propName: string) => string,
+  resolutions: Map<string, EnvVarResolution>,
+  refresh: () => void
+): (propName: string, propSpec: PropertySpec) => HTMLElement | null {
+  return (propName, propSpec) => {
+    if (!propSpec.useDomainAttribute) return null
+    const key = keyBuilder(propName)
+    let currentResolution = resolutions.get(key) || { key, status: 'absent' as const }
+
+    // 안정 컨테이너 — DOM 상의 위치/참조는 유지하고 내부 chip 만 교체.
+    // chip 직접 replaceWith 시 shadow DOM 경계나 grist 재렌더에 의해
+    // 칩이 사라지는 케이스가 있어 컨테이너로 한 단계 감쌈.
+    const host = document.createElement('span')
+    host.style.cssText = 'display:inline-flex; align-items:center;'
+
+    const openCopy = () => copyToClipboard(key).then(() => notify({ message: `복사됨: ${key}` }))
+
+    const renderChip = () => {
+      const chip = buildStatusChip(key, currentResolution, openEdit, openCopy)
+      host.replaceChildren(chip)
+    }
+
+    // 저장·삭제 후 자기 chip 만 즉시 갱신. 부모 grist 의 fetch 는 호출하지 않는다 —
+    // grist.fetch() 가 parameters 편집기(popover) 자체를 닫아 칩들이 통째로 사라지는
+    // 사고를 막기 위함. 다음 cell edit 저장 시점에 자연스럽게 grid 가 새로고침됨.
+    const onSaved = async () => {
+      try {
+        const updated = await resolveEnvVars([key])
+        currentResolution = updated.get(key) || { key, status: 'absent' as const }
+        renderChip()
+      } catch (e) {
+        console.warn('chip 갱신 실패', e)
+      }
+    }
+
+    const openEdit = () => openEnvVarEditor(key, propName, propSpec, currentResolution, onSaved)
+
+    renderChip()
+    return host
+  }
+}
+
+/**
+ * 한 화면(Connection 한 행, Scenario 한 step 셋) 의 진단 라벨.
+ *  - 사용 준비됨 (n/n)         : 모든 useDomainAttribute 속성이 local 또는 inherited
+ *  - 미완성 (m absent / n total): 하나라도 absent
+ */
+export function diagnoseReadiness(
+  resolutions: Map<string, EnvVarResolution>,
+  expectedKeys: string[]
+): { ready: boolean; total: number; absent: number; label: string } {
+  const total = expectedKeys.length
+  let absent = 0
+  for (const k of expectedKeys) {
+    const r = resolutions.get(k)
+    if (!r || r.status === 'absent') absent++
+  }
+  const ready = absent === 0 && total > 0
+  const label = total === 0
+    ? '도메인 속성 없음'
+    : ready
+      ? `사용 준비됨 (${total}/${total})`
+      : `미완성 — ${absent} 미설정 / ${total}`
+  return { ready, total, absent, label }
+}