Edit component JSON: remove toggle and show textarea when tab is opened.

Author: hirokiterashima

src/app/authoring-tool/edit-component-json/edit-component-json.component.html

@@ -1,28 +1,19 @@
-<div class="flex flex-row justify-start items-center gap-2">
-  <mat-label class="node__label--vertical-alignment" i18n>JSON</mat-label>
-  <button
-    mat-raised-button
-    color="primary"
-    class="topButton"
-    (click)="toggleJSONView()"
-    matTooltip="Show JSON"
-    i18n-matTooltip
-    matTooltipPosition="above"
-  >
-    <mat-icon>code</mat-icon>
-  </button>
-</div>
-@if (showJSONAuthoring) {
-  <div class="flex flex-col gap-2">
-    <span i18n style="color: red">Close the JSON view to save the changes</span>
-    <mat-form-field class="w-full">
-      <mat-label i18n>Edit Activity JSON</mat-label>
-      <textarea
-        matInput
-        cdkTextareaAutosize
-        [(ngModel)]="componentContentJSONString"
-        (ngModelChange)="jsonChanged.next($event)"
-      ></textarea>
-    </mat-form-field>
+<div class="pt-4">
+  <div class="mb-2">
+    <mat-icon color="warn" class="align-bottom">warning</mat-icon>
+    <span i18n class="warn">
+      Editing the JSON directly is generally not recommended, as errors can break the unit. If you
+      need assistance, please contact WISE staff.
+    </span>
   </div>
-}
+  <mat-form-field class="w-full" appearance="outline" style="margin-top: 10px">
+    <mat-label i18n>Edit Activity JSON</mat-label>
+    <textarea
+      class="mat-body-2"
+      matInput
+      cdkTextareaAutosize
+      [(ngModel)]="componentContentJSONString"
+      (ngModelChange)="jsonChanged.next($event)"
+    ></textarea>
+  </mat-form-field>
+</div>

src/app/authoring-tool/edit-component-json/edit-component-json.component.ts

@@ -23,37 +23,26 @@ import { MatButtonModule } from '@angular/material/button';
     MatTooltipModule
   ],
   selector: 'edit-component-json',
-  styles: ['div { margin-top: 10px; margin-bottom: 10px; } .mat-icon { margin: 0px; }'],
+  styles: ['.mat-icon { margin: 0px; }'],
   templateUrl: 'edit-component-json.component.html'
 })
 export class EditComponentJsonComponent {
   @Input() component: WISEComponent;
   protected componentContentJSONString: string;
   protected jsonChanged: Subject<string> = new Subject<string>();
-  protected showJSONAuthoring: boolean = false;
   private subscriptions: Subscription = new Subscription();
-  private validComponentContentJSONString: string;
 
   constructor(
     private notificationService: NotificationService,
     private projectService: TeacherProjectService
   ) {}
 
   ngOnInit(): void {
-    this.setComponentContentJsonString();
-    this.subscriptions.add(
-      this.jsonChanged.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
-        if (this.isJSONValid()) {
-          this.rememberRecentValidJSON();
-          this.notificationService.showJSONValidMessage();
-        } else {
-          this.notificationService.showJSONInvalidMessage();
-        }
-      })
-    );
+    this.componentContentJSONString = JSON.stringify(this.component.content, null, 4);
     this.subscriptions.add(
-      this.projectService.nodeChanged$.subscribe(() => {
-        this.setComponentContentJsonString();
+      this.jsonChanged.pipe(debounceTime(1000), distinctUntilChanged()).subscribe((newText) => {
+        this.componentContentJSONString = newText;
+        this.saveChanges();
       })
     );
   }
@@ -62,55 +51,15 @@ export class EditComponentJsonComponent {
     this.subscriptions.unsubscribe();
   }
 
-  private setComponentContentJsonString(): void {
-    this.componentContentJSONString = JSON.stringify(this.component.content, null, 4);
-  }
-
-  protected toggleJSONView(): void {
-    if (this.showJSONAuthoring) {
-      if (this.isJSONValid()) {
-        this.saveChanges();
-        this.showJSONAuthoring = false;
-      } else {
-        const doRollback = confirm(
-          $localize`The JSON is invalid. Invalid JSON will not be saved.\nClick "OK" to revert back to the last valid JSON.\nClick "Cancel" to keep the invalid JSON open so you can fix it.`
-        );
-        if (doRollback) {
-          this.rollbackToRecentValidJSON();
-          this.saveChanges();
-        }
-      }
-    } else {
-      this.showJSONAuthoring = true;
-      this.rememberRecentValidJSON();
-    }
-  }
-
-  private isJSONValid(): boolean {
-    try {
-      JSON.parse(this.componentContentJSONString);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
   private saveChanges(): void {
     try {
       this.projectService
         .getNode(this.component.nodeId)
         .replaceComponent(this.component.id, JSON.parse(this.componentContentJSONString));
       this.projectService.componentChanged();
+      this.notificationService.showJSONValidMessage();
     } catch (e) {
       this.notificationService.showJSONInvalidMessage();
     }
   }
-
-  private rememberRecentValidJSON(): void {
-    this.validComponentContentJSONString = this.componentContentJSONString;
-  }
-
-  private rollbackToRecentValidJSON(): void {
-    this.componentContentJSONString = this.validComponentContentJSONString;
-  }
 }