feat(AddComponentButton): Update tooltip text if there is no componen…

…t in the node
WISE-Community · Nov 25, 2024 · 6ab754a · 6ab754a
1 parent f8f363d
commit 6ab754a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 32 deletions.
diff --git a/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html b/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html
@@ -4,14 +4,13 @@
     color="primary"
     [matMenuTriggerFor]="componentMenu"
     #menuTrigger
-    matTooltip="Add component"
+    [matTooltip]="tooltipText"
     matTooltipPosition="above"
-    i18n-matTooltip
   >
     <mat-icon>add_circle</mat-icon>
   </button>
   <mat-menu #componentMenu="matMenu">
-    <button mat-menu-item (click)="addFirstComponent()">
+    <button mat-menu-item (click)="addComponent(null)">
       <mat-icon class="rotate-180 flip-vertical">subdirectory_arrow_left</mat-icon
       ><span i18n>Add component before</span>
     </button>
@@ -23,8 +22,7 @@
   <button
     mat-icon-button
     color="primary"
-    matTooltip="Add component after"
-    i18n-matTooltip
+    [matTooltip]="tooltipText"
     matTooltipPosition="above"
     (click)="addComponent()"
   >

diff --git a/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts b/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts
@@ -31,8 +31,9 @@ import { CommonModule } from '@angular/common';
 export class AddComponentButtonComponent {
   protected firstComponent = false;
   @Input() insertAfterComponentId: string = null;
-  @Input() node: Node;
   @Output() newComponentsEvent: EventEmitter<any> = new EventEmitter<any>();
+  @Input() node: Node;
+  protected tooltipText = $localize`Add component`;
 
   constructor(
     private createComponentService: CreateComponentService,
@@ -43,15 +44,14 @@ export class AddComponentButtonComponent {
   ) {}
 
   ngOnInit(): void {
-    this.setFirstComponent();
+    this.updateUI();
   }
 
-  private setFirstComponent(): void {
+  private updateUI(): void {
     this.firstComponent = this.node.getComponentPosition(this.insertAfterComponentId) === 0;
-  }
-
-  protected addFirstComponent(): void {
-    this.addComponent(null);
+    if (this.node.components.length > 0 && !this.firstComponent) {
+      this.tooltipText = $localize`Add component after`;
+    }
   }
 
   protected addComponent(afterComponent = this.insertAfterComponentId): void {
@@ -78,7 +78,7 @@ export class AddComponentButtonComponent {
           );
           this.projectService.saveProject();
           this.newComponentsEvent.emit([component]);
-          this.setFirstComponent();
+          this.updateUI();
         }
       });
   }

diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
@@ -83,7 +83,12 @@
     }
   </div>
   @if (components.length === 0 && !isGroupNode) {
-    <p i18n>This step does not have any components. Click the + button to add a component.</p>
+    <p i18n>This step does not have any components.</p>
+    <add-component-button
+      class="add-component"
+      [node]="node"
+      (newComponentsEvent)="highlightAndExpandComponents($event)"
+    />
   }
   <div
     cdkDropList

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -1171,7 +1171,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">108</context>
+          <context context-type="linenumber">113</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -11658,29 +11658,32 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">129</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="d26521566057cdb4d3c2cd830dc10711b546ca57" datatype="html">
-        <source>Add component</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html</context>
-          <context context-type="linenumber">7</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="ed9a6298ca889d530052adc26c49baccd78d66df" datatype="html">
         <source>Add component before</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html</context>
-          <context context-type="linenumber">16</context>
+          <context context-type="linenumber">15</context>
         </context-group>
       </trans-unit>
       <trans-unit id="79342ffd66f601a8df6fc4023676dbfa5670da92" datatype="html">
         <source>Add component after</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">18</context>
         </context-group>
+      </trans-unit>
+      <trans-unit id="3307198501674154798" datatype="html">
+        <source>Add component</source>
         <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html</context>
-          <context context-type="linenumber">26</context>
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts</context>
+          <context context-type="linenumber">36</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7570310837284973582" datatype="html">
+        <source>Add component after</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1af10a8f6871a9c689d37a0b26a62df6bef94d02" datatype="html">
@@ -12101,8 +12104,8 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">45,47</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="1944eaae32b2002e6f552fd9c1f5a113c412ad25" datatype="html">
-        <source>This step does not have any components. Click the + button to add a component.</source>
+      <trans-unit id="c92872e436b3c46a4b31e905babbbab139786709" datatype="html">
+        <source>This step does not have any components.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
           <context context-type="linenumber">86</context>
@@ -12112,28 +12115,28 @@ The branches will be removed but the steps will remain in the unit.</source>
         <source>Expand/collapse component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">105</context>
+          <context context-type="linenumber">110</context>
         </context-group>
       </trans-unit>
       <trans-unit id="11cd90245b41b1506efabdcea69d3c5c0964a432" datatype="html">
         <source>Select component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">118</context>
+          <context context-type="linenumber">123</context>
         </context-group>
       </trans-unit>
       <trans-unit id="46c242cc262ba3a868dfd6bd37f555c1ada6877c" datatype="html">
         <source>Delete Component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">139</context>
+          <context context-type="linenumber">144</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d7ba68a8fdef93261bda2e41b70006cda2e16121" datatype="html">
         <source>Move here</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">164</context>
+          <context context-type="linenumber">169</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7035134055292483273" datatype="html">