feat(attachments): u#3727 delete attachment

javascript/apps/taiga-e2e/src/e2e/project/story-detail/story-detail-attachments.cy.ts

@@ -13,21 +13,25 @@ import {
   Story,
   WorkspaceMockFactory,
 } from '@taiga/data';
-import { uploadFiles } from '@test/support/helpers/attachments.helper';
-import * as commentsHelper from '@test/support/helpers/comments.helper';
+import {
+  uploadFiles,
+  initDelete,
+} from '@test/support/helpers/attachments.helper';
 import {
   createFullProjectInWSRequest,
   createStoryRequest,
   getProjectWorkflows,
 } from '@test/support/helpers/project.helpers';
 import { createWorkspaceRequest } from '@test/support/helpers/workspace.helpers';
+import * as commentsHelper from '@test/support/helpers/comments.helper';
 
 const workspace = WorkspaceMockFactory();
 const projectMock = ProjectMockFactory();
 
 describe('StoryDetail attachments', () => {
   let story!: Story;
   let project!: Project;
+  const undoTime = 5000;
 
   before(() => {
     cy.login();
@@ -73,9 +77,28 @@ describe('StoryDetail attachments', () => {
     cy.getBySel('attachment').should('have.length', 2);
   });
 
+  it('delete', () => {
+    cy.getBySel('attachment-row')
+      .its('length')
+      .then((attachments) => {
+        initDelete(0);
+
+        cy.getBySel('undo-action').should('be.visible');
+
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.wait(undoTime);
+
+        cy.getBySel('attachment-row').should('have.length', attachments - 1);
+      });
+  });
+
   it('paginate', () => {
     uploadFiles(['cypress/fixtures/file1.txt', 'cypress/fixtures/file2.txt']);
     uploadFiles(['cypress/fixtures/file1.txt', 'cypress/fixtures/file2.txt']);
+    uploadFiles(['cypress/fixtures/file1.txt', 'cypress/fixtures/file2.txt']);
+    uploadFiles(['cypress/fixtures/file1.txt', 'cypress/fixtures/file2.txt']);
+    uploadFiles(['cypress/fixtures/file1.txt', 'cypress/fixtures/file2.txt']);
+    uploadFiles(['cypress/fixtures/file1.txt', 'cypress/fixtures/file2.txt']);
 
     cy.getBySel('page-button').should('have.length', 2);
   });

javascript/apps/taiga-e2e/src/support/helpers/attachments.helper.ts

@@ -9,3 +9,7 @@
 export const uploadFiles = (files: string[]) => {
   cy.getBySel('upload-attachment').selectFile(files, { force: true });
 };
+
+export const initDelete = (index: number) => {
+  cy.getBySel('delete-attachment').eq(index).click();
+};

javascript/apps/taiga/.eslintrc.json

@@ -39,28 +39,7 @@
             }
           }
         ],
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/member-ordering": [
-          "error",
-          {
-            "default": [
-              "decorated-field",
-              "decorated-get",
-              "decorated-set",
-              "decorated-method",
-              "field",
-              "public-get",
-              "protected-get",
-              "private-get",
-              "public-set",
-              "protected-set",
-              "private-set",
-              "public-method",
-              "protected-method",
-              "private-method"
-            ]
-          }
-        ]
+        "@typescript-eslint/no-non-null-assertion": "off"
       }
     },
     {

javascript/apps/taiga/src/app/modules/project/data-access/+state/actions/project.actions.ts

@@ -146,5 +146,9 @@ export const projectEventActions = createActionGroup({
       storyRef: Story['ref'];
       attachment: Attachment;
     }>(),
+    'Delete attachment': props<{
+      storyRef: Story['ref'];
+      attachment: Attachment;
+    }>(),
   },
 });

javascript/apps/taiga/src/app/modules/project/feature-shell/project-feature-shell.component.ts

@@ -301,6 +301,20 @@ export class ProjectFeatureShellComponent implements OnDestroy, AfterViewInit {
         );
       });
 
+    this.wsService
+      .projectEvents<{ ref: Story['ref']; attachment: Attachment }>(
+        'stories.attachments.delete'
+      )
+      .pipe(untilDestroyed(this))
+      .subscribe((eventResponse) => {
+        this.store.dispatch(
+          projectEventActions.deleteAttachment({
+            storyRef: eventResponse.event.content.ref,
+            attachment: eventResponse.event.content.attachment,
+          })
+        );
+      });
+
     this.wsService
       .projectEvents<{
         reorder: {

javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/actions/story-detail.actions.ts

@@ -90,6 +90,11 @@ export const StoryDetailActions = createActionGroup({
       storyRef: Story['ref'];
       projectId: Project['id'];
     }>(),
+    'Delete attachment': props<{
+      id: Attachment['id'];
+      storyRef: Story['ref'];
+      projectId: Project['id'];
+    }>(),
   },
 });
 
@@ -154,5 +159,8 @@ export const StoryDetailApiActions = createActionGroup({
     'Upload attachment success': props<{
       attachment: Attachment;
     }>(),
+    'Delete attachment success': props<{
+      id: Attachment['id'];
+    }>(),
   },
 });

javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/effects/story-detail-attachments.effects.spec.ts

@@ -37,22 +37,39 @@ describe('StoryDetailAttachmentsEffects', () => {
     effects = spectator.service;
   });
 
-  describe('initStory$', () => {
-    it('should fetch attachments', () => {
-      const action = StoryDetailActions.initStory({
-        projectId: '1',
-        storyRef: 1,
-      });
-      const responseAction = StoryDetailApiActions.fetchAttachments({
-        projectId: '1',
-        storyRef: 1,
-      });
+  it('should fetch attachments', () => {
+    const action = StoryDetailActions.initStory({
+      projectId: '1',
+      storyRef: 1,
+    });
+    const responseAction = StoryDetailApiActions.fetchAttachments({
+      projectId: '1',
+      storyRef: 1,
+    });
 
-      actions$ = hot('-a', { a: action });
-      const expected = cold('-b', { b: responseAction });
+    actions$ = hot('-a', { a: action });
+    const expected = cold('-b', { b: responseAction });
+
+    expect(effects.initStory$).toBeObservable(expected);
+  });
 
-      expect(effects.initStory$).toBeObservable(expected);
+  it('delete attachment', () => {
+    const action = StoryDetailActions.deleteAttachment({
+      projectId: '1',
+      storyRef: 1,
+      id: '1',
+    });
+    const responseAction = StoryDetailApiActions.deleteAttachmentSuccess({
+      id: '1',
     });
+
+    const projectApiService = spectator.inject(ProjectApiService);
+    projectApiService.deleteAttachment.mockReturnValue(cold('-a', { a: null }));
+
+    actions$ = hot('-a', { a: action });
+    const expected = cold('--b', { b: responseAction });
+
+    expect(effects.deleteAttachment$).toBeObservable(expected);
   });
 
   describe('fetchAttachments$', () => {

javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/effects/story-detail-attachments.effects.ts

@@ -16,7 +16,7 @@ import { EMPTY, catchError, map, merge, mergeMap } from 'rxjs';
 import { HttpErrorResponse, HttpEventType } from '@angular/common/http';
 import { ProjectApiService } from '@taiga/api';
 import { AppService } from '~/app/services/app.service';
-import { fetch } from '@ngrx/router-store/data-persistence';
+import { fetch, pessimisticUpdate } from '@ngrx/router-store/data-persistence';
 import { filterNil } from '~/app/shared/utils/operators';
 import { v4 } from 'uuid';
 @Injectable()
@@ -101,4 +101,26 @@ export class StoryDetailAttachmentsEffects {
       })
     );
   });
+
+  public deleteAttachment$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(StoryDetailActions.deleteAttachment),
+      pessimisticUpdate({
+        run: (action) => {
+          return this.projectApiService
+            .deleteAttachment(action.projectId, action.storyRef, action.id)
+            .pipe(
+              map(() => {
+                return StoryDetailApiActions.deleteAttachmentSuccess({
+                  id: action.id,
+                });
+              })
+            );
+        },
+        onError: (_, httpResponse: HttpErrorResponse) => {
+          this.appService.toastGenericError(httpResponse);
+        },
+      })
+    );
+  });
 }

javascript/apps/taiga/src/app/modules/project/story-detail/data-access/+state/reducers/story-detail.reducer.ts

@@ -459,6 +459,13 @@ export const reducer = createImmerReducer(
       return state;
     }
   ),
+  on(StoryDetailActions.deleteAttachment, (state, { id }): StoryDetailState => {
+    state.attachments = state.attachments.filter((it) => {
+      return it.id !== id;
+    });
+
+    return state;
+  }),
   on(
     projectEventActions.newAttachment,
     (state, { attachment, storyRef }): StoryDetailState => {
@@ -468,6 +475,20 @@ export const reducer = createImmerReducer(
 
       state.attachments.unshift(attachment);
 
+      return state;
+    }
+  ),
+  on(
+    projectEventActions.deleteAttachment,
+    (state, { attachment, storyRef }): StoryDetailState => {
+      if (state.story?.ref !== storyRef) {
+        return state;
+      }
+
+      state.attachments = state.attachments.filter((it) => {
+        return it.id !== attachment.id;
+      });
+
       return state;
     }
   )

javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.css

@@ -272,3 +272,7 @@ tg-attachments,
 tg-story-detail-description {
   margin-block-end: var(--spacing-16);
 }
+
+.attachments-side-view {
+  --undo-inline-size: 100%;
+}

javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.html

@@ -279,13 +279,19 @@
                     "></tg-story-detail-description>
 
                   <tg-attachments
+                    [class.attachments-side-view]="
+                      vm.selectedStoryView === 'side-view'
+                    "
                     [attachments]="vm.attachments"
                     [loadingAttachments]="vm.loadingAttachments"
                     [paginationItems]="
                       vm.selectedStoryView === 'side-view' ? 5 : 9
                     "
                     [canEdit]="vm.canEdit"
-                    (uploadFiles)="onUploadFiles($event)"></tg-attachments>
+                    (uploadFiles)="onUploadFiles($event)"
+                    (deleteAttachment)="
+                      onDeleteAttachment($event)
+                    "></tg-attachments>
 
                   <tg-comments
                     [comments]="vm.comments"

javascript/apps/taiga/src/app/modules/project/story-detail/story-detail.component.ts

@@ -591,6 +591,16 @@ export class StoryDetailComponent {
       });
   }
 
+  public onDeleteAttachment(id: Attachment['id']) {
+    this.store.dispatch(
+      StoryDetailActions.deleteAttachment({
+        id,
+        projectId: this.state.get('project').id,
+        storyRef: this.state.get('story').ref,
+      })
+    );
+  }
+
   public onUploadFiles(files: File[]) {
     this.store.dispatch(
       StoryDetailActions.uploadAttachments({

javascript/apps/taiga/src/app/shared/attachments/attachments.component.ts

@@ -50,12 +50,17 @@ import { trackByValue } from '../utils/track-by-value';
   ],
 })
 export class AttachmentsComponent {
+  private state = inject(AttachmentsState);
+
   @ViewChild('fileInput')
   public fileInput!: ElementRef<HTMLInputElement>;
 
   @Output()
   public uploadFiles = new EventEmitter<File[]>();
 
+  @Output()
+  public deleteAttachment = this.state.deleteAttachment$;
+
   @Input()
   public set canEdit(canEdit: boolean) {
     this.state.set({ canEdit });
@@ -76,7 +81,6 @@ export class AttachmentsComponent {
     this.state.set({ loadingAttachments });
   }
 
-  public state = inject(AttachmentsState);
   public attachmentsTotal = toSignal(
     this.state.select().pipe(
       map(({ attachments, loadingAttachments }) => {