@rancher/shell 0.1.0

package/components/SortableTable/sorting.js

@@ -0,0 +1,102 @@
+import { sortBy } from '@shell/utils/sort';
+import { addObject } from '@shell/utils/array';
+
+export default {
+  computed: {
+    sortFields() {
+      let fromGroup = ( this.groupBy ? this.groupSort || this.groupBy : null) || [];
+      let fromColumn = [];
+
+      const column = (this.columns || this.headers).find(x => x && x.name && x.name.toLowerCase() === this.sortBy.toLowerCase());
+
+      if ( this.sortBy && column && column.sort ) {
+        fromColumn = column.sort;
+      }
+
+      if ( !Array.isArray(fromGroup) ) {
+        fromGroup = [fromGroup];
+      }
+
+      if ( !Array.isArray(fromColumn) ) {
+        fromColumn = [fromColumn];
+      }
+
+      const out = [...fromGroup, ...fromColumn];
+
+      addObject(out, 'nameSort');
+      addObject(out, 'id');
+
+      return out;
+    },
+
+    arrangedRows() {
+      let key;
+
+      if ( this.sortGenerationFn ) {
+        key = `${ this.sortGenerationFn.apply(this) }/${ this.rows.length }/${ this.descending }/${ this.sortFields.join(',') }`;
+
+        if ( this.cacheKey === key ) {
+          return this.cachedRows;
+        }
+      }
+
+      const out = sortBy(this.rows, this.sortFields, this.descending);
+
+      if ( key ) {
+        this.cacheKey = key;
+        this.cachedRows = out;
+      }
+
+      return out;
+    },
+  },
+
+  data() {
+    let sortBy = null;
+
+    this._defaultSortBy = this.defaultSortBy;
+
+    // Try to find a reasonable default sort
+    if ( !this._defaultSortBy ) {
+      const markedColumn = this.headers.find(x => !!x.defaultSort);
+      const nameColumn = this.headers.find( x => x.name === 'name');
+
+      if ( markedColumn ) {
+        this._defaultSortBy = markedColumn.name;
+      } else if ( nameColumn ) {
+        // Use the name column if there is one
+        this._defaultSortBy = nameColumn.name;
+      } else {
+        // The first column that isn't state
+        const first = this.headers.filter( x => x.name !== 'state' )[0];
+
+        if ( first ) {
+          this._defaultSortBy = first.name;
+        } else {
+          // I give up
+          this._defaultSortBy = 'id';
+        }
+      }
+    }
+
+    // If the sort column doesn't exist or isn't specified, use default
+    if ( !sortBy || !this.headers.find(x => x.name === sortBy ) ) {
+      sortBy = this._defaultSortBy;
+    }
+
+    return {
+      sortBy,
+      descending: false,
+      cachedRows: null,
+      cacheKey:   null,
+    };
+  },
+
+  methods: {
+    changeSort(sort, desc) {
+      this.sortBy = sort;
+      this.descending = desc;
+      this.currentPage = 1;
+    },
+  },
+};

package/components/StatusTable.vue

@@ -0,0 +1,55 @@
+<script>
+import {
+  LAST_UPDATED, TYPE, REASON, MESSAGE, STATUS
+} from '@shell/config/table-headers';
+import SortableTable from '@shell/components/SortableTable';
+export default {
+  components: { SortableTable },
+  props:      {
+    resource: {
+      type:     Object,
+      required: true
+    }
+  },
+  data() {
+    const statusHeaders = [
+      TYPE,
+      STATUS,
+      LAST_UPDATED,
+      REASON,
+      MESSAGE
+    ];
+
+    return {
+      statusRows: this.resource.status.conditions || [],
+      statusHeaders
+    };
+  },
+
+  methods: {
+    clicked($event) {
+      $event.stopPropagation();
+      $event.preventDefault();
+
+      this.$copyText(this.$slots.default[0].text).then(() => {
+        this.copied = true;
+
+        setTimeout(() => {
+          this.copied = false;
+        }, 2000);
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <SortableTable
+    :rows="statusRows"
+    :headers="statusHeaders"
+    :table-actions="false"
+    :row-actions="false"
+    key-field="key"
+    default-sort-by="state"
+  />
+</template>

package/components/Tabbed/Tab.vue

@@ -0,0 +1,94 @@
+<script>
+export default {
+  inject: ['addTab', 'removeTab', 'sideTabs'],
+
+  props: {
+    label: {
+      default: null,
+      type:    String
+    },
+    labelKey: {
+      default: null,
+      type:    String
+    },
+    name: {
+      required: true,
+      type:     String
+    },
+    tooltip: {
+      default: null,
+      type:    [String, Object]
+    },
+    weight: {
+      default:  0,
+      required: false,
+      type:     Number
+    },
+    showHeader: {
+      type:    Boolean,
+      default: null, // Default true for side-tabs, false for top.
+    },
+    displayAlertIcon: {
+      type:    Boolean,
+      default: null
+    },
+  },
+
+  data() {
+    return { active: null };
+  },
+
+  computed: {
+    labelDisplay() {
+      if ( this.labelKey ) {
+        return this.$store.getters['i18n/t'](this.labelKey);
+      }
+
+      if ( this.label ) {
+        return this.label;
+      }
+
+      return this.name;
+    },
+
+    shouldShowHeader() {
+      if ( this.showHeader !== null ) {
+        return this.showHeader;
+      }
+
+      return this.sideTabs || false;
+    }
+  },
+
+  watch: {
+    active(neu) {
+      if (neu) {
+        this.$emit('active');
+      }
+    }
+  },
+
+  mounted() {
+    this.addTab(this);
+  },
+
+  beforeDestroy() {
+    this.removeTab(this);
+  }
+};
+</script>
+
+<template>
+  <section
+    v-show="active"
+    :id="name"
+    :aria-hidden="!active"
+    role="tabpanel"
+  >
+    <h2 v-if="shouldShowHeader">
+      {{ label }}
+      <i v-if="tooltip" v-tooltip="tooltip" class="icon icon-info icon-lg" />
+    </h2>
+    <slot v-bind="{active}" />
+  </section>
+</template>

package/components/Tabbed/index.vue

@@ -0,0 +1,419 @@
+<script>
+import head from 'lodash/head';
+import isEmpty from 'lodash/isEmpty';
+import { addObject, removeObject, findBy } from '@shell/utils/array';
+import { sortBy } from '@shell/utils/sort';
+import findIndex from 'lodash/findIndex';
+
+export default {
+  name: 'Tabbed',
+
+  props: {
+    defaultTab: {
+      type:    String,
+      default: null,
+    },
+
+    sideTabs: {
+      type:    Boolean,
+      default: false
+    },
+
+    showTabsAddRemove: {
+      type:    Boolean,
+      default: false
+    },
+
+    // whether or not to scroll to the top of the new tab on tab change. This is particularly ugly with side tabs
+    scrollOnChange: {
+      type:    Boolean,
+      default: false
+    },
+
+    useHash: {
+      type:    Boolean,
+      default: true,
+    },
+
+    noContent: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+
+  provide() {
+    const tabs = this.tabs;
+
+    return {
+      sideTabs: this.sideTabs,
+
+      addTab(tab) {
+        const existing = findBy(tabs, 'name', tab.name);
+
+        if ( existing ) {
+          removeObject(tabs, existing);
+        }
+
+        addObject(tabs, tab);
+      },
+
+      removeTab(tab) {
+        removeObject(tabs, tab);
+      }
+    };
+  },
+
+  data() {
+    return {
+      tabs:          [],
+      activeTabName: null,
+    };
+  },
+
+  computed: {
+    // keep the tabs list ordered for dynamic tabs
+    sortedTabs() {
+      return sortBy(this.tabs, ['weight:desc', 'labelDisplay', 'name']);
+    },
+  },
+
+  watch: {
+    sortedTabs(tabs) {
+      const {
+        defaultTab,
+        useHash,
+        $route: { hash }
+      } = this;
+      const activeTab = tabs.find(t => t.active);
+
+      const windowHash = hash.slice(1);
+      const windowHashTabMatch = tabs.find(t => t.name === windowHash && !t.active);
+      const firstTab = head(tabs) || null;
+
+      if (isEmpty(activeTab)) {
+        if (useHash && !isEmpty(windowHashTabMatch)) {
+          this.select(windowHashTabMatch.name);
+        } else if (!isEmpty(defaultTab) && !isEmpty(tabs.find(t => t.name === defaultTab))) {
+          this.select(defaultTab);
+        } else if (firstTab?.name) {
+          this.select(firstTab.name);
+        }
+      } else if (useHash && activeTab?.name === windowHash) {
+        this.select(activeTab.name);
+      }
+    },
+  },
+
+  mounted() {
+    if ( this.useHash ) {
+      window.addEventListener('hashchange', this.hashChange);
+    }
+  },
+
+  unmounted() {
+    if ( this.useHash ) {
+      window.removeEventListener('hashchange', this.hashChange);
+    }
+  },
+
+  methods: {
+    hashChange() {
+      if (!this.scrollOnChange) {
+        const scrollable = document.getElementsByTagName('main')[0];
+
+        if (scrollable) {
+          scrollable.scrollTop = 0;
+        }
+      }
+
+      this.select(this.$route.hash);
+    },
+
+    find(name) {
+      return this.sortedTabs.find(x => x.name === name );
+    },
+
+    select(name/* , event */) {
+      const {
+        sortedTabs,
+        $route: { hash: routeHash },
+        $router: { currentRoute },
+      } = this;
+
+      const selected = this.find(name);
+      const hashName = `#${ name }`;
+
+      if ( !selected || selected.disabled) {
+        return;
+      }
+
+      if (this.useHash && routeHash !== hashName) {
+        const kurrentRoute = { ...currentRoute };
+
+        kurrentRoute.hash = hashName;
+
+        this.$router.replace(kurrentRoute);
+      }
+
+      for ( const tab of sortedTabs ) {
+        tab.active = (tab.name === selected.name);
+      }
+
+      this.$emit('changed', { tab: selected });
+      this.activeTabName = selected.name;
+    },
+
+    selectNext(direction) {
+      const { sortedTabs } = this;
+      const currentIdx = sortedTabs.findIndex(x => x.active);
+      const nextIdx = getCyclicalIdx(currentIdx, direction, sortedTabs.length);
+      const nextName = sortedTabs[nextIdx].name;
+
+      this.select(nextName);
+
+      this.$nextTick(() => {
+        this.$refs.tablist.focus();
+      });
+
+      function getCyclicalIdx(currentIdx, direction, tabsLength) {
+        const nxt = currentIdx + direction;
+
+        if (nxt >= tabsLength) {
+          return 0;
+        } else if (nxt <= 0) {
+          return tabsLength - 1;
+        } else {
+          return nxt;
+        }
+      }
+    },
+
+    tabAddClicked() {
+      const activeTabIndex = findIndex(this.tabs, tab => tab.active);
+
+      this.$emit('addTab', activeTabIndex);
+    },
+
+    tabRemoveClicked() {
+      const activeTabIndex = findIndex(this.tabs, tab => tab.active);
+
+      this.$emit('removeTab', activeTabIndex);
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="{'side-tabs': !!sideTabs }">
+    <ul
+      ref="tablist"
+      role="tablist"
+      class="tabs"
+      :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
+      tabindex="0"
+      @keydown.right.prevent="selectNext(1)"
+      @keydown.left.prevent="selectNext(-1)"
+      @keydown.down.prevent="selectNext(1)"
+      @keydown.up.prevent="selectNext(-1)"
+    >
+      <li
+        v-for="tab in sortedTabs"
+        :id="tab.name"
+        :key="tab.name"
+        :class="{tab: true, active: tab.active, disabled: tab.disabled}"
+        role="presentation"
+      >
+        <a
+          :aria-controls="'#' + tab.name"
+          :aria-selected="tab.active"
+          role="tab"
+          @click.prevent="select(tab.name, $event)"
+        >
+          <span>{{ tab.labelDisplay }}</span>
+          <i v-if="tab.displayAlertIcon" class="conditions-alert-icon icon-error icon-lg" />
+        </a>
+      </li>
+      <li v-if="sideTabs && !sortedTabs.length" class="tab disabled">
+        <a href="#" @click.prevent>(None)</a>
+      </li>
+      <ul v-if="sideTabs && showTabsAddRemove" class="tab-list-footer">
+        <li>
+          <button type="button" class="btn bg-transparent" @click="tabAddClicked">
+            <i class="icon icon-plus icon-lg" />
+          </button>
+          <button type="button" class="btn bg-transparent" :disabled="!sortedTabs.length" @click="tabRemoveClicked">
+            <i class="icon icon-minus icon-lg" />
+          </button>
+        </li>
+      </ul>
+      <slot name="tab-row-extras" />
+    </ul>
+    <div :class="{ 'tab-container': !!tabs.length || !!sideTabs, 'no-content': noContent }">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .tabs {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    &.horizontal {
+      border: solid thin var(--border);
+      border-bottom: 0;
+      display: flex;
+      flex-direction: row;
+
+      + .tab-container {
+        border: solid thin var(--border);
+      }
+
+      .tab.active {
+        border-bottom: solid 2px var(--primary);
+      }
+    }
+
+    &:focus {
+     outline:none;
+
+      & .tab.active a span {
+        text-decoration: underline;
+      }
+    }
+
+    .tab {
+      position: relative;
+      float: left;
+      padding: 0 8px 0 0;
+      cursor: pointer;
+
+      A {
+        display: flex;
+        align-items: center;
+        padding: 10px 15px;
+
+        &:hover {
+          text-decoration: none;
+          span {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .conditions-alert-icon {
+        color: var(--error);
+        padding-left: 10px;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      &.active {
+        > A {
+          color: var(--primary);
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .tab-container {
+    padding: 20px;
+
+    &.no-content {
+      padding: 0 0 3px 0;
+    }
+  }
+
+  .side-tabs {
+    display: flex;
+    box-shadow: 0 0 20px var(--shadow);
+    border-radius: calc(var(--border-radius) * 2);
+    background-color: var(--tabbed-sidebar-bg);
+
+    .tab-container {
+      padding: 20px;
+    }
+
+    & .tabs {
+      width: $sideways-tabs-width;
+      min-width: $sideways-tabs-width;
+      display: flex;
+      flex: 1 0;
+      flex-direction: column;
+
+      // &.vertical {
+      //   .tab.active {
+      //     background-color: var(--tabbed-container-bg);
+      //   }
+      // }
+
+      & .tab {
+        width: 100%;
+        border-left: solid 5px transparent;
+
+        &.toggle A {
+          color: var(--primary);
+        }
+
+        A {
+          color: var(--primary);
+        }
+
+        &.active {
+          background-color: var(--body-bg);
+          border-left: solid 5px var(--primary);
+
+          & A{
+            color: var(--input-label);
+          }
+        }
+
+        &.disabled {
+          background-color: var(--disabled-bg);
+
+          & A {
+            color: var(--disabled-text);
+            text-decoration: none;
+          }
+        }
+      }
+      .tab-list-footer {
+        list-style: none;
+        padding: 0;
+        margin-top: auto;
+
+        li {
+          display: flex;
+          flex: 1;
+
+          .btn {
+            flex: 1 1;
+            display: flex;
+            justify-content: center;
+          }
+
+          button:first-of-type {
+            border-top: solid 1px var(--border);
+            border-right: solid 1px var(--border);
+            border-top-right-radius: 0;
+          }
+          button:last-of-type {
+            border-top: solid 1px var(--border);
+            border-top-left-radius: 0;
+          }
+
+        }
+      }
+    }
+
+    & .tab-container{
+      width: calc(100% - #{$sideways-tabs-width});
+      flex-grow: 1;
+      background-color: var(--body-bg);
+    }
+  }
+</style>