Improvements to Env Store (experimental) panel (#1479)

* Tweaks for error tooltips * Optional vs required * Availablity check temp disabled * Add icon * Use latest protos
stateful · Jul 31, 2024 · e7ebb9f · e7ebb9f
1 parent fdc2b81
commit e7ebb9f
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1133,8 +1133,8 @@
     "@aws-sdk/client-ec2": "^3.621.0",
     "@aws-sdk/client-eks": "^3.621.0",
     "@aws-sdk/credential-providers": "^3.600.0",
-    "@buf/grpc_grpc.community_timostamm-protobuf-ts": "^2.9.4-20240617172854-9d87e32e5325.4",
-    "@buf/stateful_runme.community_timostamm-protobuf-ts": "^2.9.4-20240701165231-bc6fb672a119.4",
+    "@buf/grpc_grpc.community_timostamm-protobuf-ts": "^2.9.4-20240709201032-5be6b6661793.4",
+    "@buf/stateful_runme.community_timostamm-protobuf-ts": "^2.9.4-20240731204114-2df61af8e022.4",
     "@google-cloud/compute": "^4.1.0",
     "@google-cloud/container": "^5.16.0",
     "@google-cloud/run": "^1.2.0",

diff --git a/src/client/components/env/store.ts b/src/client/components/env/store.ts
@@ -1,7 +1,6 @@
 import { Disposable } from 'vscode'
-import { LitElement, html } from 'lit'
+import { LitElement, TemplateResult, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { when } from 'lit/directives/when.js'
 
 import '../table'
 import '../envViewer'
@@ -35,7 +34,7 @@ const COLUMNS = [
   },
 ]
 
-const HIDDEN_COLUMNS = ['resolvedValue', 'errors', 'status']
+const HIDDEN_COLUMNS = ['resolvedValue', 'errors', 'status', 'specClass']
 
 @customElement('env-store')
 export default class Table extends LitElement {
@@ -52,21 +51,36 @@ export default class Table extends LitElement {
     return navigator.clipboard.writeText(content)
   }
 
+  #sort() {
+    this.variables?.sort((a, b) => {
+      if (a.errors.length > 0) {
+        return -1
+      }
+      if (b.errors.length > 0) {
+        return 1
+      }
+      return 0
+    })
+  }
+
   render() {
+    this.#sort()
+
     return html` <div>
       <table-view
         .columns="${COLUMNS}"
-        .rows="${this.variables?.map((variable: SnapshotEnv) => {
+        .rows="${this.variables?.map((v: SnapshotEnv) => {
           return {
-            name: variable.name,
-            status: variable.status,
-            originalValue: variable.originalValue,
-            spec: variable.spec,
-            origin: variable.origin,
-            updatedAt: formatDate(new Date(variable.updateTime)),
-            createdAt: formatDate(new Date(variable.createTime)),
-            resolvedValue: variable.resolvedValue,
-            errors: variable.errors,
+            name: v.name,
+            status: v.status,
+            originalValue: v.originalValue,
+            spec: v.spec,
+            specClass: v.isRequired ? 'required' : 'optional',
+            origin: v.origin,
+            updatedAt: formatDate(new Date(v.updateTime)),
+            createdAt: formatDate(new Date(v.createTime)),
+            resolvedValue: v.resolvedValue,
+            errors: v.errors,
           }
         })}"
         .displayable="${(row: SnapshotEnv, field: string) => {
@@ -99,38 +113,63 @@ export default class Table extends LitElement {
               return html`<env-viewer
                 .displaySecret="${displaySecret}"
                 .value="${val}"
-                .maskedValue="${resolvedValue}"
+                .maskedValue="${this.#renderValue(row, field, () => resolvedValue)}"
                 .status="${row.status}"
                 @onCopy="${async () => {
                   return this.#copy(row.originalValue)
                 }}"
               ></env-viewer>`
             case 'createdAt':
-              return html`${row.createdAt ? formatDateWithTimeAgo(new Date(row.createdAt)) : ''}`
+              return this.#renderValue(row, field, () =>
+                row[field] ? formatDateWithTimeAgo(new Date(row[field])) : '',
+              )
             case 'updatedAt':
-              return html`${row.updatedAt ? formatDate(new Date(row.updatedAt)) : ''}`
-            case 'name':
-              return when(
-                row.errors?.length,
-                () =>
-                  html`<div class="flex">
-                    <tooltip-text
-                      .tooltipText="${html`<div class="flex">
-                        ${row.errors.map(
-                          (error) => html`<span>${CustomErrorIcon(10, 10)}${error.message}</span>`,
-                        )}
-                      </div>`}"
-                      .value="${html`${CustomErrorIcon(10, 10)}`}"
-                    ></tooltip-text>
-                    <div>${row[field]}</div>
-                  </div>`,
-                () => html`${row[field]}`,
+              return this.#renderValue(row, field, () =>
+                row[field] ? formatDate(new Date(row[field])) : '',
               )
+            case 'spec':
+              return this.#renderValue(row, field, () => {
+                return html`<span class="${row.specClass}">${row[field]}</span>`
+              })
             default:
-              return html`${row[field]}`
+              return this.#renderValue(row, field, () => row[field])
           }
         }}"
       ></table-view>
     </div>`
   }
+
+  #renderValue(
+    row: SnapshotEnv,
+    field: string,
+    format: () => TemplateResult<1> | string,
+  ): TemplateResult<1> {
+    const icon = field === 'name' ? html`${CustomErrorIcon(10, 10)}` : html``
+
+    if (row.errors?.length) {
+      return html`<div class="flex">
+        <tooltip-text
+          .tooltipText="${html`<div class="flex">
+            ${row.errors.map((error) => html`<span>${icon}${error.message}</span>`)}
+          </div>`}"
+          .value="${html`${icon} ${format()}`}"
+        ></tooltip-text>
+      </div>`
+    }
+
+    if (field === 'spec') {
+      // if (!['Opaque', 'Plain', 'Secret', 'Password'].includes(row.spec)) {
+      //   return html`${format()}
+      //     <vscode-button appearance="icon" class="cursor-pointer">${AntennaIcon}</vscode-button>`
+      // }
+      return html`<div class="flex">
+        <tooltip-text
+          .tooltipText="${html`<div class="flex">Info: Variable is ${row.specClass}</div>`}"
+          .value="${format()}"
+        ></tooltip-text>
+      </div>`
+    }
+
+    return html`${format()}`
+  }
 }
diff --git a/src/client/components/envViewer.ts b/src/client/components/envViewer.ts
@@ -1,5 +1,5 @@
 import { Disposable } from 'vscode'
-import { LitElement, css, html } from 'lit'
+import { LitElement, TemplateResult, css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 
@@ -26,7 +26,7 @@ export class EnvViewer extends LitElement implements Disposable {
   displaySecret: boolean = false
 
   @property({ type: String })
-  maskedValue?: string | undefined
+  maskedValue?: string | TemplateResult<1> | undefined
 
   @state()
   _copied: boolean = false
@@ -41,6 +41,7 @@ export class EnvViewer extends LitElement implements Disposable {
     vscode-button:hover {
       background: var(--vscode-button-hoverBackground);
     }
+
     .secret-container {
       display: flex;
       gap: 1px;

diff --git a/src/client/components/icons/antenna.ts b/src/client/components/icons/antenna.ts
@@ -0,0 +1,34 @@
+import { html } from 'lit'
+
+/* eslint-disable max-len */
+export const AntennaIcon = html`
+  <svg
+    width="16"
+    height="16"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M19,12c0,1.971-0.838,3.862-2.3,5.188c-0.287,0.261-0.647,0.39-1.008,0.39
+		c-0.408,0-0.814-0.166-1.11-0.492c-0.557-0.613-0.511-1.562,0.103-2.118C15.521,14.208,16,13.127,16,12
+		c0-1.13-0.478-2.21-1.31-2.965c-0.614-0.556-0.661-1.505-0.104-2.119c0.556-0.615,1.504-0.661,2.118-0.104
+		C18.163,8.134,19,10.025,19,12z M20.514,3.534c-0.584-0.587-1.535-0.589-2.121-0.005c-0.588,0.584-0.59,1.534-0.006,2.122
+		C20.072,7.343,21,9.598,21,12c0,2.396-0.93,4.649-2.618,6.347c-0.584,0.587-0.582,1.537,0.006,2.121
+		c0.292,0.291,0.675,0.437,1.058,0.437c0.385,0,0.771-0.147,1.063-0.442C22.76,18.199,24,15.194,24,12
+		C24,8.8,22.762,5.793,20.514,3.534z M12,10.187c-1.003,0-1.812,0.809-1.812,1.813c0,1,0.81,1.813,1.813,1.813S13.813,13,13.813,12
+		C13.813,10.996,13.003,10.187,12,10.187z M9.419,6.914C8.862,6.3,7.914,6.254,7.3,6.811C5.838,8.137,5,10.029,5,12
+		c0,1.977,0.837,3.867,2.297,5.188c0.287,0.26,0.647,0.388,1.006,0.388c0.409,0,0.816-0.166,1.113-0.493
+		c0.556-0.614,0.508-1.563-0.106-2.119C8.478,14.211,8,13.131,8,12c0-1.127,0.479-2.208,1.316-2.967
+		C9.93,8.476,9.976,7.527,9.419,6.914z M3,12c0-2.396,0.93-4.649,2.618-6.346c0.584-0.587,0.583-1.537-0.005-2.121
+		C5.027,2.948,4.077,2.951,3.492,3.538C1.24,5.8,0,8.806,0,12c0,3.199,1.238,6.206,3.486,8.466c0.293,0.295,0.678,0.442,1.063,0.442
+		c0.383,0,0.765-0.146,1.058-0.437c0.587-0.584,0.589-1.534,0.005-2.121C3.928,16.656,3,14.401,3,12z"
+      />
+    </g>
+  </svg>
+`
+
+export default {
+  AntennaIcon: AntennaIcon,
+}
diff --git a/src/client/components/tooltip.ts b/src/client/components/tooltip.ts
@@ -51,6 +51,14 @@ export class Tooltip extends LitElement {
       display: flex;
       flex-direction: column;
     }
+
+    .required {
+      font-weight: 600;
+    }
+
+    .optional {
+      font-weight: 400;
+    }
   `
 
   render() {