@things-factory/integration-ui 10.0.0-beta.95 → 10.0.0-beta.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/viewparts/env-var-quick-editor.ts +97 -8
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-client/viewparts/env-var-quick-editor.d.ts +15 -1
- package/dist-client/viewparts/env-var-quick-editor.js +92 -8
- package/dist-client/viewparts/env-var-quick-editor.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import '@material/web/button/filled-button.js';
|
|
2
2
|
import '@material/web/button/outlined-button.js';
|
|
3
3
|
import '@material/web/button/text-button.js';
|
|
4
|
-
import '@material/web/textfield/outlined-text-field.js';
|
|
5
4
|
import '@material/web/icon/icon.js';
|
|
6
5
|
import { LitElement } from 'lit';
|
|
7
6
|
interface Resolution {
|
|
@@ -47,6 +46,21 @@ export declare class EnvVarQuickEditor extends EnvVarQuickEditor_base {
|
|
|
47
46
|
private _renderScopePanel;
|
|
48
47
|
private get statusLabel();
|
|
49
48
|
render(): import("lit-html").TemplateResult<1>;
|
|
49
|
+
/**
|
|
50
|
+
* 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에
|
|
51
|
+
* 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서
|
|
52
|
+
* 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.
|
|
53
|
+
*
|
|
54
|
+
* EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은
|
|
55
|
+
* 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.
|
|
56
|
+
*/
|
|
57
|
+
private _renderValueInput;
|
|
58
|
+
private _editorEl;
|
|
59
|
+
private _editorChangeBound;
|
|
60
|
+
protected updated(changed: Map<string, unknown>): void;
|
|
61
|
+
private _mountEditor;
|
|
62
|
+
private _cleanupEditorListener;
|
|
63
|
+
disconnectedCallback(): void;
|
|
50
64
|
private _cancel;
|
|
51
65
|
private _save;
|
|
52
66
|
private _delete;
|
|
@@ -2,13 +2,13 @@ import { __decorate, __metadata } from "tslib";
|
|
|
2
2
|
import '@material/web/button/filled-button.js';
|
|
3
3
|
import '@material/web/button/outlined-button.js';
|
|
4
4
|
import '@material/web/button/text-button.js';
|
|
5
|
-
import '@material/web/textfield/outlined-text-field.js';
|
|
6
5
|
import '@material/web/icon/icon.js';
|
|
7
6
|
import gql from 'graphql-tag';
|
|
8
7
|
import { LitElement, css, html } from 'lit';
|
|
9
8
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
10
9
|
import { client } from '@operato/graphql';
|
|
11
10
|
import { notify } from '@operato/layout';
|
|
11
|
+
import { OxPropertyEditor } from '@operato/property-editor';
|
|
12
12
|
import { i18next, localize } from '@operato/i18n';
|
|
13
13
|
/**
|
|
14
14
|
* Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를
|
|
@@ -28,6 +28,8 @@ let EnvVarQuickEditor = class EnvVarQuickEditor extends localize(i18next)(LitEle
|
|
|
28
28
|
this.propLabel = '';
|
|
29
29
|
this.editedValue = '';
|
|
30
30
|
this.busy = false;
|
|
31
|
+
this._editorEl = null;
|
|
32
|
+
this._editorChangeBound = null;
|
|
31
33
|
}
|
|
32
34
|
static { this.styles = css `
|
|
33
35
|
:host {
|
|
@@ -229,13 +231,7 @@ let EnvVarQuickEditor = class EnvVarQuickEditor extends localize(i18next)(LitEle
|
|
|
229
231
|
|
|
230
232
|
${this._renderScopePanel(isLocal, isInherited)}
|
|
231
233
|
|
|
232
|
-
|
|
233
|
-
label=${i18next.t('field.value')}
|
|
234
|
-
type=${this.isSecret ? 'password' : 'text'}
|
|
235
|
-
.value=${this.editedValue}
|
|
236
|
-
@input=${(e) => (this.editedValue = e.target.value)}
|
|
237
|
-
?disabled=${this.busy}
|
|
238
|
-
></md-outlined-text-field>
|
|
234
|
+
${this._renderValueInput()}
|
|
239
235
|
</div>
|
|
240
236
|
|
|
241
237
|
<div class="actions">
|
|
@@ -253,6 +249,94 @@ let EnvVarQuickEditor = class EnvVarQuickEditor extends localize(i18next)(LitEle
|
|
|
253
249
|
</div>
|
|
254
250
|
`;
|
|
255
251
|
}
|
|
252
|
+
/**
|
|
253
|
+
* 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에
|
|
254
|
+
* 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서
|
|
255
|
+
* 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.
|
|
256
|
+
*
|
|
257
|
+
* EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은
|
|
258
|
+
* 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.
|
|
259
|
+
*/
|
|
260
|
+
_renderValueInput() {
|
|
261
|
+
// host 만 lit-html 로 렌더. 실제 editor element 는 updated() 에서 imperative.
|
|
262
|
+
// secret 은 OxPropertyEditor 의 password editor 가 부족할 수 있어 별도 처리.
|
|
263
|
+
if (this.isSecret) {
|
|
264
|
+
return html `
|
|
265
|
+
<input
|
|
266
|
+
part="secret-input"
|
|
267
|
+
type="password"
|
|
268
|
+
.value=${this.editedValue}
|
|
269
|
+
@input=${(e) => (this.editedValue = e.target.value)}
|
|
270
|
+
?disabled=${this.busy}
|
|
271
|
+
style="width:100%; padding:8px; box-sizing:border-box;"
|
|
272
|
+
/>
|
|
273
|
+
`;
|
|
274
|
+
}
|
|
275
|
+
return html `<div id="editor-host"></div>`;
|
|
276
|
+
}
|
|
277
|
+
updated(changed) {
|
|
278
|
+
super.updated?.(changed);
|
|
279
|
+
if (this.isSecret)
|
|
280
|
+
return;
|
|
281
|
+
if (changed.has('propSpec') || !this._editorEl) {
|
|
282
|
+
this._mountEditor();
|
|
283
|
+
}
|
|
284
|
+
else if (changed.has('editedValue') && this._editorEl) {
|
|
285
|
+
// 외부에서 editedValue 변경 시 editor 도 동기화
|
|
286
|
+
const cur = this._editorEl.value;
|
|
287
|
+
if (cur !== this.editedValue)
|
|
288
|
+
this._editorEl.value = this.editedValue;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
_mountEditor() {
|
|
292
|
+
const host = this.renderRoot.querySelector('#editor-host');
|
|
293
|
+
if (!host)
|
|
294
|
+
return;
|
|
295
|
+
host.replaceChildren();
|
|
296
|
+
this._cleanupEditorListener();
|
|
297
|
+
const spec = this.propSpec || {};
|
|
298
|
+
const type = spec.type || 'string';
|
|
299
|
+
const elementType = OxPropertyEditor.getEditor(type);
|
|
300
|
+
if (!elementType) {
|
|
301
|
+
// 등록 editor 없음 — fallback 으로 단순 text input
|
|
302
|
+
const fallback = document.createElement('input');
|
|
303
|
+
fallback.type = 'text';
|
|
304
|
+
fallback.style.cssText = 'width:100%; padding:8px; box-sizing:border-box;';
|
|
305
|
+
fallback.value = this.editedValue || '';
|
|
306
|
+
fallback.addEventListener('input', () => (this.editedValue = fallback.value));
|
|
307
|
+
host.appendChild(fallback);
|
|
308
|
+
this._editorEl = fallback;
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
311
|
+
const el = document.createElement(elementType);
|
|
312
|
+
el.label = spec.label || i18next.t('field.value');
|
|
313
|
+
el.type = type;
|
|
314
|
+
el.placeholder = spec.placeholder || '';
|
|
315
|
+
el.property = spec.property;
|
|
316
|
+
el.editor = spec.editor;
|
|
317
|
+
el.value = this.editedValue || (type === 'checkbox' ? false : '');
|
|
318
|
+
// editor 의 change event 를 받아 editedValue 동기화. EnvVar 는 문자열 저장이라
|
|
319
|
+
// value 가 boolean/number 면 String() 변환.
|
|
320
|
+
const onChange = () => {
|
|
321
|
+
const v = el.value;
|
|
322
|
+
this.editedValue = v == null ? '' : typeof v === 'string' ? v : String(v);
|
|
323
|
+
};
|
|
324
|
+
el.addEventListener('change', onChange);
|
|
325
|
+
this._editorChangeBound = onChange;
|
|
326
|
+
host.appendChild(el);
|
|
327
|
+
this._editorEl = el;
|
|
328
|
+
}
|
|
329
|
+
_cleanupEditorListener() {
|
|
330
|
+
if (this._editorEl && this._editorChangeBound) {
|
|
331
|
+
this._editorEl.removeEventListener('change', this._editorChangeBound);
|
|
332
|
+
}
|
|
333
|
+
this._editorChangeBound = null;
|
|
334
|
+
this._editorEl = null;
|
|
335
|
+
}
|
|
336
|
+
disconnectedCallback() {
|
|
337
|
+
this._cleanupEditorListener();
|
|
338
|
+
super.disconnectedCallback();
|
|
339
|
+
}
|
|
256
340
|
_cancel() {
|
|
257
341
|
this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }));
|
|
258
342
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"env-var-quick-editor.js","sourceRoot":"","sources":["../../client/viewparts/env-var-quick-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { i18next, localize } from '@operato/i18n'\n\ninterface Resolution {\n key: string\n status: 'local' | 'inherited' | 'absent'\n envVarId?: string\n sourceDomainName?: string\n value?: string\n hasValue?: boolean\n}\n\n/**\n * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를\n * 한 자리에서 확인·편집·삭제하는 인라인 편집기.\n *\n * 동작:\n * - 현 도메인에 값이 있으면 update(M) / delete\n * - 상속만 있는 경우(또는 없는 경우) \"이 도메인에 등록\" (create)\n * - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내\n *\n * 저장/삭제 성공 시 `saved` 이벤트 발생.\n */\n@customElement('env-var-quick-editor')\nexport class EnvVarQuickEditor extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n min-width: 460px;\n max-height: 80vh;\n padding: 20px 24px;\n box-sizing: border-box;\n background: var(--md-sys-color-surface, #fff);\n }\n\n h3 {\n margin: 0 0 4px;\n font-size: 16px;\n flex: 0 0 auto;\n }\n\n /* 스크롤 가능 본문 — flex column 안에서 actions 위쪽 영역만 흘러내림 */\n .body {\n flex: 1 1 auto;\n overflow: auto;\n min-height: 0;\n }\n\n .key {\n font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant);\n background: var(--md-sys-color-surface-variant);\n padding: 4px 8px;\n border-radius: 6px;\n display: inline-block;\n margin-bottom: 16px;\n word-break: break-all;\n }\n\n .status {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 14px;\n font-size: 14px;\n }\n\n .status[data-status='local'] {\n color: var(--md-sys-color-tertiary);\n }\n .status[data-status='inherited'] {\n color: var(--md-sys-color-primary);\n }\n .status[data-status='absent'] {\n color: var(--md-sys-color-error);\n }\n\n md-outlined-text-field {\n width: 100%;\n margin-bottom: 12px;\n }\n\n .actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n flex: 0 0 auto;\n padding-top: 12px;\n margin-top: 4px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);\n }\n\n .info {\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant);\n margin-bottom: 12px;\n line-height: 1.5;\n }\n\n .scope {\n font-size: 12px;\n line-height: 1.6;\n padding: 10px 12px;\n margin-bottom: 14px;\n border-radius: 8px;\n background: var(--md-sys-color-surface-container-low, #f5f5f5);\n border-left: 3px solid var(--md-sys-color-primary, #3457d5);\n }\n\n .scope .scope-title {\n font-weight: 600;\n color: var(--md-sys-color-on-surface);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .scope .scope-title md-icon {\n font-size: 14px;\n --md-icon-size: 14px;\n }\n\n .scope ul {\n margin: 4px 0 0;\n padding-left: 18px;\n color: var(--md-sys-color-on-surface-variant);\n }\n\n .scope li {\n margin-bottom: 2px;\n }\n\n .scope code {\n font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n font-size: 11px;\n background: var(--md-sys-color-surface-variant);\n padding: 1px 4px;\n border-radius: 3px;\n }\n `\n\n /** EnvVar 키 (예: `Connection::kiscon-conn::password`) */\n @property({ type: String }) key_!: string\n\n /** 속성 사양 (type/secret 여부 표시 등에 사용) */\n @property({ type: Object }) propSpec: any\n\n /** 사전 조회한 해소 상태 */\n @property({ type: Object }) resolution!: Resolution\n\n /** 표시용 라벨 (속성 이름) */\n @property({ type: String }) propLabel: string = ''\n\n @state() private editedValue: string = ''\n @state() private busy: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n this.editedValue = this.resolution?.value ?? ''\n }\n\n private get isSecret(): boolean {\n return this.propSpec?.type === 'secret' || /password|secret|token|key$/i.test(this.propLabel || '')\n }\n\n /**\n * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.\n * - absent : 처음 등록. 자손 트리 전체에 inherit.\n * - local : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).\n * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.\n */\n private _renderScopePanel(isLocal: boolean, isInherited: boolean) {\n if (isLocal) {\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>info</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 이 도메인에 이미 등록된 값이 자손 도메인 전체에 inherit 됩니다 (closest-wins).\n <ul>\n <li>여기서 값을 바꾸면 → 이 도메인 + 자손 트리 전체에 즉시 반영</li>\n <li>특정 자손에 자기 override 가 등록되어 있으면 그쪽은 자기 값 우선</li>\n <li>\"이 도메인에서 삭제\" → 부모(있다면) 값으로 fallback</li>\n </ul>\n </div>\n `\n }\n if (isInherited) {\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>inventory</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 현재 <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 에서 상속된 값을 사용 중입니다.\n <ul>\n <li>여기서 등록하면 → 이 도메인 + 그 자손에만 우선 적용 (다른 형제 도메인은 영향 없음)</li>\n <li>나머지 다른 자손들은 여전히\n <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 의 값을 그대로 사용</li>\n </ul>\n </div>\n `\n }\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>add_circle</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 이 도메인에 처음 등록합니다.\n <ul>\n <li>저장 후 → 이 도메인 + 자손 트리 전체에서 사용</li>\n <li>특정 자손이 자기 값을 별도 등록하면 그쪽은 자기 값 우선 (closest-wins)</li>\n <li>잘못된 도메인에 저장하지 않도록 — 현재 컨텍스트 도메인을 한번 확인하세요</li>\n </ul>\n </div>\n `\n }\n\n private get statusLabel(): string {\n const s = this.resolution?.status\n if (s === 'local') return `✓ ${i18next.t('text.set-on-this-domain') || '이 도메인에 등록됨'}`\n if (s === 'inherited')\n return `🔗 ${i18next.t('text.inherited-from') || '상속'} (${this.resolution.sourceDomainName || '부모 도메인'})`\n return `⚠ ${i18next.t('text.not-set') || '미설정'}`\n }\n\n render() {\n const isLocal = this.resolution?.status === 'local'\n const isInherited = this.resolution?.status === 'inherited'\n\n return html`\n <h3>${i18next.t('text.domain-attribute') || '도메인 속성'} · ${this.propLabel || this.key_}</h3>\n\n <div class=\"body\">\n <div class=\"key\">${this.key_}</div>\n\n <div class=\"status\" data-status=${this.resolution?.status || 'absent'}>${this.statusLabel}</div>\n\n ${this._renderScopePanel(isLocal, isInherited)}\n\n <md-outlined-text-field\n label=${i18next.t('field.value')}\n type=${this.isSecret ? 'password' : 'text'}\n .value=${this.editedValue}\n @input=${(e: any) => (this.editedValue = e.target.value)}\n ?disabled=${this.busy}\n ></md-outlined-text-field>\n </div>\n\n <div class=\"actions\">\n ${isLocal\n ? html`<md-text-button @click=${this._delete} ?disabled=${this.busy}>\n ${i18next.t('button.delete-from-this-domain') || '이 도메인에서 삭제'}\n </md-text-button>`\n : ''}\n <md-outlined-button @click=${this._cancel} ?disabled=${this.busy}>\n ${i18next.t('button.cancel')}\n </md-outlined-button>\n <md-filled-button @click=${this._save} ?disabled=${this.busy || !this.editedValue}>\n ${isLocal ? i18next.t('button.update') || '갱신' : i18next.t('button.set') || '등록'}\n </md-filled-button>\n </div>\n `\n }\n\n private _cancel() {\n this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }))\n }\n\n private async _save() {\n this.busy = true\n try {\n const isUpdate = this.resolution?.status === 'local' && this.resolution?.envVarId\n const patches = isUpdate\n ? [{ id: this.resolution.envVarId, cuFlag: 'M', value: this.editedValue, active: true }]\n : [\n {\n cuFlag: '+',\n name: this.key_,\n value: this.editedValue,\n active: true,\n description: this.propLabel || ''\n }\n ]\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($patches: [EnvVarPatch!]!) {\n updateMultipleEnvVars(patches: $patches) {\n name\n }\n }\n `,\n variables: { patches }\n })\n\n if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n notify({ message: i18next.t('text.saved-successfully') || '저장되었습니다' })\n this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n } catch (e: any) {\n notify({ level: 'error', message: e.message || String(e) })\n } finally {\n this.busy = false\n }\n }\n\n private async _delete() {\n if (!this.resolution?.envVarId) return\n // 도메인 환경변수 삭제는 확인 없이 즉시 처리.\n this.busy = true\n try {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteEnvVar(id: $id)\n }\n `,\n variables: { id: this.resolution.envVarId }\n })\n\n if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n notify({ message: i18next.t('text.deleted-successfully') || '삭제되었습니다' })\n this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n } catch (e: any) {\n notify({ level: 'error', message: e.message || String(e) })\n } finally {\n this.busy = false\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"env-var-quick-editor.js","sourceRoot":"","sources":["../../client/viewparts/env-var-quick-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { i18next, localize } from '@operato/i18n'\n\ninterface Resolution {\n key: string\n status: 'local' | 'inherited' | 'absent'\n envVarId?: string\n sourceDomainName?: string\n value?: string\n hasValue?: boolean\n}\n\n/**\n * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를\n * 한 자리에서 확인·편집·삭제하는 인라인 편집기.\n *\n * 동작:\n * - 현 도메인에 값이 있으면 update(M) / delete\n * - 상속만 있는 경우(또는 없는 경우) \"이 도메인에 등록\" (create)\n * - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내\n *\n * 저장/삭제 성공 시 `saved` 이벤트 발생.\n */\n@customElement('env-var-quick-editor')\nexport class EnvVarQuickEditor extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n min-width: 460px;\n max-height: 80vh;\n padding: 20px 24px;\n box-sizing: border-box;\n background: var(--md-sys-color-surface, #fff);\n }\n\n h3 {\n margin: 0 0 4px;\n font-size: 16px;\n flex: 0 0 auto;\n }\n\n /* 스크롤 가능 본문 — flex column 안에서 actions 위쪽 영역만 흘러내림 */\n .body {\n flex: 1 1 auto;\n overflow: auto;\n min-height: 0;\n }\n\n .key {\n font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant);\n background: var(--md-sys-color-surface-variant);\n padding: 4px 8px;\n border-radius: 6px;\n display: inline-block;\n margin-bottom: 16px;\n word-break: break-all;\n }\n\n .status {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 14px;\n font-size: 14px;\n }\n\n .status[data-status='local'] {\n color: var(--md-sys-color-tertiary);\n }\n .status[data-status='inherited'] {\n color: var(--md-sys-color-primary);\n }\n .status[data-status='absent'] {\n color: var(--md-sys-color-error);\n }\n\n md-outlined-text-field {\n width: 100%;\n margin-bottom: 12px;\n }\n\n .actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n flex: 0 0 auto;\n padding-top: 12px;\n margin-top: 4px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);\n }\n\n .info {\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant);\n margin-bottom: 12px;\n line-height: 1.5;\n }\n\n .scope {\n font-size: 12px;\n line-height: 1.6;\n padding: 10px 12px;\n margin-bottom: 14px;\n border-radius: 8px;\n background: var(--md-sys-color-surface-container-low, #f5f5f5);\n border-left: 3px solid var(--md-sys-color-primary, #3457d5);\n }\n\n .scope .scope-title {\n font-weight: 600;\n color: var(--md-sys-color-on-surface);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .scope .scope-title md-icon {\n font-size: 14px;\n --md-icon-size: 14px;\n }\n\n .scope ul {\n margin: 4px 0 0;\n padding-left: 18px;\n color: var(--md-sys-color-on-surface-variant);\n }\n\n .scope li {\n margin-bottom: 2px;\n }\n\n .scope code {\n font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n font-size: 11px;\n background: var(--md-sys-color-surface-variant);\n padding: 1px 4px;\n border-radius: 3px;\n }\n `\n\n /** EnvVar 키 (예: `Connection::kiscon-conn::password`) */\n @property({ type: String }) key_!: string\n\n /** 속성 사양 (type/secret 여부 표시 등에 사용) */\n @property({ type: Object }) propSpec: any\n\n /** 사전 조회한 해소 상태 */\n @property({ type: Object }) resolution!: Resolution\n\n /** 표시용 라벨 (속성 이름) */\n @property({ type: String }) propLabel: string = ''\n\n @state() private editedValue: string = ''\n @state() private busy: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n this.editedValue = this.resolution?.value ?? ''\n }\n\n private get isSecret(): boolean {\n return this.propSpec?.type === 'secret' || /password|secret|token|key$/i.test(this.propLabel || '')\n }\n\n /**\n * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.\n * - absent : 처음 등록. 자손 트리 전체에 inherit.\n * - local : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).\n * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.\n */\n private _renderScopePanel(isLocal: boolean, isInherited: boolean) {\n if (isLocal) {\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>info</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 이 도메인에 이미 등록된 값이 자손 도메인 전체에 inherit 됩니다 (closest-wins).\n <ul>\n <li>여기서 값을 바꾸면 → 이 도메인 + 자손 트리 전체에 즉시 반영</li>\n <li>특정 자손에 자기 override 가 등록되어 있으면 그쪽은 자기 값 우선</li>\n <li>\"이 도메인에서 삭제\" → 부모(있다면) 값으로 fallback</li>\n </ul>\n </div>\n `\n }\n if (isInherited) {\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>inventory</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 현재 <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 에서 상속된 값을 사용 중입니다.\n <ul>\n <li>여기서 등록하면 → 이 도메인 + 그 자손에만 우선 적용 (다른 형제 도메인은 영향 없음)</li>\n <li>나머지 다른 자손들은 여전히\n <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 의 값을 그대로 사용</li>\n </ul>\n </div>\n `\n }\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>add_circle</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 이 도메인에 처음 등록합니다.\n <ul>\n <li>저장 후 → 이 도메인 + 자손 트리 전체에서 사용</li>\n <li>특정 자손이 자기 값을 별도 등록하면 그쪽은 자기 값 우선 (closest-wins)</li>\n <li>잘못된 도메인에 저장하지 않도록 — 현재 컨텍스트 도메인을 한번 확인하세요</li>\n </ul>\n </div>\n `\n }\n\n private get statusLabel(): string {\n const s = this.resolution?.status\n if (s === 'local') return `✓ ${i18next.t('text.set-on-this-domain') || '이 도메인에 등록됨'}`\n if (s === 'inherited')\n return `🔗 ${i18next.t('text.inherited-from') || '상속'} (${this.resolution.sourceDomainName || '부모 도메인'})`\n return `⚠ ${i18next.t('text.not-set') || '미설정'}`\n }\n\n render() {\n const isLocal = this.resolution?.status === 'local'\n const isInherited = this.resolution?.status === 'inherited'\n\n return html`\n <h3>${i18next.t('text.domain-attribute') || '도메인 속성'} · ${this.propLabel || this.key_}</h3>\n\n <div class=\"body\">\n <div class=\"key\">${this.key_}</div>\n\n <div class=\"status\" data-status=${this.resolution?.status || 'absent'}>${this.statusLabel}</div>\n\n ${this._renderScopePanel(isLocal, isInherited)}\n\n ${this._renderValueInput()}\n </div>\n\n <div class=\"actions\">\n ${isLocal\n ? html`<md-text-button @click=${this._delete} ?disabled=${this.busy}>\n ${i18next.t('button.delete-from-this-domain') || '이 도메인에서 삭제'}\n </md-text-button>`\n : ''}\n <md-outlined-button @click=${this._cancel} ?disabled=${this.busy}>\n ${i18next.t('button.cancel')}\n </md-outlined-button>\n <md-filled-button @click=${this._save} ?disabled=${this.busy || !this.editedValue}>\n ${isLocal ? i18next.t('button.update') || '갱신' : i18next.t('button.set') || '등록'}\n </md-filled-button>\n </div>\n `\n }\n\n /**\n * 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에\n * 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서\n * 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.\n *\n * EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은\n * 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.\n */\n private _renderValueInput() {\n // host 만 lit-html 로 렌더. 실제 editor element 는 updated() 에서 imperative.\n // secret 은 OxPropertyEditor 의 password editor 가 부족할 수 있어 별도 처리.\n if (this.isSecret) {\n return html`\n <input\n part=\"secret-input\"\n type=\"password\"\n .value=${this.editedValue}\n @input=${(e: any) => (this.editedValue = e.target.value)}\n ?disabled=${this.busy}\n style=\"width:100%; padding:8px; box-sizing:border-box;\"\n />\n `\n }\n return html`<div id=\"editor-host\"></div>`\n }\n\n private _editorEl: HTMLElement | null = null\n private _editorChangeBound: ((e: Event) => void) | null = null\n\n protected updated(changed: Map<string, unknown>) {\n super.updated?.(changed)\n if (this.isSecret) return\n if (changed.has('propSpec') || !this._editorEl) {\n this._mountEditor()\n } else if (changed.has('editedValue') && this._editorEl) {\n // 외부에서 editedValue 변경 시 editor 도 동기화\n const cur = (this._editorEl as any).value\n if (cur !== this.editedValue) (this._editorEl as any).value = this.editedValue\n }\n }\n\n private _mountEditor() {\n const host = this.renderRoot.querySelector('#editor-host') as HTMLElement | null\n if (!host) return\n host.replaceChildren()\n this._cleanupEditorListener()\n\n const spec = this.propSpec || {}\n const type = spec.type || 'string'\n const elementType = OxPropertyEditor.getEditor(type)\n if (!elementType) {\n // 등록 editor 없음 — fallback 으로 단순 text input\n const fallback = document.createElement('input')\n fallback.type = 'text'\n fallback.style.cssText = 'width:100%; padding:8px; box-sizing:border-box;'\n fallback.value = this.editedValue || ''\n fallback.addEventListener('input', () => (this.editedValue = fallback.value))\n host.appendChild(fallback)\n this._editorEl = fallback\n return\n }\n\n const el = document.createElement(elementType) as any\n el.label = spec.label || i18next.t('field.value')\n el.type = type\n el.placeholder = spec.placeholder || ''\n el.property = spec.property\n el.editor = spec.editor\n el.value = this.editedValue || (type === 'checkbox' ? false : '')\n\n // editor 의 change event 를 받아 editedValue 동기화. EnvVar 는 문자열 저장이라\n // value 가 boolean/number 면 String() 변환.\n const onChange = () => {\n const v = el.value\n this.editedValue = v == null ? '' : typeof v === 'string' ? v : String(v)\n }\n el.addEventListener('change', onChange)\n this._editorChangeBound = onChange\n host.appendChild(el)\n this._editorEl = el\n }\n\n private _cleanupEditorListener() {\n if (this._editorEl && this._editorChangeBound) {\n this._editorEl.removeEventListener('change', this._editorChangeBound)\n }\n this._editorChangeBound = null\n this._editorEl = null\n }\n\n disconnectedCallback() {\n this._cleanupEditorListener()\n super.disconnectedCallback()\n }\n\n private _cancel() {\n this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }))\n }\n\n private async _save() {\n this.busy = true\n try {\n const isUpdate = this.resolution?.status === 'local' && this.resolution?.envVarId\n const patches = isUpdate\n ? [{ id: this.resolution.envVarId, cuFlag: 'M', value: this.editedValue, active: true }]\n : [\n {\n cuFlag: '+',\n name: this.key_,\n value: this.editedValue,\n active: true,\n description: this.propLabel || ''\n }\n ]\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($patches: [EnvVarPatch!]!) {\n updateMultipleEnvVars(patches: $patches) {\n name\n }\n }\n `,\n variables: { patches }\n })\n\n if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n notify({ message: i18next.t('text.saved-successfully') || '저장되었습니다' })\n this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n } catch (e: any) {\n notify({ level: 'error', message: e.message || String(e) })\n } finally {\n this.busy = false\n }\n }\n\n private async _delete() {\n if (!this.resolution?.envVarId) return\n // 도메인 환경변수 삭제는 확인 없이 즉시 처리.\n this.busy = true\n try {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteEnvVar(id: $id)\n }\n `,\n variables: { id: this.resolution.envVarId }\n })\n\n if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n notify({ message: i18next.t('text.deleted-successfully') || '삭제되었습니다' })\n this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n } catch (e: any) {\n notify({ level: 'error', message: e.message || String(e) })\n } finally {\n this.busy = false\n }\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@things-factory/integration-ui",
|
|
3
|
-
"version": "10.0.0-beta.
|
|
3
|
+
"version": "10.0.0-beta.97",
|
|
4
4
|
"main": "dist-server/index.js",
|
|
5
5
|
"browser": "dist-client/index.js",
|
|
6
6
|
"things-factory": true,
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"@things-factory/personalization": "^10.0.0-beta.92",
|
|
46
46
|
"d3": "^7.8.5"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "465fc49ad3f7838232f36fc0dc82db1e49bf2149"
|
|
49
49
|
}
|