Search filter on intents view

theopenconversationkit · Jul 20, 2023 · 0734950 · 0734950
1 parent e61072c
commit 0734950
Show file tree

Hide file tree

Showing 16 changed files with 577 additions and 298 deletions.
diff --git a/bot/admin/web/.npmrc b/bot/admin/web/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/nlp/admin/web/.npmrc b/nlp/admin/web/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/nlp/admin/web/package-lock.json b/nlp/admin/web/package-lock.json
diff --git a/nlp/admin/web/package.json b/nlp/admin/web/package.json
@@ -27,7 +27,7 @@
     "@nebular/theme": "10.0.0",
     "@ng-bootstrap/ng-bootstrap": "^13.1.1",
     "ang-jsoneditor": "^1.10.5",
-    "bootstrap": "^5.2.0",
+    "bootstrap": "^4.4.1",
     "echarts": "^5.3.3",
     "file-saver-es": "^2.0.5",
     "jsoneditor": "^9.5.6",

diff --git a/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.html b/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.html
@@ -0,0 +1,34 @@
+<nb-card class="mt-3 mb-2">
+  <nb-card-body>
+    <form
+      class="grid"
+      [formGroup]="form"
+    >
+      <nb-form-field>
+        <nb-icon
+          nbPrefix
+          icon="search-outline"
+        ></nb-icon>
+        <input
+          nbInput
+          fullWidth
+          fieldSize="medium"
+          placeholder="Search intent"
+          type="text"
+          formControlName="search"
+        />
+        <button
+          *ngIf="!!search.value"
+          nbButton
+          nbSuffix
+          nbTooltip="Clear"
+          ghost
+          (click)="clearSearch()"
+          data-testid="clear-button"
+        >
+          <nb-icon icon="close-outline"></nb-icon>
+        </button>
+      </nb-form-field>
+    </form>
+  </nb-card-body>
+</nb-card>
diff --git a/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.scss b/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.scss
diff --git a/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.spec.ts b/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IntentsFiltersComponent } from './intents-filters.component';
+
+describe('IntentsFiltersComponent', () => {
+  let component: IntentsFiltersComponent;
+  let fixture: ComponentFixture<IntentsFiltersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IntentsFiltersComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(IntentsFiltersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.ts b/nlp/admin/web/src/app/intents/intents-filters/intents-filters.component.ts
@@ -0,0 +1,45 @@
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { debounceTime, Subject, takeUntil } from 'rxjs';
+
+interface IntentsFilterForm {
+  search: FormControl<string>;
+}
+
+export interface IntentsFilter {
+  search: string;
+}
+
+@Component({
+  selector: 'tock-intents-filters',
+  templateUrl: './intents-filters.component.html',
+  styleUrls: ['./intents-filters.component.scss']
+})
+export class IntentsFiltersComponent implements OnInit, OnDestroy {
+  private readonly destroy$: Subject<boolean> = new Subject();
+
+  @Output() onFilter = new EventEmitter<IntentsFilter>();
+
+  form = new FormGroup<IntentsFilterForm>({
+    search: new FormControl()
+  });
+
+  get search(): FormControl {
+    return this.form.get('search') as FormControl;
+  }
+
+  ngOnInit(): void {
+    this.form.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(300)).subscribe(() => {
+      this.onFilter.emit(this.form.value as IntentsFilter);
+    });
+  }
+
+  clearSearch(): void {
+    this.search.reset();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+}
diff --git a/nlp/admin/web/src/app/intents/intents-list/intents-list.component.html b/nlp/admin/web/src/app/intents/intents-list/intents-list.component.html
@@ -0,0 +1,173 @@
+<div
+  *ngIf="intents.length"
+  class="table-list table-list-header"
+>
+  <div class="table-list-entry">Intent</div>
+  <div class="table-list-entry bordered text-center">Entities</div>
+  <div class="table-list-entry bordered text-center">Shared Intents</div>
+  <div class="table-list-entry bordered text-center">Mandatory States</div>
+  <div class="table-list-entry text-center">Actions</div>
+</div>
+<div
+  class="table-list"
+  *ngFor="let intent of intents"
+>
+  <div class="table-list-entry">
+    <div class="font-weight-bold">
+      <span nbTooltip="{{ intent.qualifiedName() }}">
+        {{ state.isOtherNamespaceIntent(intent) ? intent.qualifiedName() : intent.intentLabel() }}
+      </span>
+      <span
+        class="ml-2 valign-middle"
+        *ngIf="state.intentExistsInOtherApplication(intent.name)"
+        nbTooltip="This intent is shared between at least one other application. All changes to the intent will also affect the other applications that use this intent."
+      >
+        <nb-icon icon="share-outline"></nb-icon>
+      </span>
+    </div>
+    <span class="text-muted">{{ intent.description }}</span>
+  </div>
+
+  <div class="table-list-entry bordered text-center">
+    <span
+      class="tag"
+      *ngFor="let e of intent.entities"
+      [style.background-color]="e.entityColor"
+      [style.color]="getContrastYIQ(e.entityColor)"
+    >
+      <div
+        class="ellipsis"
+        nbTooltip="{{ e.qualifiedName(state.user) }}"
+      >
+        {{ e.qualifiedName(state.user) }}
+      </div>
+      <button
+        *ngIf="!state.intentExistsInOtherApplication(intent.name) && !state.isOtherNamespaceIntent(intent)"
+        nbButton
+        ghost
+        size="tiny"
+        shape="round"
+        (click)="removeEntity(intent, e)"
+        nbTooltip="Delete entity"
+        [style.color]="getContrastYIQ(e.entityColor)"
+      >
+        <nb-icon icon="close-outline"></nb-icon>
+      </button>
+    </span>
+  </div>
+
+  <div class="table-list-entry bordered text-center">
+    <ng-container *ngIf="!state.isOtherNamespaceIntent(intent)">
+      <span
+        class="tag"
+        *ngFor="let intentId of intent.sharedIntents"
+      >
+        <div
+          class="ellipsis"
+          nbTooltip="{{ state.findIntentById(intentId)?.name }}"
+        >
+          {{ state.findIntentById(intentId)?.name }}
+        </div>
+        <button
+          *ngIf="!state.intentExistsInOtherApplication(intent.name)"
+          nbButton
+          ghost
+          size="tiny"
+          shape="round"
+          (click)="removeSharedIntent(intent, intentId)"
+          nbTooltip="Remove shared intent"
+        >
+          <nb-icon icon="close-outline"></nb-icon>
+        </button>
+      </span>
+    </ng-container>
+
+    <button
+      *ngIf="!state.isOtherNamespaceIntent(intent)"
+      nbButton
+      ghost
+      shape="round"
+      size="small"
+      nbTooltip="Add shared intent"
+      (click)="displayAddSharedIntentDialog(intent)"
+    >
+      <nb-icon icon="plus-circle-outline"></nb-icon>
+    </button>
+  </div>
+
+  <div class="table-list-entry bordered text-center">
+    <ng-container *ngIf="!state.isOtherNamespaceIntent(intent)">
+      <span
+        class="tag"
+        *ngFor="let s of intent.mandatoryStates"
+      >
+        <div
+          class="ellipsis"
+          nbTooltip="{{ s }}"
+        >
+          {{ s }}
+        </div>
+        <button
+          *ngIf="!state.intentExistsInOtherApplication(intent.name)"
+          nbButton
+          ghost
+          size="tiny"
+          shape="round"
+          (click)="removeState(intent, s)"
+          nbTooltip="Delete State"
+        >
+          <nb-icon icon="close-outline"></nb-icon>
+        </button>
+      </span>
+    </ng-container>
+
+    <button
+      *ngIf="!state.intentExistsInOtherApplication(intent.name) && !state.isOtherNamespaceIntent(intent)"
+      nbButton
+      ghost
+      shape="round"
+      size="small"
+      nbTooltip="Add state"
+      (click)="addState(intent)"
+    >
+      <nb-icon icon="plus-circle-outline"></nb-icon>
+    </button>
+  </div>
+
+  <div class="table-list-entry text-center">
+    <div
+      class="d-flex justify-content-center"
+      *ngIf="!state.isOtherNamespaceIntent(intent)"
+    >
+      <button
+        nbButton
+        ghost
+        shape="round"
+        nbTooltip="Edit the intent"
+        (click)="updateIntent(intent)"
+      >
+        <nb-icon icon="edit-outline"></nb-icon>
+      </button>
+      <button
+        *ngIf="state.hasRole(UserRole.admin)"
+        nbButton
+        ghost
+        shape="round"
+        nbTooltip="Download a sentences dump"
+        (click)="downloadSentencesDump(intent)"
+      >
+        <nb-icon icon="download-outline"></nb-icon>
+      </button>
+      <button
+        nbButton
+        ghost
+        shape="round"
+        status="danger"
+        nbTooltip="Delete the intent"
+        (click)="deleteIntent(intent)"
+      >
+        <nb-icon icon="trash-2-outline"></nb-icon>
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/nlp/admin/web/src/app/intents/intents-list/intents-list.component.scss b/nlp/admin/web/src/app/intents/intents-list/intents-list.component.scss
@@ -0,0 +1,39 @@
+.table-list {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr 8rem;
+  column-gap: 0.5rem;
+  min-width: 50rem;
+
+  &.table-list-header {
+    font-size: smaller;
+    font-weight: bold;
+    opacity: 0.6;
+  }
+  &:not(:last-child) {
+    .table-list-entry {
+      border-bottom: 1px solid var(--border-basic-color-3);
+    }
+  }
+
+  .table-list-entry {
+    min-width: 8rem;
+    padding: 1rem 0;
+    &.bordered {
+      border-right: 1px solid var(--border-basic-color-3);
+    }
+  }
+}
+
+.tag {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 8rem;
+  padding: 0rem 0.3rem 0rem 0.9rem;
+  margin-right: 2px;
+  margin-bottom: 2px;
+  border-radius: 10rem;
+  background-color: var(--border-basic-color-3);
+  font-size: 0.7rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
+}