Merge pull request #56 from gRoussac/dev

Fix display bug on named keys + result dblclick

www/apps/frontend/src/styles.scss

@@ -66,3 +66,11 @@ h2.title {
   top: 220px !important;
   right: 17px !important;
 }
+.hljs-string {
+  color: #ff473e !important;
+  user-select: all !important;
+  cursor: copy;
+}
+.hljs-string.selected {
+  color: #4286f4 !important;
+}

www/libs/feature/deployer/src/lib/balance/balance.component.html

@@ -16,6 +16,7 @@ <h2 class="title">Purse</h2>
           type="search"
           placeholder="ex: uref-0x"
           (change)="(true)"
+          (dblclick)="select($event)"
           (keyup.enter)="getBalance()"
         />
       </div>

www/libs/feature/deployer/src/lib/balance/balance.component.ts

@@ -70,5 +70,9 @@ export class BalanceComponent implements AfterViewInit, OnDestroy {
     this.resultService.copyClipboard(value);
   }
 
+  select($event: Event) {
+    ($event.target as HTMLInputElement).select();
+  }
+
 }
 

www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.html

@@ -221,6 +221,7 @@ <h2 class="title">Deploy</h2>
           type="search"
           [value]="sessionHash || ''"
           (change)="onSessionHashChange($event)"
+          (dblclick)="select($event)"
           placeholder="ex: hash-0x"
           [attr.disabled]="isSessionHashDisabled ? true : null"
         />

www/libs/feature/deployer/src/lib/put-deploy/put-deploy.component.ts

@@ -21,7 +21,6 @@ import { StorageService } from '@casper-util/storage';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PutDeployComponent implements AfterViewInit, OnDestroy {
-  @Input() argument!: string;
   @Output() connect: EventEmitter<void> = new EventEmitter<void>();
   @Output() edit: EventEmitter<void> = new EventEmitter<void>();
   @ViewChild('chainNameElt') chainNameElt!: ElementRef;
@@ -37,6 +36,19 @@ export class PutDeployComponent implements AfterViewInit, OnDestroy {
   @ViewChild('publicKeyElt') publicKeyElt!: ElementRef;
   @ViewChild('argsElt') argsElt!: ElementRef;
   @ViewChild('isPackageElt') isPackageElt!: ElementRef;
+  @Input() set argument(value: string) {
+    if (!value) {
+      return;
+    }
+    this._argument = value.trim();
+    setTimeout(() => {
+      this.onArgsChange();
+    });
+  }
+
+  get argument(): string {
+    return this._argument;
+  }
 
   readonly window = this.document.defaultView;
   readonly quoteRegex = new RegExp(['^', "'", '+|', "'", '+$'].join(''), 'g');
@@ -60,6 +72,7 @@ export class PutDeployComponent implements AfterViewInit, OnDestroy {
   private deploy?: DeployUtil.Deploy;
   private getStateSubscription!: Subscription;
   private getBlockStateSubscription!: Subscription;
+  private _argument!: string;
 
   constructor(
     @Inject(DOCUMENT) private document: Document,
@@ -345,7 +358,8 @@ export class PutDeployComponent implements AfterViewInit, OnDestroy {
   }
 
   onArgsChange() {
-    const deploy_args = this.argsElt.nativeElement.value;
+    const deploy_args = this.argsElt?.nativeElement.value;
+    console.log(deploy_args);
     deploy_args && this.storageService.setState({ deploy_args });
   }
 
@@ -419,6 +433,10 @@ export class PutDeployComponent implements AfterViewInit, OnDestroy {
     this.checkEntryPoints();
   }
 
+  select($event: Event) {
+    ($event.target as HTMLInputElement).select();
+  }
+
   private checkEntryPoints() {
     if (this.sessionName) {
       this.getEntryPoints(this.sessionName);

www/libs/feature/deployer/src/lib/query-global-state/query-global-state.component.html

@@ -23,6 +23,7 @@ <h2 class="title">Keys</h2>
           type="search"
           placeholder="ex: uref-0x || hash-0x || account-hash-0x || dictionnary-0x"
           (change)="onKeyChange()"
+          (dblclick)="select($event)"
           (keyup.enter)="getBlockState()"
         />
         <span

www/libs/feature/deployer/src/lib/query-global-state/query-global-state.component.scss

@@ -4,3 +4,7 @@
     cursor: pointer;
   }
 }
+
+input {
+  user-select: all !important;
+}

www/libs/feature/deployer/src/lib/query-global-state/query-global-state.component.ts

@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs';
 import { ResultService } from '../result/result.service';
 import { StoredValue } from 'casper-js-sdk/dist/lib/StoredValue';
 import { EnvironmentConfig, ENV_CONFIG } from '@casper-util/config';
-import { CLPublicKey } from 'casper-js-sdk';
+import { CLPublicKey, decodeBase16 } from 'casper-js-sdk';
 import { StorageService } from '@casper-util/storage';
 
 @Component({
@@ -25,12 +25,17 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
   @Output() connect: EventEmitter<void> = new EventEmitter<void>();
   @ViewChild('keyElt') keyElt!: ElementRef;
   @ViewChild('pathElt') pathElt!: ElementRef;
+  @ViewChild('selectKeyElt') selectKeyElt!: ElementRef;
   options: string[] = [''];
 
   private getStateSubscription!: Subscription;
   private getBlockStateSubscription!: Subscription;
   private _hasPrevious!: boolean;
 
+  // TODO Extract share regex
+  private readonly key_regex = /[a-z-]+-([a-z0-9]{64})/;
+  private readonly exclude_regex = /contract-(wasm|package-wasm)-?[a-z0-9]+/;
+
   constructor(
     private readonly deployerService: DeployerService,
     private readonly resultService: ResultService,
@@ -51,13 +56,15 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
       if (state.stateRootHash) {
         this.stateRootHash = state.stateRootHash;
         const key = this.keyElt.nativeElement.value;
-        const path = this.pathElt.nativeElement.value;
-        if (key && path) {
+        if (key) {
           const no_result = true;
           this.getBlockState(no_result);
         }
       }
-      state.stateRootHash && (this.stateRootHash = state.stateRootHash);
+      if (state.key) {
+        this.keyElt.nativeElement.value = state.key;
+        this.onKeyChange();
+      }
       this.changeDetectorRef.markForCheck();
     });
     const key = this.storageService.get('key');
@@ -66,8 +73,6 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
     path && (this.pathElt.nativeElement.value = path);
     const keyOld = this.storageService.get('key-old');
     keyOld && (this._hasPrevious = true);
-
-
   }
 
   ngOnDestroy() {
@@ -77,10 +82,13 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
 
   getBlockState(no_result?: boolean) {
     const key = this.keyElt.nativeElement.value;
+    if (this.exclude_regex.test(key)) { return; }
+    const newkey = key.replace(/["']/g, '').replace('contract-', 'hash-');
+    newkey && (this.keyElt.nativeElement.value = newkey);
     const path = this.pathElt.nativeElement.value;
-    key && this.stateRootHash && (this.getBlockStateSubscription = this.deployerService.getBlockState(
+    newkey && this.stateRootHash && (this.getBlockStateSubscription = this.deployerService.getBlockState(
       this.stateRootHash,
-      key,
+      newkey,
       path,
       this.apiUrl
     ).subscribe(async (storedValue): Promise<void> => {
@@ -90,12 +98,15 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
         const contract_keys = storedValue.Contract?.namedKeys;
         const keys = account_keys || contract_keys;
         if (keys) {
-          this.options = [''];
+          const old_key = this.pathElt.nativeElement.value;
+          this.options = [old_key ? old_key : ''];
           keys.forEach(key => {
-            const old_key = this.pathElt.nativeElement.value;
             !old_key && this.options.push(key.name);
             old_key && this.options.push([old_key, key.name].join('/'));
           });
+          setTimeout(() => {
+            this.selectKeyElt.nativeElement.selectedIndex = 0;
+          });
           this.changeDetectorRef.markForCheck();
         }
       }
@@ -147,8 +158,16 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
     this.resultService.copyClipboard(value);
   }
 
+  select($event: Event) {
+    ($event.target as HTMLInputElement).select();
+  }
+
   onKeyChange() {
     const key = this.keyElt.nativeElement.value;
+    const parsing = key.match(this.key_regex);
+    if (parsing.length !== 2 || decodeBase16(parsing[1]).length !== 32) {
+      return;
+    }
     const keyCurrent = this.storageService.get('key');
     if (key && keyCurrent && (key !== keyCurrent)) {
       this.storageService.setState({ 'key-old': keyCurrent });
@@ -159,10 +178,14 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
 
   onPathChange() {
     const path = this.pathElt.nativeElement.value;
-    path && this.storageService.setState({ path });
+    path && this.getBlockState();
+    this.storageService.setState({ path });
   }
 
   reset() {
+    const key = this.keyElt.nativeElement.value;
+    this.storageService.setState({ "key-old": key, path: '' });
+    this._hasPrevious = true;
     this.keyElt.nativeElement.value = '';
     this.pathElt.nativeElement.value = '';
     this.storageService.setState({ key: '', path: '' });
@@ -173,11 +196,10 @@ export class QueryGlobalStateComponent implements AfterViewInit, OnDestroy {
     const value = this.pathElt.nativeElement.value;
     if (!value.includes(sep)) {
       this.pathElt.nativeElement.value = '';
-      this.storageService.setState({ path: '' });
+    } else {
+      const remove = value.split(sep).pop();
+      this.pathElt.nativeElement.value = this.pathElt.nativeElement.value.replace([sep, remove].join(''), '');
     }
-    const remove = value.split(sep).pop();
-    this.pathElt.nativeElement.value = this.pathElt.nativeElement.value.replace([sep, remove].join(''), '');
-    this.getBlockState();
     this.onPathChange();
   }
 

www/libs/feature/deployer/src/lib/result/result.component.html

@@ -31,7 +31,11 @@ <h2 class="title">Output</h2>
             </span>
           </span>
           <div #resultElt class="mt-2 max-w-sm pre overflow-y">
-            <code [innerHtml]="resultHtml"></code>
+            <code
+              #codeElt
+              (dblclick)="listenDblClick($event)"
+              [innerHtml]="resultHtml"
+            ></code>
           </div>
           <div class="flex justify-end">
             <svg

www/libs/feature/deployer/src/lib/result/result.component.spec.ts

@@ -1,5 +1,6 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeployerService } from '@casper-data/data-access-deployer';
 import { config, ENV_CONFIG } from '@casper-util/config';
 import { HIGHLIGHT_WEBWORKER_FACTORY } from '@casper-util/hightlight-webworker';
 import { ResultComponent } from './result.component';
@@ -14,6 +15,11 @@ describe('ResultComponent', () => {
       imports: [ResultComponent],
       providers: [
         ResultService,
+        {
+          provide: DeployerService, useValue: {
+            setState: jest.fn(),
+          }
+        },
         {
           provide: ENV_CONFIG, useValue: config
         },

www/libs/feature/deployer/src/lib/result/result.component.ts

@@ -1,9 +1,11 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, Renderer2, ViewChild, } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, Renderer2, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ResultService } from './result.service';
 import { Result } from './result';
 import { Subscription } from 'rxjs';
 import { StorageService } from '@casper-util/storage';
+import { decodeBase16 } from 'casper-js-sdk';
+import { DeployerService } from '@casper-data/data-access-deployer';
 
 @Component({
   selector: 'casper-deployer-result',
@@ -20,21 +22,39 @@ export class ResultComponent implements AfterViewInit, OnDestroy {
 
   @ViewChild('resultElt') resultElt!: ElementRef;
   @ViewChild('NotesElt') NotesElt!: ElementRef;
+  @ViewChild('codeElt', { read: ElementRef }) contentChildren!: ElementRef;
 
   private getResultSubscription!: Subscription;
+  // TODO Extract share regex
+  private readonly key_regex = /[a-z-]+-([a-z0-9]{64})/;
+  private readonly exclude_regex = /contract-(wasm|package-wasm)-?[a-z0-9]+/;
 
   constructor(
     private readonly resultService: ResultService,
     private readonly changeDetectorRef: ChangeDetectorRef,
-    private readonly storageService: StorageService
+    private readonly storageService: StorageService,
+    private readonly deployerService: DeployerService,
+    private readonly renderer: Renderer2
   ) { }
 
   ngAfterViewInit() {
     this.resultService.getResult().subscribe((res: Result) => {
       this.title = res.title;
       this.result = res.result;
       this.resultHtml = res.resultHtml;
+
       this.changeDetectorRef.markForCheck();
+      setTimeout(() => {
+        const htmlCollection = (this.contentChildren.nativeElement.children), array = [...htmlCollection];
+        array.forEach((child: HTMLSpanElement) => {
+          const key = this.cleanKey(child.textContent || '');
+          if (!key || !this.checkKey(key)) {
+            return;
+          }
+          this.renderer.addClass(child, 'selected');
+        });
+      });
+
     });
     const notes = this.storageService.get('notes');
     notes && (this.NotesElt.nativeElement.value = notes);
@@ -76,4 +96,25 @@ export class ResultComponent implements AfterViewInit, OnDestroy {
     this.storageService.setState({ notes: '' });
   }
 
+  listenDblClick($event: Event) {
+    const key = this.cleanKey(($event.target as HTMLSpanElement).textContent || '');
+    key && this.resultService.copyClipboard(key);
+    if (!key || !this.checkKey(key)) {
+      return;
+    }
+    this.deployerService.setState({ key });
+  }
+
+  private cleanKey(key: string): string {
+    return key.replace(/["']/g, '') || '';
+  }
+
+  private checkKey(key: string): boolean {
+    const parsing = key && !this.exclude_regex.test(key) && key.match(this.key_regex);
+    if (!parsing || parsing.length !== 2 || decodeBase16(parsing[1]).length !== 32) {
+      return false;
+    }
+    return true;
+  }
+
 }