dmno dev local UI (#147)

* local dmno dev UI

* dmno dev ui!

* wrapping up local dev ui MVP

* use bin placeholder workaround to make dmno usable for dev-ui

* finishing cleanup

.changeset/brown-pillows-guess.md

@@ -0,0 +1,11 @@
+---
+"@dmno/encrypted-vault-plugin": patch
+"@dmno/astro-integration": patch
+"@dmno/remix-integration": patch
+"@dmno/vite-integration": patch
+"@dmno/1password-plugin": patch
+"@dmno/configraph": patch
+"dmno": patch
+---
+
+local dmno dev ui, and related refactoring

.changeset/little-apricots-leave.md

@@ -0,0 +1,5 @@
+---
+"dmno": patch
+---
+
+change dmno workspace config file name to `.dmno/workspace.yaml`

.gitignore

@@ -14,6 +14,8 @@ config.local.ts
 
 .turbo
 
+vite.config.ts.timestamp*
+
 tmp-package-registry
 
 changesets-summary.json
@@ -29,4 +31,6 @@ changesets-summary.json
 **/.dmno/.icon-cache
 # local config overrides
 **/.dmno/.env.local
+# local ssl certs
+**/.dmno/certs
 

.vscode/extensions.json

@@ -3,5 +3,6 @@
     "Vue.volar",
     "pflannery.vscode-versionlens",
     "unifiedjs.vscode-mdx",
+    "allemandinstable.colorful-comments-refreshed",
   ]
 }

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   // use the project's TS version rather than the VSCode's built-in one
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
   "files.associations": {
     // package.json needs to be "json" rather than "json with comments" so that the "version lens" plugin works
     "package.json": "json"
@@ -15,6 +16,7 @@
     "astro",
     "mdx",
     "markdown",
+    "vue",
   ],
   "eslint.format.enable": true,
   "editor.formatOnSave": true,
@@ -44,4 +46,5 @@
 
   // vscode's built-in json formatter is removing the extra newline at the end which conflicts with editorconfig
   "json.format.keepLines": true,
+
 }

example-repo/.dmno/config.mts

@@ -38,14 +38,19 @@ export default defineDmnoService({
       typeDescription: 'standardized environment flag set by DMNO',
       value: (ctx) => ctx.get('NODE_ENV'),
     },
+
+    REDACT_TEST: {
+      sensitive: true,
+      value: 'a a a a b b b b c c c c d d d',
+      coerce: (val) => val.replaceAll(' ', ''),
+    },
 
     OP_TOKEN: {
       extends: OnePasswordTypes.serviceAccountToken,
     },
     // OP_TOKEN_PROD: {
     //   extends: OnePasswordTypes.serviceAccountToken,
     // },
-
     OP_ITEM_1: {
       value: switchBy('DMNO_ENV', {
         _default: OnePassSecretsDev.item(),

example-repo/.dmno/workspace.yaml

@@ -0,0 +1,8 @@
+projects:
+  # all packages in direct subdirs of packages/
+  - "packages/*"
+
+dev:
+  host: dev.dmno.local
+  ssl: true
+  # port: 5666

example-repo/.gitignore

@@ -1,3 +1,5 @@
+.vite-node
+
 # local cache for resolved values
 **/.dmno/cache.json
 # encryption key used for cache
@@ -6,3 +8,5 @@
 **/.dmno/.typegen
 # iconify cache used in generated types
 **/.dmno/.icon-cache
+# local ssl cert
+**/.dmno/certs

example-repo/packages/astro-web/.dmno/config.mts

@@ -9,6 +9,7 @@ export default defineDmnoService({
   settings: {
     dynamicConfig: 'default_static',
   },
+  icon: 'devicon-plain:astro',
   pick: [
     'NODE_ENV',
     'DMNO_ENV',

example-repo/packages/dmno-ui-demo/.dmno/config.mts

@@ -0,0 +1,98 @@
+
+import { DmnoBaseTypes, defineDmnoService, configPath, NodeEnvType, switchBy, inject } from 'dmno';
+import { OnePasswordDmnoPlugin, OnePasswordTypes } from '@dmno/1password-plugin';
+
+
+const OnePassSecrets = OnePasswordDmnoPlugin.injectInstance('1pass');
+
+// uncomment to show config loading error
+// throw new Error('bloop');
+
+export default defineDmnoService({
+  // name: 'dmno-ui-demo',
+  settings: {
+    interceptSensitiveLeakRequests: true,
+    redactSensitiveLogs: true,
+    preventClientLeaks: true,
+  },
+  pick: [
+    'NODE_ENV'
+  ],
+  schema: {
+    NORMAL_NUMBER: {
+      value: 123,
+      required: true,
+    },
+    FN_RESOLVER: {
+      extends: DmnoBaseTypes.number,
+      summary: 'example of a function resolver',
+      value: () => DMNO_CONFIG.NORMAL_NUMBER + 456,
+    },
+    SENSITIVE_EXAMPLE: {
+      value: OnePassSecrets.itemByReference("op://dev test/example/username"),
+      sensitive: true,
+    },
+    SENSITIVE_COERCED: {
+      value: 'this\\nis\\nsensitive',
+      coerce: (val) => val.replace('\\n', '\n'),
+      sensitive: true,
+    },
+
+    EXTRA_SUPER_LONG_NAME_EXAMPLE_FOO_BAR_BIZ_BAZ_BUZ_BING_BONG_BOOP: {
+      summary: 'example showing a super long name that should be truncated but still show the icons',
+      value: 'asldkjfhqoiuweyrklajsdhnxbcvmnsdjkhfhqiwuerqolejfhzsjmnvbxjkhfsiudyfrwjkebfmnsdbfkjsdhfiukjwehrkjsdbnfkjbsdkjfbxcmnbvjksdhgfkjweiuryweijkhkjsdbfmnxdbcvkjsdhfjkiweyrkiujhsdjkf'
+    },
+    BRANCH_EXAMPLE: {
+      value: switchBy('NODE_ENV', {
+        _default: 'default-val',
+        staging: 'staging-val',
+        production: 'production-val',
+      })
+    },
+    OBJECT_EXAMPLE: {
+      extends: DmnoBaseTypes.object({
+        child1: { value: 'child-1-val' },
+        child2: { value: 'child-2-val' },
+        objChild: {
+          // required: true,
+          extends: DmnoBaseTypes.object({
+            gchild1: { value: 'grandchild!' },
+            // gchild2: { value: 'another' },
+          }),
+        }
+      })
+    },
+
+    // overrides
+    FROM_DOTENV_OVERRIDE: {
+      value: 'default',
+    },
+    FROM_SHELL_OVERRIDE: {
+      value: 'default',
+    },
+
+    // errors
+    REQUIRED_ERROR_EXAMPLE: {
+      required: true,
+      // value: 'ok'
+    },
+    VALIDATION_ERROR_EXAMPLE: {
+      extends: DmnoBaseTypes.string({ startsWith: 'abc', minLength: 8 }),
+      value: 'xyz123',
+    },
+    COERCION_ERROR_EXAMPLE: {
+      extends: DmnoBaseTypes.number(),
+      value: 'not-a-number',
+    },
+    SCHEMA_ERROR_EXAMPLE: {
+      // value: configPath('bad-entity-id', 'bad-path'),
+    },
+    RESOLUTION_ERROR_EXAMPLE: {
+      value: OnePassSecrets.itemByReference('badreference'),
+    },
+    // RESOLVER_CRASH_EXAMPLE: {
+    //   value: OnePassSecrets.itemByLink('badlink', 'asdf'),
+    // }
+  }
+});
+

example-repo/packages/dmno-ui-demo/.dmno/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "dmno/tsconfigs/dmno-folder",
+  "include": [
+    "./**/*.mts",
+    "./.typegen/global.d.ts"
+  ]
+}

example-repo/packages/dmno-ui-demo/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "dmno-ui-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+  },
+  "devDependencies": {
+    "@dmno/1password-plugin": "link:../../../packages/plugins/1password",
+    "dmno": "link:../../../packages/core"
+  }
+}

example-repo/packages/express-js/.dmno/config.mts

@@ -2,6 +2,7 @@ import { DmnoBaseTypes, defineDmnoService, switchByNodeEnv } from 'dmno';
 
 export default defineDmnoService({
   name: 'express-js',
+  icon: 'skill-icons:expressjs-light',
   pick: [
     'NODE_ENV',
   ],

example-repo/packages/nextjs-web/.dmno/config.mts

@@ -6,6 +6,7 @@ const OnePassBackend = OnePasswordDmnoPlugin.injectInstance('1pass');
 export default defineDmnoService({
   name: 'nextweb',
   parent: 'group1',
+  icon: 'devicon-plain:nextjs',
   pick: [
     'NODE_ENV',
     'DMNO_ENV',

example-repo/packages/nuxt-web/.dmno/config.mts

@@ -2,6 +2,7 @@ import { DmnoBaseTypes, defineDmnoService, switchByNodeEnv } from 'dmno';
 
 export default defineDmnoService({
   name: 'nuxt',
+  icon: 'devicon-plain:nuxtjs',
   pick: [
     'NODE_ENV',
   ],

example-repo/packages/remix-basic/.dmno/config.mts

@@ -2,6 +2,7 @@ import { DmnoBaseTypes, defineDmnoService } from 'dmno';
 
 export default defineDmnoService({
   name: 'remix-basic',
+  icon: 'ri:remix-run-fill',
   pick: [],
   settings: {
     dynamicConfig: 'default_static',

example-repo/packages/webapp/.dmno/config.mts

@@ -15,6 +15,7 @@ const customUrlType = createDmnoDataType<{ newSetting: boolean }>({
 export default defineDmnoService({
   name: 'web',
   parent: 'group1',
+  icon: 'file-icons:vite',
   settings: {
     dynamicConfig: 'only_static',
   },
@@ -87,10 +88,6 @@ export default defineDmnoService({
       description: 'this is a required boolean config item',
       required: true,
       value: false,
-      ui: {
-        icon: 'mdi:minus-circle',
-        color: '00FF00'
-      }
     },
     BOOLEAN_OPPOSITE: {
       extends: 'boolean',

packages/configraph/src/config-node.ts

@@ -23,6 +23,7 @@ const debug = Debug('configraph:node');
 //! this might be in the wrong place?
 export type ConfigValueOverride = {
   sourceType: string;
+  icon: string;
   sourceLabel?: string;
 
   /** the value of the override */
@@ -383,13 +384,16 @@ export class ConfigraphNode<NodeMetadata = any> {
 
   toCoreJSON(): SerializedConfigraphNode {
     return {
+      id: this.fullPath,
       key: this.key,
       isSchemaValid: this.isSchemaValid,
       isValid: this.isValid,
       dataType: this.type.toJSON(),
 
       resolvedRawValue: this.resolvedRawValue,
       resolvedValue: this.resolvedValue,
+      isCoerced: this.resolvedRawValue !== this.resolvedValue,
+
       isResolved: this.isResolved,
       children: _.mapValues(this.children, (c) => c.toCoreJSON()),