Skip to content

Commit

Permalink
fixed PR comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitriy Borzenko committed Oct 18, 2024
1 parent 009803f commit 43e0340
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 144 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { MatTableDataSource } from "@angular/material/table";
import { AccountSettingsTabs, TokenCreateStep } from "../../account-settings.constants";
import { AbstractControl, FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ModalService } from "src/app/components/modal/modal.service";
import { promiseWithCatch, requireValue } from "src/app/common/app.helpers";
import { changeCopyIcon, promiseWithCatch, requireValue } from "src/app/common/app.helpers";
import { Clipboard } from "@angular/cdk/clipboard";
import AppValues from "src/app/common/app.values";
import { AccessTokenService } from "src/app/services/access-token.service";
Expand Down Expand Up @@ -151,19 +151,7 @@ export class AccessTokensTabComponent extends BaseComponent implements OnInit {
/* istanbul ignore next */
public copyToClipboard(event: MouseEvent, text: string): void {
this.clipboard.copy(text);
if (event.currentTarget !== null) {
const currentElement: HTMLButtonElement = event.currentTarget as HTMLButtonElement;
const currentElementChildren: HTMLCollectionOf<HTMLElement> =
currentElement.children as HTMLCollectionOf<HTMLElement>;
setTimeout(() => {
currentElementChildren[0].style.display = "inline-block";
currentElementChildren[1].style.display = "none";
currentElement.classList.remove("clipboard-btn--success");
}, AppValues.LONG_DELAY_MS);
currentElementChildren[0].style.display = "none";
currentElementChildren[1].style.display = "inline-block";
currentElement.classList.add("clipboard-btn--success");
}
changeCopyIcon(event);
}

private updateTable(page: number): void {
Expand Down
15 changes: 15 additions & 0 deletions src/app/common/app.helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,3 +86,18 @@ export function convertSecondsToHumanReadableFormat(seconds: number): string {
export function capitalizeString(value: string): string {
return value[0].toUpperCase() + value.slice(1).toLowerCase();
}

export function changeCopyIcon(event: MouseEvent): void {
if (event.currentTarget !== null) {
const htmlButtonElement: HTMLButtonElement = event.currentTarget as HTMLButtonElement;
const iconsPair: HTMLCollectionOf<HTMLElement> = htmlButtonElement.children as HTMLCollectionOf<HTMLElement>;
setTimeout(() => {
iconsPair[0].style.display = "inline-block";
iconsPair[1].style.display = "none";
htmlButtonElement.classList.remove("clipboard-btn--success");
}, AppValues.LONG_DELAY_MS);
iconsPair[0].style.display = "none";
iconsPair[1].style.display = "inline-block";
htmlButtonElement.classList.add("clipboard-btn--success");
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { MaybeUndefined } from "./../../common/app.types";
import { ProtocolsService } from "./../../services/protocols.service";
import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from "@angular/core";
import { DatasetBasicsFragment, DatasetEndpoints } from "src/app/api/kamu.graphql.interface";
import AppValues from "src/app/common/app.values";
import { Clipboard } from "@angular/cdk/clipboard";
import { Observable } from "rxjs";
import { changeCopyIcon } from "src/app/common/app.helpers";

@Component({
selector: "app-data-access-panel",
Expand All @@ -25,19 +25,7 @@ export class DataAccessPanelComponent implements OnInit {

public copyToClipboard(event: MouseEvent, text: string): void {
this.clipboard.copy(text);
if (event.currentTarget !== null) {
const currentElement: HTMLButtonElement = event.currentTarget as HTMLButtonElement;
const currentElementChildren: HTMLCollectionOf<HTMLElement> =
currentElement.children as HTMLCollectionOf<HTMLElement>;
setTimeout(() => {
currentElementChildren[0].style.display = "inline-block";
currentElementChildren[1].style.display = "none";
currentElement.classList.remove("clipboard-btn--success");
}, AppValues.LONG_DELAY_MS);
currentElementChildren[0].style.display = "none";
currentElementChildren[1].style.display = "inline-block";
currentElement.classList.add("clipboard-btn--success");
}
changeCopyIcon(event);
}

private initClipboardHints(): void {
Expand Down
83 changes: 38 additions & 45 deletions src/app/components/query-explainer/query-explainer.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
class="alert alert-info message-success mx-4 mt-4 fs-18 w-50 mx-auto d-flex align-items-center justify-content-center"
role="alert"
*ngIf="verifyResponse?.ok"
*ngIf="verifyResponse.ok"
>
<mat-icon class="me-1">check_circle</mat-icon>
Verification was successful
Expand All @@ -22,7 +22,7 @@
</div>
</div>

<ng-container *ngIf="sqlQueryExplainer">
<ng-container *ngIf="sqlQueryExplainerResponse">
<div class="row">
<div class="col-md-6">
<div class="box p-4 my-2 ms-4 h-100">
Expand All @@ -31,42 +31,45 @@
<div class="mt-4 mx-4">
<div class="fw-semibold">Query:</div>
<div class="mt-2">
<pre><code [highlight]="sqlQueryExplainer.input.query" [languages]="['sql'] " [attr.data-test-id]="'query-explainer-viewer'" class="rounded-3"></code></pre>
<pre><code [highlight]="sqlQueryExplainerResponse.input.query" [languages]="['sql'] " [attr.data-test-id]="'query-explainer-viewer'" class="rounded-3"></code></pre>
</div>
</div>
<div class="my-4 mx-4 d-flex flex-row justify-content-between">
<div
class="my-4 mx-4 d-flex flex-row justify-content-between"
*ngIf="sqlQueryExplainerResponse.input.queryDialect"
>
<div class="fw-semibold">Query dialect:</div>
<div>{{ inputParamsHelper(sqlQueryExplainer.input.queryDialect) }}</div>
<div>{{ inputParamsHelper(sqlQueryExplainerResponse.input.queryDialect) }}</div>
</div>
<div class="my-4 mx-4 d-flex flex-row justify-content-between">
<div class="fw-semibold">Data format:</div>
<div>{{ inputParamsHelper(sqlQueryExplainer.input.dataFormat) }}</div>
<div>{{ inputParamsHelper(sqlQueryExplainerResponse.input.dataFormat) }}</div>
</div>
<div class="my-4 mx-4 d-flex flex-row justify-content-between">
<div class="fw-semibold">Schema format:</div>
<div>{{ inputParamsHelper(sqlQueryExplainer.input.schemaFormat) }}</div>
<div>{{ inputParamsHelper(sqlQueryExplainerResponse.input.schemaFormat!) }}</div>
</div>
<div class="my-4 mx-4 d-flex flex-row justify-content-between">
<div class="fw-semibold">Limit:</div>
<div>{{ sqlQueryExplainer.input.limit }}</div>
<div>{{ sqlQueryExplainerResponse.input.limit }}</div>
</div>
<div class="my-4 mx-4 d-flex flex-row justify-content-between">
<div class="fw-semibold">Skip:</div>
<div>{{ sqlQueryExplainer.input.skip }}</div>
<div>{{ sqlQueryExplainerResponse.input.skip }}</div>
</div>
<div class="my-4">
<div class="fw-semibold mx-4">Datasets:</div>
<ng-container *ngFor="let dataset of sqlQueryExplainer.input.datasets; let i = index">
<ng-container
*ngFor="let dataset of sqlQueryExplainerResponse.input.datasets; let i = index"
>
<div class="mt-2">
<div class="dataset-box p-2 mx-2 my-4 rounded-3">
<div class="px-2 py-3">
<div class="fw-500">ID:</div>
<div class="mt-2 text-break">
<a
[class.error-color]="
verifyResponse.error?.kind ===
'VerificationFailed::DatasetNotFound' &&
verifyResponse.error?.dataset_id === dataset.id
isDatasetNotFoundError(verifyResponse.error, dataset.id)
"
routerLink="/{{ routeToDataset(dataset.alias) }}"
>
Expand All @@ -83,9 +86,10 @@
<div class="mt-2">
<app-display-hash
[class.error-color]="
verifyResponse.error?.kind ===
'VerificationFailed::DatasetBlockNotFound' &&
verifyResponse.error?.block_hash === dataset.blockHash
isDatasetBlockNotFoundError(
verifyResponse.error,
dataset.blockHash
)
"
[value]="dataset.blockHash"
[showCopyButton]="true"
Expand All @@ -109,11 +113,11 @@
<div class="m-4">
<div class="fw-semibold">Input hash:</div>
<div class="mt-2 text-break">
<span [class.error-color]="verifyResponse.error?.kind === 'InvalidRequest::InputHash'"
>{{ sqlQueryExplainer.commitment.inputHash }}
<span [class.error-color]="isInputHashError(verifyResponse.error)"
>{{ sqlQueryExplainerResponse.commitment.inputHash }}
</span>
<button
(click)="copyToClipboard($event, sqlQueryExplainer.commitment.inputHash)"
(click)="copyToClipboard($event, sqlQueryExplainerResponse.commitment.inputHash)"
data-test-id="copyToClipboard-query-explainer-input-hash"
aria-label="Copy to clipboard"
class="copy-button ms-2"
Expand All @@ -133,15 +137,11 @@
<div class="m-4">
<div class="fw-semibold">Output hash:</div>
<div class="mt-2 text-break">
<span
[class.error-color]="
verifyResponse.error?.kind === 'VerificationFailed::OutputMismatch'
"
>
{{ sqlQueryExplainer.commitment.outputHash }}</span
<span [class.error-color]="isOutputMismatchError(verifyResponse.error)">
{{ sqlQueryExplainerResponse.commitment.outputHash }}</span
>
<button
(click)="copyToClipboard($event, sqlQueryExplainer.commitment.outputHash)"
(click)="copyToClipboard($event, sqlQueryExplainerResponse.commitment.outputHash)"
data-test-id="copyToClipboard-query-explainer-output-hash"
aria-label="Copy to clipboard"
class="copy-button ms-2"
Expand All @@ -161,15 +161,14 @@
<div class="m-4">
<div class="fw-semibold">Sub queries hash:</div>
<div class="mt-2 text-break">
<span
[class.error-color]="
verifyResponse.error?.kind === 'InvalidRequest::SubQueriesHash'
"
>{{ sqlQueryExplainer.commitment.subQueriesHash }}
<span [class.error-color]="isSubQueriesHashError(verifyResponse.error)"
>{{ sqlQueryExplainerResponse.commitment.subQueriesHash }}
</span>

<button
(click)="copyToClipboard($event, sqlQueryExplainer.commitment.subQueriesHash)"
(click)="
copyToClipboard($event, sqlQueryExplainerResponse.commitment.subQueriesHash)
"
data-test-id="copyToClipboard-query-explainer-sub-queries-hash"
aria-label="Copy to clipboard"
class="copy-button ms-2"
Expand Down Expand Up @@ -198,23 +197,21 @@
'https://www.w3.org/community/reports/credentials/CG-FINAL-di-eddsa-2020-20220724/#dfn-ed25519signature2020'
"
>
{{ sqlQueryExplainer.proof.type }}
{{ sqlQueryExplainerResponse.proof.type }}
</a>
</div>
</div>
<div class="m-4">
<div class="fw-semibold">ODF Node DID:</div>
<div class="mt-2 text-break">
{{ sqlQueryExplainer.proof.verificationMethod }}
{{ sqlQueryExplainerResponse.proof.verificationMethod }}
</div>
</div>
<div class="m-4">
<div class="fw-semibold">Signature:</div>
<div class="mt-2 text-break">
<span
[class.error-color]="verifyResponse.error?.kind === 'InvalidRequest::BadSignature'"
>
{{ sqlQueryExplainer.proof.proofValue }}
<span [class.error-color]="isBadSignatureError(verifyResponse.error)">
{{ sqlQueryExplainerResponse.proof.proofValue }}
</span>
</div>
</div>
Expand All @@ -225,19 +222,15 @@

<div class="box p-4 margin-top mx-4 margin-bottom">
<div class="fw-semibold">Reproduced result:</div>
<div class="mt-4">
<div class="mt-4" *ngIf="sqlQueryExplainerResponse.output">
<app-dynamic-table
[hasTableHeader]="true"
[schemaFields]="schemaFields"
[schemaFields]="schemaFields(sqlQueryExplainerResponse.output)"
[idTable]="'query-explainer-table'"
[dataRows]="tableSource"
[dataRows]="tableSource(sqlQueryExplainerResponse.output)"
[attr.data-test-id]="'query-explainer-table'"
/>
</div>
</div>
</ng-container>
</ng-container>

<!-- <div *ngIf="!blockHashSystemTimes.length" class="mt-4 text-center box p-4 w-50 mx-auto">
Sorry, your request does not contain a signature.
</div> -->
Loading

0 comments on commit 43e0340

Please sign in to comment.