feat(dg-table-view): set default view of DGs to table view and use ne…

…w table component

code/portfolio/src/sixsq/nuvla/ui/components/table_refactor_scenes.cljs

@@ -155,6 +155,15 @@
      [TableController {:!enable-row-selection? !enable-row-selection?
                        :!selected              !selected}]]))
 
+(defscene clickable-rows
+  (r/with-let [clicked-rows (r/atom #{})
+               on-row-click #(swap! clicked-rows conj %)]
+    [:div
+     [:div {:data-testid "clicked-rows-summary"
+            :style       {:margin "10px"}}
+      (str (count @clicked-rows) " rows clicked")]
+     [TableController {:on-row-click on-row-click}]]))
+
 (defn SearchInput
   [!global-filter]
   (js/console.info "Render SearchInput")

code/src/cljs/sixsq/nuvla/ui/common_components/plugins/table_refactor.cljs

@@ -245,9 +245,12 @@
 
 (defn TableRow
   [{:keys [::row-id-fn ::!visible-columns ::!columns-by-key
-           ::!enable-row-selection?] :as control} row]
+           ::!enable-row-selection? ::on-row-click] :as control} row]
   (r/with-let [row-id (row-id-fn row)]
     [ui/TableRow
+     (when on-row-click
+       {:on-click #(on-row-click row)
+        :style    {:cursor "pointer"}})
      [dnd/SortableContext
       {:items    (mapv name @!visible-columns)
        :strategy dnd/horizontalListSortingStrategy}
@@ -383,7 +386,7 @@
 (defn Table
   [control]
   (r/with-let [{:keys [::!enable-column-customization? ::set-current-columns-fn
-                       ::!enable-pagination? ::!visible-columns ::!max-height] :as control}
+                       ::!enable-pagination? ::!visible-columns ::!max-height ::on-row-click] :as control}
                (->> control
                     set-!visible-columns
                     set-!columns-by-key
@@ -409,7 +412,8 @@
       [:div.table-wrapper
        {:style (cond-> {}
                        @!max-height (assoc :max-height @!max-height))}
-       [ui/Table {:style {:border :unset}}
+       [ui/Table (cond-> {:style {:border :unset}}
+                         on-row-click (assoc :class :selectable))
         [TableHeader control]
         [TableBody control]]]]
      (when @!enable-pagination?
@@ -475,6 +479,10 @@
            !pagination
            set-pagination-fn
 
+           ;; Optional
+           ;; If present, makes table rows clickable. Rows will be highlighted on hover
+           on-row-click
+
            ;; Optional
            ;; Translations
            tr-fn
@@ -529,6 +537,7 @@
                 ::tr-fn                         tr-fn
                 ::!sticky-headers?              !sticky-headers?
                 ::!max-height                   !max-height
+                ::on-row-click                  on-row-click
                 }]))
 
 ;; table

code/src/cljs/sixsq/nuvla/ui/pages/deployment_sets/subs.cljs

@@ -1,5 +1,7 @@
 (ns sixsq.nuvla.ui.pages.deployment-sets.subs
-  (:require [re-frame.core :refer [reg-sub]]
+  (:require [re-frame.core :refer [reg-event-fx reg-sub]]
+            [sixsq.nuvla.ui.main.events :as main-events]
+            [sixsq.nuvla.ui.main.subs :as main-subs]
             [sixsq.nuvla.ui.pages.deployment-sets.spec :as spec]))
 
 (reg-sub
@@ -10,10 +12,31 @@
   ::deployment-sets
   :-> ::spec/deployment-sets)
 
+(reg-sub
+  ::deployment-sets-resources
+  :<- [::deployment-sets]
+  (fn [deployment-sets-response]
+    (:resources deployment-sets-response)))
+
 (reg-sub
   ::deployment-sets-summary
   :-> ::spec/deployment-sets-summary)
 
 (reg-sub
   ::state-selector
   :-> ::spec/state-selector)
+
+(def events-table-col-configs-local-storage-key "nuvla.ui.table.events.column-configs")
+
+(reg-sub
+  ::table-current-cols
+  :<- [::main-subs/current-cols events-table-col-configs-local-storage-key ::events-columns-ordering]
+  identity)
+
+(main-events/reg-set-current-cols-event-fx
+  ::set-table-current-cols-main events-table-col-configs-local-storage-key)
+
+(reg-event-fx
+  ::set-table-current-cols
+  (fn [_ [_ columns]]
+    {:fx [[:dispatch [::set-table-current-cols-main ::events-columns-ordering columns]]]}))

code/src/cljs/sixsq/nuvla/ui/pages/deployment_sets/views.cljs

@@ -5,6 +5,7 @@
             [sixsq.nuvla.ui.common-components.i18n.subs :as i18n-subs]
             [sixsq.nuvla.ui.common-components.plugins.full-text-search :as full-text-search-plugin]
             [sixsq.nuvla.ui.common-components.plugins.pagination :as pagination-plugin]
+            [sixsq.nuvla.ui.common-components.plugins.table-refactor :as table-refactor :refer [TableController]]
             [sixsq.nuvla.ui.main.components :as components]
             [sixsq.nuvla.ui.pages.deployment-sets-detail.views :as detail]
             [sixsq.nuvla.ui.pages.deployment-sets.events :as events]
@@ -21,7 +22,7 @@
             [sixsq.nuvla.ui.utils.style :as style]
             [sixsq.nuvla.ui.utils.time :as time]))
 
-(def view-type (r/atom :cards))
+(def view-type (r/atom :table))
 
 (def ^:const NEW "NEW")
 (def ^:const STARTED "STARTED")
@@ -118,45 +119,71 @@
           :loading?   @loading?
           :on-refresh #(dispatch [::events/refresh])}]]])))
 
-(defn DeploymentSetRow
-  [{:keys [id name description created state auto-update tags] :as _deployment-set}]
-  (let [uuid (general-utils/id->uuid id)
-        tr   (subscribe [::i18n-subs/tr])]
-    [ui/TableRow {:on-click #(dispatch [::routing-events/navigate routes/deployment-groups-details {:uuid uuid}])
-                  :style    {:cursor "pointer"}}
-     [ui/TableCell (or name uuid)]
-     [ui/TableCell description]
-     [ui/TableCell state]
-     [ui/TableCell [uix/TimeAgo created]]
-     [ui/TableCell (when auto-update [AutoUpdateIcon])]
-     [ui/TableCell [uix/Tags tags]]]))
-
 (defn Pagination
   []
   (let [deployment-sets @(subscribe [::subs/deployment-sets])]
     [pagination-plugin/Pagination {:db-path      [::spec/pagination]
                                    :total-items  (get deployment-sets :count 0)
                                    :change-event [::events/refresh]}]))
 
+(defn CellName
+  [_cell-data {:keys [uuid name] :as _deployment-set} _column]
+  (or name uuid))
+
+(defn CellDescription
+  [description _row _column]
+  description)
+
+(defn CellState
+  [state _row _column]
+  state)
+
+(defn CellCreated
+  [created _row _column]
+  [uix/TimeAgo created])
+
+(defn CellAutoUpdate
+  [auto-update _row _column]
+  (when auto-update [AutoUpdateIcon]))
+
+(defn CellTags
+  [tags _row _column]
+  [uix/Tags tags])
+
 (defn DeploymentSetTable
   []
-  (let [deployment-sets (subscribe [::subs/deployment-sets])]
+  (r/with-let [!resources  (subscribe [::subs/deployment-sets-resources])
+               !pagination (r/atom {:page-index 0
+                                    :page-size  25})]
     [:div style/center-items
-     [ui/Table {:compact "very" :selectable true}
-      [ui/TableHeader
-       [ui/TableRow
-        [ui/TableHeaderCell "name"]
-        [ui/TableHeaderCell "description"]
-        [ui/TableHeaderCell "state"]
-        [ui/TableHeaderCell "created"]
-        [ui/TableHeaderCell "auto update"]
-        [ui/TableHeaderCell "tags"]]]
-
-      [ui/TableBody
-       (for [{:keys [id] :as deployment-set} (:resources @deployment-sets)]
-         (when id
-           ^{:key id}
-           [DeploymentSetRow deployment-set]))]]]))
+     [TableController {:!columns               (r/atom [{::table-refactor/field-key      :name
+                                                         ::table-refactor/header-content "Name"
+                                                         ::table-refactor/field-cell     CellName}
+                                                        {::table-refactor/field-key      :description
+                                                         ::table-refactor/header-content "Description"
+                                                         ::table-refactor/field-cell     CellDescription}
+                                                        {::table-refactor/field-key      :state
+                                                         ::table-refactor/header-content "State"
+                                                         ::table-refactor/field-cell     CellState}
+                                                        {::table-refactor/field-key      :created
+                                                         ::table-refactor/header-content "Created"
+                                                         ::table-refactor/field-cell     CellCreated}
+                                                        {::table-refactor/field-key      :auto-update
+                                                         ::table-refactor/header-content "Auto update"
+                                                         ::table-refactor/field-cell     CellAutoUpdate}
+                                                        {::table-refactor/field-key      :tags
+                                                         ::table-refactor/header-content "Tags"
+                                                         ::table-refactor/field-cell     CellTags}])
+                       :!default-columns       (r/atom [:name :description :state :created :auto-update :tags])
+                       :!current-columns       (subscribe [::subs/table-current-cols])
+                       :set-current-columns-fn #(dispatch [::subs/set-table-current-cols %])
+                       :!data                  !resources
+                       :on-row-click           #(dispatch [::routing-events/navigate routes/deployment-groups-details
+                                                           {:uuid (general-utils/id->uuid (:id %))}])
+                       :!enable-global-filter? (r/atom false)
+                       :!enable-sorting?       (r/atom false)
+                       :!enable-pagination?    (r/atom true)
+                       :!pagination            !pagination}]]))
 
 (defn ops-status-overview-string [tr-fn {:keys [deployments-to-add deployments-to-remove deployments-to-update] :as _ops-status}]
   (let [deployments-sum (+ (count deployments-to-add)
@@ -246,9 +273,10 @@
         [AddFirstButton]]
        [:<>
         (case @view-type
-          :cards [DeploymentSetCards]
-          :table [DeploymentSetTable])
-        [Pagination]])]))
+          :cards [:<>
+                  [DeploymentSetCards]
+                  [Pagination]]
+          :table [DeploymentSetTable])])]))
 
 
 (defn deployment-sets-views

code/test/component/table-clickable-rows.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+import { gotoScene, locatorOne } from './utils';
+import { clickRow, expectClickedRowsCount } from './table';
+
+test('table-clickable-rows', async ({ page }, { config }) => {
+  const sceneRoot = await gotoScene(config, page, 'table-refactor-scenes', 'clickable-rows');
+
+  const table = await locatorOne(sceneRoot, 'table.ui');
+  await expectClickedRowsCount(sceneRoot, 0);
+
+  await clickRow(table, 0);
+  await expectClickedRowsCount(sceneRoot, 1);
+
+  await clickRow(table, 1);
+  await expectClickedRowsCount(sceneRoot, 2);
+
+  await clickRow(table, 2);
+  await expectClickedRowsCount(sceneRoot, 3);
+});

code/test/component/table.ts

@@ -60,10 +60,18 @@ export async function selectRow(table, rowIndex) {
   await table.locator('tbody > tr:nth-child(' + (rowIndex + 1) + ') > td:nth-child(1) > div').click();
 }
 
+export async function clickRow(table, rowIndex) {
+  await table.locator('tbody > tr:nth-child(' + (rowIndex + 1) + ')').click();
+}
+
 export async function expectSelectedItemsCount(sceneRoot, selectedItemsCount) {
   await expect(sceneRoot.getByTestId('selected-items-summary')).toHaveText(selectedItemsCount + ' items selected');
 }
 
+export async function expectClickedRowsCount(sceneRoot, clickedRowsCount) {
+  await expect(sceneRoot.getByTestId('clicked-rows-summary')).toHaveText(clickedRowsCount + ' rows clicked');
+}
+
 export async function expectPaginationState(page, table, paginationDiv, totalItems, pageSize, activeIndex, expectedIdxColumnData) {
   const paginationSummary = await locatorOne(paginationDiv, '>div:nth-child(1)');
   const paginationTotal = await locatorOne(paginationSummary, '>div:nth-child(1)');