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

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

@@ -0,0 +1,38 @@
+import '@material/web/icon/icon.js';
+import './env-var-quick-editor.js';
+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 declare function resolveEnvVars(keys: string[]): Promise<Map<string, EnvVarResolution>>;
+/**
+ * actionInjector 팩토리.
+ *
+ * @param keyBuilder  속성 이름을 받아 EnvVar 키를 생성. 예:
+ *                    Connection 화면: `(p) => 'Connection::' + connName + '::' + p`
+ *                    Step    화면: `(p) => 'Step::' + scenarioName + '::' + stepName + '::' + p`
+ * @param resolutions 사전 조회한 해소 상태 맵 (key → resolution)
+ * @param refresh     저장·삭제 후 부모 grist 새로고침 콜백
+ */
+export declare function createEnvVarActionInjector(keyBuilder: (propName: string) => string, resolutions: Map<string, EnvVarResolution>, refresh: () => void): (propName: string, propSpec: PropertySpec) => HTMLElement | null;
+/**
+ * 한 화면(Connection 한 행, Scenario 한 step 셋) 의 진단 라벨.
+ *  - 사용 준비됨 (n/n)         : 모든 useDomainAttribute 속성이 local 또는 inherited
+ *  - 미완성 (m absent / n total): 하나라도 absent
+ */
+export declare function diagnoseReadiness(resolutions: Map<string, EnvVarResolution>, expectedKeys: string[]): {
+    ready: boolean;
+    total: number;
+    absent: number;
+    label: string;
+};

package/dist-client/viewparts/env-var-action-injector.js

@@ -0,0 +1,196 @@
+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';
+/**
+ * useDomainAttribute 속성의 EnvVar 4-상태 칩 + 인라인 편집기 팝업.
+ * Connection / Step params 화면이 공통으로 사용.
+ */
+export async function resolveEnvVars(keys) {
+    const map = new Map();
+    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) {
+    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, resolution, onClick, onCopy) {
+    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) => {
+        if (e.altKey)
+            onCopy();
+        else
+            onClick();
+    });
+    return chip;
+}
+function openEnvVarEditor(key, propName, propSpec, resolution, refresh) {
+    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, resolutions, refresh) {
+    return (propName, propSpec) => {
+        if (!propSpec.useDomainAttribute)
+            return null;
+        const key = keyBuilder(propName);
+        let currentResolution = resolutions.get(key) || { key, status: 'absent' };
+        // 안정 컨테이너 — 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' };
+                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, expectedKeys) {
+    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 };
+}
+//# sourceMappingURL=env-var-action-injector.js.map

package/dist-client/viewparts/env-var-action-injector.js.map

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

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

@@ -0,0 +1,68 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+interface Resolution {
+    key: string;
+    status: 'local' | 'inherited' | 'absent';
+    envVarId?: string;
+    sourceDomainName?: string;
+    value?: string;
+    hasValue?: boolean;
+}
+declare const EnvVarQuickEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를
+ * 한 자리에서 확인·편집·삭제하는 인라인 편집기.
+ *
+ * 동작:
+ *  - 현 도메인에 값이 있으면 update(M) / delete
+ *  - 상속만 있는 경우(또는 없는 경우) "이 도메인에 등록" (create)
+ *  - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내
+ *
+ * 저장/삭제 성공 시 `saved` 이벤트 발생.
+ */
+export declare class EnvVarQuickEditor extends EnvVarQuickEditor_base {
+    static styles: import("lit").CSSResult;
+    /** EnvVar 키 (예: `Connection::kiscon-conn::password`) */
+    key_: string;
+    /** 속성 사양 (type/secret 여부 표시 등에 사용) */
+    propSpec: any;
+    /** 사전 조회한 해소 상태 */
+    resolution: Resolution;
+    /** 표시용 라벨 (속성 이름) */
+    propLabel: string;
+    private editedValue;
+    private busy;
+    connectedCallback(): void;
+    private get isSecret();
+    /**
+     * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.
+     * - absent  : 처음 등록. 자손 트리 전체에 inherit.
+     * - local   : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).
+     * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.
+     */
+    private _renderScopePanel;
+    private get statusLabel();
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에
+     * 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서
+     * 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.
+     *
+     * EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은
+     * 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.
+     */
+    private _renderValueInput;
+    private _editorEl;
+    private _editorChangeBound;
+    protected updated(changed: Map<string, unknown>): void;
+    private _mountEditor;
+    private _cleanupEditorListener;
+    disconnectedCallback(): void;
+    private _cancel;
+    private _save;
+    private _delete;
+}
+export {};