Merge pull request #2413 from ReliefApplications/2.x.x

2.x.x

Author: AntoineRelief

README.md

@@ -162,6 +162,12 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). -->
 
+If you need to upload files to the blob storage where we store shared assets, you can use the az commands.
+First, build the front-office in production mode ( any environment, but same version ).
+Then, run:
+
+az storage blob upload-batch --destination {container} --account-name {accountname} --destination-path {path-to-folder-in-container} --source {path-to-folder-locally}
+
 # Common issues
 
 ## Javascript heap out of memory

apps/back-office/src/app/app.component.ts

@@ -9,6 +9,7 @@ import {
   ResourceDropdownComponent,
   ResourceSelectTextComponent,
   TestServiceDropdownComponent,
+  CodeEditorComponent,
 } from '@oort-front/shared';
 import { TranslateService } from '@ngx-translate/core';
 import { environment } from '../environments/environment';
@@ -32,6 +33,7 @@ export class AppComponent implements OnInit {
     ResourceDropdownComponent,
     ResourceSelectTextComponent,
     TestServiceDropdownComponent,
+    CodeEditorComponent,
   ];
   /** Application title */
   title = 'back-office';

apps/web-widgets/project.json

@@ -83,19 +83,46 @@
               "maximumError": "2mb"
             }
           ],
+          "fileReplacements": [
+            {
+              "replace": "apps/web-widgets/src/environments/environment.ts",
+              "with": "apps/web-widgets/src/environments/environment.azure.uat.ts"
+            }
+          ],
+          "outputHashing": "none",
           "stylePreprocessorOptions": {
             "includePaths": [
               "libs/styles/src/lib/themes/default",
               "apps/web-widgets/src/app/styles"
             ]
-          },
+          }
+        },
+        "azure-local": {
           "fileReplacements": [
             {
               "replace": "apps/web-widgets/src/environments/environment.ts",
-              "with": "apps/web-widgets/src/environments/environment.azure.uat.ts"
+              "with": "apps/web-widgets/src/environments/environment.azure.local.ts"
             }
           ],
-          "outputHashing": "none"
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "12mb",
+              "maximumError": "15mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "1mb",
+              "maximumError": "2mb"
+            }
+          ],
+          "outputHashing": "none",
+          "stylePreprocessorOptions": {
+            "includePaths": [
+              "libs/styles/src/lib/themes/default",
+              "apps/web-widgets/src/app/styles"
+            ]
+          }
         },
         "oort-dev": {
           "budgets": [

apps/web-widgets/src/app/widgets/app-widget/app-widget.component.ts

@@ -4,6 +4,7 @@ import {
   EventEmitter,
   Injector,
   Input,
+  OnDestroy,
   OnInit,
   Output,
   ViewEncapsulation,
@@ -18,7 +19,7 @@ import {
   WorkflowService,
   MapLayersService,
 } from '@oort-front/shared';
-import { debounceTime } from 'rxjs';
+import { Subject, debounceTime, takeUntil } from 'rxjs';
 import { isEmpty } from 'lodash';
 import { ShadowDomService } from '@oort-front/ui';
 import { Router } from '@angular/router';
@@ -41,7 +42,7 @@ import { Router } from '@angular/router';
 })
 export class AppWidgetComponent
   extends ShadowRootExtendedHostComponent
-  implements OnInit
+  implements OnInit, OnDestroy
 {
   /** Application Id */
   @Input()
@@ -87,6 +88,8 @@ export class AppWidgetComponent
   /** Available pages */
   @Output()
   pages = new EventEmitter<any[]>();
+  /** Trigger subscription teardown on component destruction */
+  private destroy$: Subject<void> = new Subject<void>();
 
   /**
    * Application as Web Widget.
@@ -106,7 +109,7 @@ export class AppWidgetComponent
     private router: Router,
     private shadowDomService: ShadowDomService
   ) {
-    console.log('DEBUG: build from 02/14/2023');
+    console.log('DEBUG: build from 02/22/2023');
     super(el, injector);
     this.shadowDomService.shadowRoot = el.nativeElement.shadowRoot;
     this.contextService.filter$
@@ -115,8 +118,9 @@ export class AppWidgetComponent
         this.filterActive$.emit(!isEmpty(current));
         this.filter$.emit(current);
       });
-    this.applicationService.application$.subscribe(
-      (application: Application | null) => {
+    this.applicationService.application$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((application: Application | null) => {
         if (application) {
           const pages = application.pages
             ?.filter((x) => x.content)
@@ -134,8 +138,7 @@ export class AppWidgetComponent
         } else {
           this.pages.emit([]);
         }
-      }
-    );
+      });
   }
 
   /**
@@ -196,4 +199,9 @@ export class AppWidgetComponent
         return 'dashboard';
     }
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

apps/web-widgets/src/app/widgets/app-widget/application/pages/dashboard/dashboard.component.html

@@ -2,7 +2,8 @@
   *ngIf="!loading && showFilter && !isFullScreen"
   [isFullScreen]="isFullScreen"
   variant="modern"
-  [opened]="true"
+  [opened]="$any(dashboard?.filter?.show)"
+  [closable]="$any(dashboard?.filter?.closable)"
   [dashboard]="dashboard"
   [structure]="dashboard?.filter?.structure"
 ></shared-dashboard-filter>
@@ -17,7 +18,8 @@
     *ngIf="!loading && showFilter && isFullScreen"
     [editable]="true"
     [isFullScreen]="isFullScreen"
-    [opened]="true"
+    [opened]="$any(dashboard?.filter?.show)"
+    [closable]="$any(dashboard?.filter?.closable)"
     [dashboard]="dashboard"
     [structure]="dashboard?.filter?.structure"
   ></shared-dashboard-filter>

apps/web-widgets/src/environments/environment.azure.dev.ts

@@ -30,6 +30,6 @@ export const environment = {
   availableLanguages: ['en', 'test'],
   authConfig,
   theme,
-  tinymceBaseUrl: 'https://ems-safe-dev.who.int/tinymce',
-  i18nUrl: 'https://ems-safe-dev.who.int/assets/i18n/',
+  tinymceBaseUrl: 'https://ems2-dev.who.int/app-builder/tinymce',
+  i18nUrl: 'https://ems2-dev.who.int/app-builder/i18n/',
 };

apps/web-widgets/src/environments/environment.azure.local.ts

@@ -0,0 +1,12 @@
+import { environment as devEnvironment } from './environment.azure.dev';
+
+/**
+ * Environment file for local development.
+ * Similar to dev, but with different urls, so no CORS issues.
+ */
+export const environment = {
+  ...devEnvironment,
+  tinymceBaseUrl:
+    'https://whoemssafedsta03.blob.core.windows.net/shared/dev/tinymce/',
+  i18nUrl: 'https://whoemssafedsta03.blob.core.windows.net/shared/dev/i18n/',
+};

apps/web-widgets/src/environments/environment.azure.uat.ts

@@ -29,4 +29,6 @@ export const environment = {
   availableLanguages: ['en', 'test'],
   authConfig,
   theme,
+  tinymceBaseUrl: 'https://ems2-test.who.int/app-builder/tinymce',
+  i18nUrl: 'https://ems2-test.who.int/app-builder/i18n/',
 };

libs/shared/src/index.ts

@@ -111,6 +111,7 @@ export * from './lib/survey/components/resource-custom-filters/resource-custom-f
 export * from './lib/survey/components/resource-dropdown/resource-dropdown.component';
 export * from './lib/survey/components/resource-select-text/resource-select-text.component';
 export * from './lib/survey/components/test-service-dropdown/test-service-dropdown.component';
+export * from './lib/survey/components/code-editor/code-editor.component';
 
 /** Grid Layouts */
 export * from './lib/components/grid-layout/edit-layout-modal/public-api';

libs/shared/src/lib/components/aggregation/aggregation-grid/aggregation-grid.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
 import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
 import { Apollo, QueryRef } from 'apollo-angular';
 import {
@@ -9,7 +9,7 @@ import { AggregationBuilderService } from '../../../services/aggregation-builder
 import { AggregationService } from '../../../services/aggregation/aggregation.service';
 import { PAGER_SETTINGS } from './aggregation-grid.constants';
 import { GET_RESOURCE } from './graphql/queries';
-import { Subject, debounceTime, from, merge, takeUntil } from 'rxjs';
+import { Subject, debounceTime, filter, from, merge, takeUntil } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { QueryBuilderService } from '../../../services/query-builder/query-builder.service';
 import { GridService } from '../../../services/grid/grid.service';
@@ -99,6 +99,7 @@ export class AggregationGridComponent
    * @param apollo Apollo service
    * @param translate Angular translate service
    * @param contextService Shared context service
+   * @param {ElementRef} el Current components element ref in the DOM
    */
   constructor(
     private aggregationService: AggregationService,
@@ -107,7 +108,8 @@ export class AggregationGridComponent
     private gridService: GridService,
     private apollo: Apollo,
     private translate: TranslateService,
-    private contextService: ContextService
+    private contextService: ContextService,
+    private el: ElementRef
   ) {
     super();
   }
@@ -116,7 +118,19 @@ export class AggregationGridComponent
     // Listen to dashboard filters changes if it is necessary
     if (this.contextService.filterRegex.test(this.contextFilters as string)) {
       this.contextService.filter$
-        .pipe(debounceTime(500), takeUntil(this.destroy$))
+        .pipe(
+          // On working with web components we want to send filter value if this current element is in the DOM
+          // Otherwise send value always
+          filter(() =>
+            this.contextService.shadowDomService.isShadowRoot
+              ? this.contextService.shadowDomService.currentHost.contains(
+                  this.el.nativeElement
+                )
+              : true
+          ),
+          debounceTime(500),
+          takeUntil(this.destroy$)
+        )
         .subscribe(({ previous, current }) => {
           if (
             this.contextService.shouldRefresh(this.widget, previous, current)