TD-925: Bump Angular to 18 (#369)

2024-11-06 02:25:17 +00:00 · 2024-06-21 13:45:05 +05:00 · 2024-06-21 13:45:05 +05:00 · 87a9feddea
commit 87a9feddea
parent ba1e7c266b
25 changed files with 3562 additions and 3197 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,7 +1,7 @@
 module.exports = {
-    extends: '@vality/eslint-config',
+    extends: '@vality/eslint-config-ng',
    overrides: [
-        ...require('@vality/eslint-config/configs').angular('cc').overrides,
-        ...require('@vality/eslint-config/configs').importOrder(['@cc/**']).overrides,
+        ...require('@vality/eslint-config-ng/configs').angular('cc').overrides,
+        ...require('@vality/eslint-config-ng/configs').importOrder(['@cc/**']).overrides,
    ],
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,7 +8,7 @@
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint --max-warnings=0",
-    "lint:fix": "ng lint --fix",
+    "lint:fix": "npm run lint -- --fix",
    "format": "prettier ** --list-different",
    "format:fix": "prettier ** --write --log-level=warn",
    "spell": "cspell --no-progress **",
@ -16,63 +16,63 @@
    "fix": "npm run lint:fix && npm run format:fix && npm run spell:fix"
  },
  "dependencies": {
-    "@angular/animations": "17.2.1",
-    "@angular/cdk": "17.2.0",
-    "@angular/common": "17.2.1",
-    "@angular/compiler": "17.2.1",
-    "@angular/core": "17.2.1",
-    "@angular/forms": "17.2.1",
-    "@angular/material": "17.2.0",
-    "@angular/platform-browser": "17.2.1",
-    "@angular/platform-browser-dynamic": "17.2.1",
-    "@angular/platform-server": "17.2.1",
-    "@angular/router": "17.2.1",
+    "@angular/animations": "18.0.3",
+    "@angular/cdk": "18.0.3",
+    "@angular/common": "18.0.3",
+    "@angular/compiler": "18.0.3",
+    "@angular/core": "18.0.3",
+    "@angular/forms": "18.0.3",
+    "@angular/material": "18.0.3",
+    "@angular/platform-browser": "18.0.3",
+    "@angular/platform-browser-dynamic": "18.0.3",
+    "@angular/platform-server": "18.0.3",
+    "@angular/router": "18.0.3",
    "@ngneat/input-mask": "6.0.0",
    "@vality/deanonimus-proto": "2.0.1-2a02d87.0",
    "@vality/domain-proto": "2.0.1-b04aba8.0",
-    "@vality/dominator-proto": "1.0.1-b9788c2.0",
+    "@vality/dominator-proto": "1.0.1-41bee97.0",
    "@vality/fistful-proto": "2.0.1-6600be9.0",
    "@vality/machinegun-proto": "1.0.0",
    "@vality/magista-proto": "2.0.2-28d11b9.0",
-    "@vality/ng-core": "17.2.1-pr-64-0a6dad2.0",
-    "@vality/ng-thrift": "17.0.1-pr-5-2ce0f11.0",
+    "@vality/ng-core": "18.0.1-pr-63-9e315a6.0",
+    "@vality/ng-thrift": "18.0.1-pr-12-d099f93.0",
    "@vality/payout-manager-proto": "2.0.1-eb4091a.0",
    "@vality/repairer-proto": "2.0.2-07b73e9.0",
    "@vality/scrooge-proto": "0.1.1-9ce7fc6.0",
    "@vality/thrift-ts": "2.4.1-8ad5123.0",
    "@vality/woody": "0.1.3",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
    "inputmask": "5.0.7",
-    "keycloak-angular": "^15.0.0",
+    "keycloak-angular": "^16.0.1",
    "keycloak-js": "^20.0.5",
    "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.44.0",
-    "ngx-monaco-editor-v2": "^17.0.1",
+    "monaco-editor": "^0.49.0",
+    "ngx-monaco-editor-v2": "^18.0.1",
    "papaparse": "^5.4.1",
    "rxjs": "7.8.1",
    "short-uuid": "4.2.2",
    "tslib": "2.3.1",
    "utility-types": "3.10.0",
-    "yaml": "2.3.1",
+    "yaml": "2.4.5",
    "zone.js": "0.14.2"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "17.2.0",
-    "@angular-eslint/builder": "17.2.1",
-    "@angular-eslint/schematics": "17.2.1",
-    "@angular/cli": "17.2.0",
-    "@angular/compiler-cli": "17.2.1",
+    "@angular-devkit/build-angular": "18.0.4",
+    "@angular-eslint/builder": "18.0.1",
+    "@angular-eslint/schematics": "18.0.1",
+    "@angular/cli": "18.0.4",
+    "@angular/compiler-cli": "18.0.3",
    "@types/inputmask": "5.0.3",
    "@types/jasmine": "4.0.3",
    "@types/jwt-decode": "2.2.1",
    "@types/lodash-es": "^4.17.12",
    "@types/papaparse": "^5.3.14",
    "@vality/cspell-config": "^8.0.1-pr-57-482a037.0",
-    "@vality/eslint-config": "8.2.0",
+    "@vality/eslint-config-ng": "18.0.1-pr-63-e72dd8e.0",
    "@vality/prettier-config": "3.1.0",
    "cross-env": "^7.0.3",
    "cspell": "^8.3.2",
-    "eslint": "^8.53.0",
+    "eslint": "^8.57.0",
    "jasmine-core": "4.2.0",
    "jasmine-spec-reporter": "7.0.0",
    "jwt-decode": "2.2.0",
@ -82,7 +82,7 @@
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.0.0",
    "prettier": "~3.1.1",
-    "typescript": "~5.2.2",
+    "typescript": "~5.4.5",
    "typescript-memoize": "1.1.1"
  }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -1,6 +1,6 @@
 import { registerLocaleData } from '@angular/common';
 import localeRu from '@angular/common/locales/ru';
-import { LOCALE_ID, NgModule, Injector } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@ -44,12 +44,6 @@ import {

 registerLocaleData(localeRu);

-// Do not use in code! Only for extending windows methods
-/* eslint-disable @typescript-eslint/naming-convention */
-/** @internal */
-export let AppInjector: Injector;
-/* eslint-enable @typescript-eslint/naming-convention */
-
@NgModule({
    declarations: [AppComponent],
    imports: [
@ -102,10 +96,8 @@ export class AppModule {
    constructor(
        private matIconRegistry: MatIconRegistry,
        private domSanitizer: DomSanitizer,
-        private injector: Injector,
    ) {
        this.registerIcons();
-        AppInjector = this.injector;
    }

    registerIcons(): void {
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';

@ -28,7 +28,7 @@ const initializer = (keycloak: KeycloakService, configService: ConfigService) =>
    ]);

@NgModule({
-    imports: [CommonModule, HttpClientModule, KeycloakAngularModule],
+    imports: [CommonModule, KeycloakAngularModule],
    providers: [
        ConfigService,
        {
@ -37,6 +37,7 @@ const initializer = (keycloak: KeycloakService, configService: ConfigService) =>
            multi: true,
            deps: [KeycloakService, ConfigService],
        },
+        provideHttpClient(withInterceptorsFromDi()),
    ],
 })
 export class CoreModule {}
--- a/src/app/sections/claim/components/timeline-item-loading/_timeline-item-loading-theme.scss
+++ b/src/app/sections/claim/components/timeline-item-loading/_timeline-item-loading-theme.scss
@ -4,6 +4,6 @@
    $foreground: map-get($theme, foreground);

    .cc-timeline-item-loading-text {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
    }
 }
--- a/src/app/sections/not-found/_not-found-theme.scss
+++ b/src/app/sections/not-found/_not-found-theme.scss
@ -4,6 +4,6 @@
    $foreground: map-get($theme, foreground);

    .not-found {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
    }
 }
--- a/src/app/sections/payment-details/create-chargeback-dialog/create-chargeback-dialog.component.ts
+++ b/src/app/sections/payment-details/create-chargeback-dialog/create-chargeback-dialog.component.ts
@ -5,7 +5,7 @@ import { InvoicePaymentChargeback } from '@vality/domain-proto/domain';
 import { InvoicePaymentChargebackParams } from '@vality/domain-proto/payment_processing';
 import { DialogSuperclass, NotifyLogService } from '@vality/ng-core';
 import { from } from 'rxjs';
-import * as short from 'short-uuid';
+import short from 'short-uuid';

 import { InvoicingService } from '@cc/app/api/payment-processing';
 import { DomainMetadataFormExtensionsService } from '@cc/app/shared/services';
--- a/src/app/sections/routing-rules/_routing-rules-theme.scss
+++ b/src/app/sections/routing-rules/_routing-rules-theme.scss
@ -4,6 +4,6 @@
    $foreground: map-get($theme, foreground);

    .cc-routing-rules-caption {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
    }
 }
--- a/src/app/sections/tariffs/components/shops-tariffs/shops-tariffs.component.html
+++ b/src/app/sections/tariffs/components/shops-tariffs/shops-tariffs.component.html
@ -39,7 +39,7 @@
                matTooltipPosition="right"
                style="white-space: nowrap; cursor: default"
            >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
            </div>
        </ng-container>
    </ng-template>
--- a/src/app/sections/tariffs/components/shops-tariffs/utils/create-shop-fees-column.ts
+++ b/src/app/sections/tariffs/components/shops-tariffs/utils/create-shop-fees-column.ts
@ -21,17 +21,18 @@ export function createShopFeesColumn<T extends object = TermSetHierarchyObject>(
 ) {
    const filterRreserve = (v: CashFlowPosting) =>
        v?.source?.merchant === 0 && v?.destination?.merchant === 1;
-    const cols = createFeesColumns<T>(
-        (d) => getViewedCashFlowSelectors(fn(d)),
-        (v) => v?.source?.merchant === 0 && v?.destination?.system === 0,
-        (v) => !filterRreserve(v),
-        (d: T) => (v: InlineCashFlowSelector) =>
+    const filterDecisions = (d: T) => (v: InlineCashFlowSelector) =>
        (!v?.if?.condition?.party?.definition?.shop_is ||
            (v?.if?.condition?.party?.id === getPartyId(d) &&
                v?.if?.condition?.party?.definition?.shop_is === getShopId(d))) &&
        (!getCurrency(d) ||
            !v?.if?.condition?.currency_is?.symbolic_code ||
-                v?.if?.condition?.currency_is?.symbolic_code === getCurrency(d)),
+            v?.if?.condition?.currency_is?.symbolic_code === getCurrency(d));
+    const cols = createFeesColumns<T>(
+        (d) => getViewedCashFlowSelectors(fn(d)),
+        (v) => v?.source?.merchant === 0 && v?.destination?.system === 0,
+        (v) => !filterRreserve(v),
+        filterDecisions,
    );
    return [
        ...cols.slice(0, -1),
@ -39,9 +40,9 @@ export function createShopFeesColumn<T extends object = TermSetHierarchyObject>(
            field: 'rreserve',
            header: 'RReserve',
            formatter: (d) =>
-                getInlineDecisions(getViewedCashFlowSelectors(fn(d)), filterRreserve).map(
-                    (v) => v.value,
-                ),
+                getInlineDecisions(getViewedCashFlowSelectors(fn(d)), filterRreserve)
+                    .filter(filterDecisions(d))
+                    .map((v) => v.value),
        },
        cols.at(-1),
    ];
--- a/src/app/sections/tariffs/components/shops-term-set-history-card/shops-term-set-history-card.component.html
+++ b/src/app/sections/tariffs/components/shops-term-set-history-card/shops-term-set-history-card.component.html
@ -18,7 +18,7 @@
                matTooltipPosition="right"
                style="white-space: nowrap; cursor: default"
            >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
            </div>
        </ng-container>
    </ng-template>
--- a/src/app/sections/tariffs/components/terminals-term-set-history-card/terminals-term-set-history-card.component.html
+++ b/src/app/sections/tariffs/components/terminals-term-set-history-card/terminals-term-set-history-card.component.html
@ -18,7 +18,7 @@
                matTooltipPosition="right"
                style="white-space: nowrap; cursor: default"
            >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
            </div>
        </ng-container>
    </ng-template>
--- a/src/app/sections/tariffs/components/terminals-terms/terminals-terms.component.html
+++ b/src/app/sections/tariffs/components/terminals-terms/terminals-terms.component.html
@ -40,7 +40,7 @@
                    text-overflow: ellipsis;
                "
            >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
            </div>
        </ng-container>
    </ng-template>
--- a/src/app/sections/tariffs/components/terminals-terms/terminals-terms.component.ts
+++ b/src/app/sections/tariffs/components/terminals-terms/terminals-terms.component.ts
@ -79,7 +79,7 @@ export class TerminalsTermsComponent implements OnInit {
    columns: Column<TerminalTermSet>[] = [
        createDomainObjectColumn<TerminalTermSet>('terminal', (d) => d.terminal_id),
        createDomainObjectColumn<TerminalTermSet>('provider', (d) => d.provider_id),
-        { field: 'currency' },
+        { field: 'currencies', formatter: (d) => d.currencies.join(', ') },
        ...createTerminalFeesColumn<TerminalTermSet>((d) => d.current_term_set),
        {
            field: 'term_set_history',
--- a/src/app/sections/tariffs/components/wallets-tariffs/wallets-tariffs.component.html
+++ b/src/app/sections/tariffs/components/wallets-tariffs/wallets-tariffs.component.html
@ -42,7 +42,7 @@
                    text-overflow: ellipsis;
                "
            >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
            </div>
        </ng-container>
    </ng-template>
--- a/src/app/sections/tariffs/components/wallets-term-set-history-card/wallets-term-set-history-card.component.html
+++ b/src/app/sections/tariffs/components/wallets-term-set-history-card/wallets-term-set-history-card.component.html
@ -18,7 +18,7 @@
                matTooltipPosition="right"
                style="white-space: nowrap; cursor: default"
            >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
            </div>
        </ng-container>
    </ng-template>
--- a/src/app/sections/tariffs/utils/get-inline-decisions.ts
+++ b/src/app/sections/tariffs/utils/get-inline-decisions.ts
@ -57,7 +57,9 @@ function formatCashFlowAccount(acc: CashFlowAccount) {
 }

 export function formatLevelPredicate(v: InlineCashFlowSelector) {
-    return `${' '.repeat(v.level)}${formatPredicate(v.if) || (v.level > 0 ? '↳' : '')}`;
+    return `${'\xa0'.repeat(Math.max(v.level - 1, 0))}${v.level > 0 ? '↳' : ''} ${formatPredicate(
+        v.if,
+    )}`;
 }

 export function getInlineDecisions(
--- a/src/app/sections/withdrawals/components/create-adjustment-dialog/create-adjustment-dialog.component.ts
+++ b/src/app/sections/withdrawals/components/create-adjustment-dialog/create-adjustment-dialog.component.ts
@ -6,7 +6,7 @@ import { AdjustmentParams } from '@vality/fistful-proto/withdrawal_adjustment';
 import { DialogSuperclass, forkJoinToResult, NotifyLogService } from '@vality/ng-core';
 import { isTypeWithAliases } from '@vality/ng-thrift';
 import { BehaviorSubject, of } from 'rxjs';
-import * as short from 'short-uuid';
+import short from 'short-uuid';

 import { ManagementService } from '@cc/app/api/withdrawal';

--- a/src/app/shared/services/domain-metadata-form-extensions/domain-metadata-form-extensions.service.ts
+++ b/src/app/shared/services/domain-metadata-form-extensions/domain-metadata-form-extensions.service.ts
@ -6,7 +6,7 @@ import { getNoTimeZoneIsoString, getImportValue } from '@vality/ng-core';
 import { ThriftData, isTypeWithAliases } from '@vality/ng-thrift';
 import { Observable, of } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
-import * as short from 'short-uuid';
+import short from 'short-uuid';

 import { DomainStoreService } from '@cc/app/api/domain-config';

--- a/src/app/shared/services/domain-metadata-form-extensions/utils/create-party-claim-domain-metadata-form-extensions.ts
+++ b/src/app/shared/services/domain-metadata-form-extensions/utils/create-party-claim-domain-metadata-form-extensions.ts
@ -3,7 +3,7 @@ import { Party } from '@vality/domain-proto/domain';
 import { isTypeWithAliases } from '@vality/ng-thrift';
 import uniqBy from 'lodash-es/uniqBy';
 import { of } from 'rxjs';
-import * as short from 'short-uuid';
+import short from 'short-uuid';

 import {
    MetadataFormExtension,
--- a/src/app/shared/services/user-info-based-id-generator/user-info-based-id-generator.service.ts
+++ b/src/app/shared/services/user-info-based-id-generator/user-info-based-id-generator.service.ts
@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { KeycloakService } from 'keycloak-angular';
-import * as short from 'short-uuid';
+import short from 'short-uuid';

@Injectable()
 export class UserInfoBasedIdGeneratorService {
--- a/src/app/shared/utils/table/format-predicate.ts
+++ b/src/app/shared/utils/table/format-predicate.ts
@ -28,13 +28,13 @@ export function formatPredicate(predicate: Predicate, level = 0) {
            const condition = predicate.condition;
            switch (getUnionKey(condition)) {
                case 'currency_is':
-                    return `currency: ${condition.currency_is.symbolic_code}`;
+                    return `currency = ${condition.currency_is.symbolic_code}`;
                case 'bin_data':
-                    return `bin_data: ${inlineJson(toJson(condition.bin_data), Infinity)}`;
+                    return `bin_data = ${inlineJson(toJson(condition.bin_data), Infinity)}`;
                case 'category_is':
-                    return `category: #${condition.category_is.id}`;
+                    return `category = #${condition.category_is.id}`;
                case 'cost_in':
-                    return `cost: ${
+                    return `cost = ${
                        getUnionKey(condition.cost_in.lower) === 'inclusive' ? '[' : '('
                    }${formatCurrency(
                        getUnionValue(condition.cost_in.lower)?.amount,
@ -44,22 +44,26 @@ export function formatPredicate(predicate: Predicate, level = 0) {
                        getUnionValue(condition.cost_in.upper)?.currency?.symbolic_code,
                    )}${getUnionKey(condition.cost_in.upper) === 'inclusive' ? ']' : ')'}`;
                case 'cost_is_multiple_of':
-                    return `cost_is_multiple: ${formatCurrency(
+                    return `cost_is_multiple = ${formatCurrency(
                        condition.cost_is_multiple_of.amount,
                        condition.cost_is_multiple_of.currency.symbolic_code,
                    )}`;
                case 'identification_level_is':
-                    return `identification_level: ${condition.identification_level_is}`; // TODO: fix enum value
+                    return `identification_level = ${condition.identification_level_is}`; // TODO: fix enum value
                case 'p2p_tool':
-                    return `p2p_tool: ${inlineJson(toJson(condition.p2p_tool), Infinity)}`;
+                    return `p2p_tool = ${inlineJson(toJson(condition.p2p_tool), Infinity)}`;
                case 'party':
-                    return `party: ${inlineJson(toJson(condition.party), Infinity)}`;
+                    return `party = (#${condition.party.id}${
+                        condition.party?.definition
+                            ? ' & ' + inlineJson(toJson(condition.party?.definition), Infinity)
+                            : ''
+                    })`;
                case 'payment_tool':
-                    return `payment_tool: ${inlineJson(toJson(condition.payment_tool), Infinity)}`;
+                    return `payment_tool = ${inlineJson(toJson(condition.payment_tool), Infinity)}`;
                case 'payout_method_is':
-                    return `payout_method: #${condition.payout_method_is.id}`; // TODO: fix enum value
+                    return `payout_method = ${condition.payout_method_is.id}`; // TODO: fix enum value
                case 'shop_location_is':
-                    return `shop_url: ${condition.shop_location_is.url}`;
+                    return `shop_url = ${condition.shop_location_is.url}`;
            }
            return '';
        }
--- a/src/components/details-item/_details-item-theme.scss
+++ b/src/components/details-item/_details-item-theme.scss
@ -5,6 +5,6 @@

    .cc-details-item-title,
    .cc-details-item-content-empty {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
    }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -6,13 +6,13 @@
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": false,
+        "esModuleInterop": true,
        "noImplicitOverride": false,
        "noPropertyAccessFromIndexSignature": false,
        "noImplicitReturns": false,
        "noFallthroughCasesInSwitch": false,
        "sourceMap": true,
        "declaration": false,
-        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
@ -20,7 +20,6 @@
        "module": "ES2022",
        "useDefineForClassFields": false,
        "lib": ["ESNext", "DOM"],
-        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "paths": {