Improve copy command component (#17068)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/services/event-service/event.service.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { EventService } from './event.service';
+import { EventService, HarborEvent } from './event.service';
 import { Subscription } from 'rxjs';
 
 describe('EventServiceService', () => {
@@ -16,12 +16,12 @@ describe('EventServiceService', () => {
 
     it('able to subscribe', () => {
         let result: string;
-        const sub1 = service.subscribe('testEvent', data => {
+        const sub1 = service.subscribe(HarborEvent.SCROLL, data => {
             result = data;
         });
         expect(sub1).toBeTruthy();
         expect(sub1 instanceof Subscription).toEqual(true);
-        service.publish('testEvent', 'resultString');
+        service.publish(HarborEvent.SCROLL, 'resultString');
         sub1.unsubscribe();
         expect(result).toEqual('resultString');
     });

src/portal/src/app/services/event-service/event.service.ts

@@ -13,7 +13,7 @@ export class EventService {
      * @param {function} handler the event handler
      * @return A Subscription to unsubscribe
      */
-    subscribe(topic: string, handler: Function): Subscription {
+    subscribe(topic: HarborEvent, handler: Function): Subscription {
         if (!this._channels[topic]) {
             this._channels[topic] = [];
         }
@@ -30,7 +30,7 @@ export class EventService {
      * @param {function} handler the event handler
      *
      */
-    private unsubscribe(topic: string, handler: Function = null) {
+    private unsubscribe(topic: HarborEvent, handler: Function = null) {
         let t = this._channels[topic];
         if (!t) {
             // Wasn't found, wasn't removed
@@ -60,7 +60,7 @@ export class EventService {
      * @param topic
      * @param data
      */
-    publish(topic: string, data?: any) {
+    publish(topic: HarborEvent, data?: any) {
         const t = this._channels[topic];
         if (!t) {
             return;

src/portal/src/app/shared/components/push-image/copy-input.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ClipboardService } from '../third-party/ngx-clipboard';
 
 export const enum CopyStatus {
     NORMAL,
@@ -10,8 +11,6 @@ export const enum CopyStatus {
     selector: 'hbr-copy-input',
     templateUrl: './copy-input.coponent.html',
     styleUrls: ['./push-image.scss'],
-
-    providers: [],
 })
 export class CopyInputComponent {
     @Input() inputSize: number = 40;
@@ -25,6 +24,8 @@ export class CopyInputComponent {
     @Output() onCopySuccess: EventEmitter<any> = new EventEmitter<any>();
     // eslint-disable-next-line @angular-eslint/no-output-on-prefix
     @Output() onCopyError: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor(private clipboardSrv: ClipboardService) {}
     onSuccess($event: any): void {
         this.state = CopyStatus.SUCCESS;
         this.onCopySuccess.emit($event);
@@ -44,7 +45,10 @@ export class CopyInputComponent {
     }
 
     public get isCopied(): boolean {
-        return this.state === CopyStatus.SUCCESS;
+        return (
+            this.state === CopyStatus.SUCCESS &&
+            this.clipboardSrv?.getCurrentCopiedText() === this.defaultValue
+        );
     }
 
     public get hasCopyError(): boolean {

src/portal/src/app/shared/components/third-party/ngx-clipboard/clipboard.service.ts

@@ -11,6 +11,7 @@ import { WINDOW } from '../ngx-window-token/window-token';
 @Injectable()
 export class ClipboardService {
     private tempTextArea: HTMLTextAreaElement;
+    private _currentCopiedText: string;
     constructor(
         @Inject(DOCUMENT) private document: any,
         @Inject(WINDOW) private window: any
@@ -22,6 +23,10 @@ export class ClipboardService {
         );
     }
 
+    getCurrentCopiedText(): string {
+        return this._currentCopiedText;
+    }
+
     public isTargetValid(
         element: HTMLInputElement | HTMLTextAreaElement
     ): boolean {
@@ -50,6 +55,7 @@ export class ClipboardService {
             this.selectTarget(targetElm, renderer);
             const re = this.copyText();
             this.clearSelection(targetElm, this.window);
+            this._currentCopiedText = targetElm?.value;
             return re;
         } catch (error) {
             return false;
@@ -69,6 +75,7 @@ export class ClipboardService {
             this.document.body.appendChild(this.tempTextArea);
         }
         this.tempTextArea.value = content;
+        this._currentCopiedText = content;
         return this.copyFromInputElement(this.tempTextArea, renderer);
     }