@rancher/shell 0.1.3 → 0.1.21

package/promptRemove/management.cattle.io.roletemplate.vue

@@ -0,0 +1,47 @@
+<script>
+import RoleDeletionCheck from '@shell/promptRemove/mixin/roleDeletionCheck';
+export default {
+  name:   'RoleTemplatePromptRemove',
+  mixins: [RoleDeletionCheck],
+  props:  {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    type: {
+      type:     String,
+      required: true
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <template>
+      {{ t('promptRemove.attemptingToRemove', { type }) }} <span
+        v-html="resourceNames(names, plusMore, t)"
+      ></span>
+    </template>
+    <div v-if="info" class="text info mb-10 mt-20">
+      <span v-html="info" />
+    </div>
+    <div v-if="warning" class="text-warning mb-10 mt-20">
+      {{ warning }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text.info {
+  display: flex;
+  align-items: center;
+
+  > span {
+    margin-right: 5px;
+  }
+}
+</style>

package/promptRemove/mixin/roleDeletionCheck.js

@@ -0,0 +1,97 @@
+import { mapState, mapGetters } from 'vuex';
+import { resourceNames } from '@shell/utils/string';
+import { MANAGEMENT } from '@shell/config/types';
+import { SUBTYPE_MAPPING } from '@shell/models/management.cattle.io.roletemplate';
+const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
+
+export default {
+  data() {
+    return {
+      warning:             '',
+      info:                '',
+    };
+  },
+
+  computed:   {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    names() {
+      return this.toRemove.map(obj => obj.nameDisplay).slice(0, 5);
+    },
+
+    plusMore() {
+      const remaining = this.toRemove.length - this.names.length;
+
+      return this.t('promptRemove.andOthers', { count: remaining });
+    },
+  },
+  watch: {
+    value: {
+      handler(neu) {
+        this.handleRoleDeletionCheck(neu, neu[0].type, this.$route.hash);
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    resourceNames,
+    async handleRoleDeletionCheck(rolesToRemove, resourceType, queryHash) {
+      this.warning = '';
+      let resourceToCheck;
+      let propToMatch;
+      let numberOfRolesWithBinds = 0;
+      const uniqueUsersWithBinds = new Set();
+
+      this.info = this.t('rbac.globalRoles.waiting', { count: rolesToRemove.length });
+
+      switch (resourceType) {
+      case MANAGEMENT.GLOBAL_ROLE:
+        resourceToCheck = MANAGEMENT.GLOBAL_ROLE_BINDING;
+        propToMatch = 'globalRoleName';
+        break;
+      default:
+        if (queryHash.includes(CLUSTER)) {
+          resourceToCheck = MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING;
+        } else {
+          resourceToCheck = MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING;
+        }
+        propToMatch = 'roleTemplateName';
+        break;
+      }
+
+      try {
+        const request = await this.$store.dispatch('management/request', {
+          url:           `/v1/${ resourceToCheck }`,
+          method:        'get',
+        }, { root: true });
+
+        if (request.data && request.data.length) {
+          rolesToRemove.forEach((toRemove) => {
+            const usedRoles = request.data.filter(item => item[propToMatch] === toRemove.id);
+
+            if (usedRoles.length) {
+              const uniqueUsers = [...new Set(usedRoles.map(item => item.userName))];
+
+              if (uniqueUsers.length) {
+                numberOfRolesWithBinds++;
+                uniqueUsers.forEach(user => uniqueUsersWithBinds.add(user));
+              }
+            }
+          });
+
+          if (numberOfRolesWithBinds && uniqueUsersWithBinds.size) {
+            this.info = '';
+            this.warning = this.t('rbac.globalRoles.usersBound', { count: uniqueUsersWithBinds.size });
+          } else {
+            this.info = this.t('rbac.globalRoles.notBound', null, true);
+          }
+        } else {
+          this.info = this.t('rbac.globalRoles.notBound', null, true);
+        }
+      } catch (e) {
+        this.info = this.t('rbac.globalRoles.unableToCheck');
+      }
+    },
+  },
+};

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -1,16 +1,15 @@
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { VueConstructor } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
-declare module 'vue/types/vue' {
-  /* eslint-disable no-unused-vars */
-  interface Vue {
-    queueResize(): void;
-  }
+interface TextAreaResize {
+  queueResize(): void;
 }
 
-export default Vue.extend({
+export default (
+  Vue as VueConstructor<Vue & TextAreaResize>
+).extend({
   inheritAttrs: false,
 
   props: {

package/rancher-components/components/BadgeState/BadgeState.spec.ts

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import { BadgeState } from './index';
+
+describe('BadgeState.vue', () => {
+  it('renders props.msg when passed', () => {
+    const label = 'Hello, World!';
+
+    const wrapper = shallowMount(BadgeState, { propsData: { label } });
+
+    expect(wrapper.find('span').text()).toMatch(label);
+  });
+});

package/rancher-components/components/BadgeState/BadgeState.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+interface Badge {
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+/**
+ * Badge state component.
+ * <p>Represents a badge whose label and color is either taken from the value property or
+ * from the label and color properties. The state property takes precedence.</p>
+ */
+export default Vue.extend({
+  props: {
+    /**
+     * A value having the properties `stateBackground` and `stateDisplay`
+     */
+    value: {
+      type:    Object as PropType<Badge>,
+      default: null
+    },
+
+    /**
+     * Badge color. `stateBackground` of the value property takes precedence if supplied
+     */
+    color: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Optional icon to be shown before the label
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Label to display in the badge. `stateDisplay` of the value property takes precedence if supplied
+     */
+    label: {
+      type:    String,
+      default: null
+    }
+  },
+
+  computed: {
+    bg(): string | null {
+      return this.value?.stateBackground || this.color;
+    },
+
+    msg(): string | null {
+      return this.value?.stateDisplay || this.label;
+    }
+  }
+});
+</script>
+
+<template>
+  <span :class="{'badge-state': true, [bg]: true}">
+    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .badge-state {
+    align-items: center;
+    display: inline-flex;
+    padding: 2px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--primary);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      background: transparent;
+      border-color: var(--success);
+    }
+  }
+</style>
+<style lang="scss">
+  // TODO: #6005
+  // Investigate why this is here.. I don't think that styles for sortable table should belong here
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    max-width: 110px;
+    font-size: .85em;
+    vertical-align: middle;
+  }
+</style>

package/rancher-components/components/BadgeState/index.ts

@@ -0,0 +1 @@
+export { default as BadgeState } from './BadgeState.vue';

package/rancher-components/components/Banner/Banner.test.ts

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils';
+import { Banner } from './index';
+
+describe('component: Banner', () => {
+  it('should display text based on label', () => {
+    const label = 'test';
+    const wrapper = mount(Banner, { propsData: { label } });
+
+    const element = wrapper.find('span').element;
+
+    expect(element.textContent).toBe(label);
+  });
+});

package/rancher-components/components/Banner/Banner.vue

@@ -0,0 +1,163 @@
+<script lang="ts">
+import Vue from 'vue';
+import { nlToBr } from '@shell/utils/string';
+import { stringify } from '@shell/utils/error';
+
+export default Vue.extend({
+  props: {
+    /**
+     * A color class that represents the color of the banner.
+     * @values primary, secondary, success, warning, error, info
+     */
+    color: {
+      type:    String,
+      default: 'secondary'
+    },
+    /**
+     * The label to display as the banner's default content.
+     */
+    label: {
+      type:    [String, Error, Object],
+      default: null
+    },
+    /**
+     * The i18n key for the label to display as the banner's default content.
+     */
+    labelKey: {
+      type:    String,
+      default: null
+    },
+    /**
+     * Toggles the banner's close button.
+     */
+    closable: {
+      type:    Boolean,
+      default: false
+    },
+    /**
+     * Toggles the stacked class for the banner.
+     */
+    stacked: {
+      type:    Boolean,
+      default: false
+    }
+  },
+  computed: {
+    /**
+     * Return message text as label.
+     */
+    messageLabel(): string | void {
+      return !(typeof this.label === 'string') ? stringify(this.label) : undefined;
+    }
+  },
+  methods: { nlToBr }
+});
+</script>
+<template>
+  <div
+    class="banner"
+    :class="{
+      [color]: true,
+      closable,
+      stacked
+    }"
+  >
+    <slot>
+      <t v-if="labelKey" :k="labelKey" :raw="true" />
+      <span v-else-if="messageLabel">{{ messageLabel }}</span>
+      <span v-else v-html="nlToBr(label)" />
+    </slot>
+    <div v-if="closable" class="closer" @click="$emit('close')">
+      <i class="icon icon-2x icon-close closer-icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  $left-border-size: 4px;
+
+  .banner {
+    padding: 10px;
+    margin: 15px 0;
+    width: 100%;
+    transition: all 0.2s ease;
+    position: relative;
+    line-height: 20px;
+
+    &.stacked {
+      padding: 0 10px;
+      margin: 0;
+      transition: none;
+      &:first-child {
+        padding-top: 10px;
+      }
+      &:last-child {
+        padding-bottom: 10px;
+      }
+    }
+
+    &.closable {
+      padding-right: 40px;
+    }
+
+    .closer {
+      display: flex;
+      align-items: center;
+
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 40px;
+      line-height: 42px;
+      text-align: center;
+
+      .closer-icon {
+        font-size: 22px;
+        opacity: 0.7;
+
+        &:hover {
+          opacity: 1;
+          color: var(--link);
+        }
+      }
+    }
+
+    &.primary {
+      background: var(--primary);
+      border-left: solid $left-border-size var(--primary);
+      color: var(--body-text);
+    }
+
+    &.secondary {
+      background: var(--default-banner-bg);
+      border-left: solid $left-border-size var(--default);
+      color: var(--body-text);
+    }
+
+    &.success {
+      background: var(--success-banner-bg);
+      border-left: solid $left-border-size var(--success);
+      color: var(--body-text);
+    }
+
+    &.info {
+      background: var(--info-banner-bg);
+      border-left: solid $left-border-size var(--info);
+      color: var(--body-text);
+    }
+
+    &.warning {
+      background: var(--warning-banner-bg);
+      border-left: solid $left-border-size var(--warning);
+      color: var(--body-text);
+    }
+
+    &.error {
+      background: var(--error-banner-bg);
+      border-left: solid $left-border-size var(--error);
+      color: var(--error);
+    }
+  }
+</style>

package/rancher-components/components/Banner/index.ts

@@ -0,0 +1 @@
+export { default as Banner } from './Banner.vue';

package/rancher-components/components/Card/Card.vue

@@ -0,0 +1,150 @@
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name:  'Card',
+  props: {
+    /**
+     * The card's title.
+     */
+    title: {
+      type:    String,
+      default: ''
+    },
+    /**
+     * The text content for the card's body.
+     */
+    content: {
+      type:    String,
+      default: ''
+    },
+    /**
+     * The function to invoke when the default action button is clicked.
+     */
+    buttonAction: {
+      type:    Function,
+      default: (): void => { }
+    },
+    /**
+     * The text for the default action button.
+     */
+    buttonText: {
+      type:    String,
+      default: 'go'
+    },
+    /**
+     * Toggles the card's highlight-border class.
+     */
+    showHighlightBorder: {
+      type:    Boolean,
+      default: true
+    },
+    /**
+     * Toggles the card's Actions section.
+     */
+    showActions: {
+      type:    Boolean,
+      default: true
+    },
+    sticky: {
+      type:    Boolean,
+      default: false,
+    },    
+  }
+});
+</script>
+
+<template>
+  <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
+    <div class="card-wrap">
+      <div class="card-title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <hr />
+      <div class="card-body">
+        <slot name="body">
+          {{ content }}
+        </slot>
+      </div>
+      <div v-if="showActions" class="card-actions">
+        <slot name="actions">
+          <button class="btn role-primary" @click="buttonAction">
+            {{ buttonText }}
+          </button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss'>
+ .card-container {
+  &.highlight-border {
+    border-left: 5px solid var(--primary);
+  }
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-basis: 40%;
+  margin: 10px;
+  min-height: 100px;
+  padding: 10px;
+  box-shadow: 0 0 20px var(--shadow);
+  &:not(.top) {
+    align-items: top;
+    flex-direction: row;
+    justify-content: start;
+  }
+  .card-wrap {
+    width: 100%;
+  }
+   & .card-body {
+    color: var(--input-label);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+   }
+   & .card-actions {
+     align-self: end;
+     display: flex;
+     padding-top: 20px;
+   }
+   & .card-title {
+    align-items: center;
+    display: flex;
+    width: 100%;
+     h5 {
+       margin: 0;
+     }
+    .flex-right {
+      margin-left: auto;
+    }
+   }
+
+  // Sticky mode will stick header and footer to top and bottom with content in the middle scrolling
+   &.card-sticky {
+      // display: flex;
+      // flex-direction: column;
+      overflow: hidden;
+
+    .card-wrap {
+      display: flex;
+      flex-direction: column;
+
+      .card-body {
+        justify-content: flex-start;
+        overflow: scroll;
+      }
+
+      > * {
+        flex: 0;
+      }
+
+      .card-body {
+        flex: 1;
+      }
+    }
+   }
+ }
+</style>

package/rancher-components/components/Card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card.vue';

package/rancher-components/components/Form/Checkbox/Checkbox.test.ts

@@ -0,0 +1,77 @@
+import { shallowMount } from '@vue/test-utils';
+import { Checkbox } from './index';
+
+describe('Checkbox.vue', () => {
+  it('is unchecked by default', () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+  });
+
+  it('renders a true value', () => {
+    const wrapper = shallowMount(Checkbox, { propsData: { value: true } });
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('updates from false to true when props change', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+
+    await wrapper.setProps({ value: true });
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(true);
+  });
+
+  it('emits an input event with a custom valueWhenTrue', async () => {
+    const valueWhenTrue = 'BIG IF TRUE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
+  });
+
+  it('updates from valueWhenTrue to falsy', async () => {
+    const valueWhenTrue = 'REAL HUGE IF FALSE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.[0][0]).toBe(null);
+  })
+});