dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.1

package/components/rancherSortableTable/selection.js

@@ -1,629 +0,0 @@
-import { mapGetters } from 'vuex';
-import { isMore, isRange, suppressContextMenu, isAlternate } from '@shell/utils/platform';
-import { get } from '@shell/utils/object';
-import { filterBy } from '@shell/utils/array';
-import { getParent } from '@shell/utils/dom';
-
-export const ALL = 'all';
-export const SOME = 'some';
-export const NONE = 'none';
-
-export default {
-  mounted() {
-    const table = this.$el.querySelector('TABLE');
-
-    this._onRowClickBound = this.onRowClick.bind(this);
-    this._onRowMousedownBound = this.onRowMousedown.bind(this);
-    this._onRowContextBound = this.onRowContext.bind(this);
-
-    table.addEventListener('click', this._onRowClickBound);
-    table.addEventListener('mousedown', this._onRowMousedownBound);
-    table.addEventListener('contextmenu', this._onRowContextBound);
-  },
-
-  beforeUnmount() {
-    const table = this.$el.querySelector('TABLE');
-
-    table.removeEventListener('click', this._onRowClickBound);
-    table.removeEventListener('mousedown', this._onRowMousedownBound);
-    table.removeEventListener('contextmenu', this._onRowContextBound);
-  },
-
-  computed: {
-    ...mapGetters({
-      // Use either these Vuex getters
-      // OR the props to set the action menu state,
-      // but don't use both.
-      targetElem: 'action-menu/elem',
-      shouldShow: 'action-menu/showing',
-    }),
-    // Used for the table-level selection check-box to show checked (all selected)/intermediate (some selected)/unchecked (none selected)
-    howMuchSelected() {
-      const total = this.pagedRows.length;
-      const selected = this.selectedRows.length;
-
-      if ( selected >= total && total > 0 ) {
-        return ALL;
-      } else if ( selected > 0 ) {
-        return SOME;
-      }
-
-      return NONE;
-    },
-
-    // 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 || all;
-      let selected = this.selectedRows;
-
-      // Nothing is selected
-      if ( !this.selectedRows.length ) {
-        // and there are no rows
-        if ( !allRows ) {
-          return [];
-        }
-
-        const firstNode = allRows[0];
-
-        selected = firstNode ? [firstNode] : [];
-        disableAll = true;
-      }
-
-      const map = {};
-
-      // Find and add all the actions for all the nodes so that we know
-      // what all the possible actions are
-      for ( const node of all ) {
-        if (node.availableActions) {
-          for ( const act of node.availableActions ) {
-            if ( act.bulkable ) {
-              _add(map, act, false);
-            }
-          }
-        }
-      }
-
-      // Go through all the selected items and add the actions (which were already identified above)
-      // as available for some (or all) of the selected nodes
-      for ( const node of selected ) {
-        if (node.availableActions) {
-          for ( const act of node.availableActions ) {
-            if ( act.bulkable && act.enabled ) {
-              _add(map, act, false);
-            }
-          }
-        }
-      }
-
-      // If there's no items actually selected, we want to see all the actions
-      // so you know what exists, but have them all be disabled since there's nothing to do them on.
-      const out = _filter(map, disableAll);
-
-      // Enable a bulkaction if some of the selected items can perform the action
-      out.forEach((bulkAction) => {
-        const actionEnabledForSomeSelected = this.selectedRows.some((node) => {
-          const availableActions = node.availableActions || [];
-
-          return availableActions.some((action) => action.action === bulkAction.action && action.enabled);
-        });
-
-        bulkAction.enabled = this.selectedRows.length > 0 && actionEnabledForSomeSelected;
-      });
-
-      return out.sort((a, b) => (b.weight || 0) - (a.weight || 0));
-    }
-  },
-
-  data() {
-    return {
-      // List of selected items in the table
-      selectedRows: [],
-      prevNode:     null,
-    };
-  },
-
-  watch: {
-    // On page change
-    pagedRows() {
-      // When the table contents changes:
-      // - Remove items that are in the selection but no longer in the table.
-
-      const content = this.pagedRows;
-      const toRemove = [];
-
-      for (const node of this.selectedRows) {
-        if (!content.includes(node) ) {
-          toRemove.push(node);
-        }
-      }
-
-      this.update([], toRemove);
-    }
-  },
-
-  methods: {
-    onToggleAll(value) {
-      if ( value ) {
-        this.update(this.pagedRows, []);
-
-        return true;
-      } else {
-        this.update([], this.pagedRows);
-
-        return false;
-      }
-    },
-
-    onRowMousedown(e) {
-      if ( isRange(e) || this.isSelectionCheckbox(e.target) ) {
-        e.preventDefault();
-      }
-    },
-
-    onRowMouseEnter(e) {
-      const tr = e.target.closest('TR');
-
-      if (tr.classList.contains('sub-row')) {
-        const trMainRow = tr.previousElementSibling;
-
-        trMainRow.classList.add('sub-row-hovered');
-      }
-    },
-
-    onRowMouseLeave(e) {
-      const tr = e.target.closest('TR');
-
-      if (tr.classList.contains('sub-row')) {
-        const trMainRow = tr.previousElementSibling;
-
-        trMainRow.classList.remove('sub-row-hovered');
-      }
-    },
-
-    nodeForEvent(e) {
-      const tagName = e.target.tagName;
-      const tgt = e.target;
-      const actionElement = tgt.closest('.actions');
-
-      if ( tgt.classList.contains('select-all-check') ) {
-        return;
-      }
-
-      if ( !actionElement ) {
-        if (
-          tagName === 'A' ||
-          tagName === 'BUTTON' ||
-          getParent(tgt, '.btn')
-        ) {
-          return;
-        }
-      }
-
-      const tgtRow = e.target.closest('TR');
-
-      return this.nodeForRow(tgtRow);
-    },
-
-    nodeForRow(tgtRow) {
-      if ( tgtRow?.classList.contains('separator-row') ) {
-        return;
-      }
-
-      while ( tgtRow && !tgtRow.classList.contains('main-row') ) {
-        tgtRow = tgtRow.previousElementSibling;
-      }
-
-      if ( !tgtRow ) {
-        return;
-      }
-
-      const nodeId = tgtRow.dataset.nodeId;
-
-      if ( !nodeId ) {
-        return;
-      }
-
-      const node = this.pagedRows.find( (x) => get(x, this.keyField) === nodeId );
-
-      return node;
-    },
-
-    async onRowClick(e) {
-      const node = this.nodeForEvent(e);
-      const td = e.target.closest('TD');
-      const skipSelect = td?.classList.contains('skip-select');
-
-      if (skipSelect) {
-        return;
-      }
-      const selection = this.selectedRows;
-      const isCheckbox = this.isSelectionCheckbox(e.target) || td?.classList.contains('row-check');
-      const isExpand = td?.classList.contains('row-expand');
-      const content = this.pagedRows;
-
-      this.$emit('rowClick', e);
-
-      if ( !node ) {
-        return;
-      }
-
-      if ( isExpand ) {
-        this.toggleExpand(node);
-
-        return;
-      }
-
-      const actionElement = e.target.closest('.actions');
-
-      if ( actionElement ) {
-        let resources = [node];
-
-        if ( this.mangleActionResources ) {
-          const i = actionElement.querySelector('i');
-
-          i.classList.remove('icon-actions');
-          i.classList.add('icon-spinner');
-          i.classList.add('icon-spin');
-
-          try {
-            resources = await this.mangleActionResources(resources);
-          } finally {
-            i.classList.remove('icon-spinner');
-            i.classList.remove('icon-spin');
-            i.classList.add('icon-actions');
-          }
-        }
-
-        if (!this.targetElem && !this.shouldShow) {
-          this.$store.commit(`action-menu/show`, {
-            resources,
-            event: e,
-            elem:  actionElement
-          });
-        } else if (this.targetElem === actionElement && this.shouldShow) {
-          // this condition is needed so that we can "toggle" the action menu with
-          // the keyboard for accessibility (row action menu)
-          this.$store.commit('action-menu/hide');
-        }
-
-        return;
-      }
-
-      const isSelected = selection.includes(node);
-      let prevNode = this.prevNode;
-
-      // PrevNode is only valid if it's in the current content
-      if ( !prevNode || !content.includes(prevNode) ) {
-        prevNode = node;
-      }
-
-      if ( isMore(e) ) {
-        this.toggle(node);
-      } else if ( isRange(e) ) {
-        const toToggle = this.nodesBetween(prevNode, node);
-
-        if ( isSelected ) {
-          this.update([], toToggle);
-        } else {
-          this.update(toToggle, []);
-        }
-      } else if ( isCheckbox ) {
-        this.toggle(node);
-      } else {
-        this.update([node], content);
-      }
-
-      this.prevNode = node;
-    },
-
-    async onRowContext(e) {
-      const node = this.nodeForEvent(e);
-
-      if ( suppressContextMenu(e) ) {
-        return;
-      }
-
-      if ( !node ) {
-        return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      this.prevNode = node;
-      const isSelected = this.selectedRows.includes(node);
-
-      if ( !isSelected ) {
-        this.update([node], this.selectedRows.slice());
-      }
-    },
-
-    keySelectRow(row, more = false) {
-      const node = this.nodeForRow(row);
-      const content = this.pagedRows;
-
-      if ( !node ) {
-        return;
-      }
-
-      if ( more ) {
-        this.update([node], []);
-      } else {
-        this.update([node], content);
-      }
-
-      this.prevNode = node;
-    },
-
-    isSelectionCheckbox(element) {
-      return element.tagName === 'INPUT' &&
-        element.type === 'checkbox' &&
-        element.closest('.selection-checkbox') !== null;
-    },
-
-    nodesBetween(a, b) {
-      let toToggle = [];
-      const key = this.groupBy;
-
-      if ( key ) {
-        // Grouped has 2 levels to look through
-        const grouped = this.groupedRows;
-
-        let from = this.groupIdx(a);
-        let to = this.groupIdx(b);
-
-        if ( !from || !to ) {
-          return [];
-        }
-
-        // From has to come before To
-        if ( (from.group > to.group) || ((from.group === to.group) && (from.item > to.item)) ) {
-          [from, to] = [to, from];
-        }
-
-        for ( let i = from.group ; i <= to.group ; i++ ) {
-          const items = grouped[i].rows;
-          let j = (from.group === i ? from.item : 0);
-
-          while ( items[j] && ( i < to.group || j <= to.item )) {
-            toToggle.push(items[j]);
-            j++;
-          }
-        }
-      } else {
-        // Ungrouped is much simpler
-        const content = this.pagedRows;
-        let from = content.indexOf(a);
-        let to = content.indexOf(b);
-
-        [from, to] = [Math.min(from, to), Math.max(from, to)];
-        toToggle = content.slice(from, to + 1);
-      }
-
-      // check if there is already duplicate content selected (selectedRows) on the list to toggle...
-      toToggle = toToggle.filter((item) => !this.selectedRows.includes(item));
-
-      return toToggle;
-    },
-
-    groupIdx(node) {
-      const grouped = this.groupedRows;
-
-      for ( let i = 0 ; i < grouped.length ; i++ ) {
-        const rows = grouped[i].rows;
-
-        for ( let j = 0 ; j < rows.length ; j++ ) {
-          if ( rows[j] === node ) {
-            return {
-              group: i,
-              item:  j
-            };
-          }
-        }
-      }
-
-      return null;
-    },
-
-    toggle(node) {
-      const add = [];
-      const remove = [];
-
-      if (this.selectedRows.includes(node)) {
-        remove.push(node);
-      } else {
-        add.push(node);
-      }
-
-      this.update(add, remove);
-    },
-
-    update(toAdd, toRemove) {
-      toRemove.forEach((row) => {
-        const index = this.selectedRows.findIndex((r) => r === row);
-
-        if (index !== -1) {
-          this.selectedRows.splice(index, 1);
-        }
-      });
-
-      if ( toAdd ) {
-        this.selectedRows.push(...toAdd);
-      }
-
-      // Uncheck and check the checkboxes of nodes that have been added/removed
-      if (toRemove.length) {
-        this.$nextTick(() => {
-          for ( let i = 0 ; i < toRemove.length ; i++ ) {
-            this.updateInput(toRemove[i], false, this.keyField);
-          }
-        });
-      }
-
-      if (toAdd.length) {
-        this.$nextTick(() => {
-          for ( let i = 0 ; i < toAdd.length ; i++ ) {
-            this.updateInput(toAdd[i], true, this.keyField);
-          }
-        });
-      }
-
-      this.$nextTick(() => {
-        this.$emit('selection', this.selectedRows);
-      });
-    },
-
-    updateInput(node, on, keyField) {
-      const id = get(node, keyField);
-
-      if ( id ) {
-        // Note: This is looking for the checkbox control for the row
-        const input = this.$el.querySelector(`div[data-checkbox-ctrl][data-node-id="${ id }"]`);
-
-        if ( input && !input.disabled ) {
-          const label = input.querySelector('label');
-
-          if (label) {
-            label.value = on;
-          }
-          let tr = input.closest('tr');
-          let first = true;
-
-          while ( tr && (first || tr.classList.contains('sub-row') ) ) {
-            if (on) {
-              tr.classList.add('row-selected');
-            } else {
-              tr.classList.remove('row-selected');
-            }
-            tr = tr.nextElementSibling;
-            first = false;
-          }
-        }
-      }
-    },
-
-    select(nodes) {
-      nodes.forEach((node) => {
-        const id = get(node, this.keyField);
-        const input = this.$el.querySelector(`label[data-node-id="${ id }"]`);
-
-        input.dispatchEvent(new Event('click'));
-      });
-    },
-
-    applyTableAction(action, args, event) {
-      const opts = { alt: event && isAlternate(event), event };
-
-      // Go through the table selection and filter out those actions that can't run the chosen action
-      const executableSelection = this.selectedRows.filter((row) => {
-        const matchingResourceAction = row.availableActions.find((a) => a.action === action.action);
-
-        return matchingResourceAction?.enabled;
-      });
-
-      _execute(executableSelection, action, args, opts, this);
-
-      this.actionOfInterest = null;
-    },
-
-    clearSelection() {
-      this.update([], this.selectedRows);
-    },
-
-  }
-};
-
-// ---------------------------------------------------------------------
-// --- Helpers that were in selectionStore.js --------------------------
-// ---------------------------------------------------------------------
-
-let anon = 0;
-
-function _add(map, act, incrementCounts = true) {
-  let id = act.action;
-
-  if ( !id ) {
-    id = `anon${ anon }`;
-    anon++;
-  }
-
-  let obj = map[id];
-
-  if ( !obj ) {
-    obj = Object.assign({}, act);
-    map[id] = obj;
-    obj.allEnabled = false;
-  }
-
-  if ( !act.enabled ) {
-    obj.allEnabled = false;
-  } else {
-    obj.anyEnabled = true;
-  }
-
-  if ( incrementCounts ) {
-    obj.available = (obj.available || 0) + (!act.enabled ? 0 : 1 );
-    obj.total = (obj.total || 0) + 1;
-  }
-
-  return obj;
-}
-
-function _filter(map, disableAll = false) {
-  const out = filterBy(Object.values(map), 'anyEnabled', true);
-
-  for ( const act of out ) {
-    if ( disableAll ) {
-      act.enabled = false;
-    } else {
-      act.enabled = ( act.available >= act.total );
-    }
-  }
-
-  return out;
-}
-
-function _execute(resources, action, args, opts = {}, ctx) {
-  args = args || [];
-
-  // New pattern for extensions - always call invoke
-  if (action.invoke) {
-    const actionOpts = {
-      action,
-      event: opts.event,
-      isAlt: !!opts.alt,
-    };
-
-    return action.invoke.apply(ctx, [actionOpts, resources || [], args]);
-  }
-
-  if ( resources.length > 1 && action.bulkAction && !opts.alt ) {
-    const fn = resources[0][action.bulkAction];
-
-    if ( fn ) {
-      return fn.call(resources[0], resources, ...args);
-    }
-  }
-
-  const promises = [];
-
-  for ( const resource of resources ) {
-    let fn;
-
-    if (opts.alt && action.altAction) {
-      fn = resource[action.altAction];
-    } else {
-      fn = resource[action.action];
-    }
-
-    if ( fn ) {
-      promises.push(fn.apply(resource, args));
-    }
-  }
-
-  return Promise.all(promises);
-}

package/components/rancherSortableTable/sortable-config.ts

@@ -1,4 +0,0 @@
-// Its quicker to render if we directly supply the components for the formatters
-// rather than just the name of a global component - so create a map of the formatter comoponents
-// NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
-export const FORMATTERS = {};