@rancher/shell 1.2.0 → 2.0.0

package/components/SortableTable/index.vue

@@ -29,30 +29,17 @@ import { getParent } from '@shell/utils/dom';
 // NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
 export const FORMATTERS = {};
 
-export const COLUMN_BREAKPOINTS = {
-  /**
-   * Only show column if at tablet width or wider
-   */
-  TABLET:  'tablet',
-  /**
-   * Only show column if at laptop width or wider
-   */
-  LAPTOP:  'laptop',
-  /**
-   * Only show column if at desktop width or wider
-   */
-  DESKTOP: 'desktop'
-};
-
 // @TODO:
 // Fixed header/scrolling
 
 // Data Flow:
 // rows prop
-// -> arrangedRows (sorting.js)
-// -> filteredRows (filtering.js)
-// -> pagedRows    (paging.js)
-// -> groupedRows  (grouping.js)
+// --> sorting.js arrangedRows
+// --> filtering.js handleFiltering()
+// --> filtering.js filteredRows
+// --> paging.js pageRows
+// --> grouping.js groupedRows
+// --> index.vue displayedRows
 
 export default {
   name:       'SortableTable',
@@ -100,6 +87,16 @@ export default {
       required: false
     },
 
+    /**
+     * Alt Loading - True: Always show table rows and obscure them when `loading`. Intended for use with server-side pagination.
+     *
+     * Alt Loading - False: Hide the table rows when `loading`. Intended when all resources are provided up front.
+     */
+    altLoading: {
+      type:     Boolean,
+      required: false
+    },
+
     groupBy: {
       // Field to group rows by, row[groupBy] must be something that can be a map key
       type:    String,
@@ -164,6 +161,11 @@ export default {
       default: false,
     },
 
+    subRowsDescription: {
+      type:    Boolean,
+      default: true,
+    },
+
     subExpandable: {
       type:    Boolean,
       default: false,
@@ -266,7 +268,7 @@ export default {
      */
     noDataKey: {
       type:    String,
-      default: 'sortableTable.noData'
+      default: 'sortableTable.noData' // i18n-uses sortableTable.noData
     },
 
     /**
@@ -282,6 +284,14 @@ export default {
       default: null,
     },
 
+    /**
+     * The list will always be sorted by these regardless of what the user has selected
+     */
+    mandatorySort: {
+      type:    Array,
+      default: null,
+    },
+
     /**
      * Allows you to link to a custom detail page for data that
      * doesn't have a class model. For example, a receiver configuration
@@ -313,6 +323,22 @@ export default {
     forceUpdateLiveAndDelayed: {
       type:    Number,
       default: 0
+    },
+
+    /**
+     * True if pagination is executed outside of the component
+     */
+    externalPaginationEnabled: {
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * If `externalPaginationEnabled` is true this will be used as the current page
+     */
+    externalPaginationResult: {
+      type:    Object,
+      default: null
     }
   },
 
@@ -327,12 +353,18 @@ export default {
     }
 
     return {
-      currentPhase:     ASYNC_BUTTON_STATES.WAITING,
-      expanded:         {},
+      refreshButtonPhase:         ASYNC_BUTTON_STATES.WAITING,
+      expanded:                   {},
       searchQuery,
       eventualSearchQuery,
-      actionOfInterest: null,
-      loadingDelay:     false,
+      subMatches:                 null,
+      actionOfInterest:           null,
+      loadingDelay:               false,
+      debouncedPaginationChanged: null,
+      /**
+       * The is the bool the DOM uses to show loading state. it's proxied from `loading` to avoid blipping the indicator (see usages)
+       */
+      isLoading:                  false,
     };
   },
 
@@ -346,12 +378,14 @@ export default {
 
     this._onScroll = this.onScroll.bind(this);
     $main?.addEventListener('scroll', this._onScroll);
+
+    this.debouncedPaginationChanged();
   },
 
   beforeDestroy() {
-    clearTimeout(this.loadingDelayTimer);
     clearTimeout(this._scrollTimer);
     clearTimeout(this._loadingDelayTimer);
+    clearTimeout(this._altLoadingDelayTimer);
     clearTimeout(this._liveColumnsTimer);
     clearTimeout(this._delayedColumnsTimer);
     clearTimeout(this.manualRefreshTimer);
@@ -383,21 +417,27 @@ export default {
     descending(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     searchQuery(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     sortFields(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     groupBy(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     namespaces(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     page(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     forceUpdateLiveAndDelayed(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
@@ -418,17 +458,40 @@ export default {
     manualRefreshLoadingFinished: {
       handler(neu, old) {
         // this is merely to update the manual refresh button status
-        this.currentPhase = !neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+        this.refreshButtonPhase = !neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
         if (neu && neu !== old) {
           this.$nextTick(() => this.updateLiveAndDelayed());
         }
       },
       immediate: true
-    }
+    },
+
+    loading: {
+      handler(neu, old) {
+        // Always ensure the Refresh button phase aligns with loading state (to ensure external phase changes which can then reset the internal phase changed by click)
+        this.refreshButtonPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+
+        if (this.altLoading) {
+          // Delay setting the actual loading indicator. This should avoid flashing up the indicator if the API responds quickly
+          if (neu) {
+            this._altLoadingDelayTimer = setTimeout(() => {
+              this.isLoading = true;
+            }, 200); // this should be higher than the targetted quick response
+          } else {
+            clearTimeout(this._altLoadingDelayTimer);
+            this.isLoading = false;
+          }
+        } else {
+          this.isLoading = neu;
+        }
+      },
+      immediate: true
+    },
   },
 
   created() {
     this.debouncedRefreshTableData = debounce(this.refreshTableData, 500);
+    this.debouncedPaginationChanged = debounce(this.paginationChanged, 50);
   },
 
   computed: {
@@ -439,11 +502,16 @@ export default {
     },
 
     initalLoad() {
-      return !!(!this.loading && !this._didinit && this.rows?.length);
+      return !!(!this.isLoading && !this._didinit && this.rows?.length);
     },
 
     manualRefreshLoadingFinished() {
-      return !!(!this.loading && this._didinit && this.rows?.length && !this.isManualRefreshLoading);
+      const res = !!(!this.isLoading && this._didinit && this.rows?.length && !this.isManualRefreshLoading);
+
+      // Always ensure the Refresh button phase aligns with loading state (regardless of if manualRefreshLoadingFinished has changed or not)
+      this.refreshButtonPhase = !res || this.loading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+
+      return res;
     },
 
     fullColspan() {
@@ -543,6 +611,7 @@ export default {
         'body-dividers': this.bodyDividers,
         'overflow-y':    this.overflowY,
         'overflow-x':    this.overflowX,
+        'alt-loading':   this.altLoading && this.isLoading
       };
     },
 
@@ -771,6 +840,12 @@ export default {
       // console.warn(`Performance: Table valueFor: ${ col.name } ${ col.value }`); // eslint-disable-line no-console
 
       const expr = col.value || col.name;
+
+      if (!expr) {
+        console.error('No path has been defined for this column, unable to get value of cell', col); // eslint-disable-line no-console
+
+        return '';
+      }
       const out = get(row, expr);
 
       if ( out === null || out === undefined ) {
@@ -879,7 +954,7 @@ export default {
 
     showSubRow(row, keyField) {
       const hasInjectedSubRows = this.subRows && (!this.subExpandable || this.expanded[get(row, keyField)]);
-      const hasStateDescription = row.stateDescription;
+      const hasStateDescription = this.subRowsDescription && row.stateDescription;
 
       return hasInjectedSubRows || hasStateDescription;
     },
@@ -898,6 +973,23 @@ export default {
         event,
         targetElement: this.$refs[`actionButton${ i }`][0],
       });
+    },
+
+    paginationChanged() {
+      if (!this.externalPaginationEnabled) {
+        return;
+      }
+
+      this.$emit('pagination-changed', {
+        page:    this.page,
+        perPage: this.perPage,
+        filter:  {
+          searchFields: this.searchFields,
+          searchQuery:  this.searchQuery
+        },
+        sort:       this.sortFields,
+        descending: this.descending
+      });
     }
   }
 };
@@ -1026,10 +1118,9 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
-            v-clean-tooltip="t('performance.manualRefresh.buttonTooltip')"
             class="manual-refresh"
-            mode="refresh"
-            :current-phase="currentPhase"
+            mode="manual-refresh"
+            :current-phase="refreshButtonPhase"
             @click="debouncedRefreshTableData"
           />
           <div
@@ -1122,7 +1213,7 @@ export default {
         :default-sort-by="_defaultSortBy"
         :descending="descending"
         :no-rows="noRows"
-        :loading="loading && !loadingDelay"
+        :loading="isLoading && !loadingDelay"
         :no-results="noResults"
         @on-toggle-all="onToggleAll"
         @on-sort-change="changeSort"
@@ -1132,9 +1223,9 @@ export default {
       />
 
       <!-- Don't display anything if we're loading and the delay has yet to pass -->
-      <div v-if="loading && !loadingDelay" />
+      <div v-if="isLoading && !loadingDelay" />
 
-      <tbody v-else-if="loading">
+      <tbody v-else-if="isLoading && !altLoading">
         <slot name="loading">
           <tr>
             <td :colspan="fullColspan">
@@ -1379,7 +1470,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == 1"
+        data-testid="pagination-first"
+        :disabled="page == 1 || loading"
         @click="goToPage('first')"
       >
         <i class="icon icon-chevron-beginning" />
@@ -1387,7 +1479,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == 1"
+        data-testid="pagination-prev"
+        :disabled="page == 1 || loading"
         @click="goToPage('prev')"
       >
         <i class="icon icon-chevron-left" />
@@ -1398,7 +1491,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == totalPages"
+        data-testid="pagination-next"
+        :disabled="page == totalPages || loading"
         @click="goToPage('next')"
       >
         <i class="icon icon-chevron-right" />
@@ -1406,7 +1500,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == totalPages"
+        data-testid="pagination-last"
+        :disabled="page == totalPages || loading"
         @click="goToPage('last')"
       >
         <i class="icon icon-chevron-end" />
@@ -1444,7 +1539,11 @@ export default {
   </div>
 </template>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
+  .sortable-table.alt-loading {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
   .manual-refresh {
     height: 40px;
@@ -1608,9 +1707,9 @@ export default {
     margin-left: 10px;
     min-width: 180px;
   }
-  </style>
+</style>
 
-  <style lang="scss">
+<style lang="scss">
   //
   // Important: Almost all selectors in here need to be ">"-ed together so they
   // apply only to the current table, not one nested inside another table.
@@ -1942,4 +2041,4 @@ export default {
       min-width: 200px;
     }
   }
-  </style>
+</style>

package/components/SortableTable/paging.js

@@ -2,27 +2,45 @@ import { ROWS_PER_PAGE } from '@shell/store/prefs';
 
 export default {
   computed: {
+    totalRows() {
+      if (this.externalPaginationEnabled) {
+        return this.externalPaginationResult?.count || 0;
+      }
+
+      return this.filteredRows.length;
+    },
+
     indexFrom() {
       return Math.max(0, 1 + this.perPage * (this.page - 1));
     },
 
     indexTo() {
-      return Math.min(this.filteredRows.length, this.indexFrom + this.perPage - 1);
+      return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
     },
 
     totalPages() {
-      return Math.ceil(this.filteredRows.length / this.perPage );
+      return Math.ceil(this.totalRows / this.perPage );
     },
 
     showPaging() {
-      return !this.loading && this.paging && this.totalPages > 1;
+      if (!this.paging) {
+        return false;
+      }
+
+      const havePages = this.totalPages > 1;
+
+      if (this.altLoading) {
+        return havePages;
+      }
+
+      return !this.loading && havePages;
     },
 
     pagingDisplay() {
       const opt = {
         ...(this.pagingParams || {}),
 
-        count: this.filteredRows.length,
+        count: this.totalRows,
         pages: this.totalPages,
         from:  this.indexFrom,
         to:    this.indexTo,
@@ -32,7 +50,9 @@ export default {
     },
 
     pagedRows() {
-      if ( this.paging ) {
+      if (this.externalPaginationEnabled) {
+        return this.rows;
+      } else if ( this.paging ) {
         return this.filteredRows.slice(this.indexFrom - 1, this.indexTo);
       } else {
         return this.filteredRows;
@@ -51,12 +71,21 @@ export default {
       // Go to the last page if we end up "past" the last page because the table changed
 
       const from = this.indexFrom;
-      const last = this.filteredRows.length;
+      const last = this.totalRows;
 
       if ( this.totalPages > 0 && this.page > 1 && from > last ) {
         this.setPage(this.totalPages);
       }
-    }
+    },
+
+    page() {
+      this.debouncedPaginationChanged();
+    },
+
+    perPage() {
+      this.debouncedPaginationChanged();
+    },
+
   },
 
   methods: {

package/components/SortableTable/selection.js

@@ -46,9 +46,10 @@ export default {
     // NOTE: The logic here could be simplified and made more performant
     bulkActionsForSelection() {
       let disableAll = false;
+
       // pagedRows is all rows in the current page
       const all = this.pagedRows;
-      const allRows = this.arrangedRows;
+      const allRows = this.arrangedRows || all;
       let selected = this.selectedRows;
 
       // Nothing is selected

package/components/SortableTable/sorting.js

@@ -1,5 +1,12 @@
 import { sortBy } from '@shell/utils/sort';
-import { addObject } from '@shell/utils/array';
+import { uniq } from '@shell/utils/array';
+
+/**
+ * Always sort by something, this is the best guess on properties
+ *
+ * Can be overriden
+ */
+const DEFAULT_MANDATORY_SORT = ['nameSort', 'id'];
 
 export default {
   computed: {
@@ -21,15 +28,15 @@ export default {
         fromColumn = [fromColumn];
       }
 
-      const out = [...fromGroup, ...fromColumn];
-
-      addObject(out, 'nameSort');
-      addObject(out, 'id');
-
-      return out;
+      // return the sorting based on grouping, user selection and fallback
+      return uniq([...fromGroup, ...fromColumn].concat(...(this.mandatorySort || DEFAULT_MANDATORY_SORT)));
     },
 
     arrangedRows() {
+      if (this.externalPaginationEnabled) {
+        return;
+      }
+
       let key;
 
       if ( this.sortGenerationFn ) {
@@ -101,4 +108,14 @@ export default {
       this.setPage(1);
     },
   },
+
+  watch: {
+    sortFields() {
+      this.debouncedPaginationChanged();
+    },
+
+    descending() {
+      this.debouncedPaginationChanged();
+    }
+  }
 };

package/components/StatusTable.vue

@@ -3,6 +3,8 @@ import {
   LAST_UPDATED, TYPE, REASON, MESSAGE, STATUS
 } from '@shell/config/table-headers';
 import SortableTable from '@shell/components/SortableTable';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   components: { SortableTable },
   props:      {
@@ -31,12 +33,14 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      this.$copyText(this.$slots.default[0].text).then(() => {
+      copyTextToClipboard(this.$slots.default[0].text).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
     },
   }

package/components/Tabbed/index.vue

@@ -19,6 +19,11 @@ export default {
       default: false
     },
 
+    hideSingleTab: {
+      type:    Boolean,
+      default: false
+    },
+
     showTabsAddRemove: {
       type:    Boolean,
       default: false
@@ -86,6 +91,11 @@ export default {
     sortedTabs() {
       return sortBy(this.tabs, ['weight:desc', 'labelDisplay', 'name']);
     },
+
+    // hide tabs based on tab count IF flag is active
+    hideTabs() {
+      return this.hideSingleTab && this.sortedTabs.length === 1;
+    }
   },
 
   watch: {
@@ -223,13 +233,18 @@ export default {
 </script>
 
 <template>
-  <div :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }">
+  <div
+    :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }"
+    data-testid="tabbed"
+  >
     <ul
+      v-if="!hideTabs"
       ref="tablist"
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
       tabindex="0"
+      data-testid="tabbed-block"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
       @keydown.down.prevent="selectNext(1)"
@@ -279,6 +294,7 @@ export default {
           <button
             type="button"
             class="btn bg-transparent"
+            data-testid="tab-list-add"
             @click="tabAddClicked"
           >
             <i class="icon icon-plus" />
@@ -287,6 +303,7 @@ export default {
             type="button"
             class="btn bg-transparent"
             :disabled="!sortedTabs.length"
+            data-testid="tab-list-remove"
             @click="tabRemoveClicked"
           >
             <i class="icon icon-minus" />

package/components/TableDataUserIcon.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { ucFirst } from '@shell/utils/string';
+
+const props = defineProps<{
+  userState: string,
+  isActive: boolean
+}>();
+
+const iconClass = computed(() => {
+  const userIcon = `icon-user-${ props.isActive ? 'check' : 'xmark' }`;
+  const iconColor = `icon-color-${ props.isActive ? 'green' : 'red' }`;
+
+  return {
+    icon:        true,
+    'icon-lg':   true,
+    [userIcon]:  true,
+    [iconColor]: true,
+  };
+});
+</script>
+
+<template>
+  <div class="icon-center">
+    <i
+      v-tooltip="ucFirst(userState)"
+      :class="iconClass"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .icon-center {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .icon-color-green {
+    color: var(--success);
+  }
+
+  .icon-color-red {
+    color: var(--error);
+  }
+</style>

package/components/TypeDescription.vue

@@ -25,6 +25,7 @@ export default {
       if (this.resource === CATALOG.CLUSTER_REPO) {
         key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
       } else {
+        // i18n-uses typeDescription.*
         key = `typeDescription."${ this.resource }"`;
       }
 

package/components/Wizard.vue

@@ -18,6 +18,7 @@ Wizard will emit these events:
     finish
 */
 
+// i18n-uses wizard.next, wizard.edit, wizard.create, wizard.view, wizard.finish
 export default {
   name: 'Wizard',
 

package/components/YamlEditor.vue

@@ -229,6 +229,7 @@ export default {
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
       :options="codeMirrorOptions"
+      :showKeyMapBox="true"
       :data-testid="componentTestid + '-code-mirror'"
       @onInput="onInput"
       @onReady="onReady"