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

package/client/viewparts/env-var-quick-editor.ts

@@ -0,0 +1,347 @@
+import '@material/web/button/filled-button.js'
+import '@material/web/button/outlined-button.js'
+import '@material/web/button/text-button.js'
+import '@material/web/textfield/outlined-text-field.js'
+import '@material/web/icon/icon.js'
+
+import gql from 'graphql-tag'
+import { LitElement, css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { client } from '@operato/graphql'
+import { notify } from '@operato/layout'
+import { i18next, localize } from '@operato/i18n'
+
+interface Resolution {
+  key: string
+  status: 'local' | 'inherited' | 'absent'
+  envVarId?: string
+  sourceDomainName?: string
+  value?: string
+  hasValue?: boolean
+}
+
+/**
+ * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를
+ * 한 자리에서 확인·편집·삭제하는 인라인 편집기.
+ *
+ * 동작:
+ *  - 현 도메인에 값이 있으면 update(M) / delete
+ *  - 상속만 있는 경우(또는 없는 경우) "이 도메인에 등록" (create)
+ *  - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내
+ *
+ * 저장/삭제 성공 시 `saved` 이벤트 발생.
+ */
+@customElement('env-var-quick-editor')
+export class EnvVarQuickEditor extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-width: 460px;
+      max-height: 80vh;
+      padding: 20px 24px;
+      box-sizing: border-box;
+      background: var(--md-sys-color-surface, #fff);
+    }
+
+    h3 {
+      margin: 0 0 4px;
+      font-size: 16px;
+      flex: 0 0 auto;
+    }
+
+    /* 스크롤 가능 본문 — flex column 안에서 actions 위쪽 영역만 흘러내림 */
+    .body {
+      flex: 1 1 auto;
+      overflow: auto;
+      min-height: 0;
+    }
+
+    .key {
+      font-family: var(--md-sys-typescale-body-medium-font-family, monospace);
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface-variant);
+      background: var(--md-sys-color-surface-variant);
+      padding: 4px 8px;
+      border-radius: 6px;
+      display: inline-block;
+      margin-bottom: 16px;
+      word-break: break-all;
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 14px;
+      font-size: 14px;
+    }
+
+    .status[data-status='local'] {
+      color: var(--md-sys-color-tertiary);
+    }
+    .status[data-status='inherited'] {
+      color: var(--md-sys-color-primary);
+    }
+    .status[data-status='absent'] {
+      color: var(--md-sys-color-error);
+    }
+
+    md-outlined-text-field {
+      width: 100%;
+      margin-bottom: 12px;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      flex: 0 0 auto;
+      padding-top: 12px;
+      margin-top: 4px;
+      border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+    }
+
+    .info {
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface-variant);
+      margin-bottom: 12px;
+      line-height: 1.5;
+    }
+
+    .scope {
+      font-size: 12px;
+      line-height: 1.6;
+      padding: 10px 12px;
+      margin-bottom: 14px;
+      border-radius: 8px;
+      background: var(--md-sys-color-surface-container-low, #f5f5f5);
+      border-left: 3px solid var(--md-sys-color-primary, #3457d5);
+    }
+
+    .scope .scope-title {
+      font-weight: 600;
+      color: var(--md-sys-color-on-surface);
+      margin-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .scope .scope-title md-icon {
+      font-size: 14px;
+      --md-icon-size: 14px;
+    }
+
+    .scope ul {
+      margin: 4px 0 0;
+      padding-left: 18px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .scope li {
+      margin-bottom: 2px;
+    }
+
+    .scope code {
+      font-family: var(--md-sys-typescale-body-medium-font-family, monospace);
+      font-size: 11px;
+      background: var(--md-sys-color-surface-variant);
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+  `
+
+  /** EnvVar 키 (예: `Connection::kiscon-conn::password`) */
+  @property({ type: String }) key_!: string
+
+  /** 속성 사양 (type/secret 여부 표시 등에 사용) */
+  @property({ type: Object }) propSpec: any
+
+  /** 사전 조회한 해소 상태 */
+  @property({ type: Object }) resolution!: Resolution
+
+  /** 표시용 라벨 (속성 이름) */
+  @property({ type: String }) propLabel: string = ''
+
+  @state() private editedValue: string = ''
+  @state() private busy: boolean = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.editedValue = this.resolution?.value ?? ''
+  }
+
+  private get isSecret(): boolean {
+    return this.propSpec?.type === 'secret' || /password|secret|token|key$/i.test(this.propLabel || '')
+  }
+
+  /**
+   * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.
+   * - absent  : 처음 등록. 자손 트리 전체에 inherit.
+   * - local   : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).
+   * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.
+   */
+  private _renderScopePanel(isLocal: boolean, isInherited: boolean) {
+    if (isLocal) {
+      return html`
+        <div class="scope">
+          <div class="scope-title">
+            <md-icon>info</md-icon>
+            저장 위치 / 영향 범위
+          </div>
+          이 도메인에 이미 등록된 값이 자손 도메인 전체에 inherit 됩니다 (closest-wins).
+          <ul>
+            <li>여기서 값을 바꾸면 → 이 도메인 + 자손 트리 전체에 즉시 반영</li>
+            <li>특정 자손에 자기 override 가 등록되어 있으면 그쪽은 자기 값 우선</li>
+            <li>"이 도메인에서 삭제" → 부모(있다면) 값으로 fallback</li>
+          </ul>
+        </div>
+      `
+    }
+    if (isInherited) {
+      return html`
+        <div class="scope">
+          <div class="scope-title">
+            <md-icon>inventory</md-icon>
+            저장 위치 / 영향 범위
+          </div>
+          현재 <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 에서 상속된 값을 사용 중입니다.
+          <ul>
+            <li>여기서 등록하면 → 이 도메인 + 그 자손에만 우선 적용 (다른 형제 도메인은 영향 없음)</li>
+            <li>나머지 다른 자손들은 여전히
+              <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 의 값을 그대로 사용</li>
+          </ul>
+        </div>
+      `
+    }
+    return html`
+      <div class="scope">
+        <div class="scope-title">
+          <md-icon>add_circle</md-icon>
+          저장 위치 / 영향 범위
+        </div>
+        이 도메인에 처음 등록합니다.
+        <ul>
+          <li>저장 후 → 이 도메인 + 자손 트리 전체에서 사용</li>
+          <li>특정 자손이 자기 값을 별도 등록하면 그쪽은 자기 값 우선 (closest-wins)</li>
+          <li>잘못된 도메인에 저장하지 않도록 — 현재 컨텍스트 도메인을 한번 확인하세요</li>
+        </ul>
+      </div>
+    `
+  }
+
+  private get statusLabel(): string {
+    const s = this.resolution?.status
+    if (s === 'local') return `✓ ${i18next.t('text.set-on-this-domain') || '이 도메인에 등록됨'}`
+    if (s === 'inherited')
+      return `🔗 ${i18next.t('text.inherited-from') || '상속'} (${this.resolution.sourceDomainName || '부모 도메인'})`
+    return `⚠ ${i18next.t('text.not-set') || '미설정'}`
+  }
+
+  render() {
+    const isLocal = this.resolution?.status === 'local'
+    const isInherited = this.resolution?.status === 'inherited'
+
+    return html`
+      <h3>${i18next.t('text.domain-attribute') || '도메인 속성'} · ${this.propLabel || this.key_}</h3>
+
+      <div class="body">
+        <div class="key">${this.key_}</div>
+
+        <div class="status" data-status=${this.resolution?.status || 'absent'}>${this.statusLabel}</div>
+
+        ${this._renderScopePanel(isLocal, isInherited)}
+
+        <md-outlined-text-field
+          label=${i18next.t('field.value')}
+          type=${this.isSecret ? 'password' : 'text'}
+          .value=${this.editedValue}
+          @input=${(e: any) => (this.editedValue = e.target.value)}
+          ?disabled=${this.busy}
+        ></md-outlined-text-field>
+      </div>
+
+      <div class="actions">
+        ${isLocal
+          ? html`<md-text-button @click=${this._delete} ?disabled=${this.busy}>
+              ${i18next.t('button.delete-from-this-domain') || '이 도메인에서 삭제'}
+            </md-text-button>`
+          : ''}
+        <md-outlined-button @click=${this._cancel} ?disabled=${this.busy}>
+          ${i18next.t('button.cancel')}
+        </md-outlined-button>
+        <md-filled-button @click=${this._save} ?disabled=${this.busy || !this.editedValue}>
+          ${isLocal ? i18next.t('button.update') || '갱신' : i18next.t('button.set') || '등록'}
+        </md-filled-button>
+      </div>
+    `
+  }
+
+  private _cancel() {
+    this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }))
+  }
+
+  private async _save() {
+    this.busy = true
+    try {
+      const isUpdate = this.resolution?.status === 'local' && this.resolution?.envVarId
+      const patches = isUpdate
+        ? [{ id: this.resolution.envVarId, cuFlag: 'M', value: this.editedValue, active: true }]
+        : [
+            {
+              cuFlag: '+',
+              name: this.key_,
+              value: this.editedValue,
+              active: true,
+              description: this.propLabel || ''
+            }
+          ]
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($patches: [EnvVarPatch!]!) {
+            updateMultipleEnvVars(patches: $patches) {
+              name
+            }
+          }
+        `,
+        variables: { patches }
+      })
+
+      if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\n'))
+
+      notify({ message: i18next.t('text.saved-successfully') || '저장되었습니다' })
+      this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))
+    } catch (e: any) {
+      notify({ level: 'error', message: e.message || String(e) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private async _delete() {
+    if (!this.resolution?.envVarId) return
+    // 도메인 환경변수 삭제는 확인 없이 즉시 처리.
+    this.busy = true
+    try {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!) {
+            deleteEnvVar(id: $id)
+          }
+        `,
+        variables: { id: this.resolution.envVarId }
+      })
+
+      if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\n'))
+
+      notify({ message: i18next.t('text.deleted-successfully') || '삭제되었습니다' })
+      this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))
+    } catch (e: any) {
+      notify({ level: 'error', message: e.message || String(e) })
+    } finally {
+      this.busy = false
+    }
+  }
+}

package/dist-client/pages/connection.d.ts

@@ -45,8 +45,14 @@ export declare class Connection extends Connection_base {
     pageInitialized(): Promise<void>;
     fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
         total: any;
-        records: any;
+        records: any[];
     }>;
+    /**
+     * 한 페이지 분 connections 에 대해 useDomainAttribute params 키를 모두 모아 단일
+     * envVarResolutions 호출로 해소한다. 그 후 각 connection 의 키 부분집합에 대해
+     * diagnoseReadiness 로 _readiness 를 주입.
+     */
+    _annotateReadiness(items: any[]): Promise<any[]>;
     fetchConnectors(): Promise<void>;
     _deleteConnections(name: any): Promise<void>;
     _updateConnectionManager(): Promise<void>;

package/dist-client/pages/connection.js

@@ -13,44 +13,7 @@ import { PageView } from '@operato/shell';
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { p13n } from '@operato/p13n';
-async function copyToClipboard(text) {
-    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) {
-    return (propName, propSpec) => {
-        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;
-    };
-}
+import { createEnvVarActionInjector, diagnoseReadiness, resolveEnvVars } from '../viewparts/env-var-action-injector.js';
 let Connection = class Connection extends p13n(localize(i18next)(PageView)) {
     constructor() {
         super(...arguments);
@@ -196,6 +159,27 @@ let Connection = class Connection extends p13n(localize(i18next)(PageView)) {
                     },
                     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',
                     label: true,
@@ -224,18 +208,46 @@ let Connection = class Connection extends p13n(localize(i18next)(PageView)) {
                     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] : {};
+                            // 동시에 운영자가 데이터 측 문제를 인지할 수 있도록 콘솔 경고를 남김.
+                            let connectorEntry = 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 || {};
                             const context = this.grist;
+                            // useDomainAttribute params 의 EnvVar 해소 상태 사전 조회
+                            const domainAttrParams = (Array.isArray(spec) ? spec : []).filter((p) => p?.useDomainAttribute && p?.name);
+                            const keys = domainAttrParams.map((p) => `Connection::${record.name}::${p.name}`);
+                            const resolutions = await resolveEnvVars(keys);
                             return { name,
                                 help,
                                 spec,
                                 context,
                                 objectified: true,
-                                actionInjector: createActionInjector(record.name)
+                                actionInjector: createEnvVarActionInjector((propName) => `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, _c, r) => {
+                            const d = r?._readiness;
+                            if (!d)
+                                return '';
+                            return d.label;
+                        }
+                    },
+                    width: 180
+                },
                 { type: 'resource-object',
                     name: 'edge',
                     header: i18next.t('field.edge-server'),
@@ -287,6 +299,7 @@ let Connection = class Connection extends p13n(localize(i18next)(PageView)) {
               endpoint
               active
               onDemand
+              inheritanceMode
               state
               params
               updater {                 id
@@ -304,10 +317,40 @@ let Connection = class Connection extends p13n(localize(i18next)(PageView)) {
                 sortings
             }
         });
+        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) {
+        if (!items || items.length === 0)
+            return items;
+        if (!this.connectors) { // connectors 로딩 전 호출되었으면 일단 그대로
+            return items;
+        }
+        const perConn = [];
+        const allKeys = [];
+        for (const conn of items) {
+            const connector = this.connectors[conn.type];
+            const spec = Array.isArray(connector?.parameterSpec) ? connector.parameterSpec : [];
+            const keys = spec
+                .filter((p) => p?.useDomainAttribute && p?.name)
+                .map((p) => `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 `
         query {           connectors {             items {               name
@@ -330,6 +373,10 @@ let Connection = class Connection extends p13n(localize(i18next)(PageView)) {
                 connectors[connector.name] = connector;
                 return connectors;
             }, {});
+            // connectors 가 준비된 시점에 readiness 가 비어있다면 한 번 더 fetch
+            if (this.grist?.dirtyData?.records?.some?.((r) => !r._readiness)) {
+                this.grist.fetch();
+            }
         }
         else {
             console.error('fetch connectors error');