Adjust compose resource list UX

client/web/compose/src/components/Admin/Page/Tree.vue

@@ -6,7 +6,7 @@
       :data="{children:list}"
       tag="ul"
       mixin-parent-key="parent"
-      class="list-group pb-3"
+      class="list-group"
       @changePosition="handleChangePosition"
     >
       <template

client/web/compose/src/mixins/listHelpers.js

@@ -10,7 +10,7 @@ export default {
       filter: {},
 
       pagination: {
-        limit: 12,
+        limit: 100,
         pageCursor: undefined,
         prevPage: '',
         nextPage: '',

client/web/compose/src/views/Admin/Charts/List.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="py-3">
+  <b-container
+    fluid="xl"
+    class="d-flex flex-column py-3"
+  >
     <portal to="topbar-title">
       {{ $t('navigation.chart') }}
     </portal>
 
-    <b-container fluid="xl">
-      <b-row no-gutters>
-        <b-col>
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -25,6 +25,8 @@
         nextPagination: $t('general:resourceList.pagination.next'),
       }"
       clickable
+      sticky-header
+      class="h-100"
       @search="filterList"
       @row-clicked="handleRowClicked"
     >
@@ -83,24 +85,24 @@
       </template>
 
       <template #actions="{ item: c }">
+        <b-button-group>
           <c-permissions-button
             v-if="c.canGrant"
             :title="c.name || c.handle || c.chartID"
             :target="c.name || c.handle || c.chartID"
             :resource="`corteza::compose:chart/${namespace.namespaceID}/${c.chartID}`"
-                link
+            :tooltip="$t('permissions:resources.compose.chart.tooltip')"
-                class="btn px-2"
+            button-variant="outline-light"
+            class="text-dark d-print-none border-0"
           />
+        </b-button-group>
       </template>
 
       <template #changedAt="{ item }">
         {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
       </template>
     </c-resource-list>
-        </b-col>
-      </b-row>
   </b-container>
-  </div>
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex'

client/web/compose/src/views/Admin/Modules/List.vue

@@ -1,12 +1,12 @@
 "<template>
-  <div class="py-3">
+  <b-container
+    fluid="xl"
+    class="d-flex flex-column py-3"
+  >
     <portal to="topbar-title">
       {{ $t('navigation.module') }}
     </portal>
 
-    <b-container fluid="xl">
-      <b-row>
-        <b-col>
     <c-resource-list
       data-test-id="table-modules-list"
       :primary-key="primaryKey"
@@ -26,6 +26,8 @@
         nextPagination: $t('general:resourceList.pagination.next'),
       }"
       clickable
+      sticky-header
+      class="h-100"
       @search="filterList"
       @row-clicked="handleRowClicked"
     >
@@ -108,23 +110,32 @@
           :namespace="namespace"
           :module="m"
         />
+
+        <b-button-group
+          class="ml-2"
+        >
           <b-button
             data-test-id="button-all-records"
-                variant="link"
+            variant="outline-light"
+            :title="$t('allRecords.label')"
             :to="{name: 'admin.modules.record.list', params: { moduleID: m.moduleID }}"
-                class="text-dark text-decoration-none"
+            class="text-primary d-print-none border-0"
           >
-                {{ $t('allRecords.label') }}
+            <font-awesome-icon
+              :icon="['fas', 'columns']"
+            />
           </b-button>
+
           <c-permissions-button
             v-if="m.canGrant"
             :title="m.name || m.handle || m.moduleID"
             :target="m.name || m.handle || m.moduleID"
             :resource="`corteza::compose:module/${m.namespaceID}/${m.moduleID}`"
             :tooltip="$t('permissions:resources.compose.module.tooltip')"
-                class="btn px-2"
+            button-variant="outline-light"
-                link
+            class="text-dark d-print-none border-0"
           />
+        </b-button-group>
       </template>
 
       <template #name="{ item: m }">
@@ -150,10 +161,7 @@
         {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
       </template>
     </c-resource-list>
-        </b-col>
-      </b-row>
   </b-container>
-  </div>
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex'

client/web/compose/src/views/Admin/Pages/List.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="py-3">
+  <b-container
+    fluid="xl"
+    class="d-flex flex-column py-3"
+  >
     <portal to="topbar-title">
       {{ $t('navigation.page') }}
     </portal>
 
-    <b-container fluid="xl">
-      <b-row no-gutters>
-        <b-col>
     <b-card
       no-body
-            class="shadow-sm"
+      class="shadow-sm h-100"
     >
       <b-card-header
         header-bg-variant="white"
-              class="py-3"
+        class="border-bottom"
       >
         <b-row
           no-gutters
@@ -56,23 +56,18 @@
             />
           </div>
         </b-row>
-            </b-card-header>
         <b-row
-              class="pages-list-header border-top align-content-center"
+          class="align-content-center mt-2"
-              no-gutters
         >
           <b-col
             cols="12"
-                class="pl-4"
           >
-                <span class="font-weight-bold">
+            <span class="text-muted font-italic">
-                  {{ $t('newPlaceholder') }}
-                </span>
-                <span class="text-muted font-italic ml-3">
               {{ $t('instructions') }}
             </span>
           </b-col>
         </b-row>
+      </b-card-header>
 
       <div
         v-if="processing"
@@ -90,14 +85,11 @@
         v-else
         v-model="tree"
         :namespace="namespace"
-              class="pb-2"
+        class="card overflow-auto"
         @reorder="handleReorder"
       />
     </b-card>
-        </b-col>
-      </b-row>
   </b-container>
-  </div>
 </template>
 
 <script>
@@ -170,7 +162,7 @@ export default {
 //!important usage to over-ride library styling
 $input-height: 42px;
 $content-height: 48px;
-$blank-li-height: 5px;
+$blank-li-height: 10px;
 $left-padding: 5px;
 $border-color: $light;
 $hover-color: $gray-200;
@@ -181,6 +173,10 @@ $dropping-color: $secondary;
 }
 
 .sortable-tree {
+  .content {
+    height: 0px !important;
+  }
+
   ul {
     .content {
       height: 100% !important;
@@ -200,6 +196,10 @@ $dropping-color: $secondary;
     &.blank-li {
       height: $blank-li-height !important;
 
+      .sortable-tree {
+        max-height: 100%;
+      }
+
       &:nth-last-of-type(1)::before {
         border-left-color: white !important;
         height: 0;

client/web/compose/src/views/Namespace/Manage.vue

@@ -1,6 +1,7 @@
 <template>
-  <div
+  <b-container
-    class="d-flex w-100 overflow-auto"
+    fluid="xl"
+    class="d-flex flex-column py-3"
   >
     <portal to="topbar-title">
       {{ $t('title') }}
@@ -22,15 +23,8 @@
       </b-btn>
     </portal>
 
-    <b-container
-      class="ns-wrapper"
-      fluid="xl"
-    >
-      <b-row
-        class="my-3"
-        no-gutters
-      >
     <c-resource-list
+      data-test-id="table-namespaces-list"
       :primary-key="primaryKey"
       :filter="filter"
       :sorting="sorting"
@@ -48,7 +42,8 @@
         nextPagination: $t('general:resourceList.pagination.next'),
       }"
       clickable
-          class="h-100 w-100"
+      sticky-header
+      class="h-100"
       @search="filterList"
       @row-clicked="handleRowClicked"
     >
@@ -93,10 +88,22 @@
       <template #changedAt="{ item }">
         {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
       </template>
+
+      <template #actions="{ item: n }">
+        <b-button-group>
+          <c-permissions-button
+            v-if="n.canGrant"
+            :title="n.name || n.slug || n.namespaceID"
+            :target="n.name || n.slug || n.namespaceID"
+            :resource="`corteza::compose:namespace/${n.namespaceID}`"
+            :tooltip="$t('permissions:resources.compose.namespace.tooltip')"
+            button-variant="outline-light"
+            class="text-dark d-print-none border-0"
+          />
+        </b-button-group>
+      </template>
     </c-resource-list>
-      </b-row>
   </b-container>
-  </div>
 </template>
 <script>
 import { mapGetters } from 'vuex'
@@ -121,10 +128,6 @@ export default {
     return {
       primaryKey: 'namespaceID',
 
-      pagination: {
-        limit: 13,
-      },
-
       filter: {
         query: '',
       },

lib/vue/src/components/resourceList/CResourceList.vue

@@ -51,18 +51,19 @@
         id="resource-list"
         ref="resourceList"
         head-variant="light"
+        :fields="_fields"
+        :items="_items"
+        :sort-by.sync="sorting.sortBy"
+        :sort-desc.sync="sorting.sortDesc"
+        :sticky-header="stickyHeader"
+        :tbody-tr-class="tableRowClasses"
         hover
         responsive
         show-empty
         no-sort-reset
         no-local-sorting
         :primary-key="primaryKey"
-        :sort-by.sync="sorting.sortBy"
+        class="mh-100 h-100 mb-0"
-        :sort-desc.sync="sorting.sortDesc"
-        :items="_items"
-        :fields="_fields"
-        :tbody-tr-class="tableRowClasses"
-        class="mb-0"
         @sort-changed="pagination.page = 1"
         @row-clicked="$emit('row-clicked', $event)"
       >
@@ -137,7 +138,7 @@
         </div>
 
         <b-button-group
-          v-if="!hidePagination"
+          v-if="showPagination"
         >
           <b-button
             :disabled="!hasPrevPage"
@@ -230,6 +231,10 @@ export default {
       type: Boolean,
     },
 
+    stickyHeader: {
+      type: Boolean,
+    },
+
     // Are rows clickable
     clickable: {
       type: Boolean,
@@ -321,6 +326,10 @@ export default {
     hasNextPage () {
       return !!this.pagination.nextPage
     },
+
+    showPagination () {
+      return !this.hidePagination && (this.hasPrevPage || this.hasNextPage)
+    }
   },
 
   methods: {

locale/en/corteza-webapp-compose/permissions.yaml

@@ -38,6 +38,7 @@ resources:
     chart:
       all: all charts
       specific: chart "{{target}}"
+      tooltip: Chart permissions
       operations:
         delete:
           description: 'Default: deny'