Feat: Show Success/Failure Message Toast After Task/User Story Generation/Regeneration

.changeset/whole-dancers-cry.md

@@ -0,0 +1,5 @@
+---
+"specif-ai": patch
+---
+
+Introduce success & failure toast messages for Task/User Story generation/regeneration

ui/src/app/constants/app.constants.ts

@@ -156,6 +156,18 @@ export const TOASTER_MESSAGES = {
       FAILURE: (entityType: string, entityId: string) =>
         TOASTER_MESSAGES_DEFAULT_TEMPLATE.FAILURE(entityType, 'copy', entityId),
     },
+    GENERATE: {
+      SUCCESS: (entityType: string, isRegenerate = false) =>
+        TOASTER_MESSAGES_DEFAULT_TEMPLATE.SUCCESS(
+          entityType,
+          isRegenerate ? 'regenerated' : 'generated',
+        ),
+      FAILURE: (entityType: string, isRegenerate = false) =>
+        TOASTER_MESSAGES_DEFAULT_TEMPLATE.FAILURE(
+          entityType,
+          isRegenerate ? 'regenerate' : 'generate',
+        ),
+    },
   },
 };
 

ui/src/app/pages/tasks/task-list/task-list.component.html

@@ -43,7 +43,7 @@ <h2 class="text-md font-semibold text-gray-600">Tasks</h2>
               theme="secondary"
               size="sm"
               rounded="lg"
-              (click)="addExtraContext()"
+              (click)="addExtraContext(taskList.length > 0)"
             />
           </ng-container>
 
@@ -87,6 +87,7 @@ <h2 class="text-md font-semibold text-gray-600">Tasks</h2>
                 [isIconButton]="true"
                 icon="heroDocumentDuplicate"
                 (click)="copyTaskContent($event, task)"
+                matTooltip="Copy"
               />
             </div>
           </app-list-item>

ui/src/app/pages/tasks/task-list/task-list.component.ts

@@ -22,6 +22,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ProjectsState } from '../../../store/projects/projects.state';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { ButtonComponent } from '../../../components/core/button/button.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgIconComponent } from '@ng-icons/core';
 import { ListItemComponent } from '../../../components/core/list-item/list-item.component';
 import { BadgeComponent } from '../../../components/core/badge/badge.component';
@@ -46,6 +47,7 @@ import { BehaviorSubject } from 'rxjs';
     ListItemComponent,
     BadgeComponent,
     SearchInputComponent,
+    MatTooltipModule,
   ],
 })
 export class TaskListComponent implements OnInit, OnDestroy {
@@ -145,7 +147,7 @@ export class TaskListComponent implements OnInit, OnDestroy {
     });
   }
 
-  addExtraContext() {
+  addExtraContext(regenerate: boolean = false) {
     const dialogText = {
       title: 'Generate User Story Tasks',
       description:
@@ -159,18 +161,18 @@ export class TaskListComponent implements OnInit, OnDestroy {
     });
 
     dialogRef.componentInstance.generate.subscribe((emittedValue) => {
-      this.refineUserStoryIntoTasks(emittedValue);
+      this.refineUserStoryIntoTasks(regenerate, emittedValue);
     });
   }
 
-  refineUserStoryIntoTasks(extraContext: string) {
+  refineUserStoryIntoTasks(regenerate: boolean = false, extraContext: string) {
     let request: ITaskRequest = {
       appId: this.config.projectId,
       reqId: this.config.newFileName.split('-')[0],
       featureId: this.selectedUserStory.id,
       name: this.selectedUserStory.name,
       description: this.selectedUserStory.description,
-      regenerate: true,
+      regenerate: regenerate,
       technicalDetails: this.metadata.technicalDetails || '',
       extraContext: extraContext,
     };
@@ -184,17 +186,23 @@ export class TaskListComponent implements OnInit, OnDestroy {
           tasks: tasksResponse,
         };
         this.userStories = updatedUserStories;
-        this.updateWithUserStories(updatedUserStories[this.config.i]);
+        this.updateWithUserStories(
+          updatedUserStories[this.config.i],
+          regenerate,
+        );
       },
       error: (error) => {
         console.error('There was an error!', error);
         this.loadingService.setLoading(false);
+        this.toastService.showError(
+          TOASTER_MESSAGES.ENTITY.GENERATE.FAILURE(this.entityType, regenerate),
+        );
       },
     });
     this.dialog.closeAll();
   }
 
-  updateWithUserStories(userStories: IUserStory) {
+  updateWithUserStories(userStories: IUserStory, regenerate: boolean = false) {
     this.store.dispatch(
       new EditUserStory(
         `${this.config.folderName}/${this.config.newFileName}`,
@@ -204,6 +212,9 @@ export class TaskListComponent implements OnInit, OnDestroy {
     setTimeout(() => {
       this.getLatestUserStories();
       this.loadingService.setLoading(false);
+      this.toastService.showSuccess(
+        TOASTER_MESSAGES.ENTITY.GENERATE.SUCCESS(this.entityType, regenerate),
+      );
     }, 2000);
   }
 

ui/src/app/pages/user-stories/user-stories.component.html

@@ -19,19 +19,14 @@ <h2 class="text-md font-semibold text-gray-600">User Stories</h2>
 
         <div class="flex items-center justify-between gap-3">
           <app-button
-            *ngIf="userStories.length === 0"
-            buttonContent="Generate User Stories"
+            [buttonContent]="
+              userStories.length === 0
+                ? 'Generate User Stories'
+                : 'Regenerate User Stories'
+            "
             theme="secondary"
             size="sm"
-            (click)="addMoreContext(true)"
-            rounded="lg"
-          />
-          <app-button
-            *ngIf="userStories.length > 0"
-            buttonContent="Regenerate User Stories"
-            theme="secondary"
-            size="sm"
-            (click)="addMoreContext(true)"
+            (click)="addMoreContext(userStories.length > 0)"
             rounded="lg"
           />
           <app-button

ui/src/app/pages/user-stories/user-stories.component.ts

@@ -44,7 +44,10 @@ import { NgIconComponent } from '@ng-icons/core';
 import { ListItemComponent } from '../../components/core/list-item/list-item.component';
 import { BadgeComponent } from '../../components/core/badge/badge.component';
 import { ConfirmationDialogComponent } from 'src/app/components/confirmation-dialog/confirmation-dialog.component';
-import { CONFIRMATION_DIALOG, TOASTER_MESSAGES } from '../../constants/app.constants';
+import {
+  CONFIRMATION_DIALOG,
+  TOASTER_MESSAGES,
+} from '../../constants/app.constants';
 import { SearchInputComponent } from '../../components/core/search-input/search-input.component';
 import { SearchService } from '../../services/search/search.service';
 import { BehaviorSubject } from 'rxjs';
@@ -268,12 +271,14 @@ export class UserStoriesComponent implements OnInit {
       next: (response) => {
         this.userStories = response;
         this.generateTasks(regenerate).then(() => {
-          this.updateWithUserStories(this.userStories);
+          this.updateWithUserStories(this.userStories, regenerate);
         });
       },
       error: (error) => {
         this.loadingService.setLoading(false);
-        console.error('Error fetching user stories:', error);
+        this.toast.showError(
+          TOASTER_MESSAGES.ENTITY.GENERATE.FAILURE(this.entityType, regenerate),
+        );
       },
     });
     this.dialog.closeAll();
@@ -308,7 +313,10 @@ export class UserStoriesComponent implements OnInit {
     return Promise.all(requests);
   }
 
-  updateWithUserStories(userStories: IUserStory[]) {
+  updateWithUserStories(
+    userStories: IUserStory[],
+    regenerate: boolean = false,
+  ) {
     this.store.dispatch(
       new CreateFile(
         `${this.navigation.folderName}`,
@@ -320,6 +328,9 @@ export class UserStoriesComponent implements OnInit {
     setTimeout(() => {
       this.getLatestUserStories();
       this.loadingService.setLoading(false);
+      this.toast.showSuccess(
+        TOASTER_MESSAGES.ENTITY.GENERATE.SUCCESS(this.entityType, regenerate),
+      );
     }, 2000);
   }