Add copy to clipboard

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

Author: torchiaf

src/console/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { UserViewsComponent } from './components/dashboard/user/user-views/user-views.component';
 import { FileuploadComponent } from './components/widgets/fileupload.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 
 // Required during AOT compilation
 export function httpTranslateLoaderFactory(http: HttpClient) {
@@ -92,6 +93,7 @@ export function httpTranslateLoaderFactory(http: HttpClient) {
     MatProgressSpinnerModule,
     MatTabsModule,
     MatTooltipModule,
+    ClipboardModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

src/console/src/app/components/dashboard/admin/admin-views/admin-views.component.html

@@ -106,7 +106,7 @@
                   <!-- GoTo Column -->
                   <ng-container matColumnDef="GoTo">
                     <th mat-header-cell *matHeaderCellDef></th>
-                    <td mat-cell *matCellDef="let element">
+                    <td mat-cell *matCellDef="let element" matTooltip="{{(element.Session?.length > 0 ? '' : 'GOTO_DISABLED') | translate}}">
                       <button
                         class="goto"
                         [disabled]="deleting || element.Session?.length === 0"
@@ -118,6 +118,21 @@
                     </td>
                   </ng-container>
 
+                  <!-- CopyToClipboard Column -->
+                  <ng-container matColumnDef="CopyToClipboard">
+                    <th mat-header-cell *matHeaderCellDef></th>
+                    <td mat-cell *matCellDef="let element" matTooltip="{{(element.Session?.length > 0 ? '' : 'GOTO_DISABLED') | translate}}">
+                      <button
+                        class="goto"
+                        [disabled]="deleting || element.Session?.length === 0"
+                        mat-mini-fab color="primary"
+                        matTooltip="{{(element.Session?.length > 0 ? 'COPY_TO_CLIP' : 'GOTO_DISABLED') | translate}}"
+                        [cdkCopyToClipboard]="getUrl(element)">
+                        <mat-icon>content_copy</mat-icon>
+                      </button>
+                    </td>
+                  </ng-container>
+
                   <!-- Delete Column -->
                   <ng-container matColumnDef="Delete">
                     <th mat-header-cell *matHeaderCellDef></th>

src/console/src/app/components/dashboard/admin/admin-views/admin-views.component.ts

@@ -42,7 +42,7 @@ export class AdminViewsComponent implements OnInit, OnDestroy {
   dataSource: MatTableDataSource<Row> = new MatTableDataSource();
 
   displayedColumns = ['Id', 'Name', 'Email', 'Phone', 'Status'];
-  innerDisplayedColumns = ['Id', 'Path', 'VScodeSettings', 'GitAuth', 'Delete', 'GoTo'];
+  innerDisplayedColumns = ['Id', 'Path', 'VScodeSettings', 'GitAuth', 'Delete', 'CopyToClipboard', 'GoTo'];
 
   expandedElements: Record<string, boolean> = {};
   collapseDisabled = false;
@@ -171,6 +171,12 @@ export class AdminViewsComponent implements OnInit, OnDestroy {
     }
   }
 
+  public getUrl(element: View) {
+    const url = `${environment.protocol}://${window.location.hostname}${element.Path}?${element.Query}`;
+
+    return url;
+  }
+
   public goToView(element: View) {
     this.cookieService.get('code-server-session');
     this.cookieService.put('code-server-session', element.Session, {
@@ -179,8 +185,6 @@ export class AdminViewsComponent implements OnInit, OnDestroy {
       storeUnencoded: true
     });
 
-    const url = `${environment.protocol}://${window.location.hostname}${element.Path}?${element.Query}`;
-
-    window.open(url, '_blank');
+    window.open(this.getUrl(element), '_blank');
   }
 }

src/console/src/app/components/dashboard/user/user-views/user-views.component.html

@@ -34,7 +34,7 @@
         <!-- GoTo Column -->
         <ng-container matColumnDef="GoTo">
           <th mat-header-cell *matHeaderCellDef></th>
-          <td mat-cell *matCellDef="let element">
+          <td mat-cell *matCellDef="let element" matTooltip="{{(element.Session?.length > 0 ? '' : 'GOTO_DISABLED') | translate}}">
             <button
               class="goto"
               [disabled]="element.Session?.length === 0"

src/console/src/assets/i18n/en.json

@@ -61,5 +61,7 @@
   "GOTO_DISABLED": "Unable to get View Session",
 
   "FIELD_VIEW_SSH_KEY": "Git SSH Key",
-  "COLUMN_GIT_AUTH": "Git Authentication"
+  "COLUMN_GIT_AUTH": "Git Authentication",
+
+  "COPY_TO_CLIP": "Copy Url"
 }

src/console/src/assets/i18n/it.json

@@ -61,5 +61,7 @@
   "GOTO_DISABLED": "Impossible accedere ai dati sessione",
 
   "FIELD_VIEW_SSH_KEY": "Git Chiave SSH",
-  "COLUMN_GIT_AUTH": "Git Auth"
+  "COLUMN_GIT_AUTH": "Git Auth",
+
+  "COPY_TO_CLIP": "Copia Url"
 }