Merge branch 'develop' of https://github.com/AbsaOSS/spline-ui into fix/228-setTimeout-refactor

Author: TerranceKhumalo-absa

ui/cypress/e2e/main-tests-spec.cy.ts

@@ -20,10 +20,53 @@ describe('Main Tests', () => {
         cy.title().should('eq', 'Spline - Data Lineage Tacking & Visualization')
     })
 
+    describe('Issue: datepicker calendar should filter data in the table', () => {
+        it('Datepicker panel should open after clicking on button with text `Everything`', () => {
+            cy.visit('/')
+            cy.get('ngx-daterangepicker-material').should('not.exist')
+            cy.get('spline-date-filter button').click()
+            cy.get('ngx-daterangepicker-material').should('exist')
+        })
+
+        it('Choosen date in datepicker should replace text on button with text `Everything`', () => {
+            cy.visit('/')
+            cy.get('spline-date-filter button').click()
+            cy.get('ngx-daterangepicker-material .ranges .ng-star-inserted:nth-child(5) button').click()
+            cy.get('ngx-daterangepicker-material .buttons_input button.btn:nth-child(3)').click()
+            cy.get('spline-date-filter button .spline-inline-filter__value').should('not.contain.text', 'Everything')
+            cy.get('spline-date-filter button .spline-inline-filter__value').invoke('text')            // check the innerHTML text
+                .should('match', /\d\d\d\d-\d\d-\d\d - \d\d\d\d-\d\d-\d\d/)
+            cy.get('body').click()
+            cy.get('ngx-daterangepicker-material').should('not.exist')
+        })
+
+        it('Choosen date should filter data in table', () => {
+            cy.visit('/')
+            cy.get('spline-date-filter button').click()
+            cy.get('ngx-daterangepicker-material .ranges .ng-star-inserted:nth-child(5) button').click()
+            cy.get('ngx-daterangepicker-material .buttons_input button.btn:nth-child(3)')
+                .should('contain.text', 'Apply').click()
+            cy.get('mat-table mat-row').should('have.length.lessThan', 10)
+            cy.get('ngx-daterangepicker-material').should('exist')
+        })
+
+        it('Choosen date should correctly apply after page reloading', () => {
+            cy.visit('/')
+            cy.get('spline-date-filter button').click()
+            cy.get('ngx-daterangepicker-material .ranges .ng-star-inserted:nth-child(7) button').click()
+            cy.get('ngx-daterangepicker-material .buttons_input button.btn:nth-child(3)')
+                .should('contain.text', 'Apply').click()
+            cy.get('ngx-daterangepicker-material').should('exist')
+            cy.reload()
+            cy.get('mat-table mat-row').should('have.length.at.least', 1)
+            cy.get('spline-loader mat-spinner').should('not.exist')
+        })
+    })
+
     describe('Issue: On event-overview page', () => {
         it('back button should restore the state of the previous page', () => {
             cy.visit('/')
-            cy.get('mat-row:nth-child(8) .link').first().click()
+            cy.get('mat-row:nth-child(9) .link').first().click()
             cy.get('sg-overview-control button').last().click()
             cy.wait(1000)
             cy.get('ngx-graph .node-group:nth-child(3)').click()

ui/package-lock.json

@@ -62,9 +62,10 @@
         "bootstrap": "^4.4.1",
         "d3-scale": "^4.0.2",
         "d3-shape": "^1.3.7",
+        "dayjs": "^1.11.7",
         "lodash-es": "^4.17.21",
         "moment": "^2.29.4",
-        "ngx-daterangepicker-material": "^4.0.1",
+        "ngx-daterangepicker-material": "^6.0.4",
         "ngx-json-viewer": "~3.0.2",
         "ngx-translate-multi-http-loader": "^3.0.0",
         "rxjs": "^7.0.0",
@@ -86,8 +87,9 @@
         "@babel/helper-get-function-arity": "^7.16.7",
         "@babel/plugin-transform-runtime": "^7.14.5",
         "@babel/runtime": "^7.14.6",
-        "@cypress/schematic": "^2.4.0",
+        "@cypress/schematic": "~2.4.0",
         "@ngrx/store-devtools": "^12.3.0",
+        "@schematics/angular": "^12.1.3",
         "@types/d3-shape": "^1.3.2",
         "@types/eslint": "^8.4.10",
         "@types/jest": "^27.5.2",
@@ -96,7 +98,7 @@
         "@typescript-eslint/eslint-plugin": "^4.28.2",
         "@typescript-eslint/parser": "^4.28.2",
         "codelyzer": "^6.0.0",
-        "cypress": "^12.3.0",
+        "cypress": "^12.5.1",
         "eslint": "^7.26.0",
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-import": "^2.27.5",
@@ -108,6 +110,8 @@
         "lint-staged": "^10.1.3",
         "loader-utils": "^2.0.4",
         "lodash": "^4.17.21",
+        "mockdate": "^3.0.5",
+        "ng-mocks": "^14.6.0",
         "ng-packagr": "^12.1.2",
         "ngrx-store-freeze": "^0.2.4",
         "replace-in-file": "^6.1.0",

ui/package.json

@@ -54,7 +54,7 @@ export namespace ExecutionEventsQuery {
         return {
             ...(queryParams?.filter ? toQueryFilterDto(queryParams.filter) : {}),
             ...(queryParams?.pager ? toQueryPagerDto(queryParams.pager) : {}),
-            ...(queryParams?.sortBy?.length ? toSortingDto(queryParams.sortBy) : {}),
+            ...(queryParams?.sortBy?.length ? toSortingDto(queryParams.sortBy) : {})
         }
     }
 
@@ -74,25 +74,39 @@ export namespace ExecutionEventsQuery {
     }
 
     export function toQueryParams(
-        searchParams: SearchQuery.SearchParams<QueryFilter, ExecutionEventField>,
+        searchParams: SearchQuery.SearchParams<QueryFilter, ExecutionEventField>
     ): QueryParams {
         const queryFilter = {
             ...searchParams.filter,
             ...searchParams.alwaysOnFilter,
-            searchTerm: searchParams.searchTerm,
+            searchTerm: searchParams.searchTerm
         }
         return {
             filter: queryFilter,
             pager: searchParams.pager,
-            sortBy: searchParams.sortBy,
+            sortBy: searchParams.sortBy
         }
     }
 
+    function parseDate(value = undefined) {
+        if (typeof value === 'number') {
+            return value
+        }
+        if (typeof value === 'string') {
+            return (Date.parse(value))
+        }
+        if (value instanceof Date) {
+            return value.getTime()
+        }
+
+        return undefined
+    }
 
     function toQueryFilterDto(queryFilter: QueryFilter): Partial<QueryParamsDto> {
+
         return {
-            timestampStart: queryFilter?.executedAtFrom ? queryFilter?.executedAtFrom.getTime() : undefined,
-            timestampEnd: queryFilter?.executedAtTo ? queryFilter?.executedAtTo.getTime() : undefined,
+            timestampStart: parseDate(queryFilter.executedAtFrom),
+            timestampEnd: parseDate(queryFilter.executedAtTo),
             searchTerm: queryFilter?.searchTerm?.length ? queryFilter?.searchTerm : undefined,
             dataSourceUri: queryFilter?.dataSourceUri,
             asAtTime: queryFilter?.asAtTime,
@@ -117,14 +131,14 @@ export namespace ExecutionEventsQuery {
         const offset = queryPager?.offset ?? 0
         return {
             pageSize: limit,
-            pageNum: offset / limit + 1,
+            pageNum: offset / limit + 1
         }
     }
 
     function toSortingDto(sortBy: QuerySorter.FieldSorter<ExecutionEventField>[]): Partial<QueryParamsDto> {
         return {
             sortField: sortBy[0].field,
-            sortOrder: sortBy[0].dir.toLowerCase(),
+            sortOrder: sortBy[0]?.dir?.toLowerCase()
         }
     }
 }

ui/projects/spline-api/src/lib/execution-event/models/entities/execution-event/execution-events-query.models.ts

@@ -15,23 +15,24 @@
  */
 
 import { Component, Input } from '@angular/core'
-import { SplineDateRangeFilter } from 'spline-common'
 import { BaseDynamicFilterControlComponent } from 'spline-common/dynamic-filter'
+import { SplineDateRangeValue } from 'spline-utils'
 
 import { DfControlDateRange } from './df-control-date-range.models'
 
+
 @Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'df-control-date-range',
-    templateUrl: './df-control-date-range.component.html',
+    templateUrl: './df-control-date-range.component.html'
 })
 export class DfControlDateRangeComponent<TId extends keyof any = any>
     extends BaseDynamicFilterControlComponent<DfControlDateRange.Value, DfControlDateRange.Options, TId> {
 
-    readonly defaultIcon = 'schedule'
-
     @Input() model: DfControlDateRange.Model<TId>
-
-    onDateFilterChanged(value: SplineDateRangeFilter.Value): void {
+    readonly defaultIcon = 'schedule'
+    
+    onDateFilterChanged(value: SplineDateRangeValue): void {
         this.model.patchValue(
             value
         )

ui/projects/spline-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.component.ts

@@ -14,18 +14,17 @@
  * limitations under the License.
  */
 
-import { SplineDateRangeFilter } from 'spline-common'
 import { BaseDynamicFilterControlModel, DynamicFilterControlSchema } from 'spline-common/dynamic-filter'
-import { SplineDateRangeValue } from 'spline-utils'
+import { SplineDateRangeValue, SplineRecord } from 'spline-utils'
 
 
 export namespace DfControlDateRange {
 
     export const TYPE = 'DfControlDateRange'
 
-    export type Value = SplineDateRangeFilter.Value
+    export type Value = SplineDateRangeValue
 
-    export type Options = {}
+    export type Options = SplineRecord
 
     export type Schema<TId extends keyof any = any> =
         & DynamicFilterControlSchema<Value, Options, TId>
@@ -35,20 +34,6 @@ export namespace DfControlDateRange {
             label?: string
             bounds?: SplineDateRangeValue | null
         }
-
-    export function getSchema<TId extends keyof any = any>(
-        label?: string,
-        icon?: string,
-        bounds?: SplineDateRangeValue | null): Partial<Schema> {
-
-        return {
-            type: TYPE,
-            label,
-            icon,
-            bounds
-        }
-    }
-
     export type Config = Omit<Schema, 'id' | 'type'>
 
     export class Model<TId extends keyof any = any> extends BaseDynamicFilterControlModel<Value, Options, TId> {

ui/projects/spline-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.models.ts

@@ -21,7 +21,7 @@ import { MatIconModule } from '@angular/material/icon'
 import { MatSortModule } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
 import { RouterModule } from '@angular/router'
-import { SplineLongTextModule, SplineSortHeaderModule, SplineVirtualScrollModule } from 'spline-common'
+import { SplineLongTextModule, SplineSortHeaderModule } from 'spline-common'
 import { SplineUtilsCommonModule } from 'spline-utils'
 import { SplineTranslateModule } from 'spline-utils/translate'
 
@@ -41,7 +41,6 @@ import * as fromServices from './services'
         SplineLongTextModule,
         SplineTranslateModule.forChild({}),
         SplineSortHeaderModule,
-        SplineVirtualScrollModule,
     ],
     declarations: [
         ...dynamicTableComponents,

ui/projects/spline-common/dynamic-table/src/core/dynamic-table.module.ts

@@ -35,20 +35,20 @@ import { BaseComponent } from 'spline-utils'
 
 import { SgControlPanelSectionDirective } from '../../directives/control-panel-action/sg-control-panel-section.directive'
 import {
+    SG_DEFAULT_LAYOUT_SETTINGS,
     SgData,
     SgLayoutSettings,
     SgNativeNode,
     SgNodeControlEvent,
     SgNodeEvent,
     SgNodeSchema,
-    SG_DEFAULT_LAYOUT_SETTINGS,
-    toSgNativeNode,
+    toSgNativeNode
 } from '../../models'
 
 
 @Component({
     selector: 'spline-graph',
-    templateUrl: './spline-graph.component.html',
+    templateUrl: './spline-graph.component.html'
 })
 export class SplineGraphComponent extends BaseComponent implements OnChanges, OnDestroy {
 
@@ -59,35 +59,15 @@ export class SplineGraphComponent extends BaseComponent implements OnChanges, On
     @Input() curve: fromD3Shape.CurveFactoryLineOnly | fromD3Shape.CurveFactory = fromD3Shape.curveBasis
     @Input() layoutSettings: SgLayoutSettings = SG_DEFAULT_LAYOUT_SETTINGS
     @Input() focusNode$: Observable<string>
-
-    @Input() set selectedNodeId(nodeId: string) {
-        if (nodeId !== this._selectedNodeId) {
-            this._selectedNodeId = nodeId
-        }
-    }
-
-    @Input() set targetNodeId(nodeId: string) {
-        if (nodeId !== this._targetNodeId) {
-            this._targetNodeId = nodeId
-        }
-    }
-
     @Output() substrateClick$ = new EventEmitter<{ mouseEvent: MouseEvent }>()
     @Output() nodeClick$ = new EventEmitter<{ nodeSchema: SgNodeSchema; mouseEvent: MouseEvent }>()
     @Output() nodeDoubleClick$ = new EventEmitter<{ nodeSchema: SgNodeSchema; mouseEvent: MouseEvent }>()
     @Output() nodeEvent$ = new EventEmitter<SgNodeEvent>()
     @Output() nodeSelectionChange$ = new EventEmitter<{ nodeSchema: SgNodeSchema | null }>()
-
-
-    _selectedNodeId: string
     _focusedNodeId: string
-    _targetNodeId: string
-
     readonly defaultNodeWidth = 350
     readonly defaultNodeHeight = 50
-
     readonly nativeGraphData$ = new BehaviorSubject<{ nodes: SgNativeNode[]; links: Edge[] }>(null)
-
     private focusedNodeTimer: any
     private nodeClicksStream$ = new Subject<{ node: SgNativeNode; mouseEvent: MouseEvent }>()
 
@@ -96,6 +76,22 @@ export class SplineGraphComponent extends BaseComponent implements OnChanges, On
         this.initNodeClicksEvents()
     }
 
+    _selectedNodeId: string
+
+    @Input() set selectedNodeId(nodeId: string) {
+        if (nodeId !== this._selectedNodeId) {
+            this._selectedNodeId = nodeId
+        }
+    }
+
+    _targetNodeId: string
+
+    @Input() set targetNodeId(nodeId: string) {
+        if (nodeId !== this._targetNodeId) {
+            this._targetNodeId = nodeId
+        }
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes?.graphData && changes.graphData.currentValue) {
             const currentGraphData: SgData = changes.graphData.currentValue
@@ -107,7 +103,7 @@ export class SplineGraphComponent extends BaseComponent implements OnChanges, On
         if (changes?.focusNode$ && changes.focusNode$.currentValue) {
             changes.focusNode$.currentValue
                 .pipe(
-                    takeUntil(this.destroyed$),
+                    takeUntil(this.destroyed$)
                 )
                 .subscribe((nodeId) => this.onFocusNode(nodeId))
         }
@@ -122,7 +118,7 @@ export class SplineGraphComponent extends BaseComponent implements OnChanges, On
     onNodeEvent(node: SgNativeNode, event: SgNodeControlEvent<any>): void {
         this.nodeEvent$.emit({
             nodeSchema: node,
-            event,
+            event
         })
     }
 
@@ -131,7 +127,7 @@ export class SplineGraphComponent extends BaseComponent implements OnChanges, On
 
         this.nodeClicksStream$.next({
             node,
-            mouseEvent,
+            mouseEvent
         })
     }
 
@@ -142,17 +138,17 @@ export class SplineGraphComponent extends BaseComponent implements OnChanges, On
     private initNodeClicksEvents(): void {
         const doubleClickDelayInMs = 150
         const buff$ = this.nodeClicksStream$.pipe(
-            debounceTime(doubleClickDelayInMs),
+            debounceTime(doubleClickDelayInMs)
         )
 
         this.nodeClicksStream$
             .pipe(
-                buffer(buff$),
+                buffer(buff$)
             )
             .subscribe((bufferValue: Array<{ node: SgNativeNode; mouseEvent: MouseEvent }>) => {
 
-                const refNode = bufferValue[0].node
-                const refMouseEvent = bufferValue[0].mouseEvent
+                const refNode = bufferValue[0]?.node
+                const refMouseEvent = bufferValue[0]?.mouseEvent
 
                 if (bufferValue.length === 1) {
                     this.nodeClick$.emit({ nodeSchema: refNode.schema, mouseEvent: refMouseEvent })
@@ -208,7 +204,7 @@ export class SplineGraphComponent extends BaseComponent implements OnChanges, On
                     this.focusedNodeTimer = null
                 }
             },
-            removeClassAfterTimeInMs,
+            removeClassAfterTimeInMs
         )
     }
 }