[kwa-kfp-component] Introduce KWA's frontend component for kfp links (#1991)

* Introduce the kfp-run component as a distinct component.
* Make the pipeline button a link.

Signed-off-by: Elena Zioga <[email protected]>

Signed-off-by: Elena Zioga <[email protected]>

Author: elenzio9

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/kfp-run/kfp-run.component.html

@@ -0,0 +1,13 @@
+<a
+  *ngIf="trialKfpRunUrl"
+  class="svg-color-enabled"
+  [href]="trialKfpRunUrl"
+  target="_blank"
+  rel="noopener noreferrer"
+>
+  <mat-icon svgIcon="pipeline-centered"> </mat-icon>
+</a>
+
+<div *ngIf="!trialKfpRunUrl" class="svg-color-disabled" matTooltip="No KFP run">
+  <mat-icon svgIcon="pipeline-centered"> </mat-icon>
+</div>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/kfp-run/kfp-run.component.scss

@@ -0,0 +1,7 @@
+.svg-color-enabled {
+  color: #1e88e5;
+}
+
+.svg-color-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/kfp-run/kfp-run.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
+
+import { KfpRunComponent } from './kfp-run.component';
+
+describe('KfpRunComponent', () => {
+  let component: KfpRunComponent;
+  let fixture: ComponentFixture<KfpRunComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatIconModule, MatIconTestingModule],
+      declarations: [KfpRunComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KfpRunComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/kfp-run/kfp-run.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { TableColumnComponent } from 'kubeflow/lib/resource-table/component-value/component-value.component';
+
+@Component({
+  selector: 'app-kfp-run',
+  templateUrl: './kfp-run.component.html',
+  styleUrls: ['./kfp-run.component.scss'],
+})
+export class KfpRunComponent implements TableColumnComponent {
+  constructor() {}
+
+  trialKfpRunUrl: string = '';
+
+  set element(experiment: any) {
+    if (experiment?.['kfp run']) {
+      this.trialKfpRunUrl = `/pipeline/#/runs/details/${experiment['kfp run']}`;
+    } else {
+      this.trialKfpRunUrl = '';
+    }
+  }
+}