From 766fef97a0b74877dc6c04d87903c5a271e70b46 Mon Sep 17 00:00:00 2001
From: Elena Zioga <elena@arrikto.com>
Date: Mon, 31 Oct 2022 15:55:49 +0200
Subject: [PATCH] UI: Make KWA's main table responsive and add toolbar (#1982)

* UI: Make KWA's main table responsive and add toolbar

* Add a top row toolbar with the title of the app and the button to
  create a new Experiment.
* Replace the card with a responsive table that shows the items. The
  component also has a paginator.

Signed-off-by: Elena Zioga <elena@arrikto.com>

* build: Update Dockerfile and README file

Update Dockerfile and README file to check out to the commit in master
branch from the Kubeflow repository that includes the corresponding
changes.

Signed-off-by: Elena Zioga <elena@arrikto.com>

Signed-off-by: Elena Zioga <elena@arrikto.com>
---
 cmd/new-ui/v1beta1/Dockerfile                 |  2 +-
 pkg/new-ui/v1beta1/README.md                  |  2 +-
 .../src/app/pages/experiments/config.ts       |  2 --
 .../experiments/experiments.component.html    | 27 ++++++++++++-------
 .../experiments/experiments.component.ts      | 15 ++++++++---
 .../pages/experiments/experiments.module.ts   | 20 ++------------
 6 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/cmd/new-ui/v1beta1/Dockerfile b/cmd/new-ui/v1beta1/Dockerfile
index 8a513a138a3..446e4a7f049 100644
--- a/cmd/new-ui/v1beta1/Dockerfile
+++ b/cmd/new-ui/v1beta1/Dockerfile
@@ -6,7 +6,7 @@ RUN apt-get update && apt-get install git -y
 WORKDIR /kf
 RUN git clone https://github.com/kubeflow/kubeflow.git && \
     cd kubeflow && \
-    git checkout ecb72c2
+    git checkout c4ca7a9
 
 # --- Build the frontend kubeflow library ---
 FROM node:12 AS frontend-kubeflow-lib
diff --git a/pkg/new-ui/v1beta1/README.md b/pkg/new-ui/v1beta1/README.md
index e338c8f17f8..3a2c9909b2e 100755
--- a/pkg/new-ui/v1beta1/README.md
+++ b/pkg/new-ui/v1beta1/README.md
@@ -42,7 +42,7 @@ You can build the common library with:
 ```bash
 cd /tmp && git clone https://github.com/kubeflow/kubeflow.git \
   && cd kubeflow \
-  && git checkout ecb72c2 \
+  && git checkout c4ca7a9 \
   && cd components/crud-web-apps/common/frontend/kubeflow-common-lib
 
 # build the common library module
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts
index 9f218103672..2dbb3686b89 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts
@@ -19,8 +19,6 @@ import {
 import { ExperimentOptimalTrialComponent } from './optimal-trial/experiment-optimal-trial.component';
 
 export const experimentsTableConfig: TableConfig = {
-  title: 'Experiments',
-  newButtonText: 'NEW EXPERIMENT',
   columns: [
     {
       matHeaderCellDef: 'Status',
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.html b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.html
index 6d78c73a212..c91eae9e7e3 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.html
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.html
@@ -1,11 +1,18 @@
-<lib-namespace-select
-  *ngIf="(ns.dashboardConnected$ | async) === dashboardDisconnectedState"
-  namespacesUrl="/katib/fetch_namespaces"
-></lib-namespace-select>
+<div class="lib-content-wrapper">
+  <lib-title-actions-toolbar title="Experiments" [buttons]="buttons" i18n-title>
+    <lib-namespace-select
+      *ngIf="(ns.dashboardConnected$ | async) === dashboardDisconnectedState"
+      namespacesUrl="/katib/fetch_namespaces"
+    ></lib-namespace-select>
+  </lib-title-actions-toolbar>
 
-<lib-resource-table
-  [config]="config"
-  [data]="experiments"
-  [trackByFn]="trackByFn"
-  (actionsEmitter)="reactToAction($event)"
-></lib-resource-table>
+  <div class="page-padding lib-flex-grow lib-overflow-auto">
+    <lib-table
+      [config]="config"
+      [data]="experiments"
+      [trackByFn]="trackByFn"
+      (actionsEmitter)="reactToAction($event)"
+    >
+    </lib-table>
+  </div>
+</div>
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts
index 62f30c5256f..b75d9d10f51 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts
@@ -18,6 +18,7 @@ import {
   TemplateValue,
   ActionEvent,
   DashboardState,
+  ToolbarButton,
 } from 'kubeflow';
 
 import { KWABackendService } from 'src/app/services/backend.service';
@@ -42,6 +43,17 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
   private subs = new Subscription();
   private poller: ExponentialBackoff;
 
+  buttons: ToolbarButton[] = [
+    new ToolbarButton({
+      text: `New Experiment`,
+      icon: 'add',
+      stroked: true,
+      fn: () => {
+        this.router.navigate(['/new']);
+      },
+    }),
+  ];
+
   constructor(
     private backend: KWABackendService,
     private confirmDialog: ConfirmDialogService,
@@ -73,9 +85,6 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
   reactToAction(a: ActionEvent) {
     const exp = a.data as Experiment;
     switch (a.action) {
-      case 'newResourceButton': // TODO: could also use enums here
-        this.router.navigate(['/new']);
-        break;
       case 'name:link':
         this.router.navigate([`/experiment/${exp.name}`]);
         break;
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.module.ts
index 81271db3d85..8c0ee5fac24 100644
--- a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.module.ts
+++ b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.module.ts
@@ -1,28 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import {
-  NamespaceSelectModule,
-  ResourceTableModule,
-  ConfirmDialogModule,
-} from 'kubeflow';
-
+import { KubeflowModule } from 'kubeflow';
 import { ExperimentsComponent } from './experiments.component';
 import { ExperimentOptimalTrialModule } from './optimal-trial/experiment-optimal-trial.module';
 
 @NgModule({
   declarations: [ExperimentsComponent],
-  imports: [
-    CommonModule,
-    NamespaceSelectModule,
-    ResourceTableModule,
-
-    ConfirmDialogModule,
-    ExperimentOptimalTrialModule,
-    MatCardModule,
-    ConfirmDialogModule,
-    MatCardModule,
-  ],
+  imports: [CommonModule, ExperimentOptimalTrialModule, KubeflowModule],
   exports: [ExperimentsComponent],
 })
 export class ExperimentsModule {}