Fix issues from review

- Ensure extensions/extension-types.ts remains free from other imports
- Now check endpoint detail type is correct at runtime
- Cf Endpoint Type is now registered in cf package
- Ensure cf package tests & lint execute correctly
- Ensure endpoint details components are destroyed correctly

package.json

@@ -22,6 +22,7 @@
     "test": "run-s test-frontend:* --continue-on-error",
     "test-frontend:core": "ng test core --code-coverage --watch=false",
     "test-frontend:store": "ng test store --code-coverage --watch=false",
+    "test-frontend:cloud-foundry": "ng test cloud-foundry --code-coverage --watch=false",
     "posttest": "istanbul report json && node build/combine-coverage.js",
     "codecov": "codecov -f coverage/coverage-final.json",
     "lint": "ng lint --format stylish",

src/frontend/packages/cloud-foundry/src/cloud-foundry.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+
+import { StratosExtension } from '../../core/src/core/extension/extension-service';
+import { EndpointTypeConfig } from '../../core/src/core/extension/extension-types';
+import { urlValidationExpression } from '../../core/src/core/utils.service';
+import { CfEndpointDetailsComponent } from './shared/components/cf-endpoint-details/cf-endpoint-details.component';
+import { CloudFoundryComponentsModule } from './shared/components/components.module';
+
+const cloudFoundryEndpointTypes: EndpointTypeConfig[] = [{
+  value: 'cf',
+  label: 'Cloud Foundry',
+  urlValidation: urlValidationExpression,
+  icon: 'cloud_foundry',
+  iconFont: 'stratos-icons',
+  imagePath: '/core/assets/endpoint-icons/cloudfoundry.png',
+  homeLink: (guid) => ['/cloud-foundry', guid],
+  listDetailsComponent: CfEndpointDetailsComponent
+}];
+
+@StratosExtension({
+  endpointTypes: cloudFoundryEndpointTypes,
+})
+@NgModule({
+  imports: [
+    CloudFoundryComponentsModule
+  ],
+})
+export class CloudFoundryModule { }

src/frontend/packages/cloud-foundry/src/public_api.ts

@@ -2,6 +2,6 @@
  * Public API Surface of cloud-foundry
  */
 
-export * from './lib/cloud-foundry.service';
+// export * from './lib/cloud-foundry.service';
 export * from './lib/cloud-foundry.component';
 export * from './lib/cloud-foundry.module';

src/frontend/packages/core/src/shared/components/list/list-types/endpoint/cf-endpoint-details/cf-endpoint-details.component.spec.ts → src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.spec.ts

@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CoreModule } from '../../../../../../core/core.module';
-import { SharedModule } from '../../../../../shared.module';
+import { CoreModule } from '../../../../../core/src/core/core.module';
+import { SharedModule } from '../../../../../core/src/shared/shared.module';
 import { CfEndpointDetailsComponent } from './cf-endpoint-details.component';
 
 describe('CfEndpointDetailsComponent', () => {
@@ -10,7 +10,7 @@ describe('CfEndpointDetailsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [],
+      declarations: [CfEndpointDetailsComponent],
       imports: [
         CoreModule,
         SharedModule

src/frontend/packages/cloud-foundry/src/shared/components/cf-endpoint-details/cf-endpoint-details.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+import {
+  EndpointListDetailsComponent,
+} from '../../../../../core/src/shared/components/list/list-types/endpoint/endpoint-list.helpers';
+
+
+@Component({
+  selector: 'lib-cf-endpoint-details',
+  templateUrl: './cf-endpoint-details.component.html',
+  styleUrls: ['./cf-endpoint-details.component.scss']
+})
+export class CfEndpointDetailsComponent extends EndpointListDetailsComponent { }

src/frontend/packages/cloud-foundry/src/shared/components/components.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+
+import { CoreModule } from '../../../../core/src/core/core.module';
+import { CfEndpointDetailsComponent } from './cf-endpoint-details/cf-endpoint-details.component';
+
+@NgModule({
+  imports: [
+    CoreModule
+  ],
+  declarations: [
+    CfEndpointDetailsComponent
+  ],
+  exports: [
+    CfEndpointDetailsComponent
+  ],
+  entryComponents: [
+    CfEndpointDetailsComponent
+  ]
+})
+export class CloudFoundryComponentsModule { }

src/frontend/packages/cloud-foundry/src/test.ts

@@ -1,10 +1,7 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
 
 import { APP_BASE_HREF } from '@angular/common';
 import { getTestBed } from '@angular/core/testing';

src/frontend/packages/cloud-foundry/tsconfig.spec.json

@@ -2,15 +2,16 @@
   "extends": "../../../tsconfig.spec.json",
   "compilerOptions": {
     "outDir": "../../../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
   },
   "files": [
     "src/test.ts"
   ],
   "include": [
     "**/*.spec.ts",
     "**/*.d.ts"
-  ],
-  "exclude": [
-    "**/node_modules/**"
   ]
 }

src/frontend/packages/core/src/app.module.ts

@@ -6,6 +6,7 @@ import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router
 import { Store } from '@ngrx/store';
 import { debounceTime, withLatestFrom } from 'rxjs/operators';
 
+import { CloudFoundryModule } from '../../cloud-foundry/src/cloud-foundry.module';
 import { GetAllEndpoints } from '../../store/src/actions/endpoint.actions';
 import { GetOrganization } from '../../store/src/actions/organization.actions';
 import { SetRecentlyVisitedEntityAction } from '../../store/src/actions/recently-visited.actions';
@@ -38,6 +39,7 @@ import { CurrentUserPermissionsService } from './core/current-user-permissions.s
 import { DynamicExtensionRoutes } from './core/extension/dynamic-extension-routes';
 import { ExtensionService } from './core/extension/extension-service';
 import { getGitHubAPIURL, GITHUB_API_URL } from './core/github.helpers';
+import { LoggerService } from './core/logger.service';
 import { UserFavoriteManager } from './core/user-favorite-manager';
 import { CustomImportModule } from './custom-import.module';
 import { AboutModule } from './features/about/about.module';
@@ -56,7 +58,6 @@ import { ApplicationStateService } from './shared/components/application-state/a
 import { favoritesConfigMapper } from './shared/components/favorites-meta-card/favorite-config-mapper';
 import { SharedModule } from './shared/shared.module';
 import { XSRFModule } from './xsrf.module';
-import { LoggerService } from './core/logger.service';
 
 // Create action for router navigation. See
 // - https://github.com/ngrx/platform/issues/68
@@ -113,6 +114,7 @@ export class CustomRouterStateSerializer
     AboutModule,
     CustomImportModule,
     XSRFModule,
+    CloudFoundryModule
   ],
   providers: [
     LoggedInService,
@@ -138,7 +140,7 @@ export class AppModule {
     initEndpointExtensions(ext);
     // Once the CF modules become an extension point, these should be moved to a CF specific module
     this.registerCfFavoriteMappers();
-    this.userFavoriteManager = new UserFavoriteManager(store,  logger);
+    this.userFavoriteManager = new UserFavoriteManager(store, logger);
     const allFavs$ = this.userFavoriteManager.getAllFavorites();
     const recents$ = this.store.select(recentlyVisitedSelector);
     const debouncedApiRequestData$ = this.store.select(getAPIRequestDataState).pipe(debounceTime(2000));

src/frontend/packages/core/src/core/extension/extension-types.ts

@@ -2,9 +2,6 @@ import { Type } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Schema, schema } from 'normalizr';
 
-import { EndpointModel } from '../../../../store/src/types/endpoint.types';
-import { TableCellCustom } from '../../shared/components/list/list.types';
-
 // Allowable endpoint types
 export type EndpointType = 'cf' | 'metrics' | string;
 
@@ -26,9 +23,9 @@ export interface EndpointTypeConfig {
    */
   entitySchemaKeys?: string[];
   /**
-   * Show custom content in the endpoints list
+   * Show custom content in the endpoints list. Should be Type<EndpointListDetailsComponent>
    */
-  listDetailsComponent?: Type<TableCellCustom<EndpointModel>>;
+  listDetailsComponent?: any;
 }
 
 export interface EndpointAuthTypeConfig {

src/frontend/packages/core/src/features/endpoints/endpoint-helpers.ts

@@ -10,11 +10,7 @@ import { selectEntities } from '../../../../store/src/selectors/api.selectors';
 import { EndpointModel } from '../../../../store/src/types/endpoint.types';
 import { ExtensionService } from '../../core/extension/extension-service';
 import { EndpointAuthTypeConfig, EndpointType, EndpointTypeConfig } from '../../core/extension/extension-types';
-import { urlValidationExpression } from '../../core/utils.service';
-import {
-  CfEndpointDetailsComponent,
-} from '../../shared/components/list/list-types/endpoint/cf-endpoint-details/cf-endpoint-details.component';
-import { TableCellCustom } from '../../shared/components/list/list.types';
+import { EndpointListDetailsComponent } from '../../shared/components/list/list-types/endpoint/endpoint-list.helpers';
 import { CredentialsAuthFormComponent } from './connect-endpoint-dialog/auth-forms/credentials-auth-form.component';
 import { NoneAuthFormComponent } from './connect-endpoint-dialog/auth-forms/none-auth-form.component';
 import { SSOAuthFormComponent } from './connect-endpoint-dialog/auth-forms/sso-auth-form.component';
@@ -35,16 +31,6 @@ export interface EndpointIcon {
 }
 
 const endpointTypes: EndpointTypeConfig[] = [
-  {
-    value: 'cf',
-    label: 'Cloud Foundry',
-    urlValidation: urlValidationExpression,
-    icon: 'cloud_foundry',
-    iconFont: 'stratos-icons',
-    imagePath: '/core/assets/endpoint-icons/cloudfoundry.png',
-    homeLink: (guid) => ['/cloud-foundry', guid],
-    listDetailsComponent: CfEndpointDetailsComponent
-  },
   {
     value: 'metrics',
     label: 'Metrics',
@@ -83,7 +69,8 @@ let endpointAuthTypes: EndpointAuthTypeConfig[] = [
 
 const endpointTypesMap = {};
 
-export const endpointListDetailsComponents: Type<TableCellCustom<EndpointModel>>[] = [CfEndpointDetailsComponent];
+// Any initial endpointTypes listDetailsComponent should be added here
+export const coreEndpointListDetailsComponents: Type<EndpointListDetailsComponent>[] = [];
 
 export function initEndpointTypes(epTypes: EndpointTypeConfig[]) {
   epTypes.forEach(epType => {
@@ -98,10 +85,6 @@ export function initEndpointTypes(epTypes: EndpointTypeConfig[]) {
         }
       });
     }
-
-    if (epType.listDetailsComponent) {
-      endpointListDetailsComponents.push(epType.listDetailsComponent);
-    }
   });
 
   endpointTypes.forEach(ept => {

src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts

@@ -13,7 +13,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { endpointListDetailsComponents } from '../../../../../features/endpoints/endpoint-helpers';
+import { coreEndpointListDetailsComponents } from '../../../../../features/endpoints/endpoint-helpers';
 import { IListDataSource } from '../../data-sources-controllers/list-data-source-types';
 import {
   TableCellEventActionComponent,
@@ -165,7 +165,7 @@ export const listTableCells = [
   TableCellAServicePlanExtrasComponent,
   TableCellFavoriteComponent,
   TableCellEndpointDetailsComponent,
-  ...endpointListDetailsComponents
+  ...coreEndpointListDetailsComponents
 ];
 
 @Component({

src/frontend/packages/core/src/shared/components/list/list-types/endpoint/endpoint-card/endpoint-card.component.ts

@@ -1,4 +1,13 @@
-import { Component, ComponentFactoryResolver, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+  Component,
+  ComponentFactoryResolver,
+  ComponentRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 
 import { EndpointModel } from '../../../../../../../../store/src/types/endpoint.types';
@@ -7,23 +16,22 @@ import { EndpointsService } from '../../../../../../core/endpoints.service';
 import { EndpointTypeConfig } from '../../../../../../core/extension/extension-types';
 import { getFavoriteFromEndpointEntity } from '../../../../../../core/user-favorite-helpers';
 import {
-  endpointListDetailsComponents,
+  coreEndpointListDetailsComponents,
   getEndpointType,
   getFullEndpointApiUrl,
 } from '../../../../../../features/endpoints/endpoint-helpers';
 import { MetaCardMenuItem } from '../../../list-cards/meta-card/meta-card-base/meta-card.component';
 import { CardCell } from '../../../list.types';
 import { BaseEndpointsDataSource } from '../../cf-endpoints/base-endpoints-data-source';
-import { CfEndpointDetailsComponent } from '../cf-endpoint-details/cf-endpoint-details.component';
-import { EndpointListHelper } from '../endpoint-list.helpers';
+import { EndpointListDetailsComponent, EndpointListHelper } from '../endpoint-list.helpers';
 
 @Component({
   selector: 'app-endpoint-card',
   templateUrl: './endpoint-card.component.html',
   styleUrls: ['./endpoint-card.component.scss'],
-  entryComponents: [...endpointListDetailsComponents]
+  entryComponents: [...coreEndpointListDetailsComponents]
 })
-export class EndpointCardComponent extends CardCell<EndpointModel> implements OnInit {
+export class EndpointCardComponent extends CardCell<EndpointModel> implements OnInit, OnDestroy {
 
   public rowObs = new ReplaySubject<EndpointModel>();
   public favorite: UserFavoriteEndpoint;
@@ -33,7 +41,9 @@ export class EndpointCardComponent extends CardCell<EndpointModel> implements On
   public hasDetails = true;
   public endpointLink: string = null;
 
-  @Input() component: CfEndpointDetailsComponent;
+  private componentRef: ComponentRef<EndpointListDetailsComponent>;
+
+  @Input() component: EndpointListDetailsComponent;
   private endpointDetails: ViewContainerRef;
   @ViewChild('endpointDetails', { read: ViewContainerRef }) set content(content: ViewContainerRef) {
     this.endpointDetails = content;
@@ -60,7 +70,7 @@ export class EndpointCardComponent extends CardCell<EndpointModel> implements On
 
   @Input('dataSource')
   set dataSource(ds: BaseEndpointsDataSource) {
-    if (ds.endpointType !== 'cf' && !this.cardMenu) {
+    if (ds && ds.endpointType !== 'cf' && !this.cardMenu) {
       this.cardMenu = this.endpointListHelper.endpointActions().map(endpointAction => ({
         label: endpointAction.label,
         action: () => endpointAction.action(this.pRow),
@@ -82,6 +92,14 @@ export class EndpointCardComponent extends CardCell<EndpointModel> implements On
     this.hasDetails = !!e.listDetailsComponent;
   }
 
+  ngOnDestroy(): void {
+    this.endpointListHelper.destroyEndpointDetails({
+      componentRef: this.componentRef,
+      component: this.component,
+      endpointDetails: this.endpointDetails
+    });
+  }
+
   updateDetails() {
     if (!this.endpointDetails || !this.pRow) {
       return;
@@ -92,11 +110,16 @@ export class EndpointCardComponent extends CardCell<EndpointModel> implements On
     }
 
     if (!this.component) {
-      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(e.listDetailsComponent);
-      const componentRef = this.endpointDetails.createComponent(componentFactory);
-      this.component = componentRef.instance as CfEndpointDetailsComponent;
+      const res =
+        this.endpointListHelper.createEndpointDetails(e.listDetailsComponent, this.endpointDetails, this.componentFactoryResolver);
+      this.componentRef = res.componentRef;
+      this.component = res.component;
+    }
+
+    if (this.component) {
+      this.component.row = this.pRow;
+      this.component.isTable = false;
     }
-    this.component.row = this.pRow;
-    this.component.spaceBetween = false;
   }
+
 }