feat(admin-ui): Update to Angular v10 & Clarity v4

BREAKING CHANGE: The upgrade of the Admin UI to Angular v10 means that if you are using the `@vendure/ui-devkit` package to compile an extended version of the Admin UI, you need to have at least TypeScript v3.9.2 installed.

packages/admin-ui/i18n-coverage.json

@@ -1,6 +1,6 @@
 {
-  "generatedOn": "2020-09-16T09:31:41.452Z",
-  "lastCommit": "7883a7ac3175bffdfc97891edd23ab8a1dfb7d0a",
+  "generatedOn": "2020-10-05T10:27:57.372Z",
+  "lastCommit": "30dc63957a149d7175935cb31047cd46016b73bc",
   "translationStatus": {
     "de": {
       "tokenCount": 672,
@@ -9,7 +9,7 @@
     },
     "en": {
       "tokenCount": 672,
-      "translatedCount": 670,
+      "translatedCount": 672,
       "percentage": 100
     },
     "es": {

packages/admin-ui/package.json

@@ -18,20 +18,20 @@
     "directory": "package"
   },
   "dependencies": {
-    "@angular/animations": "9.1.7",
-    "@angular/cdk": "9.2.3",
-    "@angular/common": "9.1.7",
-    "@angular/core": "9.1.7",
-    "@angular/forms": "9.1.7",
-    "@angular/language-service": "9.1.7",
-    "@angular/platform-browser": "9.1.7",
-    "@angular/platform-browser-dynamic": "9.1.7",
-    "@angular/router": "9.1.7",
+    "@angular/animations": "10.1.4",
+    "@angular/cdk": "10.2.4",
+    "@angular/common": "10.1.4",
+    "@angular/core": "10.1.4",
+    "@angular/forms": "10.1.4",
+    "@angular/language-service": "10.1.4",
+    "@angular/platform-browser": "10.1.4",
+    "@angular/platform-browser-dynamic": "10.1.4",
+    "@angular/router": "10.1.4",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@clr/angular": "^3.0.0",
+    "@clr/angular": "^4.0.3",
     "@clr/core": "^3.0.0",
-    "@clr/icons": "^3.0.0",
-    "@clr/ui": "^3.0.0",
+    "@clr/icons": "^4.0.3",
+    "@clr/ui": "^4.0.3",
     "@ng-select/ng-select": "^3.7.2",
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "^4.0.0",
@@ -61,15 +61,15 @@
     "prosemirror-schema-list": "^1.0.0",
     "prosemirror-state": "^1.0.0",
     "rxjs": "^6.5.4",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.6",
-    "@angular-devkit/build-ng-packagr": "~0.901.6",
-    "@angular/cli": "^9.1.6",
-    "@angular/compiler": "^9.1.7",
-    "@angular/compiler-cli": "^9.1.7",
+    "@angular-devkit/build-angular": "~0.1001.4",
+    "@angular-devkit/build-ng-packagr": "~0.1001.4",
+    "@angular/cli": "^10.1.4",
+    "@angular/compiler": "^10.1.4",
+    "@angular/compiler-cli": "^10.1.4",
     "@biesbjerg/ngx-translate-extract": "^6.0.3",
     "@types/jasmine": "~3.5.10",
     "@types/jasminewd2": "~2.0.6",
@@ -82,18 +82,18 @@
     "cross-spawn": "^7.0.3",
     "fs-extra": "^9.0.0",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.1",
-    "karma": "~4.4.1",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.3",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^9.0.0",
-    "protractor": "~5.4.2",
+    "ng-packagr": "^10.1.0",
+    "protractor": "~7.0.0",
     "puppeteer": "^2.1.1",
     "rimraf": "^3.0.0",
-    "tslint": "^6.1.0",
-    "typescript": "3.8.3"
+    "tslint": "~6.1.0",
+    "typescript": "4.0.3"
   }
-}
+}

packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts

@@ -11,7 +11,12 @@ import {
     Output,
     ViewChild,
 } from '@angular/core';
-import { Asset, AssetPickerDialogComponent, AssetPreviewDialogComponent, ModalService } from '@vendure/admin-ui/core';
+import {
+    Asset,
+    AssetPickerDialogComponent,
+    AssetPreviewDialogComponent,
+    ModalService,
+} from '@vendure/admin-ui/core';
 import { unique } from '@vendure/common/lib/unique';
 
 export interface AssetChange {
@@ -189,13 +194,13 @@ export class ProductAssetsComponent implements AfterViewInit {
             );
         }
 
-        this.placeholder.enter(
-            drag,
+        this.placeholder._dropListRef.enter(
+            drag._dragRef,
             drag.element.nativeElement.offsetLeft,
             drag.element.nativeElement.offsetTop,
         );
         return false;
-    }
+    };
 
     /** Determines the point of the page that was touched by the user. */
     getPointerPositionOnPage(event: MouseEvent | TouchEvent) {

packages/admin-ui/src/lib/core/src/common/base-list.component.ts

@@ -1,4 +1,4 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { Directive, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
 import { map, shareReplay, takeUntil } from 'rxjs/operators';
@@ -10,9 +10,10 @@ export type MappingFn<T, R> = (result: R) => { items: T[]; totalItems: number };
 export type OnPageChangeFn<V> = (skip: number, take: number) => V;
 
 /**
- * This is a base class which implements the logic required to fetch and manipluate
+ * This is a base class which implements the logic required to fetch and manipulate
  * a list of data from a query which returns a PaginatedList type.
  */
+@Directive()
 export class BaseListComponent<ResultType, ItemType, VariableType = any> implements OnInit, OnDestroy {
     result$: Observable<ResultType>;
     items$: Observable<ItemType[]>;
@@ -24,7 +25,7 @@ export class BaseListComponent<ResultType, ItemType, VariableType = any> impleme
     private listQueryFn: ListQueryFn<ResultType>;
     private mappingFn: MappingFn<ItemType, ResultType>;
     private onPageChangeFn: OnPageChangeFn<VariableType> = (skip, take) =>
-        ({ options: { skip, take } } as any)
+        ({ options: { skip, take } } as any);
     private refresh$ = new BehaviorSubject<undefined>(undefined);
 
     constructor(protected router: Router, protected route: ActivatedRoute) {}

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -2647,6 +2647,7 @@ export type Order = Node & {
   promotions: Array<Promotion>;
   payments?: Maybe<Array<Payment>>;
   fulfillments?: Maybe<Array<Fulfillment>>;
+  totalQuantity: Scalars['Int'];
   subTotalBeforeTax: Scalars['Int'];
   /** The subTotal is the total of the OrderLines, before order-level promotions and shipping has been applied. */
   subTotal: Scalars['Int'];
@@ -2685,6 +2686,7 @@ export type OrderFilterParameter = {
   code?: Maybe<StringOperators>;
   state?: Maybe<StringOperators>;
   active?: Maybe<BooleanOperators>;
+  totalQuantity?: Maybe<NumberOperators>;
   subTotalBeforeTax?: Maybe<NumberOperators>;
   subTotal?: Maybe<NumberOperators>;
   currencyCode?: Maybe<StringOperators>;
@@ -2756,6 +2758,7 @@ export type OrderSortParameter = {
   updatedAt?: Maybe<SortOrder>;
   code?: Maybe<SortOrder>;
   state?: Maybe<SortOrder>;
+  totalQuantity?: Maybe<SortOrder>;
   subTotalBeforeTax?: Maybe<SortOrder>;
   subTotal?: Maybe<SortOrder>;
   shipping?: Maybe<SortOrder>;
@@ -6906,7 +6909,7 @@ export type TestShippingMethodQuery = { testShippingMethod: (
     & Pick<TestShippingMethodResult, 'eligible'>
     & { quote?: Maybe<(
       { __typename?: 'TestShippingMethodQuote' }
-      & Pick<TestShippingMethodQuote, 'price' | 'priceWithTax' | 'metadata'>
+      & Pick<TestShippingMethodQuote, 'price' | 'priceWithTax' | 'description' | 'metadata'>
     )> }
   ) };
 

packages/admin-ui/src/lib/core/src/data/definitions/shipping-definitions.ts

@@ -86,6 +86,7 @@ export const TEST_SHIPPING_METHOD = gql`
             quote {
                 price
                 priceWithTax
+                description
                 metadata
             }
         }

packages/admin-ui/src/lib/core/src/shared/directives/if-directive-base.ts

@@ -1,12 +1,13 @@
-import { EmbeddedViewRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable, Subject, Subscription } from 'rxjs';
-import { switchMap, take } from 'rxjs/operators';
-
-import { Permission } from '../../common/generated-types';
+import { Directive, EmbeddedViewRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 /**
  * A base class for implementing custom *ngIf-style structural directives based on custom conditions.
+ *
+ * @dynamic
  */
+@Directive()
 export class IfDirectiveBase<Args extends any[]> implements OnInit, OnDestroy {
     protected updateArgs$ = new BehaviorSubject<Args>([] as any);
     private readonly _thenTemplateRef: TemplateRef<any> | null = null;

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -701,4 +701,4 @@
     "job-result": "Job result",
     "job-state": "Job state"
   }
-}
+}

packages/admin-ui/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "importHelpers": true,
-    "module": "esnext",
+    "module": "es2020",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,

packages/asset-server-plugin/e2e/graphql/generated-e2e-asset-server-plugin-types.ts

@@ -2463,6 +2463,7 @@ export type Order = Node & {
     promotions: Array<Promotion>;
     payments?: Maybe<Array<Payment>>;
     fulfillments?: Maybe<Array<Fulfillment>>;
+    totalQuantity: Scalars['Int'];
     subTotalBeforeTax: Scalars['Int'];
     /** The subTotal is the total of the OrderLines, before order-level promotions and shipping has been applied. */
     subTotal: Scalars['Int'];
@@ -2499,6 +2500,7 @@ export type OrderFilterParameter = {
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
+    totalQuantity?: Maybe<NumberOperators>;
     subTotalBeforeTax?: Maybe<NumberOperators>;
     subTotal?: Maybe<NumberOperators>;
     currencyCode?: Maybe<StringOperators>;
@@ -2566,6 +2568,7 @@ export type OrderSortParameter = {
     updatedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
+    totalQuantity?: Maybe<SortOrder>;
     subTotalBeforeTax?: Maybe<SortOrder>;
     subTotal?: Maybe<SortOrder>;
     shipping?: Maybe<SortOrder>;

packages/common/src/generated-shop-types.ts

@@ -1735,6 +1735,7 @@ export type Order = Node & {
     promotions: Array<Promotion>;
     payments?: Maybe<Array<Payment>>;
     fulfillments?: Maybe<Array<Fulfillment>>;
+    totalQuantity: Scalars['Int'];
     subTotalBeforeTax: Scalars['Int'];
     /** The subTotal is the total of the OrderLines, before order-level promotions and shipping has been applied. */
     subTotal: Scalars['Int'];
@@ -1772,6 +1773,7 @@ export type OrderFilterParameter = {
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
+    totalQuantity?: Maybe<NumberOperators>;
     subTotalBeforeTax?: Maybe<NumberOperators>;
     subTotal?: Maybe<NumberOperators>;
     currencyCode?: Maybe<StringOperators>;
@@ -1860,6 +1862,7 @@ export type OrderSortParameter = {
     updatedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
+    totalQuantity?: Maybe<SortOrder>;
     subTotalBeforeTax?: Maybe<SortOrder>;
     subTotal?: Maybe<SortOrder>;
     shipping?: Maybe<SortOrder>;

packages/common/src/generated-types.ts

@@ -2607,6 +2607,7 @@ export type Order = Node & {
   promotions: Array<Promotion>;
   payments?: Maybe<Array<Payment>>;
   fulfillments?: Maybe<Array<Fulfillment>>;
+  totalQuantity: Scalars['Int'];
   subTotalBeforeTax: Scalars['Int'];
   /** The subTotal is the total of the OrderLines, before order-level promotions and shipping has been applied. */
   subTotal: Scalars['Int'];
@@ -2645,6 +2646,7 @@ export type OrderFilterParameter = {
   code?: Maybe<StringOperators>;
   state?: Maybe<StringOperators>;
   active?: Maybe<BooleanOperators>;
+  totalQuantity?: Maybe<NumberOperators>;
   subTotalBeforeTax?: Maybe<NumberOperators>;
   subTotal?: Maybe<NumberOperators>;
   currencyCode?: Maybe<StringOperators>;
@@ -2716,6 +2718,7 @@ export type OrderSortParameter = {
   updatedAt?: Maybe<SortOrder>;
   code?: Maybe<SortOrder>;
   state?: Maybe<SortOrder>;
+  totalQuantity?: Maybe<SortOrder>;
   subTotalBeforeTax?: Maybe<SortOrder>;
   subTotal?: Maybe<SortOrder>;
   shipping?: Maybe<SortOrder>;

packages/core/e2e/graphql/generated-e2e-admin-types.ts

@@ -2463,6 +2463,7 @@ export type Order = Node & {
     promotions: Array<Promotion>;
     payments?: Maybe<Array<Payment>>;
     fulfillments?: Maybe<Array<Fulfillment>>;
+    totalQuantity: Scalars['Int'];
     subTotalBeforeTax: Scalars['Int'];
     /** The subTotal is the total of the OrderLines, before order-level promotions and shipping has been applied. */
     subTotal: Scalars['Int'];
@@ -2499,6 +2500,7 @@ export type OrderFilterParameter = {
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
+    totalQuantity?: Maybe<NumberOperators>;
     subTotalBeforeTax?: Maybe<NumberOperators>;
     subTotal?: Maybe<NumberOperators>;
     currencyCode?: Maybe<StringOperators>;
@@ -2566,6 +2568,7 @@ export type OrderSortParameter = {
     updatedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
+    totalQuantity?: Maybe<SortOrder>;
     subTotalBeforeTax?: Maybe<SortOrder>;
     subTotal?: Maybe<SortOrder>;
     shipping?: Maybe<SortOrder>;

packages/core/e2e/graphql/generated-e2e-shop-types.ts

@@ -1677,6 +1677,7 @@ export type Order = Node & {
     promotions: Array<Promotion>;
     payments?: Maybe<Array<Payment>>;
     fulfillments?: Maybe<Array<Fulfillment>>;
+    totalQuantity: Scalars['Int'];
     subTotalBeforeTax: Scalars['Int'];
     /** The subTotal is the total of the OrderLines, before order-level promotions and shipping has been applied. */
     subTotal: Scalars['Int'];
@@ -1713,6 +1714,7 @@ export type OrderFilterParameter = {
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
+    totalQuantity?: Maybe<NumberOperators>;
     subTotalBeforeTax?: Maybe<NumberOperators>;
     subTotal?: Maybe<NumberOperators>;
     currencyCode?: Maybe<StringOperators>;
@@ -1794,6 +1796,7 @@ export type OrderSortParameter = {
     updatedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
+    totalQuantity?: Maybe<SortOrder>;
     subTotalBeforeTax?: Maybe<SortOrder>;
     subTotal?: Maybe<SortOrder>;
     shipping?: Maybe<SortOrder>;

packages/elasticsearch-plugin/e2e/graphql/generated-e2e-elasticsearch-plugin-types.ts

@@ -2463,6 +2463,7 @@ export type Order = Node & {
     promotions: Array<Promotion>;
     payments?: Maybe<Array<Payment>>;
     fulfillments?: Maybe<Array<Fulfillment>>;
+    totalQuantity: Scalars['Int'];
     subTotalBeforeTax: Scalars['Int'];
     /** The subTotal is the total of the OrderLines, before order-level promotions and shipping has been applied. */
     subTotal: Scalars['Int'];
@@ -2499,6 +2500,7 @@ export type OrderFilterParameter = {
     code?: Maybe<StringOperators>;
     state?: Maybe<StringOperators>;
     active?: Maybe<BooleanOperators>;
+    totalQuantity?: Maybe<NumberOperators>;
     subTotalBeforeTax?: Maybe<NumberOperators>;
     subTotal?: Maybe<NumberOperators>;
     currencyCode?: Maybe<StringOperators>;
@@ -2566,6 +2568,7 @@ export type OrderSortParameter = {
     updatedAt?: Maybe<SortOrder>;
     code?: Maybe<SortOrder>;
     state?: Maybe<SortOrder>;
+    totalQuantity?: Maybe<SortOrder>;
     subTotalBeforeTax?: Maybe<SortOrder>;
     subTotal?: Maybe<SortOrder>;
     shipping?: Maybe<SortOrder>;

packages/ui-devkit/package.json

@@ -35,27 +35,27 @@
     "url": "https://github.com/vendure-ecommerce/vendure/issues"
   },
   "dependencies": {
-    "@angular-devkit/build-angular": "~0.900.5",
-    "@angular/cli": "^9.0.5",
-    "@angular/compiler": "^9.0.6",
-    "@angular/compiler-cli": "^9.0.6",
+    "@angular-devkit/build-angular": "~0.1001.4",
+    "@angular/cli": "^10.1.4",
+    "@angular/compiler": "^10.1.4",
+    "@angular/compiler-cli": "^10.1.4",
     "@vendure/admin-ui": "^0.15.2",
     "@vendure/common": "^0.15.0",
-    "chalk": "^3.0.0",
-    "chokidar": "^3.3.1",
-    "fs-extra": "^9.0.0",
+    "chalk": "^4.1.0",
+    "chokidar": "^3.4.2",
+    "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
-    "rxjs": "^6.5.4"
+    "rxjs": "^6.6.3"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@types/fs-extra": "^8.1.0",
-    "@types/glob": "^7.1.1",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@types/fs-extra": "^9.0.1",
+    "@types/glob": "^7.1.3",
     "@vendure/core": "^0.15.2",
-    "rimraf": "^3.0.0",
-    "rollup": "^2.2.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.26.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.28.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.27.3",
     "tslib": "^1.10.0",
     "typescript": "3.8.3"
   }