Merge branch 'main' into clear-selected-in-select

Author: anandtiwary

projects/common/src/preference/preference.service.ts

@@ -2,14 +2,16 @@ import { Injectable } from '@angular/core';
 import { Observable, of, throwError } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { AbstractStorage } from '../utilities/browser/storage/abstract-storage';
+import { InMemoryStorage } from '../utilities/browser/storage/in-memory-storage';
 import { LocalStorage } from '../utilities/browser/storage/local-storage';
 import { SessionStorage } from '../utilities/browser/storage/session-storage';
 import { BooleanCoercer } from '../utilities/coercers/boolean-coercer';
 import { NumberCoercer } from '../utilities/coercers/number-coercer';
 
 export const enum StorageType {
   Local = 'local',
-  Session = 'session'
+  Session = 'session',
+  InMemory = 'in-memory'
 }
 
 @Injectable({
@@ -24,7 +26,11 @@ export class PreferenceService {
   private readonly numberCoercer: NumberCoercer = new NumberCoercer();
   private readonly booleanCoercer: BooleanCoercer = new BooleanCoercer();
 
-  public constructor(private readonly localStorage: LocalStorage, private readonly sessionStorage: SessionStorage) {}
+  public constructor(
+    private readonly localStorage: LocalStorage,
+    private readonly sessionStorage: SessionStorage,
+    private readonly inMemoryStorage: InMemoryStorage
+  ) {}
 
   /**
    * Returns the current storage value if defined, else the default value. The observable
@@ -94,6 +100,8 @@ export class PreferenceService {
     switch (type) {
       case StorageType.Session:
         return this.sessionStorage;
+      case StorageType.InMemory:
+        return this.inMemoryStorage;
       case StorageType.Local:
       default:
         return this.localStorage;

projects/common/src/utilities/browser/storage/in-memory-storage.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { AbstractStorage } from './abstract-storage';
+
+@Injectable({ providedIn: 'root' })
+export class InMemoryStorage extends AbstractStorage {
+  public constructor() {
+    super(
+      new (class {
+        private readonly data: Map<string, string> = new Map();
+
+        public get length(): number {
+          return this.data.size;
+        }
+
+        public clear(): void {
+          this.data.clear();
+        }
+
+        public getItem(key: string): string | null {
+          // tslint:disable-next-line: no-null-keyword
+          return this.data.get(key) ?? null;
+        }
+
+        public key(index: number): string | null {
+          // tslint:disable-next-line: no-null-keyword
+          return Array.from(this.data.keys())[index] ?? null;
+        }
+
+        public removeItem(key: string): void {
+          this.data.delete(key);
+        }
+
+        public setItem(key: string, value: string): void {
+          this.data.set(key, value);
+        }
+      })()
+    );
+  }
+}

projects/components/src/draggable-list/draggable-item/draggable-item.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '../../public-api';
+
+@Component({
+  selector: 'ht-draggable-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: CONTENT_HOLDER_TEMPLATE
+})
+export class DraggableItemComponent<T> extends ContentHolder {
+  @Input()
+  public disabled: boolean = false;
+
+  @Input()
+  public data?: T;
+}

projects/components/src/draggable-list/draggable-list.component.scss

@@ -0,0 +1,11 @@
+@import 'color-palette';
+
+.draggable-list .draggable-item {
+  cursor: move;
+
+  &.disabled {
+    background-color: $gray-2;
+    color: $gray-5;
+    cursor: not-allowed;
+  }
+}

projects/components/src/draggable-list/draggable-list.component.ts

@@ -0,0 +1,52 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList
+} from '@angular/core';
+import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+
+@Component({
+  selector: 'ht-draggable-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./draggable-list.component.scss'],
+  template: `
+    <div cdkDropList class="draggable-list" (cdkDropListDropped)="this.dropList($event)">
+      <div
+        *ngFor="let draggableItem of this.draggableItems"
+        cdkDrag
+        class="draggable-item"
+        [ngClass]="{ disabled: disabled || draggableItem.disabled }"
+        [cdkDragDisabled]="disabled || draggableItem.disabled"
+      >
+        <ng-container *ngTemplateOutlet="draggableItem.content"></ng-container>
+      </div>
+    </div>
+  `
+})
+export class DraggableListComponent<T> implements AfterContentInit {
+  @Input()
+  public disabled: boolean = false;
+
+  @Output()
+  public readonly draggableListChange: EventEmitter<T[]> = new EventEmitter();
+
+  @ContentChildren(DraggableItemComponent)
+  public draggableItemsRef!: QueryList<DraggableItemComponent<T>>;
+
+  public draggableItems: DraggableItemComponent<T>[] = [];
+
+  public ngAfterContentInit(): void {
+    this.draggableItems = this.draggableItemsRef.toArray();
+  }
+
+  public dropList(event: CdkDragDrop<DraggableItemComponent<unknown>[]>): void {
+    moveItemInArray(this.draggableItems, event.previousIndex, event.currentIndex);
+    this.draggableListChange.emit(this.draggableItems.map(dragabbleItem => dragabbleItem.data!));
+  }
+}

projects/components/src/draggable-list/draggable-list.module.ts

@@ -0,0 +1,12 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+import { DraggableListComponent } from './draggable-list.component';
+
+@NgModule({
+  declarations: [DraggableListComponent, DraggableItemComponent],
+  imports: [CommonModule, DragDropModule],
+  exports: [DraggableListComponent, DraggableItemComponent]
+})
+export class DraggableListModule {}

projects/components/src/load-async/wrapper/load-async-wrapper.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject, InjectionToken, TemplateRef
 import { IconType } from '@hypertrace/assets-library';
 import { Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
+import { NotificationMode } from '../../notification/notification.component';
 import { LoadAsyncStateType } from '../load-async-state.type';
 import { AsyncState, LoadAsyncConfig, LoadAsyncContext, LoaderType } from '../load-async.service';
 
@@ -21,6 +22,13 @@ export const ASYNC_WRAPPER_PARAMETERS$ = new InjectionToken<Observable<LoadAsync
       </ng-container>
       <ng-container *ngSwitchDefault>
         <ht-message-display
+          aria-live="polite"
+          role="alert"
+          [attr.data-alert-type]="
+            state.type === '${LoadAsyncStateType.GenericError}'
+              ? '${NotificationMode.Failure}'
+              : '${NotificationMode.Info}'
+          "
           [icon]="this.icon"
           [title]="this.title"
           [description]="this.description"

projects/components/src/not-found/not-found.component.ts

@@ -2,14 +2,20 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ImagesAssetPath } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
 import { ButtonRole, ButtonStyle } from '../button/button';
+import { NotificationMode } from '../notification/notification.component';
 
 @Component({
   selector: 'ht-not-found',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./not-found.component.scss'],
   template: `
     <div class="not-found-container fill-container">
-      <div class="not-found-content">
+      <div
+        class="not-found-content"
+        role="alert"
+        aria-live="assertive"
+        [attr.data-alert-type]="'${NotificationMode.Failure}'"
+      >
         <img class="not-found-image" src="${ImagesAssetPath.ErrorPage}" loading="lazy" alt="not found page" />
         <div class="not-found-message-wrapper">
           <div class="not-found-text-wrapper">
@@ -30,6 +36,7 @@ import { ButtonRole, ButtonStyle } from '../button/button';
 })
 export class NotFoundComponent {
   public constructor(private readonly navService: NavigationService) {}
+
   public goHome(): void {
     this.navService.navigateToHome();
   }

projects/components/src/notification/notification.component.ts

@@ -10,7 +10,7 @@ import { IconSize } from '../icon/icon-size';
   styleUrls: ['./notification.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="notification-container">
+    <div class="notification-container" role="alert" aria-live="polite" [attr.data-alert-type]="this.data.mode">
       <ht-icon
         [ngClass]="this.data.mode"
         class="status-icon"

projects/components/src/public-api.ts

@@ -65,6 +65,11 @@ export * from './description/description.module';
 export * from './divider/divider.component';
 export * from './divider/divider.module';
 
+// Draggable list
+export { DraggableListComponent } from './draggable-list/draggable-list.component';
+export { DraggableItemComponent } from './draggable-list/draggable-item/draggable-item.component';
+export { DraggableListModule } from './draggable-list/draggable-list.module';
+
 // Dropdown menu
 export { MenuDropdownComponent } from './menu-dropdown/menu-dropdown.component';
 export { MenuItemComponent } from './menu-dropdown/menu-item/menu-item.component';