Blitz - Add table view to marketplace service table

src/frontend/packages/cloud-foundry/src/features/applications/application-delete/application-delete.component.spec.ts

@@ -2,7 +2,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { GetApplication } from '../../../../../cloud-foundry/src/actions/application.actions';
 import { cfEntityFactory } from '../../../../../cloud-foundry/src/cf-entity-factory';
-import { CustomImportModule } from '../../../../../core/src/custom-import.module';
 import { TabNavService } from '../../../../../core/tab-nav.service';
 import { generateTestApplicationServiceProvider } from '../../../../../core/test-framework/application-service-helper';
 import { generateTestEntityServiceProvider } from '../../../../../core/test-framework/entity-service.helper';

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

@@ -36,10 +36,6 @@ import {
 import {
   CloudFoundryQuotasComponent,
 } from '../../../../core/src/features/cloud-foundry/tabs/cloud-foundry-quotas/cloud-foundry-quotas.component';
-import { EndpointListHelper } from '../../../../core/src/shared/components/list/list-types/endpoint/endpoint-list.helpers';
-import {
-  EndpointsListConfigService,
-} from '../../../../core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service';
 import { SharedModule } from '../../../../core/src/shared/shared.module';
 import { CloudFoundryComponentsModule } from '../../shared/components/components.module';
 import {

src/frontend/packages/cloud-foundry/src/shared/components/add-service-instance/add-service-instance/add-service-instance.component.spec.ts

@@ -52,6 +52,21 @@ import {
   CreateApplicationStep1Component,
 } from '../../create-application/create-application-step1/create-application-step1.component';
 import { CfServiceCardComponent } from '../../list/list-types/cf-services/cf-service-card/cf-service-card.component';
+import {
+  TableCellServiceActiveComponent,
+} from '../../list/list-types/cf-services/table-cell-service-active/table-cell-service-active.component';
+import {
+  TableCellServiceBindableComponent,
+} from '../../list/list-types/cf-services/table-cell-service-bindable/table-cell-service-bindable.component';
+import {
+  TableCellServiceCfBreadcrumbsComponent,
+} from '../../list/list-types/cf-services/table-cell-service-cf-breadcrumbs/table-cell-service-cf-breadcrumbs.component';
+import {
+  TableCellServiceReferencesComponent,
+} from '../../list/list-types/cf-services/table-cell-service-references/table-cell-service-references.component';
+import {
+  TableCellServiceTagsComponent,
+} from '../../list/list-types/cf-services/table-cell-service-tags/table-cell-service-tags.component';
 import { SchemaFormComponent } from '../../schema-form/schema-form.component';
 import { SelectServiceComponent } from '../../select-service/select-service.component';
 import { ServiceIconComponent } from '../../service-icon/service-icon.component';
@@ -99,7 +114,12 @@ describe('AddServiceInstanceComponent', () => {
         ServicePlanPublicComponent,
         ServicePlanPriceComponent,
         FocusDirective,
-        SpecifyUserProvidedDetailsComponent
+        SpecifyUserProvidedDetailsComponent,
+        TableCellServiceActiveComponent,
+        TableCellServiceBindableComponent,
+        TableCellServiceReferencesComponent,
+        TableCellServiceCfBreadcrumbsComponent,
+        TableCellServiceTagsComponent
       ],
       imports: [
         ...generateCfBaseTestModulesNoShared(),

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

@@ -1,4 +1,3 @@
-// tslint:disable:max-line-length
 import { CommonModule } from '@angular/common';
 import { ApplicationModule, NgModule } from '@angular/core';
 import { MaterialDesignFrameworkModule } from 'stratos-angular6-json-schema-form';
@@ -108,6 +107,24 @@ import {
   CfSecurityGroupsCardComponent,
 } from './list/list-types/cf-security-groups/cf-security-groups-card/cf-security-groups-card.component';
 import { CfServiceCardComponent } from './list/list-types/cf-services/cf-service-card/cf-service-card.component';
+import {
+  TableCellServiceActiveComponent,
+} from './list/list-types/cf-services/table-cell-service-active/table-cell-service-active.component';
+import {
+  TableCellServiceBindableComponent,
+} from './list/list-types/cf-services/table-cell-service-bindable/table-cell-service-bindable.component';
+import {
+  TableCellServiceCfBreadcrumbsComponent,
+} from './list/list-types/cf-services/table-cell-service-cf-breadcrumbs/table-cell-service-cf-breadcrumbs.component';
+import {
+  TableCellServiceProviderComponent,
+} from './list/list-types/cf-services/table-cell-service-provider/table-cell-service-provider.component';
+import {
+  TableCellServiceReferencesComponent,
+} from './list/list-types/cf-services/table-cell-service-references/table-cell-service-references.component';
+import {
+  TableCellServiceTagsComponent,
+} from './list/list-types/cf-services/table-cell-service-tags/table-cell-service-tags.component';
 import {
   TableCellServiceInstanceAppsAttachedComponent,
 } from './list/list-types/cf-spaces-service-instances/table-cell-service-instance-apps-attached/table-cell-service-instance-apps-attached.component';
@@ -159,6 +176,7 @@ import { ServiceIconComponent } from './service-icon/service-icon.component';
 import { ServicePlanPriceComponent } from './service-plan-price/service-plan-price.component';
 import { ServicePlanPublicComponent } from './service-plan-public/service-plan-public.component';
 
+// tslint:disable:max-line-length
 // tslint:enable:max-line-length
 
 @NgModule({
@@ -250,7 +268,13 @@ import { ServicePlanPublicComponent } from './service-plan-public/service-plan-p
     TableCellUsageComponent,
     TableCellQuotaComponent,
     TableCellServiceComponent,
-    TableCellServiceLastOpComponent
+    TableCellServiceLastOpComponent,
+    TableCellServiceTagsComponent,
+    TableCellServiceCfBreadcrumbsComponent,
+    TableCellServiceProviderComponent,
+    TableCellServiceBindableComponent,
+    TableCellServiceActiveComponent,
+    TableCellServiceReferencesComponent
   ],
   exports: [
     ServiceIconComponent,
@@ -336,6 +360,13 @@ import { ServicePlanPublicComponent } from './service-plan-public/service-plan-p
     TableCellUsageComponent,
     TableCellQuotaComponent,
     TableCellServiceComponent,
+    TableCellServiceLastOpComponent,
+    TableCellServiceTagsComponent,
+    TableCellServiceCfBreadcrumbsComponent,
+    TableCellServiceProviderComponent,
+    TableCellServiceBindableComponent,
+    TableCellServiceActiveComponent,
+    TableCellServiceReferencesComponent,
     TableCellServiceLastOpComponent
   ]
 })

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.html

@@ -27,35 +27,20 @@
   <app-meta-card-item>
     <app-meta-card-key>Active</app-meta-card-key>
     <app-meta-card-value>
-      <app-boolean-indicator [isTrue]="serviceEntity.entity.active" type="yes-no">
-      </app-boolean-indicator>
+      <app-table-cell-service-active [row]="serviceEntity"></app-table-cell-service-active>
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
     <app-meta-card-key>Bindable</app-meta-card-key>
     <app-meta-card-value>
-      <app-boolean-indicator [isTrue]="serviceEntity.entity.bindable" type="yes-no">
-      </app-boolean-indicator>
+      <app-table-cell-service-bindable [row]="serviceEntity"></app-table-cell-service-bindable>
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
     <app-meta-card-key>References</app-meta-card-key>
     <app-meta-card-value>
-      <div class="service-card__links">
-        <div class="service-card__link" *ngIf="hasDocumentationUrl()">
-          <a class="service-card__icon-link" [href]="getDocumentationUrl()" target="_blank" appClickStopPropagation>
-            <mat-icon>launch</mat-icon>
-          </a>
-          <a [href]="getDocumentationUrl()" target="_blank" appClickStopPropagation>Docs</a>
-        </div>
-        <div class="service-card__link" *ngIf="hasSupportUrl()">
-          <a class="service-card__icon-link" [href]="getSupportUrl()" target="_blank" appClickStopPropagation>
-            <mat-icon>launch</mat-icon>
-          </a>
-          <a [href]="getSupportUrl()" target="_blank" appClickStopPropagation>Support</a>
-        </div>
-      </div>
-      <div *ngIf="!hasDocumentationUrl() && !hasSupportUrl()">-</div>
+      <app-table-cell-service-references [row]="serviceEntity">
+      </app-table-cell-service-references>
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item *ngIf="extraInfo?.providerDisplayName">
@@ -65,14 +50,13 @@
   <app-meta-card-item *ngIf="cfOrgSpace.multipleConnectedEndpoints$ | async">
     <app-meta-card-key>CF Endpoint</app-meta-card-key>
     <app-meta-card-value>
-      <app-cf-org-space-links [service]="cfOrgSpace" [spaceBreadCrumbs]="getSpaceBreadcrumbs()">
-      </app-cf-org-space-links>
+      <app-table-cell-service-cf-breadcrumbs [row]="serviceEntity"></app-table-cell-service-cf-breadcrumbs>
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item customStyle="column">
     <app-meta-card-key>Tags</app-meta-card-key>
     <app-meta-card-value>
-      <app-chips [chips]="tags"></app-chips>
+      <app-table-cell-service-tags [row]="serviceEntity"></app-table-cell-service-tags>
     </app-meta-card-value>
   </app-meta-card-item>
 </app-meta-card>

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.scss

@@ -5,30 +5,6 @@
     justify-content: space-between;
     width: 100%;
   }
-  &__links {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-  &__link {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    &:not(:first-child) {
-      margin-left: 6px;
-    }
-    mat-icon {
-      font-size: 16px;
-      height: 16px;
-      margin-right: 2px;
-      text-decoration: none;
-      width: 16px;
-      &:focus,
-      &:active {
-        text-decoration: none;
-      }
-    }
-  }
   &__icon-link {
     align-items: center;
     display: flex;

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.spec.ts

@@ -11,6 +11,15 @@ import {
 } from '../../../../../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { CfOrgSpaceLinksComponent } from '../../../../cf-org-space-links/cf-org-space-links.component';
 import { ServiceIconComponent } from '../../../../service-icon/service-icon.component';
+import { TableCellServiceActiveComponent } from '../table-cell-service-active/table-cell-service-active.component';
+import { TableCellServiceBindableComponent } from '../table-cell-service-bindable/table-cell-service-bindable.component';
+import {
+  TableCellServiceCfBreadcrumbsComponent,
+} from '../table-cell-service-cf-breadcrumbs/table-cell-service-cf-breadcrumbs.component';
+import {
+  TableCellServiceReferencesComponent,
+} from '../table-cell-service-references/table-cell-service-references.component';
+import { TableCellServiceTagsComponent } from '../table-cell-service-tags/table-cell-service-tags.component';
 import { CfServiceCardComponent } from './cf-service-card.component';
 
 describe('CfServiceCardComponent', () => {
@@ -25,7 +34,12 @@ describe('CfServiceCardComponent', () => {
         MetadataCardTestComponents,
         BooleanIndicatorComponent,
         AppChipsComponent,
-        ServiceIconComponent
+        ServiceIconComponent,
+        TableCellServiceActiveComponent,
+        TableCellServiceBindableComponent,
+        TableCellServiceReferencesComponent,
+        TableCellServiceCfBreadcrumbsComponent,
+        TableCellServiceTagsComponent
       ],
       imports: generateCfBaseTestModulesNoShared(),
       providers: [

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-services/cf-service-card/cf-service-card.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable, of as observableOf } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { CFAppState } from '../../../../../../../../cloud-foundry/src/cf-app-state';
 import { IService, IServiceExtra } from '../../../../../../../../core/src/core/cf-api-svc.types';
@@ -41,12 +41,6 @@ export class CfServiceCardComponent extends CardCell<APIResource<IService>> {
           this.extraInfo = JSON.parse(this.serviceEntity.entity.extra);
         } catch { }
       }
-      this.serviceEntity.entity.tags.forEach(t => {
-        this.tags.push({
-          value: t,
-          hideClearButton$: observableOf(true)
-        });
-      });
 
       if (!this.cfOrgSpace) {
         this.cfOrgSpace = new CfOrgSpaceLabelService(this.store, this.serviceEntity.entity.cfGuid);
@@ -73,23 +67,6 @@ export class CfServiceCardComponent extends CardCell<APIResource<IService>> {
     return getServiceName(this.serviceEntity);
   }
 
-  hasDocumentationUrl() {
-    return !!(this.getDocumentationUrl());
-  }
-  getDocumentationUrl() {
-    return this.extraInfo && this.extraInfo.documentationUrl;
-  }
-
-  hasSupportUrl() {
-    return !!(this.getSupportUrl());
-  }
-
-  getSupportUrl() {
-    return this.extraInfo && this.extraInfo.supportUrl;
-  }
-
-  getSpaceBreadcrumbs = () => ({ breadcrumbs: 'services-wall' });
-
   goToServiceInstances = () =>
     this.store.dispatch(new RouterNav({
       path: ['marketplace', this.serviceEntity.entity.cfGuid, this.serviceEntity.metadata.guid]