Fixed Chef Automate UI not responding when clicking on "+" symbol to show test results (#8673)

* added changes to fix the + icons on reports details page

Signed-off-by: vinay sharma <[email protected]>

* updated module name

Signed-off-by: vinay sharma <[email protected]>

---------

Signed-off-by: vinay sharma <[email protected]>

Author: vinay033

components/automate-ui/src/app/app.module.ts

@@ -32,7 +32,7 @@ import { ChefComponentsModule } from './components/chef-components.module';
 import { ChefPipesModule } from './pipes/chef-pipes.module';
 import { ComplianceModule } from './pages/+compliance/compliance.module';
 import { ComplianceSharedModule } from './pages/+compliance/shared/shared.module';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import { IntegrationsModule } from './pages/integrations/integrations.module';
 import { PolicyModule } from './modules/policy/policy.module';
 import { ProjectModule } from './pages/project/project.module';
@@ -300,7 +300,7 @@ import { MfeSessionService } from './services/mfe-session/mfe-session.service';
     CookieModule.withOptions(),
     FormsModule,
     HttpClientModule,
-    InfiniteScrollModule,
+    InfiniteScrollDirective,
     InfraProxyModule,
     IntegrationsModule,
     NgrxEffectsModule,

components/automate-ui/src/app/page-components/selectbox/selectbox.component.spec.ts

@@ -9,7 +9,7 @@ import { ngrxReducers, NgrxStateAtom, runtimeChecks } from 'app/ngrx.reducers';
 import { EventEmitter } from '@angular/core';
 // import { By } from '@angular/platform-browser';
 import { MockComponent } from 'ng2-mock-component';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 
 
 describe('SelectboxComponent', () => {
@@ -33,7 +33,7 @@ describe('SelectboxComponent', () => {
         FormsModule,
         ReactiveFormsModule,
         RouterTestingModule,
-        InfiniteScrollModule,
+        InfiniteScrollDirective,
         StoreModule.forRoot(ngrxReducers, { runtimeChecks })
       ],
       schemas: []

components/automate-ui/src/app/pages/+compliance/+node-credentials/node-credentials-list/node-credential-list.component.spec.ts

@@ -10,7 +10,7 @@ import { FeatureFlagsService } from 'app/services/feature-flags/feature-flags.se
 import { FormBuilder } from '@angular/forms';
 import { NodeCredential, NodeCredentialTypes } from 'app/entities/node-credentials/node-credential.model';
 import { MatOptionSelectionChange } from '@angular/material/core';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TelemetryService } from 'app/services/telemetry/telemetry.service';
 
@@ -65,7 +65,7 @@ describe('NodeCredentialListComponent', () => {
       ],
       imports: [
         ChefPipesModule,
-        InfiniteScrollModule,
+        InfiniteScrollDirective,
         RouterTestingModule,
         StoreModule.forRoot(ngrxReducers, { initialState: defaultInitialState, runtimeChecks })
       ]

components/automate-ui/src/app/pages/+compliance/+node-credentials/node-credentials.module.ts

@@ -15,7 +15,7 @@ import {
 import { NodeCredentialDetailsScreenComponent } from './node-credential-details/node-credential-details.component';
 import { CreateNodeCredentialModalComponent } from './create-node-credential-modal/create-node-credential-modal.component';
 import { SaveNodeCredential } from '../../../entities/node-credentials/node-credential.model';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 @NgModule({
   imports: [
     CommonModule,
@@ -25,7 +25,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
-    InfiniteScrollModule
+    InfiniteScrollDirective
   ],
   declarations: [
     NodeCredentialListComponent,

components/automate-ui/src/app/pages/+compliance/+reporting/+reporting-node/reporting-node.component.html

@@ -247,12 +247,12 @@ <h2 class="metadata-group-heading">Metadata</h2>
                           </chef-icon>
                           <p>{{ result.code_desc }}</p>
                         </div>
-                        <div class="result-item-body" *ngIf="result.message.length || result.skip_message.length">
+                        <div class="result-item-body" *ngIf="result.message?.length || result.skip_message?.length">
                           <chef-snippet [code]="result.message + result.skip_message"></chef-snippet>
                         </div>
                       </div>
                       <!-- display message when there are no results -->
-                      <div class="result-item" *ngIf="control.result.length === 0">
+                      <div class="result-item" *ngIf="control.result?.length === 0">
                         <div class="result-item-header">
                           <p>No tests were executed</p>
                         </div>

components/automate-ui/src/app/pages/+compliance/+reporting/+reporting-node/reporting-node.component.scss

@@ -618,6 +618,7 @@ dl.waiver-details {
 .wrapper {
   height: 100vh;
   width: 100%;
+  overflow-y: scroll;
 }
 
 ::ng-deep .wrapper::-webkit-scrollbar {

components/automate-ui/src/app/pages/+compliance/+reporting/+reporting-node/reporting-node.module.ts

@@ -7,7 +7,7 @@ import { ReportingNodeComponent } from './reporting-node.component';
 import { ReportingNodeRoutingModule } from './reporting-node.routing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ChefPipesModule } from '../../../../pipes/chef-pipes.module';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 
 @NgModule({
   imports: [
@@ -17,7 +17,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
     ComplianceSharedModule,
     ChefComponentsModule,
     ChefPipesModule,
-    InfiniteScrollModule
+    InfiniteScrollDirective
   ],
   declarations: [
     ReportingNodeComponent

components/automate-ui/src/app/pages/+compliance/+reporting/reporting.module.ts

@@ -8,7 +8,7 @@ import { ReportingSearchbarComponent } from './reporting-searchbar/reporting-sea
 import { ReportingRoutingModule } from './reporting.routing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ChefPipesModule } from '../../../pipes/chef-pipes.module';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 
 @NgModule({
   imports: [
@@ -18,7 +18,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
     ChefComponentsModule,
     ChefPipesModule,
     ReportingRoutingModule,
-    InfiniteScrollModule
+    InfiniteScrollDirective
   ],
   declarations: [
     ReportingComponent,

components/automate-ui/src/app/pages/+compliance/+scanner/scanner.module.ts

@@ -16,7 +16,7 @@ import { NodesEditComponent } from './containers/nodes-edit/nodes-edit.component
 import { AccordionComponent } from '../../../page-components/accordion/accordion.component';
 import { AccordionItemComponent } from '../../../page-components/accordion/accordion-item/accordion-item.component';
 import { SelectboxComponent } from '../../../page-components/selectbox/selectbox.component';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 
 @NgModule({
   imports: [
@@ -26,7 +26,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
     ReactiveFormsModule,
     RouterModule,
     ScannerRoutingModule,
-    InfiniteScrollModule
+    InfiniteScrollDirective
   ],
   providers: [
     ChefStatusIconPipe,