style(Authoring Tool): Use tabs to organize activity advanced authoring

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

@@ -10,8 +10,11 @@ import { moveObjectDown, moveObjectUp } from '../../../assets/wise5/common/array
 export abstract class EditAdvancedComponentComponent {
   component: Component;
   componentContent: ComponentContent;
+  protected selectedTabIndex: number = 0;
+
   @Input() componentId: string;
   @Input() nodeId: string;
+  @Input() tab: string = 'general';
 
   constructor(
     protected nodeService: TeacherNodeService,
@@ -23,6 +26,15 @@ export abstract class EditAdvancedComponentComponent {
     this.componentContent = this.teacherProjectService.getComponent(this.nodeId, this.componentId);
     this.component = new Component(this.componentContent, this.nodeId);
     this.teacherProjectService.uiChanged();
+
+    switch (this.tab) {
+      case 'visibility':
+        this.selectedTabIndex = 1;
+        break;
+      default:
+        this.selectedTabIndex = 0;
+        break;
+    }
   }
 
   setShowSubmitButtonValue(show: boolean = false): void {

src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.ts → src/app/authoring-tool/edit-component-advanced/edit-component-advanced-shared.module.ts

@@ -1,45 +1,60 @@
-import { Component, Input } from '@angular/core';
-import { Component as WISEComponent } from '../../../assets/wise5/common/Component';
-import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
-import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component';
-import { EditComponentWidthComponent } from '../edit-component-width/edit-component-width.component';
-import { EditComponentTagsComponent } from '../edit-component-tags/edit-component-tags.component';
+import { NgModule } from '@angular/core';
+import { EditComponentDefaultFeedback } from '../edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component';
+import { EditComponentExcludeFromTotalScoreComponent } from '../edit-component-exclude-from-total-score/edit-component-exclude-from-total-score.component';
+import { EditComponentMaxScoreComponent } from '../edit-component-max-score/edit-component-max-score.component';
+import { EditComponentMaxSubmitComponent } from '../edit-component-max-submit/edit-component-max-submit.component';
+import { EditComponentRubricComponent } from '../edit-component-rubric/edit-component-rubric.component';
 import { EditComponentSaveButtonComponent } from '../edit-component-save-button/edit-component-save-button.component';
 import { EditComponentSubmitButtonComponent } from '../edit-component-submit-button/edit-component-submit-button.component';
-import { EditComponentRubricComponent } from '../edit-component-rubric/edit-component-rubric.component';
-import { EditComponentJsonComponent } from '../edit-component-json/edit-component-json.component';
-import { EditComponentMaxSubmitComponent } from '../edit-component-max-submit/edit-component-max-submit.component';
-import { EditComponentMaxScoreComponent } from '../edit-component-max-score/edit-component-max-score.component';
-import { EditComponentExcludeFromTotalScoreComponent } from '../edit-component-exclude-from-total-score/edit-component-exclude-from-total-score.component';
-import { EditComponentDefaultFeedback } from '../edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component';
+import { EditComponentTagsComponent } from '../edit-component-tags/edit-component-tags.component';
+import { EditComponentWidthComponent } from '../edit-component-width/edit-component-width.component';
 import { EditComponentConstraintsComponent } from '../edit-component-constraints/edit-component-constraints.component';
+import { EditComponentJsonComponent } from '../edit-component-json/edit-component-json.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FormsModule } from '@angular/forms';
+import { EditComponentAddToNotebookButtonComponent } from '../edit-component-add-to-notebook-button/edit-component-add-to-notebook-button.component';
+import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component';
 
-@Component({
+@NgModule({
   imports: [
-    EditComponentConstraintsComponent,
+    EditComponentAddToNotebookButtonComponent,
+    EditComponentSaveButtonComponent,
+    EditComponentSubmitButtonComponent,
+    EditComponentMaxSubmitComponent,
+    EditConnectedComponentsComponent,
     EditComponentDefaultFeedback,
-    EditComponentExcludeFromTotalScoreComponent,
     EditComponentMaxScoreComponent,
-    EditComponentMaxSubmitComponent,
-    EditComponentJsonComponent,
+    EditComponentExcludeFromTotalScoreComponent,
+    EditComponentWidthComponent,
     EditComponentRubricComponent,
+    EditComponentTagsComponent,
+    EditComponentConstraintsComponent,
+    EditComponentJsonComponent,
+    FormsModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatTabsModule
+  ],
+  exports: [
+    EditComponentAddToNotebookButtonComponent,
     EditComponentSaveButtonComponent,
     EditComponentSubmitButtonComponent,
-    EditComponentTagsComponent,
+    EditComponentMaxSubmitComponent,
+    EditConnectedComponentsComponent,
+    EditComponentDefaultFeedback,
+    EditComponentMaxScoreComponent,
+    EditComponentExcludeFromTotalScoreComponent,
     EditComponentWidthComponent,
-    EditConnectedComponentsComponent
-  ],
-  selector: 'edit-common-advanced',
-  templateUrl: './edit-common-advanced.component.html'
+    EditComponentRubricComponent,
+    EditComponentTagsComponent,
+    EditComponentConstraintsComponent,
+    EditComponentJsonComponent,
+    FormsModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatTabsModule
+  ]
 })
-export class EditCommonAdvancedComponent {
-  @Input() allowedConnectedComponentTypes: string[] = [];
-  @Input() component: WISEComponent;
-
-  constructor(protected projectService: TeacherProjectService) {}
-
-  protected connectedComponentsChanged(connectedComponents: any[]): void {
-    this.component.content.connectedComponents = connectedComponents;
-    this.projectService.nodeChanged();
-  }
-}
+export class EditComponentAdvancedSharedModule {}

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

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title i18n>Advanced Settings</h2>
+<h2 mat-dialog-title i18n>Advanced Activity Settings</h2>
 <mat-divider />
 <div mat-dialog-content>
   <div #component></div>

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.spec.ts

@@ -19,9 +19,12 @@ describe('EditComponentAdvancedComponent', () => {
         {
           provide: MAT_DIALOG_DATA,
           useValue: {
-            content: { type: 'ShowMyWork' },
-            id: 'component1',
-            nodeId: 'node1'
+            component: {
+              content: { type: 'ShowMyWork' },
+              id: 'component1',
+              nodeId: 'node1'
+            },
+            tab: 'general'
           }
         },
         {

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

@@ -26,18 +26,22 @@ export class EditComponentAdvancedComponent {
   private componentRef: ComponentRef<WISEComponent>;
   constructor(
     private applicationRef: ApplicationRef,
-    @Inject(MAT_DIALOG_DATA) protected component: WISEComponent,
+    @Inject(MAT_DIALOG_DATA) protected data: { component: WISEComponent; tab?: string },
     private injector: EnvironmentInjector
   ) {}
 
   ngAfterViewInit(): void {
-    this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, {
-      hostElement: this.componentElementRef.nativeElement,
-      environmentInjector: this.injector
-    });
+    this.componentRef = createComponent(
+      components[this.data.component.content.type].authoringAdvanced,
+      {
+        hostElement: this.componentElementRef.nativeElement,
+        environmentInjector: this.injector
+      }
+    );
     Object.assign(this.componentRef.instance, {
-      nodeId: this.component.nodeId,
-      componentId: this.component.id
+      nodeId: this.data.component.nodeId,
+      componentId: this.data.component.id,
+      tab: this.data.tab
     });
     this.applicationRef.attachView(this.componentRef.hostView);
   }

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;
-  }
 }