style(Advanced Unit Authoring): use tabs to organize

src/assets/wise5/authoringTool/add-lesson-button/add-lesson-button.component.ts

@@ -10,9 +10,6 @@ import { ActivatedRoute, Router } from '@angular/router';
   selector: 'add-lesson-button',
   styles: [
     `
-      .rotate-180 {
-        transform: rotate(180deg);
-      }
       .flip-vertical {
         transform: scaleY(-1);
       }

src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html

@@ -24,7 +24,7 @@
   }
   @if (canBranch) {
     <button mat-menu-item (click)="goToCreateBranchView()">
-      <mat-icon class="rotate-180">call_split</mat-icon><span i18n>Branch off this step</span>
+      <mat-icon class="flip-vertical">call_split</mat-icon><span i18n>Branch off this step</span>
     </button>
   }
 </mat-menu>

src/assets/wise5/authoringTool/add-step-button/add-step-button.component.ts

@@ -12,9 +12,6 @@ import { AddStepTarget } from '../../../../app/domain/addStepTarget';
   selector: 'add-step-button',
   styles: [
     `
-      .rotate-180 {
-        transform: rotate(180deg);
-      }
       .flip-vertical {
         transform: scaleY(-1);
       }

src/assets/wise5/authoringTool/advanced/advanced-project-authoring.component.html

@@ -1,99 +1,57 @@
-<div class="flex flex-wrap justify-start items-center gap-2">
-  <button
-    mat-raised-button
-    color="primary"
-    class="topButton enable-in-translation"
-    matTooltip="Show Rubric"
-    matTooltipPosition="above"
-    i18n-matTooltip
-    (click)="toggleRubric()"
-  >
-    <mat-icon>message</mat-icon>
-  </button>
-  <button
-    mat-raised-button
-    color="primary"
-    id="showProjectJSONButton"
-    class="topButton"
-    matTooltip="Show JSON"
-    matTooltipPosition="above"
-    i18n-matTooltip
-    (click)="toggleJSON()"
-  >
-    <mat-icon>code</mat-icon>
-  </button>
-  <button
-    mat-raised-button
-    color="primary"
-    class="topButton"
-    matTooltip="Download Unit"
-    matTooltipPosition="above"
-    i18n-matTooltip
-    (click)="downloadProject()"
-  >
-    <mat-icon>file_download</mat-icon>
-  </button>
-</div>
-<br />
-@if (rubricDisplayed) {
-  <div class="rubric-div">
-    <rubric-authoring />
-  </div>
-}
-@if (jsonDisplayed) {
-  <div>
-    <mat-form-field class="w-full" appearance="outline">
-      <mat-label i18n>Edit Unit JSON</mat-label>
-      <textarea
-        class="mat-body-2"
-        matInput
-        cdkTextareaAutosize
-        [(ngModel)]="projectJSONString"
-        (change)="autoSaveProjectJSONString()"
-      ></textarea>
-    </mat-form-field>
-  </div>
-}
-<div>
-  <label id="navigation-type-label" i18n>Navigation mode:</label>
-  <mat-radio-group
-    aria-labelledby="navigation-type-label"
-    [(ngModel)]="navigationType"
-    (ngModelChange)="updateNavigationType()"
-  >
-    <mat-radio-button color="primary" value="default" i18n
-      >Default (lessons appear in drop-down list and unit plan)</mat-radio-button
-    >
-    <mat-radio-button color="primary" value="tab" i18n
-      >Tabbed (lessons appear as tabs)
-    </mat-radio-button>
-  </mat-radio-group>
-</div>
-<div class="flex flex-wrap justify-start items-center gap-2">
-  <mat-form-field style="width: 400px; max-width: 100%">
-    <mat-label i18n>Unit URL</mat-label>
-    <input matInput value="{{ getProjectURL() }}" disabled="true" />
-  </mat-form-field>
-  <button
-    mat-raised-button
-    color="primary"
-    class="topButton"
-    matTooltip="Copy Unit URL to Clipboard"
-    matTooltipPosition="above"
-    i18n-matTooltip
-    (click)="copyProjectURL()"
-  >
-    <mat-icon>content_paste</mat-icon>
-  </button>
-  <button
-    mat-raised-button
-    color="primary"
-    class="topButton"
-    matTooltip="Open Unit URL in New Tab"
-    matTooltipPosition="above"
-    i18n-matTooltip
-    (click)="openProjectURLInNewTab()"
-  >
-    <mat-icon>open_in_new</mat-icon>
-  </button>
-</div>
+<mat-tab-group dynamicHeight (selectedTabChange)="tabChanged($event)" [selectedIndex]="selectedTab">
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon>settings</mat-icon>&nbsp;<span i18n>General settings</span>
+    </ng-template>
+    <div class="my-4">
+      <label id="navigation-type-label" i18n>Navigation mode:</label>
+      <mat-radio-group
+        aria-labelledby="navigation-type-label"
+        [(ngModel)]="navigationType"
+        (ngModelChange)="setNavigationType()"
+      >
+        <mat-radio-button color="primary" value="default" i18n
+          >Default (lessons appear in drop-down list and unit plan)</mat-radio-button
+        >
+        <mat-radio-button color="primary" value="tab" i18n
+          >Tabbed (lessons appear as tabs)
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+    <button mat-raised-button color="primary" class="topButton" (click)="downloadProject()">
+      <mat-icon>file_download</mat-icon>
+      <span i18n>Download unit</span>
+    </button>
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon>message</mat-icon>&nbsp;<span i18n>Rubric</span>
+    </ng-template>
+    <ng-template matTabContent>
+      <!-- lazy load needed for tinymce to work -->
+      <rubric-authoring />
+    </ng-template>
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label><mat-icon>code</mat-icon>&nbsp;<span i18n>JSON</span></ng-template>
+    <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 Unit JSON</mat-label>
+        <textarea
+          class="mat-body-2"
+          matInput
+          cdkTextareaAutosize
+          [(ngModel)]="projectJSONString"
+          (change)="saveProjectJSONString()"
+        ></textarea>
+      </mat-form-field>
+    </div>
+  </mat-tab>
+</mat-tab-group>

src/assets/wise5/authoringTool/advanced/advanced-project-authoring.component.ts

@@ -2,19 +2,17 @@ import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { filter } from 'rxjs/operators';
 import { isValidJSONString } from '../../common/string/string';
 import { ConfigService } from '../../services/configService';
 import { NotificationService } from '../../services/notificationService';
 import { TeacherProjectService } from '../../services/teacherProjectService';
-import { AssetChooser } from '../project-asset-authoring/asset-chooser';
 import { RubricAuthoringComponent } from '../rubric/rubric-authoring.component';
+import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs';
 
 @Component({
   imports: [
@@ -25,78 +23,54 @@ import { RubricAuthoringComponent } from '../rubric/rubric-authoring.component';
     MatIconModule,
     MatInputModule,
     MatRadioModule,
+    MatTabsModule,
     MatTooltipModule,
     RubricAuthoringComponent
   ],
-  styles: [
-    `
-      .rubric-div {
-        margin-bottom: 20px;
-      }
-
-      .mat-icon {
-        margin: 0px;
-      }
-    `
-  ],
   templateUrl: 'advanced-project-authoring.component.html'
 })
 export class AdvancedProjectAuthoringComponent {
-  protected jsonDisplayed: boolean;
-  protected navigationType: string = 'default';
-  private projectId: number;
+  protected navigationType: 'default' | 'tab';
   protected projectJSONString: string;
-  protected projectScriptFilename: string;
-  protected rubricDisplayed: boolean;
+  protected selectedTab: number;
 
   constructor(
-    private dialog: MatDialog,
     private configService: ConfigService,
     private notificationService: NotificationService,
     private projectService: TeacherProjectService
-  ) {
-    this.projectId = this.configService.getProjectId();
-  }
+  ) {}
 
   ngOnInit(): void {
-    this.setProjectScriptFilename();
-  }
-
-  protected toggleRubric(): void {
-    this.jsonDisplayed = false;
-    this.rubricDisplayed = !this.rubricDisplayed;
+    this.navigationType = this.projectService.project.theme ?? 'default';
+    this.projectJSONString = JSON.stringify(this.projectService.project, null, 4);
   }
 
-  protected toggleJSON(): void {
-    this.rubricDisplayed = false;
-    if (this.jsonDisplayed) {
-      this.hideJSON();
-    } else {
+  protected tabChanged(event: MatTabChangeEvent): void {
+    if (event.index === 2) {
       this.showJSON();
+    } else {
+      this.hideJSON();
     }
   }
 
+  private showJSON(): void {
+    this.notificationService.showJSONValidMessage();
+  }
+
   private hideJSON(): void {
     if (isValidJSONString(this.projectJSONString)) {
-      this.jsonDisplayed = false;
       this.notificationService.hideJSONValidMessage();
     } else if (
       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.`
       )
     ) {
-      this.jsonDisplayed = false;
       this.notificationService.hideJSONValidMessage();
+      this.selectedTab = 2; // re-open JSON tab so user can review JSON
     }
   }
 
-  private showJSON(): void {
-    this.jsonDisplayed = true;
-    this.projectJSONString = JSON.stringify(this.projectService.project, null, 4);
-    this.notificationService.showJSONValidMessage();
-  }
-
-  protected autoSaveProjectJSONString(): void {
+  protected saveProjectJSONString(): void {
     try {
       this.saveProjectJSON(this.projectJSONString);
       this.notificationService.showJSONValidMessage();
@@ -108,61 +82,14 @@ export class AdvancedProjectAuthoringComponent {
   private saveProjectJSON(projectJSONString: string): void {
     const project = JSON.parse(projectJSONString);
     this.projectService.setProject(project);
-    this.setProjectScriptFilename();
     this.projectService.checkPotentialStartNodeIdChangeThenSaveProject();
   }
 
-  private setProjectScriptFilename(): void {
-    this.projectScriptFilename = this.projectService.getProjectScriptFilename();
-  }
-
-  protected chooseProjectScriptFile(): void {
-    new AssetChooser(this.dialog, null, null, this.projectId)
-      .open('scriptFilename')
-      .afterClosed()
-      .pipe(filter((data) => data != null))
-      .subscribe((data: any) => {
-        this.assetSelected(data);
-      });
-  }
-
-  private assetSelected({ assetItem }): void {
-    this.projectScriptFilename = assetItem.fileName;
-    this.projectScriptFilenameChanged();
-  }
-
   protected downloadProject(): void {
-    window.location.href = `${this.configService.getWISEBaseURL()}/api/project/export/${
-      this.projectId
-    }`;
-  }
-
-  protected openProjectURLInNewTab(): void {
-    window.open(this.getProjectURL(), '_blank');
-  }
-
-  protected copyProjectURL(): void {
-    const textArea = document.createElement('textarea');
-    textArea.value = this.getProjectURL();
-    document.body.appendChild(textArea);
-    textArea.select();
-    document.execCommand('copy');
-    document.body.removeChild(textArea);
-  }
-
-  protected getProjectURL(): string {
-    return window.location.origin + this.configService.getConfigParam('projectURL');
-  }
-
-  protected projectScriptFilenameChanged(): void {
-    this.projectService.setProjectScriptFilename(this.projectScriptFilename);
-    if (this.showJSON) {
-      this.projectJSONString = JSON.stringify(this.projectService.project, null, 4);
-    }
-    this.projectService.saveProject();
+    window.location.href = `/api/project/export/${this.configService.getProjectId()}`;
   }
 
-  protected updateNavigationType(): void {
+  protected setNavigationType(): void {
     this.projectService.project.theme = this.navigationType;
     this.projectService.saveProject();
   }

src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts

@@ -16,9 +16,6 @@ import { MatMenuModule } from '@angular/material/menu';
   selector: 'add-component-button',
   styles: [
     `
-      .rotate-180 {
-        transform: rotate(180deg);
-      }
       .flip-vertical {
         transform: scaleY(-1);
       }