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

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

@@ -1,17 +1,24 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, inject, Input } from '@angular/core';
 import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 import { Component } from '../../../assets/wise5/common/Component';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeService';
 import { moveObjectDown, moveObjectUp } from '../../../assets/wise5/common/array/array';
+import { ComponentServiceLookupService } from '../../../assets/wise5/services/componentServiceLookupService';
 
 @Directive()
 export abstract class EditAdvancedComponentComponent {
+  protected aiEnabled: boolean;
   component: Component;
   componentContent: ComponentContent;
+  protected selectedTabIndex: number = 0;
+
   @Input() componentId: string;
   @Input() nodeId: string;
+  @Input() tab: string = 'general';
+
+  private componentServiceLookupService = inject(ComponentServiceLookupService);
 
   constructor(
     protected nodeService: TeacherNodeService,
@@ -22,7 +29,29 @@ export abstract class EditAdvancedComponentComponent {
   ngOnInit(): void {
     this.componentContent = this.teacherProjectService.getComponent(this.nodeId, this.componentId);
     this.component = new Component(this.componentContent, this.nodeId);
+    this.aiEnabled = this.teacherProjectService.getProject().ai?.enabled;
+    if (this.aiEnabled && ['Discussion', 'OpenResponse'].includes(this.component.content.type)) {
+      if (this.component.content.ai == null) {
+        const componentService = this.componentServiceLookupService.getService(
+          this.component.content.type
+        );
+        this.component.content.ai = {
+          teacherSummarySystemPrompt: componentService.getDefaultTeacherSummarySystemPrompt(
+            this.component.content.prompt
+          )
+        };
+      }
+    }
     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,63 @@
-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';
+import { EditComponentSummarizerSystemPromptComponent } from '../edit-component-summarizer-system-prompt/edit-component-summarizer-system-prompt.component';
 
-@Component({
+@NgModule({
   imports: [
-    EditComponentConstraintsComponent,
+    EditComponentAddToNotebookButtonComponent,
+    EditComponentSaveButtonComponent,
+    EditComponentSubmitButtonComponent,
+    EditComponentMaxSubmitComponent,
+    EditConnectedComponentsComponent,
     EditComponentDefaultFeedback,
-    EditComponentExcludeFromTotalScoreComponent,
     EditComponentMaxScoreComponent,
-    EditComponentMaxSubmitComponent,
-    EditComponentJsonComponent,
+    EditComponentExcludeFromTotalScoreComponent,
+    EditComponentWidthComponent,
     EditComponentRubricComponent,
+    EditComponentSummarizerSystemPromptComponent,
+    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,
+    EditComponentSummarizerSystemPromptComponent,
+    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,11 +1,13 @@
-<h2 mat-dialog-title i18n>Advanced Settings</h2>
-<mat-divider />
-<div mat-dialog-content>
-  <div #component></div>
+<div class="edit-component-advanced">
+  <h2 mat-dialog-title i18n>Advanced Activity Settings</h2>
+  <mat-divider />
+  <div mat-dialog-content>
+    <div #component></div>
+  </div>
+  <mat-divider />
+  <mat-dialog-actions align="end">
+    <button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
+      Close
+    </button>
+  </mat-dialog-actions>
 </div>
-<mat-divider />
-<mat-dialog-actions align="end">
-  <button class="enable-in-translation" mat-button mat-dialog-close cdkFocusRegionstart i18n>
-    Close
-  </button>
-</mat-dialog-actions>

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

@@ -8,6 +8,7 @@ import { NotificationService } from '../../../assets/wise5/services/notification
 import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeService';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { EditComponentAdvancedComponent } from './edit-component-advanced.component';
+import { ComponentServiceLookupService } from '../../../assets/wise5/services/componentServiceLookupService';
 
 let component: EditComponentAdvancedComponent;
 let fixture: ComponentFixture<EditComponentAdvancedComponent>;
@@ -19,9 +20,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'
           }
         },
         {
@@ -31,6 +35,7 @@ describe('EditComponentAdvancedComponent', () => {
           }
         },
         MockProviders(
+          ComponentServiceLookupService,
           TeacherNodeService,
           NotebookService,
           NotificationService,
@@ -44,6 +49,8 @@ describe('EditComponentAdvancedComponent', () => {
     spyOn(TestBed.inject(TeacherProjectService), 'getComponent').and.returnValue({
       type: 'ShowMyWork'
     } as ComponentContent);
+    spyOn(TestBed.inject(TeacherProjectService), 'getProject').and.returnValue({});
+
     fixture.detectChanges();
   });
 

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

@@ -6,7 +6,8 @@ import {
   ElementRef,
   EnvironmentInjector,
   Inject,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -15,9 +16,28 @@ import { Component as WISEComponent } from '../../../assets/wise5/common/Compone
 import { components } from '../../../assets/wise5/components/Components';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   imports: [MatDivider, MatDialogModule, MatButtonModule],
   styles: [
-    '.mat-divider { margin: 0 -16px; } .mat-mdc-dialog-content { padding-top: 10px !important; padding-bottom: 10px !important; }'
+    `
+      .edit-component-advanced {
+        --mat-tab-divider-color: var(--mat-divider-color);
+        --mat-tab-divider-height: 1px;
+        .mat-divider {
+          margin: 0 -16px;
+        }
+        .mat-mdc-tab-body-content {
+          padding: 16px 0;
+        }
+        .mat-mdc-tab-header {
+          position: sticky;
+          top: 0;
+          z-index: 2;
+          background-color: white;
+          margin: 0 -16px;
+        }
+      }
+    `
   ],
   templateUrl: './edit-component-advanced.component.html'
 })
@@ -26,18 +46,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>