Fix project name for cloudflare publish command

Reviewed-on: #3

.gitea/workflows/release-nightly.yaml

@@ -32,6 +32,9 @@ jobs:
         with:
           lfs: true
       - uses: oven-sh/setup-bun@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ^22.12.0
       - uses: browser-actions/setup-chrome@v1
         id: setup-chrome
         with:
@@ -49,9 +52,8 @@ jobs:
         run: bun run build
 
       - name: Publish to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: buf
+          command: pages deploy dist/proto-creator/browser --project-name=buf
-          directory: dist/proto-creator/browser

angular.json

@@ -58,7 +58,8 @@
                 }
               ],
               "outputHashing": "all",
-              "serviceWorker": "ngsw-config.json"
+              "serviceWorker": "ngsw-config.json",
+              "security": { "autoCsp": true }
             },
             "development": {
               "optimization": false,
@@ -84,10 +85,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [],
             "tsConfig": "tsconfig.spec.json",
@@ -107,5 +108,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

karma.conf.js

@@ -4,13 +4,12 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ['jasmine'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
       jasmine: {

package.json

@@ -11,40 +11,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "^18.1.1",
+    "@angular/animations": "^20.0.0",
-    "@angular/animations": "^18.1.1",
+    "@angular/cdk": "^20.0.1",
-    "@angular/cdk": "^18.1.1",
+    "@angular/common": "^20.0.0",
-    "@angular/common": "^18.1.1",
+    "@angular/compiler": "^20.0.0",
-    "@angular/compiler": "^18.1.1",
+    "@angular/core": "^20.0.0",
-    "@angular/core": "^18.1.1",
+    "@angular/forms": "^20.0.0",
-    "@angular/forms": "^18.1.1",
+    "@angular/material": "^20.0.1",
-    "@angular/material": "^18.1.1",
+    "@angular/platform-browser": "^20.0.0",
-    "@angular/platform-browser": "^18.1.1",
+    "@angular/platform-browser-dynamic": "^20.0.0",
-    "@angular/platform-browser-dynamic": "^18.1.1",
+    "@angular/router": "^20.0.0",
-    "@angular/router": "^18.1.1",
+    "@angular/service-worker": "^20.0.0",
-    "@angular/service-worker": "^18.1.1",
     "@tauri-apps/api": "^1.6.0",
-    "highlight.js": "^11.10.0",
+    "@types/json-schema": "^7.0.15",
+    "highlight.js": "^11.11.1",
     "monaco-editor": "^0.50.0",
-    "ngx-monaco-editor-v2": "^18.0.1",
+    "ngx-monaco-editor-v2": "^19.0.2",
-    "protobufjs": "^7.3.2",
+    "protobufjs": "^7.4.0",
-    "rxjs": "^7.8.1",
+    "rxjs": "^7.8.2",
-    "tslib": "^2.6.3",
+    "tslib": "^2.8.1"
-    "zone.js": "^0.14.8"
   },
   "devDependencies": {
-    "@angular/build": "^18.1.1",
+    "@angular/build": "^20.0.0",
-    "@angular/cli": "^18.1.1",
+    "@angular/cli": "^20.0.0",
-    "@angular/compiler-cli": "^18.1.1",
+    "@angular/compiler-cli": "^20.0.0",
-    "@tauri-apps/cli": "^1.6.0",
+    "@tauri-apps/cli": "^1.6.3",
-    "@types/jasmine": "^5.1.4",
+    "@types/jasmine": "^5.1.7",
     "@types/protobufjs": "^6.0.0",
-    "jasmine-core": "^5.1.2",
+    "jasmine-core": "^5.6.0",
-    "karma": "^6.4.3",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "typescript": "^5.5.3"
+    "typescript": "^5.8.2"
   }
 }

src/app/app.component.html

@@ -31,7 +31,10 @@
     [opened]="leftSideOpen()"
     (closed)="leftSideOpen.set(false)"
   >
-    <app-file-tree (fileSelected)="fileSelected($event)"></app-file-tree>
+    <app-file-tree
+      class="bubble-sidenav"
+      (fileSelected)="fileSelected($event)"
+    ></app-file-tree>
   </mat-sidenav>
   <mat-sidenav
     [opened]="rightSideOpen()"
@@ -40,6 +43,7 @@
     (closed)="rightSideOpen.set(false)"
   >
     <app-proto-definition-selector
+      class="bubble-sidenav"
       (messageSelected)="selectMessage($event)"
     ></app-proto-definition-selector>
   </mat-sidenav>

src/app/app.component.scss

@@ -33,3 +33,9 @@ app-editor {
 .mat-icon.filled {
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
+
+.bubble-sidenav {
+  background-color: var(--mat-sys-secondary-container);
+  border-radius: 1rem;
+  padding: 1rem;
+}

src/app/app.component.ts

@@ -1,13 +1,11 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { CommonModule } from '@angular/common';
+import { Component, signal, inject } from '@angular/core';
-import { Component, computed, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
-import { RouterOutlet } from '@angular/router';
 import { EditorComponent } from './editor/editor.component';
 import {
   FileOrFolder,
@@ -15,15 +13,14 @@ import {
 } from './file-tree/file-tree.component';
 import { ProtoMessage } from './model/proto-message.model';
 import { ProtoDefinitionSelectorComponent } from './proto-definition-selector/proto-definition-selector.component';
+
 const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   imports: [
-    CommonModule,
     EditorComponent,
     FileTreeComponent,
     MatButtonModule,
@@ -32,10 +29,11 @@ const mobileBreakpoints = [Breakpoints.Handset, Breakpoints.TabletPortrait];
     MatToolbarModule,
     MatTreeModule,
     ProtoDefinitionSelectorComponent,
-    RouterOutlet,
   ],
 })
 export class AppComponent {
+  private breakpointObserver = inject(BreakpointObserver);
+
   protected selectedFile = signal<FileOrFolder | undefined>(undefined);
   protected selectedMessage = signal<ProtoMessage | undefined>(undefined);
   protected rightSideOpen = signal(true);
@@ -46,7 +44,9 @@ export class AppComponent {
     this.breakpointObserver.isMatched(mobileBreakpoints)
   );
 
-  constructor(private breakpointObserver: BreakpointObserver) {
+  constructor() {
+    const breakpointObserver = this.breakpointObserver;
+
     breakpointObserver
       .observe(mobileBreakpoints)
       .pipe(takeUntilDestroyed())

src/app/app.config.ts

@@ -1,8 +1,9 @@
 import {
-  APP_INITIALIZER,
   ApplicationConfig,
   isDevMode,
-  provideExperimentalZonelessChangeDetection,
+  provideZonelessChangeDetection,
+  provideAppInitializer,
+  inject,
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
@@ -16,30 +17,25 @@ import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
 import { provideMonacoEditor } from 'ngx-monaco-editor-v2';
 import { routes } from './app.routes';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideExperimentalZonelessChangeDetection(),
+    provideZonelessChangeDetection(),
     provideRouter(routes),
     provideAnimationsAsync(),
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+      hljs.registerLanguage('json', json);
-      useValue: () => {
+    }),
-        hljs.registerLanguage('json', json);
+    provideAppInitializer(() => {
-      },
+      const initializerFn = ((iconRegistry: MatIconRegistry) => () => {
-      multi: true,
-    },
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (iconRegistry: MatIconRegistry) => () => {
         iconRegistry.registerFontClassAlias(
           'material-symbols-rounded',
           'material-symbols-rounded'
         );
-      },
+      })(inject(MatIconRegistry));
-      deps: [MatIconRegistry],
+      return initializerFn();
-      multi: true,
+    }),
-    },
     {
       provide: MAT_ICON_DEFAULT_OPTIONS,
       useValue: { fontSet: 'material-symbols-rounded' },
@@ -49,5 +45,11 @@ export const appConfig: ApplicationConfig = {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000',
     }),
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      // Filled doesn't look great with low density, by default the label is lost, and adding
+      // it back makes it look cramped
+      useValue: { appearance: 'outline' },
+    },
   ],
 };

src/app/editor/editor.component.html

@@ -7,7 +7,7 @@
 <div class="editor-items">
   @if(values()) { @for (item of selectedMessage().values; track $index) {
   <app-proto-field
-    [label]="item.name"
+    [label]="item.friendlyName || item.name"
     [configuration]="item.configuration"
     [value]="values()[item.name]"
     (valueChange)="updateValue(item.name, $event)"

src/app/editor/editor.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   Component,
   ElementRef,
@@ -8,6 +7,7 @@ import {
   input,
   signal,
   viewChild,
+  inject,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -29,9 +29,7 @@ type PreviewType = 'raw' | 'edit' | 'diff';
 
 @Component({
   selector: 'app-editor',
-  standalone: true,
   imports: [
-    CommonModule,
     ProtoFieldComponent,
     MatButtonModule,
     MatButtonToggleModule,
@@ -43,6 +41,8 @@ type PreviewType = 'raw' | 'edit' | 'diff';
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
+  private snackBar = inject(MatSnackBar);
+
   selectedFile = input<FileOrFolder>();
   selectedMessage = input.required<ProtoMessage>();
   indentSize = input<number>(2);
@@ -80,7 +80,9 @@ export class EditorComponent {
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor(sanitizer: DomSanitizer, private snackBar: MatSnackBar) {
+  constructor() {
+    const sanitizer = inject(DomSanitizer);
+
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {
@@ -98,17 +100,14 @@ export class EditorComponent {
         }
       }
     });
-    effect(
+    effect(() => {
-      () => {
+      const message = this.selectedMessage();
-        const message = this.selectedMessage();
+      this.values.set(
-        this.values.set(
+        Object.fromEntries(
-          Object.fromEntries(
+          message.values.map((value) => [[value.name, undefined]])
-            message.values.map((value) => [[value.name, undefined]])
+        )
-          )
+      );
-        );
+    });
-      },
-      { allowSignalWrites: true }
-    );
 
     effect(async () => {
       const selectedFile = this.selectedFile();

src/app/editor/list-field/list-field.component.scss

@@ -1,6 +1,7 @@
 :host {
   display: flex;
   flex-direction: column;
+  margin: 0.5rem 0;
 }
 
 .row-wrapper {
@@ -11,7 +12,3 @@
 app-proto-field {
   flex: 1;
 }
-
-.add-button {
-  align-self: flex-end;
-}

src/app/editor/list-field/list-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -12,32 +11,40 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { ListMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
   selector: 'app-list-field',
-  standalone: true,
   imports: [
-    CommonModule,
     MatButtonModule,
+    MatExpansionModule,
     MatIconModule,
     forwardRef(() => ProtoFieldComponent),
   ],
-  template: `<h3>{{ label() }}</h3>
+  template: `
-    @if(values()) { @for(value of values(); track $index) {
+    <mat-accordion>
-    <div class="row-wrapper">
+      <mat-expansion-panel [expanded]="true">
-      <app-proto-field
+        <mat-expansion-panel-header>
-        [configuration]="configuration().subConfiguration"
+          <mat-panel-title>{{ label() }}</mat-panel-title>
-        [value]="value"
+        </mat-expansion-panel-header>
-        (valueChange)="updateValue($index, $event)"
+        @if(values()) { @for(value of values(); track $index) {
-      ></app-proto-field>
+        <div class="row-wrapper">
-      <button mat-icon-button (click)="remove($index)">
+          <app-proto-field
-        <mat-icon>remove</mat-icon>
+            [configuration]="configuration().subConfiguration"
-      </button>
+            [value]="value"
-    </div>
+            (valueChange)="updateValue($index, $event)"
-    } }
+          ></app-proto-field>
-    <button mat-icon-button class="add-button" (click)="add()">
+          <button mat-icon-button (click)="remove($index)">
-      <mat-icon>add</mat-icon>
+            <mat-icon>remove</mat-icon>
-    </button>`,
+          </button>
+        </div>
+        } }
+        <button mat-icon-button class="add-button" (click)="add()">
+          <mat-icon>add</mat-icon>
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './list-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/editor/map-field/map-field.component.scss

@@ -1,6 +1,7 @@
 :host {
   display: flex;
   flex-direction: column;
+  margin: 0.5rem 0;
 }
 
 .row-wrapper {
@@ -12,10 +13,6 @@ app-proto-field {
   flex: 1;
 
   &:first-child {
-    margin-right: 10px;
+    margin-right: 0.5rem;
   }
 }
-
-.add-button {
-  align-self: flex-end;
-}

src/app/editor/map-field/map-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -12,39 +11,47 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MapMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 const keyIsEmpty = (key: string | number) => key == null || key === '';
 
 @Component({
   selector: 'app-map-field',
-  standalone: true,
   imports: [
-    CommonModule,
     forwardRef(() => ProtoFieldComponent),
+    MatExpansionModule,
     MatIconModule,
     MatButtonModule,
   ],
-  template: `<h3>{{ label() }}</h3>
+  template: `
-    @if(valuePairs()) { @for(value of valuePairs(); track $index) {
+    <mat-accordion>
-    <div class="row-wrapper">
+      <mat-expansion-panel [expanded]="true">
-      <app-proto-field
+        <mat-expansion-panel-header>
-        [configuration]="configuration().keyConfiguration"
+          <mat-panel-title>{{ label() }}</mat-panel-title>
-        [value]="value[0]"
+        </mat-expansion-panel-header>
-        (valueChange)="updateKey($index, $event)"
+        @if(valuePairs()) { @for(value of valuePairs(); track $index) {
-      ></app-proto-field>
+        <div class="row-wrapper">
-      <app-proto-field
+          <app-proto-field
-        [configuration]="configuration().valueConfiguration"
+            [configuration]="configuration().keyConfiguration"
-        [value]="value[1]"
+            [value]="value[0]"
-        (valueChange)="updateValue($index, $event)"
+            (valueChange)="updateKey($index, $event)"
-      ></app-proto-field>
+          ></app-proto-field>
-      <button mat-icon-button (click)="remove($index)">
+          <app-proto-field
-        <mat-icon>remove</mat-icon>
+            [configuration]="configuration().valueConfiguration"
-      </button>
+            [value]="value[1]"
-    </div>
+            (valueChange)="updateValue($index, $event)"
-    } }
+          ></app-proto-field>
-    <button mat-icon-button class="add-button" (click)="add()">
+          <button mat-icon-button (click)="remove($index)">
-      <mat-icon>add</mat-icon>
+            <mat-icon>remove</mat-icon>
-    </button>`,
+          </button>
+        </div>
+        } }
+        <button mat-icon-button class="add-button" (click)="add()">
+          <mat-icon>add</mat-icon>
+        </button>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './map-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -58,22 +65,19 @@ export class MapFieldComponent {
   private changedInternal = false;
 
   constructor() {
-    effect(
+    effect(() => {
-      () => {
+      // TODO: Super hacky but can't really think of another way to keep these in sync
-        // TODO: Super hacky but can't really think of another way to keep these in sync
+      //    without removing an entry when the key gets blanked. Would need an alternate
-        //    without removing an entry when the key gets blanked. Would need an alternate
+      //    design that updated on blur only perhaps
-        //    design that updated on blur only perhaps
+      if (this.changedInternal) {
-        if (this.changedInternal) {
+        this.changedInternal = false;
-          this.changedInternal = false;
+        return;
-          return;
+      }
-        }
+      const values = this.values();
-        const values = this.values();
+      if (values) {
-        if (values) {
+        this.valuePairs.set(Object.entries(values));
-          this.valuePairs.set(Object.entries(values));
+      }
-        }
+    });
-      },
-      { allowSignalWrites: true }
-    );
   }
 
   add() {

src/app/editor/object-field/object-field.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  margin: 0.5rem 0;
+}

src/app/editor/object-field/object-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -9,24 +8,35 @@ import {
 } from '@angular/core';
 import { ObjectMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
   selector: 'app-object-field',
-  standalone: true,
+  imports: [MatExpansionModule, forwardRef(() => ProtoFieldComponent)],
-  imports: [CommonModule, forwardRef(() => ProtoFieldComponent)],
+  template: `
-  template: `<h3>
+    <mat-accordion>
-      {{ label() }} ({{ configuration().messageDefinition.name }})
+      <mat-expansion-panel [expanded]="true">
-    </h3>
+        <mat-expansion-panel-header>
-    <div>
+          <mat-panel-title>
-      @for (item of configuration().messageDefinition.values; track $index) {
+            {{ label() ?? configuration().messageDefinition.name }}
-      <app-proto-field
+          </mat-panel-title>
-        [label]="item.name"
+          @if(label()) {
-        [configuration]="item.configuration"
+          <mat-panel-description>
-        [value]="currentValue()[item.name]"
+            {{ configuration().messageDefinition.name }}
-        (valueChange)="updateValue(item.name, $event)"
+          </mat-panel-description>
-      ></app-proto-field>
+          }
-      }
+        </mat-expansion-panel-header>
-    </div>`,
+        @for (item of configuration().messageDefinition.values; track $index) {
+        <app-proto-field
+          [label]="item.friendlyName || item.name"
+          [configuration]="item.configuration"
+          [value]="currentValue()[item.name]"
+          (valueChange)="updateValue(item.name, $event)"
+        ></app-proto-field>
+        }
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
   styleUrl: './object-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/editor/proto-field/proto-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,9 +27,7 @@ import { StringFieldComponent } from '../string-field/string-field.component';
 
 @Component({
   selector: 'app-proto-field',
-  standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     ListFieldComponent,
     MapFieldComponent,
@@ -58,14 +55,17 @@ import { StringFieldComponent } from '../string-field/string-field.component';
         [min]="numericConfiguration().min ?? null"
         [max]="numericConfiguration().max ?? null"
       />
-      <mat-hint *ngIf="number.hasError('min')"
+      @if(number.hasError('min')) {
+      <mat-hint
         >Number should not be less than
         {{ numericConfiguration().min }}</mat-hint
       >
-      <mat-hint *ngIf="number.hasError('max')"
+      } @if(number.hasError('max')) {
+      <mat-hint
         >Number should not greater than
         {{ numericConfiguration().max }}</mat-hint
       >
+      }
     </mat-form-field>
     } @case (MessageTypeEnum.Boolean) {
     <p>
@@ -75,10 +75,11 @@ import { StringFieldComponent } from '../string-field/string-field.component';
     <mat-form-field>
       <mat-label>{{ label() }}</mat-label>
       <mat-select [(value)]="value">
-        @for(option of enumConfiguration().options; track
-        enumConfiguration()!.options) {
         <mat-option>None</mat-option>
-        <mat-option [value]="option">{{ option }}</mat-option>
+        @for(option of enumConfiguration().options; track option) {
+        <mat-option [value]="option.protoName">{{
+          option.friendlyName || option.protoName
+        }}</mat-option>
         }
       </mat-select>
     </mat-form-field>

src/app/editor/string-field/string-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,9 +12,7 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 @Component({
   selector: 'app-string-field',
-  standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatFormFieldModule,
     MatInputModule,

src/app/file-tree/file-tree.component.scss

@@ -1,16 +1,15 @@
 :host {
   display: block;
-  border-radius: var(--mat-sidenav-container-shape);
-  padding: var(--mat-sidenav-container-shape);
   height: 100%;
   box-sizing: border-box;
   transition: background-color 100ms linear;
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: auto;
 }
 
 .mat-tree {
   background-color: transparent;
+  min-width: fit-content;
 }
 
 .mat-tree-node {

src/app/file-tree/file-tree.component.ts

@@ -1,5 +1,4 @@
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { CommonModule } from '@angular/common';
 import {
   Component,
   ElementRef,
@@ -40,8 +39,7 @@ const collator = new Intl.Collator(undefined, { numeric: true });
 
 @Component({
   selector: 'app-file-tree',
-  standalone: true,
+  imports: [MatButtonModule, MatIconModule, MatTreeModule],
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatTreeModule],
   templateUrl: './file-tree.component.html',
   styleUrl: './file-tree.component.scss',
 })
@@ -151,7 +149,10 @@ export class FileTreeComponent implements OnInit, OnDestroy {
         const file = files[i];
         if (file.webkitRelativePath?.includes('/')) {
           // Got a file in a folder, so put it into the appropriate folder in the tree
-          const splitFilePath = file.webkitRelativePath.split('/');
+          if (i === 0) {
+            this.selectedDirectory.set(file.webkitRelativePath.split('/')[0]);
+          }
+          const splitFilePath = file.webkitRelativePath.split('/').slice(1);
           let currentChildren: FileOrFolder[] | undefined = mappedFiles;
           for (let j = 0; j < splitFilePath.length - 1; j++) {
             const relativePath = splitFilePath[j];

src/app/model/proto-message.model.ts

@@ -38,8 +38,13 @@ export interface ObjectMessage extends MessageConfiguration {
 
 export interface RawMessage extends MessageConfiguration {}
 
+export interface EnumMessageOption {
+  protoName: string;
+  friendlyName?: string;
+}
+
 export interface EnumMessage extends MessageConfiguration {
-  options: string[];
+  options: EnumMessageOption[];
 }
 
 export interface MessageConfiguration {
@@ -90,11 +95,12 @@ export const RawMessage = (): RawMessage => ({ type: MessageTypeEnum.Raw });
 
 export const EnumMessage = (options: string[]) => ({
   type: MessageTypeEnum.Enum,
-  options,
+  options: options.map((option) => ({ protoName: option })),
 });
 
 export interface ProtoMessageField<T extends MessageConfiguration> {
   name: string;
+  friendlyName?: string;
   configuration: T;
 }
 
@@ -119,7 +125,9 @@ export const UnknownProto = (
 ): ProtoMessage => ({
   name,
   fullName,
-  values: [{ name: 'Raw JSON', configuration: RawMessage() }],
+  values: [
+    { name: 'Raw JSON', friendlyName: 'Raw JSON', configuration: RawMessage() },
+  ],
 });
 
 export const EDITABLE_MESSAGE_TYPES = [

src/app/proto-definition-selector/definition-editor/definition-editor-field/definition-editor-field.component.ts

@@ -1,13 +1,12 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import {
+  EnumMessage,
   ListMessage,
   MapMessage,
   MessageConfiguration,
   MessageTypeEnum,
   NumericMessage,
   ObjectMessage,
-  ProtoMessageField,
   StringMessage,
 } from '../../../model/proto-message.model';
 import { FormsModule } from '@angular/forms';
@@ -18,12 +17,11 @@ import { ListEditorFieldComponent } from '../list-editor-field/list-editor-field
 import { MapEditorFieldComponent } from '../map-editor-field/map-editor-field.component';
 import { ObjectEditorFieldComponent } from '../object-editor-field/object-editor-field.component';
 import { StringEditorFieldComponent } from '../string-editor-field/string-editor-field.component';
+import { EnumEditorFieldComponent } from '../enum-editor-field/enum-editor-field.component';
 
 @Component({
   selector: 'app-definition-editor-field',
-  standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     ListEditorFieldComponent,
     MapEditorFieldComponent,
@@ -32,6 +30,7 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
     MatSelectModule,
     ObjectEditorFieldComponent,
     StringEditorFieldComponent,
+    EnumEditorFieldComponent,
   ],
   template: ` @switch (fieldConfiguration().type) {
     @case(MessageTypeEnum.String) {
@@ -49,9 +48,11 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
         [(ngModel)]="configuration.min"
         [max]="configuration.max ?? null"
       />
-      <mat-hint *ngIf="min.hasError('max')"
+      @if(min.hasError('max')) {
+      <mat-hint
         >Min should not be greater than {{ configuration.max }}</mat-hint
       >
+      }
     </mat-form-field>
     <mat-form-field>
       <mat-label>Max</mat-label>
@@ -62,9 +63,9 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
         [(ngModel)]="configuration.max"
         [min]="configuration.min ?? null"
       />
-      <mat-hint *ngIf="max.hasError('min')"
+      @if(max.hasError('min')) {
-        >Max should not be less than {{ configuration.min }}</mat-hint
+      <mat-hint>Max should not be less than {{ configuration.min }}</mat-hint>
-      >
+      }
     </mat-form-field>
     } @case (MessageTypeEnum.List) {
     <app-list-editor-field
@@ -78,6 +79,10 @@ import { StringEditorFieldComponent } from '../string-editor-field/string-editor
     <app-object-editor-field
       [field]="objectConfiguration(fieldConfiguration())"
     ></app-object-editor-field>
+    } @case(MessageTypeEnum.Enum) {
+    <app-enum-editor-field
+      [configuration]="enumConfiguration(fieldConfiguration())"
+    ></app-enum-editor-field>
     } }`,
   styleUrl: './definition-editor-field.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -105,5 +110,9 @@ export class DefinitionEditorFieldComponent {
     return configuration as ObjectMessage;
   }
 
+  protected enumConfiguration(configuration: MessageConfiguration) {
+    return configuration as EnumMessage;
+  }
+
   protected readonly MessageTypeEnum = MessageTypeEnum;
 }

src/app/proto-definition-selector/definition-editor/definition-editor.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}

src/app/proto-definition-selector/definition-editor/definition-editor.component.ts

@@ -1,9 +1,7 @@
-import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import {
-  EDITABLE_MESSAGE_TYPES,
   ListMessage,
   MessageConfiguration,
   MessageTypeEnum,
@@ -11,14 +9,18 @@ import {
   ProtoMessage,
 } from '../../model/proto-message.model';
 import { DefinitionEditorFieldComponent } from './definition-editor-field/definition-editor-field.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-definition-editor',
-  standalone: true,
   imports: [
-    CommonModule,
+    FormsModule,
     MatButtonModule,
     MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
     DefinitionEditorFieldComponent,
   ],
   template: `
@@ -26,6 +28,14 @@ import { DefinitionEditorFieldComponent } from './definition-editor-field/defini
     <mat-dialog-content>
       @for (field of editableMessages; track $index) {
       <h3>{{ field.name }}</h3>
+      <mat-form-field>
+        <mat-label>Friendly Name</mat-label>
+        <input
+          matInput
+          [(ngModel)]="field.friendlyName"
+          placeholder="Optional"
+        />
+      </mat-form-field>
       <app-definition-editor-field
         [fieldConfiguration]="field.configuration"
       ></app-definition-editor-field>
@@ -39,28 +49,7 @@ import { DefinitionEditorFieldComponent } from './definition-editor-field/defini
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DefinitionEditorComponent {
-  protected editableMessages = this.protoMessage.values.filter((message) =>
+  protected protoMessage = inject<ProtoMessage>(MAT_DIALOG_DATA);
-    this.filterMessageConfiguration(message.configuration)
-  );
 
-  private filterMessageConfiguration(
+  protected editableMessages = this.protoMessage.values;
-    configuration: MessageConfiguration
-  ): boolean {
-    if (configuration.type === MessageTypeEnum.List) {
-      return this.filterMessageConfiguration(
-        (configuration as ListMessage).subConfiguration
-      );
-    }
-    if (configuration.type === MessageTypeEnum.Object) {
-      // Ensure at least one nested message can be configured
-      return !!(configuration as ObjectMessage).messageDefinition.values.find(
-        (message) => this.filterMessageConfiguration(message.configuration)
-      );
-    }
-
-    // Note: Map can always be configured, as key needs to be a string or numeric type
-    return EDITABLE_MESSAGE_TYPES.includes(configuration.type);
-  }
-
-  constructor(@Inject(MAT_DIALOG_DATA) protected protoMessage: ProtoMessage) {}
 }

src/app/proto-definition-selector/definition-editor/enum-editor-field/enum-editor-field.component.css

@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}

src/app/proto-definition-selector/definition-editor/enum-editor-field/enum-editor-field.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { EnumMessage } from '../../../model/proto-message.model';
+import { MatFormFieldModule, MatLabel } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-enum-editor-field',
+  standalone: true,
+  imports: [FormsModule, MatFormFieldModule, MatInputModule, MatLabel],
+  template: `
+    @for (option of configuration().options; track $index) {
+    <mat-form-field>
+      <mat-label>{{ option.protoName }}</mat-label>
+      <input
+        matInput
+        [(ngModel)]="option.friendlyName"
+        placeholder="Friendly Name"
+      />
+    </mat-form-field>
+    }
+  `,
+  styleUrl: './enum-editor-field.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EnumEditorFieldComponent {
+  configuration = input.required<EnumMessage>();
+}

src/app/proto-definition-selector/definition-editor/list-editor-field/list-editor-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -10,8 +9,7 @@ import { ListMessage } from '../../../model/proto-message.model';
 
 @Component({
   selector: 'app-list-editor-field',
-  standalone: true,
+  imports: [forwardRef(() => DefinitionEditorFieldComponent)],
-  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
   template: `<app-definition-editor-field
     [fieldConfiguration]="field().subConfiguration"
   ></app-definition-editor-field>`,

src/app/proto-definition-selector/definition-editor/map-editor-field/map-editor-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -14,8 +13,7 @@ import {
 
 @Component({
   selector: 'app-map-editor-field',
-  standalone: true,
+  imports: [forwardRef(() => DefinitionEditorFieldComponent)],
-  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
   template: `
     <h4>Key Configuration</h4>
     <app-definition-editor-field

src/app/proto-definition-selector/definition-editor/object-editor-field/object-editor-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -6,32 +5,43 @@ import {
   forwardRef,
   input,
 } from '@angular/core';
-import {
+import { ObjectMessage } from '../../../model/proto-message.model';
-  EDITABLE_MESSAGE_TYPES,
-  ObjectMessage,
-} from '../../../model/proto-message.model';
 import { DefinitionEditorFieldComponent } from '../definition-editor-field/definition-editor-field.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-object-editor-field',
-  standalone: true,
+  imports: [
-  imports: [CommonModule, forwardRef(() => DefinitionEditorFieldComponent)],
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    forwardRef(() => DefinitionEditorFieldComponent),
+  ],
   template: `
     @for (field of editableFields(); track $index) {
     <h4>{{ field.name }}</h4>
+    <mat-form-field>
+      <mat-label>Friendly Name</mat-label>
+      <input matInput [(ngModel)]="field.friendlyName" placeholder="Optional" />
+    </mat-form-field>
     <app-definition-editor-field
       [fieldConfiguration]="field.configuration"
     ></app-definition-editor-field>
     }
   `,
+  styles: `
+  mat-form-field {
+    display: block;
+  }
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ObjectEditorFieldComponent {
   field = input.required<ObjectMessage>();
 
-  protected editableFields = computed(() =>
+  protected editableFields = computed(
-    this.field().messageDefinition.values.filter((field) =>
+    () => this.field().messageDefinition.values
-      EDITABLE_MESSAGE_TYPES.includes(field.configuration.type)
-    )
   );
 }

src/app/proto-definition-selector/definition-editor/string-editor-field/string-editor-field.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,15 +7,9 @@ import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-string-editor-field',
-  standalone: true,
+  imports: [FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
-  imports: [
+  template: `
-    CommonModule,
+    <mat-form-field>
-    FormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-  ],
-  template: ` <mat-form-field>
       <mat-label>Max Length</mat-label>
       <input matInput type="number" [(ngModel)]="configuration().maxLength" />
     </mat-form-field>
@@ -26,7 +19,8 @@ import { MatInputModule } from '@angular/material/input';
         <mat-option value="text">Text</mat-option>
         <mat-option value="sql">SQL</mat-option>
       </mat-select>
-    </mat-form-field>`,
+    </mat-form-field>
+  `,
   styleUrl: './string-editor-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/proto-definition-selector/json-schema-importer.service.ts

@@ -0,0 +1,166 @@
+import { Injectable } from '@angular/core';
+import {
+  BooleanMessage,
+  EnumMessage,
+  ListMessage,
+  MessageConfiguration,
+  NumericMessage,
+  ObjectMessage,
+  ProtoMessage,
+  ProtoMessageField,
+  StringMessage,
+  UnknownProto,
+} from '../model/proto-message.model';
+import { JSONSchema7 } from 'json-schema';
+
+// jSON Schema types: https://json-schema.org/understanding-json-schema/reference/type
+// Note: There are specific keywords for each type that should be considered.
+
+// Ignore required properties for now, we don't care about this yet (in protobuf everything is optional
+//  anyway)
+// Also ignore references/don't follow them, they can be unknown/raw json. Later can add an option to follow
+//  trusted/untrusted references. Only use $ref that starts with # as it's a local ref/defined in the file.
+// Also ignore pattern properties: https://tour.json-schema.org/content/03-Objects/01-Pattern-Properties
+// Also ignore conditional validation: https://tour.json-schema.org/content/05-Conditional-Validation/01-Ensuring-Conditional-Property-Presence
+
+// Bare minimum to support is anything required by ingey
+
+// Definitely do want to consider reusable subschemas though, already have a similar check to this
+// in protobuf parsing as well when a nested message is used: https://tour.json-schema.org/content/06-Combining-Subschemas/01-Reusing-and-Referencing-with-defs-and-ref
+// Simple example schema (create a test for this):
+// {
+//   "$schema": "https://json-schema.org/draft/2020-12/schema",
+//   "$id": "https://example.com/product.schema.json",
+//   "title": "Product",
+//   "description": "A product from Acme's catalog",
+//   "type": "object",
+//   "properties": {
+//     "productId": {
+//       "description": "The unique identifier for a product",
+//       "type": "integer"
+//     },
+//     "productName": {
+//       "description": "Name of the product",
+//       "type": "string"
+//     }
+//   }
+// }
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JsonSchemaImporterService {
+  async parseJsonSchema(
+    fileName: string,
+    schema: JSONSchema7
+  ): Promise<ProtoMessage[]> {
+    const rootElements: ProtoMessage[] = [];
+    if (schema['$defs']) {
+      // Parse all definitions first, they're referenced later
+      for (const [name, value] of Object.entries(schema.$defs)) {
+        if (value instanceof Boolean) {
+          throw new Error('Cannot use boolean for definition value');
+        }
+        const jsonValue = value as JSONSchema7;
+        const objectMessage = ObjectMessage({ name, fileName, values: [] });
+        const properties = jsonValue.properties;
+        if (!properties) {
+          throw new Error('Malformed JOSN Schema, no properties present');
+        }
+        for (const [name, value] of Object.entries(properties)) {
+          objectMessage.messageDefinition.values.push({
+            name,
+            configuration: this.convertMessageRecursive(
+              value as JSONSchema7,
+              rootElements,
+              name
+            ),
+          });
+        }
+      }
+    }
+    if (!schema.title || schema.type !== 'object') {
+      throw new Error('Unsupported JSON Schema, root must be an object');
+    }
+    const properties = schema.properties;
+    if (!properties) {
+      throw new Error('Malformed JOSN Schema, no properties present');
+    }
+    const objectMessage: ObjectMessage = ObjectMessage({
+      name: schema.title!,
+      fileName,
+      values: [],
+    });
+    for (const [name, value] of Object.entries(properties)) {
+      objectMessage.messageDefinition.values.push({
+        name,
+        configuration: this.convertMessageRecursive(
+          value as JSONSchema7,
+          rootElements,
+          name
+        ),
+      });
+    }
+    return [
+      {
+        name: schema.title,
+        fileName,
+        values: [{ name: schema.title, configuration: objectMessage }],
+      },
+      ...rootElements,
+    ];
+  }
+
+  // Convert each type here?
+  private convertMessageRecursive(
+    value: JSONSchema7,
+    parsedMessages: ProtoMessage[],
+    name?: string
+  ): MessageConfiguration {
+    if (value.$ref) {
+      const refMessageName = value.$ref.substring('#/definitions/'.length);
+      const foundMessage = parsedMessages.find(
+        (message) => message.name === refMessageName
+      );
+      return ObjectMessage(foundMessage!);
+    }
+    const type = Array.isArray(value.type) ? value.type[0] : value.type;
+    switch (type) {
+      case 'string':
+        if (value.enum) {
+          // TODO: Validate we have strings
+          return EnumMessage(value.enum.map((value) => value as string));
+        }
+        return StringMessage();
+      case 'integer':
+      case 'number':
+        return NumericMessage();
+      case 'array':
+        if (Array.isArray(value.items)) {
+          throw new Error('Cannot parse array type');
+        }
+        return ListMessage(
+          this.convertMessageRecursive(
+            value.items as JSONSchema7,
+            parsedMessages
+          )
+        );
+      case 'boolean':
+        return BooleanMessage();
+      case 'object':
+        return ObjectMessage({
+          name: name!,
+          values: Object.entries(value.properties!).map(([name, value]) => ({
+            name,
+            configuration: this.convertMessageRecursive(
+              // TODO: How can this be a boolean???
+              value as JSONSchema7,
+              parsedMessages,
+              name
+            ),
+          })),
+        });
+    }
+    throw new Error('Invalid message type found');
+  }
+}

src/app/proto-definition-selector/proto-definition-selector.component.scss

@@ -1,7 +1,5 @@
 :host {
   display: block;
-  border-radius: var(--mat-sidenav-container-shape);
-  padding: var(--mat-sidenav-container-shape);
   height: 100%;
   box-sizing: border-box;
   transition: background-color 100ms linear;

src/app/proto-definition-selector/proto-definition-selector.component.ts

@@ -1,27 +1,28 @@
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   HostBinding,
   HostListener,
   computed,
+  inject,
   output,
   signal,
   viewChild,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatListModule, MatSelectionList } from '@angular/material/list';
-import { ProtoMessage } from '../model/proto-message.model';
-import { ProtoDefinitionService } from './proto-definition.service';
-import { MatTreeModule } from '@angular/material/tree';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { writeTextFile } from '@tauri-apps/api/fs';
-import { save } from '@tauri-apps/api/dialog';
-import { MatIconModule } from '@angular/material/icon';
 import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule, MatSelectionList } from '@angular/material/list';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTreeModule } from '@angular/material/tree';
+import { save } from '@tauri-apps/api/dialog';
+import { writeTextFile } from '@tauri-apps/api/fs';
+import { ProtoMessage } from '../model/proto-message.model';
 import { DefinitionEditorComponent } from './definition-editor/definition-editor.component';
+import { ProtoDefinitionService } from './proto-definition.service';
+import { JSONSchema7 } from 'json-schema';
+import { JsonSchemaImporterService } from './json-schema-importer.service';
 
 declare const __TAURI__: any;
 
@@ -29,27 +30,23 @@ const collator = new Intl.Collator(undefined, { numeric: true });
 
 @Component({
   selector: 'app-proto-definition-selector',
-  standalone: true,
+  imports: [MatButtonModule, MatIconModule, MatListModule, MatTreeModule],
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatListModule,
-    MatTreeModule,
-  ],
   template: `
-    <h2>Protobuf Definitions</h2>
+    <h2>Schemas</h2>
     <button mat-button (click)="protoSelector.click()">
-      Select definitions
+      Import Protobuf Definition
+    </button>
+    <button mat-button (click)="jsonSchemaSelector.click()">
+      Import JSON Schema
+    </button>
+    <button mat-button (click)="configurationSelector.click()">
+      Import Configuration
     </button>
     @if(currentFiles().length > 0) {
     <button mat-button (click)="exportConfiguration()">
       Export Configuration
     </button>
     }
-    <button mat-button (click)="configurationSelector.click()">
-      Import Configuration
-    </button>
     <mat-selection-list [multiple]="false">
       @for (item of currentFiles(); track $index) {
       <mat-list-option
@@ -78,7 +75,7 @@ const collator = new Intl.Collator(undefined, { numeric: true });
         >
           <mat-icon>edit</mat-icon>
         </button>
-        <div matListItemLine>{{ item.name }}</div>
+        <div>{{ item.name }}</div>
       </mat-list-option>
       }
     </mat-selection-list>
@@ -90,6 +87,12 @@ const collator = new Intl.Collator(undefined, { numeric: true });
       (change)="addDefinitionFiles()"
       accept=".proto"
     />
+    <input
+      #jsonSchemaSelector
+      type="file"
+      (change)="importJsonSchema()"
+      accept=".json"
+    />
     <input
       #configurationSelector
       type="file"
@@ -102,10 +105,17 @@ const collator = new Intl.Collator(undefined, { numeric: true });
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProtoDefinitionSelectorComponent {
+  private jsonSchemaImporterService = inject(JsonSchemaImporterService);
+  private protoDefinitionService = inject(ProtoDefinitionService);
+  private snackBar = inject(MatSnackBar);
+  private dialog = inject(MatDialog);
+
   messageSelected = output<ProtoMessage>();
 
   protected protoSelector =
     viewChild<ElementRef<HTMLInputElement>>('protoSelector');
+  protected jsonSchemaSelector =
+    viewChild<ElementRef<HTMLInputElement>>('jsonSchemaSelector');
   protected configurationSelector = viewChild<ElementRef<HTMLInputElement>>(
     'configurationSelector'
   );
@@ -135,12 +145,6 @@ export class ProtoDefinitionSelectorComponent {
     return this.isDragging();
   }
 
-  constructor(
-    private protoDefinitionService: ProtoDefinitionService,
-    private snackBar: MatSnackBar,
-    private dialog: MatDialog
-  ) {}
-
   protected async addDefinitionFiles() {
     const files = this.protoSelector()?.nativeElement.files;
     if (files) {
@@ -185,6 +189,29 @@ export class ProtoDefinitionSelectorComponent {
     );
   }
 
+  protected async importJsonSchema() {
+    const jsonSchemaFile = this.jsonSchemaSelector()?.nativeElement.files;
+    try {
+      const fileContents = await jsonSchemaFile?.item(0)?.text();
+      if (fileContents) {
+        const schema: JSONSchema7 = JSON.parse(fileContents);
+        const messageObjects =
+          await this.jsonSchemaImporterService.parseJsonSchema(
+            jsonSchemaFile?.item(0)?.name!,
+            schema
+          );
+        this.allProtoFiles.set(messageObjects);
+        this.selectedDefinition.set(messageObjects);
+        this.selectedProtoFile.set(null);
+      }
+    } catch (err) {
+      console.error(err);
+      this.snackBar.open(
+        "Could not parse json schema file, please ensure it's valid. Note: This feature is still unstable and is likely to have errors with valid schemas."
+      );
+    }
+  }
+
   protected async importConfiguration() {
     const configurationFile = this.configurationSelector()?.nativeElement.files;
     try {

src/app/proto-definition-selector/proto-definition.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 
-import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideZonelessChangeDetection } from '@angular/core';
 import {
   EnumMessage,
   ListMessage,
@@ -38,7 +38,7 @@ message Test {
 }
 
 message ReferenceMessage {
-  repeated DoubleNestedMessage test = 1; 
+  repeated DoubleNestedMessage test = 1;
   Test.NestedMessage nested_message = 2;
   EnumTest enum_test = 3;
 }
@@ -58,7 +58,7 @@ describe('TestService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [provideExperimentalZonelessChangeDetection()],
+      providers: [provideZonelessChangeDetection()],
     });
     service = TestBed.inject(ProtoDefinitionService);
   });
@@ -142,7 +142,7 @@ describe('TestService', () => {
 
     const enumMessage = converted.values[10].configuration as EnumMessage;
     expect(enumMessage.options.length).toBe(1);
-    expect(enumMessage.options[0]).toBe('Hello');
+    expect(enumMessage.options[0].protoName).toBe('Hello');
 
     const objectListMessage = converted.values[12].configuration as ListMessage;
     expect(objectListMessage.type).toBe(MessageTypeEnum.List);

src/app/proto-definition-selector/proto-definition.service.ts

@@ -383,7 +383,6 @@ export class ProtoDefinitionService {
     switch (fieldType) {
       case 'string':
         return StringMessage();
-        break;
       case 'int32':
       case 'int64':
       case 'float':

src/styles.scss

@@ -1,50 +1,34 @@
 @use "@angular/material" as mat;
-@use "./theme.scss";
-
-@include mat.core();
-
-@mixin custom-colours($theme) {
-  .mat-toolbar {
-    background-color: mat.get-theme-color($theme, tertiary-container);
-  }
-
-  app-proto-definition-selector,
-  app-file-tree {
-    background-color: mat.get-theme-color($theme, secondary-container);
-    transition: background-color 100ms linear;
-  }
-
-  .droppable {
-    background-color: mat.get-theme-color($theme, secondary, 40);
-  }
-}
 
 html {
-  @include mat.core-theme(theme.$rose-theme);
+  color-scheme: dark light;
-  @include mat.toolbar-theme(theme.$rose-theme);
+  height: 100%;
-  @include mat.button-theme(theme.$rose-theme);
+
-  @include mat.tree-theme(theme.$rose-theme);
+  @include mat.theme(
-  @include mat.sidenav-theme(theme.$rose-theme);
+    (
-  @include mat.icon-theme(theme.$rose-theme);
+      color: mat.$rose-palette,
-  @include mat.form-field-theme(theme.$rose-theme);
+      typography: Roboto,
-  @include mat.list-theme(theme.$rose-theme);
+      density: -5,
-  @include mat.select-theme(theme.$rose-theme);
+    )
-  @include mat.snack-bar-theme(theme.$rose-theme);
+  );
-  @include mat.button-toggle-theme(theme.$rose-theme);
+  @include mat.toolbar-overrides(
-  @include mat.dialog-theme(theme.$rose-theme);
+    (
-  @include custom-colours(theme.$rose-theme);
+      container-background-color: var(--mat-sys-primary-container),
+    )
+  );
+
+  @include mat.sidenav-overrides(
+    (
+      container-shape: 1rem,
+      container-background-color: transparent,
+    )
+  );
 }
 
-html,
 body {
   height: 100%;
-}
-body {
   margin: 0;
-  font: mat.get-theme-typography(theme.$rose-theme, body-medium, font);
+  background: var(--mat-sys-surface);
-  --mat-tree-node-min-height: 24px;
+  color: var(--mat-sys-on-surface);
-  --mat-tree-node-text-size: 14px;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
-  --mdc-icon-button-state-layer-size: 24px;
-  --mat-icon-button-touch-target-display: none;
-  --mdc-list-list-item-one-line-container-height: 24px;
 }

src/theme.scss

@@ -1,10 +0,0 @@
-@use "@angular/material" as mat;
-
-$rose-theme: mat.define-theme(
-  (
-    color: (
-      theme-type: dark,
-      primary: mat.$rose-palette,
-    ),
-  )
-);