Feature/add snack bar to copy link to clipboard action in access table (#4175)

* Add snack bar

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the _Copy link to clipboard_ action by adding a confirmation on success in the access table to share the portfolio
 - Improved the endpoint to fetch the logo of an asset or a platform by sending the original MIME type
 - Eliminated `got` in favor of using `fetch`
 - Changed the `REDIS_HOST` from `localhost` to `redis` in `.env.example`

apps/client/src/app/components/access-table/access-table.component.html

@@ -66,7 +66,7 @@
         </button>
         <mat-menu #transactionMenu="matMenu" xPosition="before">
           @if (element.type === 'PUBLIC') {
-            <button mat-menu-item (click)="onCopyToClipboard(element.id)">
+            <button mat-menu-item (click)="onCopyUrlToClipboard(element.id)">
               <ng-container i18n>Copy link to clipboard</ng-container>
             </button>
             <hr class="my-0" />

apps/client/src/app/components/access-table/access-table.component.ts

@@ -12,6 +12,7 @@ import {
   OnChanges,
   Output
 } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
@@ -34,7 +35,8 @@ export class AccessTableComponent implements OnChanges {
 
   public constructor(
     private clipboard: Clipboard,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private snackBar: MatSnackBar
   ) {}
 
   public ngOnChanges() {
@@ -55,8 +57,16 @@ export class AccessTableComponent implements OnChanges {
     return `${this.baseUrl}/${languageCode}/p/${aId}`;
   }
 
-  public onCopyToClipboard(aId: string): void {
+  public onCopyUrlToClipboard(aId: string): void {
     this.clipboard.copy(this.getPublicUrl(aId));
+
+    this.snackBar.open(
+      '✅ ' + $localize`Link has been copied to the clipboard`,
+      undefined,
+      {
+        duration: 3000
+      }
+    );
   }
 
   public onDeleteAccess(aId: string) {