@things-factory/figure-ui 10.1.5 → 10.1.7

package/client/modeller/figure-history-panel.ts

@@ -4,9 +4,10 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
 
-import { fetchFigureVersions, releaseFigure, revertFigureVersion } from '../graphql/index.js'
-import type { FigureVersion } from '../types.js'
+import { fetchFigureVersions, inspectFigure, releaseFigure, revertFigureVersion } from '../graphql/index.js'
+import type { FigureGateFinding, FigureInspection, FigureVersion } from '../types.js'
 
 /**
  * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
@@ -29,7 +30,9 @@ import type { FigureVersion } from '../types.js'
  */
 @customElement('figure-history-panel')
 export class FigureHistoryPanel extends localize(i18next)(LitElement) {
-  static styles = css`
+  static styles = [
+    ScrollbarStyles,
+    css`
     :host {
       display: flex;
       flex-direction: column;
@@ -184,12 +187,79 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       border-color: transparent;
     }
 
+    /*
+      게이트 사유. 막는 것은 색으로도 말하고, 알리는 것은 조용히 둔다 — 둘을 같은 톤으로 두면
+      「이 중 어느 것이 발행을 막았나」를 사람이 다시 세어야 한다.
+    */
+    ul[gate] {
+      margin: var(--spacing-small, 6px) 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    li[head] {
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-error);
+    }
+
+    li[head][quiet] {
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    li[finding] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 3px;
+      padding: 3px 6px;
+      font-size: 0.72rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-surface-container);
+      border-radius: 4px;
+    }
+
+    li[finding][blocking] {
+      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-error-container);
+    }
+
+    li[finding] code[where] {
+      font-family: var(--mono-font, monospace);
+      font-size: 0.68rem;
+      opacity: 0.85;
+    }
+
+    /* 왜 나쁜지는 곁글로 — 읽어야 하지만 잰 것보다 먼저 눈에 들 필요는 없다 */
+    li[finding] span[why-line] {
+      opacity: 0.8;
+    }
+
+    /* 무엇을 바꾸면 되나 — 이 줄이 실제로 사람이 할 일이다. 연장 표를 달아 눈에 걸리게 한다 */
+    li[finding] span[how-line] {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      padding-top: 2px;
+      font-weight: 600;
+    }
+    li[finding] span[how-line] md-icon {
+      --md-icon-size: 13px;
+      flex: none;
+      margin-top: 1px;
+    }
+
     p[quiet] {
       margin: 0;
       line-height: 1.6;
       color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
     }
   `
+  ]
 
   /** 지금 열려 있는 도형. 없으면(새로 만드는 중) 발행할 것이 없다. */
   @property({ type: String }) figureId?: string
@@ -201,11 +271,39 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
   @state() private versions: FigureVersion[] = []
   @state() private busy = false
   @state() private failure = ''
+  /**
+   * 발행 판정. **저장된 정본에 대한 것**이라 저장할 때마다 다시 묻는다(`figureVersion` 이 아니라
+   * `dirty` 가 풀리는 순간이 그때다).
+   */
+  @state() private inspection?: FigureInspection
 
   updated(changes: Map<string, unknown>) {
     if (changes.has('figureId') || changes.has('figureVersion')) {
       void this.reload()
     }
+
+    /*
+      저장이 끝난 순간(dirty 가 풀림) 정본이 바뀌었으니 판정을 다시 묻는다. 저작 중(dirty)에는
+      묻지 않는다 — 서버에 있는 것은 저장 전 정본이라, 그 답은 화면에 있는 것과 다른 것을 말한다.
+    */
+    if (changes.has('figureId') || changes.has('dirty')) {
+      void this.inspect()
+    }
+  }
+
+  private async inspect() {
+    if (!this.figureId || this.dirty) {
+      this.inspection = undefined
+      return
+    }
+
+    try {
+      this.inspection = await inspectFigure(this.figureId)
+    } catch (e) {
+      /* 판정을 못 받은 것을 「통과」로 두지 않는다 — 모르는 것이다. 단추는 서버가 막는다. */
+      this.inspection = undefined
+      this.failure = (e as Error).message
+    }
   }
 
   private async reload() {
@@ -225,57 +323,105 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
   render() {
     return html`
       <section>
-        <h3>${i18next.t('label.release')}</h3>
-        ${this.figureId ? this.renderRelease() : html`<p quiet>${i18next.t('text.save-the-figure-before-releasing')}</p>`}
+        <h3>${i18next.t('figure.label.release')}</h3>
+        ${this.figureId ? this.renderRelease() : html`<p quiet>${i18next.t('figure.text.save-the-figure-before-releasing')}</p>`}
       </section>
 
       <section>
-        <h3>${i18next.t('label.released-versions')}</h3>
+        <h3>${i18next.t('figure.label.released-versions')}</h3>
         ${this.versions.length
           ? html`<ul>
               ${this.versions.map(version => this.renderVersion(version))}
             </ul>`
-          : html`<p quiet>${i18next.t('text.nothing-released-yet')}</p>`}
+          : html`<p quiet>${i18next.t('figure.text.nothing-released-yet')}</p>`}
       </section>
     `
   }
 
   private renderRelease() {
     const released = this.figureState === 'released'
-    /* 막는 이유는 하나씩 말한다. 「발행할 수 없습니다」로 뭉치면 무엇을 하면 되는지 모른다. */
+
+    /*
+      게이트가 막는 것과 알리는 것을 함께 낸다. **막는 것은 단추를 잠근다** — 눌러 보고 서버에게
+      거절당하는 것으로 알게 하지 않는다. 알리는 것은 잠그지 않고 그대로 보여 준다.
+    */
+    const blocking = (this.inspection?.findings ?? []).filter(finding => finding.blocking)
+    const advisory = (this.inspection?.findings ?? []).filter(finding => !finding.blocking)
+
+    /*
+      ── 「발행되나」에 **한 번만** 답한다 ─────────────────────────────────────
+      전에는 막는 목록의 머리가 「이것들이 발행을 막습니다」, 알리는 목록의 머리가 「발행은 되지만
+      확인해 보십시오」였다. 두 줄이 나란히 서서 화면이 「막힌다」와 「된다」를 함께 말했고, 사람이
+      「그래서 되는 건가」를 되물었다.
+
+      답은 이 한 줄이 하고, 아래 목록들은 **이유**일 뿐이다 — 그래서 목록 머리는 문장이 아니라
+      이름씨다(「고쳐야 하는 것」·「막지는 않는 것」).
+    */
     const why = this.dirty
-      ? i18next.t('text.release-needs-a-save-first')
+      ? i18next.t('figure.text.release-needs-a-save-first')
       : released
-        ? i18next.t('text.already-released-edit-to-release-again')
-        : ''
+        ? i18next.t('figure.text.already-released-edit-to-release-again')
+        : blocking.length
+          ? i18next.t('figure.text.cannot-release-now')
+          : ''
 
     return html`
       <div now>
-        <span state ?released=${released}>${i18next.t(released ? 'label.released' : 'label.draft')}</span>
-        <span ver>${i18next.t('text.version-number', { version: this.figureVersion ?? 0 })}</span>
+        <span state ?released=${released}>${i18next.t(released ? 'figure.label.figure-released' : 'figure.label.draft')}</span>
+        <span ver>${i18next.t('figure.text.version-number', { version: this.figureVersion ?? 0 })}</span>
       </div>
 
-      <input note placeholder=${i18next.t('text.what-changed-in-this-release')} ?disabled=${!!why || this.busy} />
+      <input note placeholder=${i18next.t('figure.text.what-changed-in-this-release')} ?disabled=${!!why || this.busy} />
 
       <button release ?disabled=${!!why || this.busy} @click=${() => this.release()}>
-        ${this.busy ? i18next.t('text.releasing') : i18next.t('button.release')}
+        ${this.busy ? i18next.t('figure.text.releasing') : i18next.t('figure.button.release-figure')}
       </button>
 
       ${why ? html`<p why>${why}</p>` : nothing}
+      ${blocking.length
+        ? html`<ul gate>
+            <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
+            ${blocking.map(finding => this.renderFinding(finding, true))}
+          </ul>`
+        : nothing}
+      ${advisory.length
+        ? html`<ul gate>
+            <li head quiet>${i18next.t('figure.text.does-not-block')}</li>
+            ${advisory.map(finding => this.renderFinding(finding, false))}
+          </ul>`
+        : nothing}
       ${this.failure ? html`<p failed>${this.failure}</p>` : nothing}
     `
   }
 
+  /**
+   * 사유 한 줄 — **잰 것 · 왜 · 어떻게** 셋을 함께 말한다.
+   *
+   * 잰 것만 보여 줬더니 「1 조각이 2 조각으로 갈라진다」에서 사람이 멈췄다. 왜 나쁜지도, 무엇을
+   * 바꾸면 되는지도 알 수 없었다. 그 셋은 형식(`figure-model` 의 gate)이 만들고 여기서는 자리만
+   * 준다 — 화면이 문장을 지으면 서버가 거절할 때와 다른 말을 하게 된다.
+   */
+  private renderFinding(finding: FigureGateFinding, blocking: boolean) {
+    return html`
+      <li finding ?blocking=${blocking}>
+        <span msg>${finding.message}</span>
+        ${finding.at ? html`<code where>${finding.at}</code>` : nothing}
+        ${finding.why ? html`<span why-line>${finding.why}</span>` : nothing}
+        ${finding.how ? html`<span how-line><md-icon>build</md-icon>${finding.how}</span>` : nothing}
+      </li>
+    `
+  }
+
   private renderVersion(version: FigureVersion) {
     return html`
       <li>
-        <span no>${i18next.t('text.version-number', { version: version.version })}</span>
+        <span no>${i18next.t('figure.text.version-number', { version: version.version })}</span>
         <span when>
           ${version.updatedAt ? new Date(version.updatedAt).toLocaleString() : ''}
           ${version.updater?.name ? ` · ${version.updater.name}` : ''}
         </span>
         <button revert ?disabled=${this.busy} @click=${() => this.revert(version.version)}>
-          ${i18next.t('button.revert')}
+          ${i18next.t('figure.button.revert')}
         </button>
         ${version.comment ? html`<span comment>${version.comment}</span>` : nothing}
       </li>
@@ -295,6 +441,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       /* 정본을 든 자리가 갱신한다 — 여기서 페이지 상태를 고쳐 쓰지 않는다. */
       this.dispatchEvent(new CustomEvent('figure-released', { detail: { figure }, bubbles: true, composed: true }))
       await this.reload()
+      await this.inspect()
     } catch (e) {
       this.failure = (e as Error).message
     } finally {
@@ -304,7 +451,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
 
   private async revert(version: number) {
     /* 되돌아갈 수 없는 조작은 아니지만(판본은 남는다), 지금 화면의 것이 덮인다 — 이름으로 확인한다. */
-    if (!confirm(i18next.t('text.revert-to-version-confirm', { version }))) {
+    if (!confirm(i18next.t('figure.text.revert-to-version-confirm', { version }))) {
       return
     }
 
@@ -315,6 +462,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       const result = await revertFigureVersion(this.figureId!, version)
       this.dispatchEvent(new CustomEvent('figure-reverted', { detail: result, bubbles: true, composed: true }))
       await this.reload()
+      /*
+        **되돌리면 정본이 바뀌므로 판정도 바뀐다.** 이것을 안 하면 옛 판의 사유가 새 정본 위에
+        남아 화면이 거짓말한다 — 되돌리기는 `dirty` 도 `figureVersion` 도 건드리지 않으므로
+        `updated` 의 감시로는 다시 묻지 않는다.
+      */
+      await this.inspect()
     } catch (e) {
       this.failure = (e as Error).message
     } finally {