From decfe7eae6a4049658f4a00f10949bb4fa5f49bb Mon Sep 17 00:00:00 2001
From: Emmy Leke <emmy.leke@planetcrust.com>
Date: Thu, 20 Apr 2023 15:32:26 +0100
Subject: [PATCH] Make standalone CResourceList full height

---
 client/web/admin/src/mixins/listHelpers.js    |   2 +-
 .../admin/src/themes/corteza-base/custom.scss |  18 ++
 .../src/views/Automation/Session/List.vue     |  13 +-
 .../src/views/Automation/Workflow/List.vue    |   7 +-
 .../admin/src/views/Federation/Nodes/List.vue |   4 +-
 .../src/views/System/Application/List.vue     |   7 +-
 .../src/views/System/AuthClient/List.vue      |   6 +-
 .../web/admin/src/views/System/Queue/List.vue |   6 +-
 .../web/admin/src/views/System/Role/List.vue  |   8 +-
 .../views/System/SensitivityLevel/List.vue    |   5 +-
 .../admin/src/views/System/Template/List.vue  |   8 +-
 .../web/admin/src/views/System/User/List.vue  |   9 +-
 client/web/reporter/src/mixins/listHelpers.js |   2 +-
 client/web/reporter/src/views/Report/List.vue | 169 +++++-----
 client/web/workflow/src/mixins/listHelpers.js |   2 +-
 .../web/workflow/src/views/Workflow/List.vue  | 289 +++++++++---------
 16 files changed, 312 insertions(+), 243 deletions(-)

diff --git a/client/web/admin/src/mixins/listHelpers.js b/client/web/admin/src/mixins/listHelpers.js
index f12b26cdf..f95609b56 100644
--- a/client/web/admin/src/mixins/listHelpers.js
+++ b/client/web/admin/src/mixins/listHelpers.js
@@ -10,7 +10,7 @@ export default {
       filter: {},
 
       pagination: {
-        limit: 10,
+        limit: 100,
         pageCursor: undefined,
         prevPage: '',
         nextPage: '',
diff --git a/client/web/admin/src/themes/corteza-base/custom.scss b/client/web/admin/src/themes/corteza-base/custom.scss
index 1bb91b399..fee90ccee 100644
--- a/client/web/admin/src/themes/corteza-base/custom.scss
+++ b/client/web/admin/src/themes/corteza-base/custom.scss
@@ -49,6 +49,24 @@ th {
   white-space: nowrap;
 }
 
+.wrap-with-vertical-gutters {
+  margin-top: -0.25rem;
+
+  > * {
+    margin-top: 0.25rem;
+  }
+}
+
+// custom height for resource lists with buttons
+.custom-resource-height {
+  height: calc(100vh - 115px);
+}
+
+// to remove the gap on top of the sticky header table
+.b-table-sticky-header > .table.b-table > thead > tr > th {
+  border: 0;
+}
+
 .v-select {
   .vs__search {
     margin-top: 0.375rem;
diff --git a/client/web/admin/src/views/Automation/Session/List.vue b/client/web/admin/src/views/Automation/Session/List.vue
index 9a7895d2e..51ca4cea8 100644
--- a/client/web/admin/src/views/Automation/Session/List.vue
+++ b/client/web/admin/src/views/Automation/Session/List.vue
@@ -1,9 +1,11 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
+    class="overflow-auto"
   >
     <c-content-header
       :title="$t('title')"
+      class="content-header"
     />
 
     <c-resource-list
@@ -23,6 +25,8 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
+      class="h-100"
       hide-search
     >
       <template #header>
@@ -34,7 +38,6 @@
           :exclusive-label="$t('filterForm.exclusive.label')"
           @change="filterList"
         />
-
         <b-form-radio-group
           v-model="filter.status"
           :options="statusOptions"
@@ -156,3 +159,9 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.content-header{
+  margin-bottom: 0 !important;
+}
+</style>
diff --git a/client/web/admin/src/views/Automation/Workflow/List.vue b/client/web/admin/src/views/Automation/Workflow/List.vue
index 031864a9a..d70046c9e 100644
--- a/client/web/admin/src/views/Automation/Workflow/List.vue
+++ b/client/web/admin/src/views/Automation/Workflow/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -15,6 +15,7 @@
         >
           {{ $t('new') }}
         </b-button>
+
         <c-permissions-button
           v-if="canGrant"
           resource="corteza::automation:workflow/*"
@@ -25,6 +26,7 @@
           {{ $t('permissions') }}
         </c-permissions-button>
       </span>
+
       <b-dropdown
         v-if="false"
         variant="link"
@@ -37,6 +39,7 @@
         </b-dropdown-item-button>
       </b-dropdown>
     </c-content-header>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -55,6 +58,8 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      class="custom-resource-height"
+      sticky-header
       @search="filterList"
     >
       <template #header>
diff --git a/client/web/admin/src/views/Federation/Nodes/List.vue b/client/web/admin/src/views/Federation/Nodes/List.vue
index 4cdcaa36c..cf828976d 100644
--- a/client/web/admin/src/views/Federation/Nodes/List.vue
+++ b/client/web/admin/src/views/Federation/Nodes/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -30,6 +30,7 @@
       :pagination="pagination"
       :sorting="sorting"
       :items="items"
+      class="custom-resource-height"
       :translations="{
         searchPlaceholder: $t('filterForm.query.placeholder'),
         notFound: $t('admin:general.notFound'),
@@ -40,6 +41,7 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
       hide-total
       @search="filterList"
     >
diff --git a/client/web/admin/src/views/System/Application/List.vue b/client/web/admin/src/views/System/Application/List.vue
index 37abee4b9..7a178e628 100644
--- a/client/web/admin/src/views/System/Application/List.vue
+++ b/client/web/admin/src/views/System/Application/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -17,6 +17,7 @@
         >
           {{ $t('new') }}
         </b-button>
+
         <c-permissions-button
           v-if="canGrant"
           resource="corteza::system:application/*"
@@ -26,6 +27,7 @@
           {{ $t('permissions') }}
         </c-permissions-button>
       </span>
+
       <b-dropdown
         v-if="false"
         variant="link"
@@ -38,6 +40,7 @@
         </b-dropdown-item-button>
       </b-dropdown>
     </c-content-header>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -46,6 +49,7 @@
       :fields="fields"
       :items="items"
       :row-class="genericRowClass"
+      class="custom-resource-height"
       :translations="{
         searchPlaceholder: $t('filterForm.query.placeholder'),
         notFound: $t('admin:general.notFound'),
@@ -56,6 +60,7 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
       @search="filterList"
     >
       <template #header>
diff --git a/client/web/admin/src/views/System/AuthClient/List.vue b/client/web/admin/src/views/System/AuthClient/List.vue
index 9bfa366d1..f42db4a1c 100644
--- a/client/web/admin/src/views/System/AuthClient/List.vue
+++ b/client/web/admin/src/views/System/AuthClient/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -17,6 +17,7 @@
         >
           {{ $t('new') }}
         </b-button>
+
         <c-permissions-button
           v-if="canGrant"
           resource="corteza::system:auth-client/*"
@@ -27,6 +28,7 @@
         </c-permissions-button>
       </span>
     </c-content-header>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -35,6 +37,7 @@
       :fields="fields"
       :items="items"
       :row-class="genericRowClass"
+      class="custom-resource-height"
       :translations="{
         searchPlaceholder: $t('filterForm.query.placeholder'),
         notFound: $t('admin:general.notFound'),
@@ -45,6 +48,7 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
       hide-search
       @search="filterList"
     >
diff --git a/client/web/admin/src/views/System/Queue/List.vue b/client/web/admin/src/views/System/Queue/List.vue
index 9f72b3c18..0dc0e9309 100644
--- a/client/web/admin/src/views/System/Queue/List.vue
+++ b/client/web/admin/src/views/System/Queue/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -18,6 +18,7 @@
           {{ $t('new') }}
         </b-button>
       </span>
+
       <b-dropdown
         v-if="false"
         variant="link"
@@ -30,6 +31,7 @@
         </b-dropdown-item-button>
       </b-dropdown>
     </c-content-header>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -38,6 +40,7 @@
       :fields="fields"
       :items="items"
       :row-class="genericRowClass"
+      class="custom-resource-height"
       :translations="{
         searchPlaceholder: $t('filterForm.handle.placeholder'),
         notFound: $t('admin:general.notFound'),
@@ -48,6 +51,7 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
       @search="filterList"
     >
       <template #header>
diff --git a/client/web/admin/src/views/System/Role/List.vue b/client/web/admin/src/views/System/Role/List.vue
index a6d871104..e0781476b 100644
--- a/client/web/admin/src/views/System/Role/List.vue
+++ b/client/web/admin/src/views/System/Role/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -17,6 +17,7 @@
         >
           {{ $t('new') }}
         </b-button>
+
         <c-permissions-button
           v-if="canGrant"
           resource="corteza::system:role/*"
@@ -26,6 +27,7 @@
           {{ $t('permissions') }}
         </c-permissions-button>
       </span>
+
       <b-dropdown
         v-if="false"
         variant="link"
@@ -37,6 +39,7 @@
           {{ $t('yaml') }}
         </b-dropdown-item-button>
       </b-dropdown>
+
       <c-corredor-manual-buttons
         ui-page="role/list"
         ui-slot="toolbar"
@@ -46,6 +49,7 @@
         @click="dispatchCortezaSystemEvent($event)"
       />
     </c-content-header>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -54,6 +58,7 @@
       :fields="fields"
       :items="items"
       :row-class="rowClass"
+      class="custom-resource-height"
       :translations="{
         searchPlaceholder: $t('filterForm.query.placeholder'),
         notFound: $t('admin:general.notFound'),
@@ -64,6 +69,7 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
       @search="filterList"
     >
       <template #header>
diff --git a/client/web/admin/src/views/System/SensitivityLevel/List.vue b/client/web/admin/src/views/System/SensitivityLevel/List.vue
index 0970f4192..61bebce1a 100644
--- a/client/web/admin/src/views/System/SensitivityLevel/List.vue
+++ b/client/web/admin/src/views/System/SensitivityLevel/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -18,6 +18,7 @@
         </b-button>
       </span>
     </c-content-header>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -26,6 +27,7 @@
       :fields="fields"
       :items="items"
       :row-class="genericRowClass"
+      class="custom-resource-height"
       :translations="{
         notFound: $t('admin:general.notFound'),
         noItems: $t('admin:general.resource-list.no-items'),
@@ -35,6 +37,7 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
       hide-search
     >
       <template #header>
diff --git a/client/web/admin/src/views/System/Template/List.vue b/client/web/admin/src/views/System/Template/List.vue
index 87e375d28..8c44d2b0e 100644
--- a/client/web/admin/src/views/System/Template/List.vue
+++ b/client/web/admin/src/views/System/Template/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -17,6 +17,7 @@
         >
           {{ $t('new') }}
         </b-button>
+
         <c-permissions-button
           v-if="canGrant"
           resource="corteza::system:template/*"
@@ -26,6 +27,7 @@
           {{ $t('permissions') }}
         </c-permissions-button>
       </span>
+
       <b-dropdown
         v-if="false"
         variant="link"
@@ -37,6 +39,7 @@
           {{ $t('yaml') }}
         </b-dropdown-item-button>
       </b-dropdown>
+
       <c-corredor-manual-buttons
         ui-page="template/list"
         ui-slot="toolbar"
@@ -46,6 +49,7 @@
         @click="dispatchCortezaSystemEvent($event)"
       />
     </c-content-header>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -64,6 +68,8 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
+      class="custom-resource-height"
       @search="filterList"
     >
       <template #header>
diff --git a/client/web/admin/src/views/System/User/List.vue b/client/web/admin/src/views/System/User/List.vue
index ceb8676d3..bb6d4f020 100644
--- a/client/web/admin/src/views/System/User/List.vue
+++ b/client/web/admin/src/views/System/User/List.vue
@@ -1,6 +1,6 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
   >
     <c-content-header
       :title="$t('title')"
@@ -16,14 +16,17 @@
         >
           {{ $t('new') }}
         </b-button>
+
         <c-user-import-modal
           class="mr-1 float-left"
           @imported="onImported"
         />
+
         <c-user-export-modal
           class="mr-1 float-left"
           @export="onExport"
         />
+
         <c-permissions-button
           v-if="canGrant"
           resource="corteza::system:user/*"
@@ -33,6 +36,7 @@
           {{ $t('permissions') }}
         </c-permissions-button>
       </span>
+
       <b-dropdown
         v-if="false"
         variant="link"
@@ -44,6 +48,7 @@
           {{ $t('yaml') }}
         </b-dropdown-item-button>
       </b-dropdown>
+
       <c-corredor-manual-buttons
         ui-page="user/list"
         ui-slot="toolbar"
@@ -71,6 +76,8 @@
         prevPagination: $t('admin:general.pagination.prev'),
         nextPagination: $t('admin:general.pagination.next'),
       }"
+      sticky-header
+      class="custom-resource-height"
       @search="filterList"
     >
       <template #header>
diff --git a/client/web/reporter/src/mixins/listHelpers.js b/client/web/reporter/src/mixins/listHelpers.js
index 7cc9edaf6..d80d19e93 100644
--- a/client/web/reporter/src/mixins/listHelpers.js
+++ b/client/web/reporter/src/mixins/listHelpers.js
@@ -10,7 +10,7 @@ export default {
       filter: {},
 
       pagination: {
-        limit: 12,
+        limit: 100,
         pageCursor: undefined,
         prevPage: '',
         nextPage: '',
diff --git a/client/web/reporter/src/views/Report/List.vue b/client/web/reporter/src/views/Report/List.vue
index da2a50086..e3fc60041 100644
--- a/client/web/reporter/src/views/Report/List.vue
+++ b/client/web/reporter/src/views/Report/List.vue
@@ -1,95 +1,96 @@
 <template>
-  <div class="d-flex w-100 py-3">
+  <b-container
+    fluid="xl"
+    class="d-flex flex-column py-3"
+  >
     <portal to="topbar-title">
       {{ $t('report.list') }}
     </portal>
 
-    <b-container fluid="xl">
-      <b-row no-gutters>
-        <b-col>
-          <c-resource-list
-            :primary-key="primaryKey"
-            :filter="filter"
-            :sorting="sorting"
-            :pagination="pagination"
-            :fields="tableFields"
-            :items="reportList"
-            :translations="{
-              searchPlaceholder: $t('searchPlaceholder'),
-              notFound: $t('general:resourceList.notFound'),
-              noItems: $t('general:resourceList.noItems'),
-              loading: $t('general:label.loading'),
-              showingPagination: 'general:resourceList.pagination.showing',
-              singlePluralPagination: 'general:resourceList.pagination.single',
-              prevPagination: $t('general:resourceList.pagination.prev'),
-              nextPagination: $t('general:resourceList.pagination.next'),
-            }"
-            clickable
-            class="h-100"
-            @search="filterList"
-            @row-clicked="viewReport"
-          >
-            <template #header>
-              <b-button
-                v-if="canCreate"
-                data-test-id="button-create-report"
-                variant="primary"
-                size="lg"
-                class="mr-1"
-                :to="{ name: 'report.create' }"
-              >
-                {{ $t('report.new') }}
-              </b-button>
+    <c-resource-list
+      :primary-key="primaryKey"
+      :filter="filter"
+      :sorting="sorting"
+      :pagination="pagination"
+      :fields="tableFields"
+      :items="reportList"
+      :translations="{
+        searchPlaceholder: $t('searchPlaceholder'),
+        notFound: $t('general:resourceList.notFound'),
+        noItems: $t('general:resourceList.noItems'),
+        loading: $t('general:label.loading'),
+        showingPagination: 'general:resourceList.pagination.showing',
+        singlePluralPagination: 'general:resourceList.pagination.single',
+        prevPagination: $t('general:resourceList.pagination.prev'),
+        nextPagination: $t('general:resourceList.pagination.next'),
+      }"
+      sticky-header
+      clickable
+      class="h-100"
+      @search="filterList"
+      @row-clicked="viewReport"
+    >
+      <template #header>
+        <div class="flex-fill">
+          <div class="wrap-with-vertical-gutters">
+            <b-button
+              v-if="canCreate"
+              data-test-id="button-create-report"
+              variant="primary"
+              size="lg"
+              class="mr-1"
+              :to="{ name: 'report.create' }"
+            >
+              {{ $t('report.new') }}
+            </b-button>
+            <c-permissions-button
+              v-if="canGrant"
+              resource="corteza::system:report/*"
+              :button-label="$t('permissions')"
+              button-variant="light"
+              class="btn-lg"
+            />
+          </div>
+        </div>
+      </template>
 
-              <c-permissions-button
-                v-if="canGrant"
-                resource="corteza::system:report/*"
-                :button-label="$t('permissions')"
-                button-variant="light"
-                class="btn-lg"
-              />
-            </template>
+      <template #name="{ item: r }">
+        {{ r.meta.name }}
+      </template>
 
-            <template #name="{ item: r }">
-              {{ r.meta.name }}
-            </template>
+      <template #changedAt="{ item }">
+        {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
+      </template>
 
-            <template #changedAt="{ item }">
-              {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
-            </template>
-
-            <template #actions="{ item: r }">
-              <b-button
-                v-if="r.canUpdateReport"
-                variant="light"
-                class="mr-2"
-                :to="{ name: 'report.builder', params: { reportID: r.reportID } }"
-              >
-                {{ $t('report.builder') }}
-              </b-button>
-              <b-button
-                v-if="r.canUpdateReport"
-                variant="link"
-                class="mr-2"
-                :to="{ name: 'report.edit', params: { reportID: r.reportID } }"
-              >
-                {{ $t('report.edit') }}
-              </b-button>
-              <c-permissions-button
-                v-if="r.canGrant"
-                :tooltip="$t('permissions:resources.system.report.tooltip')"
-                :title="r.meta.name || r.handle || r.reportID"
-                :target="r.meta.name || r.handle || r.reportID"
-                :resource="`corteza::system:report/${r.reportID}`"
-                class="btn px-2"
-                link
-              />
-            </template>
-          </c-resource-list>
-        </b-col>
-      </b-row>
-    </b-container>
-  </div>
+      <template #actions="{ item: r }">
+        <b-button
+          v-if="r.canUpdateReport"
+          variant="light"
+          class="mr-2"
+          :to="{ name: 'report.builder', params: { reportID: r.reportID } }"
+        >
+          {{ $t('report.builder') }}
+        </b-button>
+        <b-button
+          v-if="r.canUpdateReport"
+          variant="link"
+          class="mr-2"
+          :to="{ name: 'report.edit', params: { reportID: r.reportID } }"
+        >
+          {{ $t('report.edit') }}
+        </b-button>
+        <c-permissions-button
+          v-if="r.canGrant"
+          :tooltip="$t('permissions:resources.system.report.tooltip')"
+          :title="r.meta.name || r.handle || r.reportID"
+          :target="r.meta.name || r.handle || r.reportID"
+          :resource="`corteza::system:report/${r.reportID}`"
+          class="btn px-2"
+          link
+        />
+      </template>
+    </c-resource-list>
+  </b-container>
 </template>
 
 <script>
diff --git a/client/web/workflow/src/mixins/listHelpers.js b/client/web/workflow/src/mixins/listHelpers.js
index 0ca2dd7cf..d80d19e93 100644
--- a/client/web/workflow/src/mixins/listHelpers.js
+++ b/client/web/workflow/src/mixins/listHelpers.js
@@ -10,7 +10,7 @@ export default {
       filter: {},
 
       pagination: {
-        limit: 11,
+        limit: 100,
         pageCursor: undefined,
         prevPage: '',
         nextPage: '',
diff --git a/client/web/workflow/src/views/Workflow/List.vue b/client/web/workflow/src/views/Workflow/List.vue
index 0b9de82cf..a586e933c 100644
--- a/client/web/workflow/src/views/Workflow/List.vue
+++ b/client/web/workflow/src/views/Workflow/List.vue
@@ -1,155 +1,154 @@
 <template>
-  <div class="h-100 py-3 flex-grow-1 overflow-auto">
+  <b-container
+    fluid="xl"
+    class="py-3 d-flex flex-column"
+  >
     <portal to="topbar-title">
       {{ $t('general:workflow-list') }}
     </portal>
 
-    <b-container fluid="xl">
-      <b-row no-gutters>
+    <c-resource-list
+      :primary-key="primaryKey"
+      :filter="filter"
+      :sorting="sorting"
+      :pagination="pagination"
+      :fields="tableFields"
+      :items="workflowList"
+      :translations="{
+        searchPlaceholder: $t('general:searchPlaceholder'),
+        notFound: $t('general:resourceList.notFound'),
+        noItems: $t('general:resourceList.noItems'),
+        loading: $t('general:loading'),
+        showingPagination: 'general:resourceList.pagination.showing',
+        singlePluralPagination: 'general:resourceList.pagination.single',
+        prevPagination: $t('general:resourceList.pagination.prev'),
+        nextPagination: $t('general:resourceList.pagination.next'),
+      }"
+      clickable
+      sticky-header
+      class="h-100"
+      @search="filterList"
+      @row-clicked="handleRowClicked"
+    >
+      <template #header>
+        <div class="flex-grow-1">
+          <div class="wrap-with-vertical-gutters">
+            <b-button
+              v-if="canCreate"
+              data-test-id="button-create-workflow"
+              variant="primary"
+              size="lg"
+              class="float-left mr-1"
+              :to="{ name: 'workflow.create' }"
+            >
+              {{ $t('general:new-workflow') }}
+            </b-button>
+            <import
+              v-if="canCreate"
+              :disabled="importProcessing"
+              class="float-left mr-1"
+              @import="importJSON"
+            />
+            <export
+              class="float-left mr-1"
+            />
+            <c-permissions-button
+              v-if="canGrant"
+              resource="corteza::automation:workflow/*"
+              :button-label="$t('general:permissions')"
+              button-variant="light"
+              class="float-left btn-lg"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template #toolbar>
         <b-col>
-          <c-resource-list
-            :primary-key="primaryKey"
-            :filter="filter"
-            :sorting="sorting"
-            :pagination="pagination"
-            :fields="tableFields"
-            :items="workflowList"
-            :translations="{
-              searchPlaceholder: $t('general:searchPlaceholder'),
-              notFound: $t('general:resourceList.notFound'),
-              noItems: $t('general:resourceList.noItems'),
-              loading: $t('general:loading'),
-              showingPagination: 'general:resourceList.pagination.showing',
-              singlePluralPagination: 'general:resourceList.pagination.single',
-              prevPagination: $t('general:resourceList.pagination.prev'),
-              nextPagination: $t('general:resourceList.pagination.next'),
-            }"
-            clickable
-            class="h-100"
-            @search="filterList"
-            @row-clicked="handleRowClicked"
-          >
-            <template #header>
-              <b-button
-                v-if="canCreate"
-                data-test-id="button-create-workflow"
-                variant="primary"
-                size="lg"
-                class="float-left mr-1"
-                :to="{ name: 'workflow.create' }"
-              >
-                {{ $t('general:new-workflow') }}
-              </b-button>
-
-              <import
-                v-if="canCreate"
-                :disabled="importProcessing"
-                class="float-left mr-1"
-                @import="importJSON"
-              />
-
-              <export
-                class="float-left mr-1"
-              />
-
-              <c-permissions-button
-                v-if="canGrant"
-                resource="corteza::automation:workflow/*"
-                :button-label="$t('general:permissions')"
-                button-variant="light"
-                class="float-left btn-lg"
-              />
-            </template>
-
-            <template #toolbar>
-              <b-col>
-                <b-form-radio-group
-                  v-model="filter.subWorkflow"
-                  :options="[
-                    { value: 0, text: $t('general:without') },
-                    { value: 1, text: $t('general:including') },
-                    { value: 2, text: $t('general:only') }
-                  ]"
-                  buttons
-                  button-variant="outline-primary"
-                  size="sm"
-                  name="radio-btn-outline"
-                  @change="filterList"
-                />
-                {{ $t('general:subworkflows') }}
-              </b-col>
-              <b-col>
-                <b-form-radio-group
-                  v-model="filter.disabled"
-                  :options="[
-                    { value: 0, text: $t('general:without') },
-                    { value: 1, text: $t('general:including') },
-                    { value: 2, text: $t('general:only') }
-                  ]"
-                  buttons
-                  button-variant="outline-primary"
-                  size="sm"
-                  name="radio-btn-outline"
-                  @change="filterList"
-                />
-                {{ $t('general:disabled') }}
-              </b-col>
-              <b-col>
-                <b-form-radio-group
-                  v-model="filter.deleted"
-                  :options="[
-                    { value: 0, text: $t('general:without') },
-                    { value: 1, text: $t('general:including') },
-                    { value: 2, text: $t('general:only') }
-                  ]"
-                  buttons
-                  button-variant="outline-primary"
-                  size="sm"
-                  name="radio-btn-outline"
-                  @change="filterList"
-                />
-                {{ $t('general:deleted') }}
-              </b-col>
-            </template>
-
-            <template #name="{ item: w }">
-              {{ w.meta.name || w.handle }}
-              <h5 class="d-inline-block ml-2">
-                <b-badge
-                  v-if="w.meta.subWorkflow"
-                  variant="info"
-                >
-                  {{ $t('general:subworkflow') }}
-                </b-badge>
-              </h5>
-            </template>
-
-            <template #enabled="{ item: w }">
-              <font-awesome-icon
-                :icon="['fas', w.enabled ? 'check' : 'times']"
-              />
-            </template>
-
-            <template #changedAt="{ item }">
-              {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
-            </template>
-
-            <template #actions="{ item: w }">
-              <c-permissions-button
-                v-if="w.canGrant"
-                :tooltip="$t('permissions:resources.automation.workflow.tooltip')"
-                :title="w.meta.name || w.handle || w.workflowID"
-                :target="w.meta.name || w.handle || w.workflowID"
-                :resource="`corteza::automation:workflow/${w.workflowID}`"
-                link
-                class="btn px-2"
-              />
-            </template>
-          </c-resource-list>
+          <b-form-radio-group
+            v-model="filter.subWorkflow"
+            :options="[
+              { value: 0, text: $t('general:without') },
+              { value: 1, text: $t('general:including') },
+              { value: 2, text: $t('general:only') }
+            ]"
+            buttons
+            button-variant="outline-primary"
+            size="sm"
+            name="radio-btn-outline"
+            @change="filterList"
+          />
+          {{ $t('general:subworkflows') }}
         </b-col>
-      </b-row>
-    </b-container>
-  </div>
+        <b-col>
+          <b-form-radio-group
+            v-model="filter.disabled"
+            :options="[
+              { value: 0, text: $t('general:without') },
+              { value: 1, text: $t('general:including') },
+              { value: 2, text: $t('general:only') }
+            ]"
+            buttons
+            button-variant="outline-primary"
+            size="sm"
+            name="radio-btn-outline"
+            @change="filterList"
+          />
+          {{ $t('general:disabled') }}
+        </b-col>
+        <b-col>
+          <b-form-radio-group
+            v-model="filter.deleted"
+            :options="[
+              { value: 0, text: $t('general:without') },
+              { value: 1, text: $t('general:including') },
+              { value: 2, text: $t('general:only') }
+            ]"
+            buttons
+            button-variant="outline-primary"
+            size="sm"
+            name="radio-btn-outline"
+            @change="filterList"
+          />
+          {{ $t('general:deleted') }}
+        </b-col>
+      </template>
+
+      <template #name="{ item: w }">
+        {{ w.meta.name || w.handle }}
+        <h5 class="d-inline-block ml-2">
+          <b-badge
+            v-if="w.meta.subWorkflow"
+            variant="info"
+          >
+            {{ $t('general:subworkflow') }}
+          </b-badge>
+        </h5>
+      </template>
+
+      <template #enabled="{ item: w }">
+        <font-awesome-icon
+          :icon="['fas', w.enabled ? 'check' : 'times']"
+        />
+      </template>
+
+      <template #changedAt="{ item }">
+        {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
+      </template>
+
+      <template #actions="{ item: w }">
+        <c-permissions-button
+          v-if="w.canGrant"
+          :tooltip="$t('permissions:resources.automation.workflow.tooltip')"
+          :title="w.meta.name || w.handle || w.workflowID"
+          :target="w.meta.name || w.handle || w.workflowID"
+          :resource="`corteza::automation:workflow/${w.workflowID}`"
+          link
+          class="btn px-2"
+        />
+      </template>
+    </c-resource-list>
+  </b-container>
 </template>
 
 <script>