@rancher/shell 0.2.4 → 0.3.0

package/rancher-components/Utils/DraggableZone/DraggableZone.vue

@@ -0,0 +1,181 @@
+<script lang="ts">
+import Vue from 'vue';
+import { mapState } from 'vuex';
+import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
+
+interface Data {
+  drag: Drag;
+}
+
+type Zone = null | typeof CENTER | typeof RIGHT | typeof BOTTOM | typeof LEFT;
+
+export interface Drag {
+  active: boolean;
+  zone: Zone;
+}
+
+export default Vue.extend({
+  data(): Data {
+    return {
+      drag:   {
+        active: false,
+        zone:   CENTER,
+      },
+    };
+  },
+
+  computed: {
+
+    ...mapState('wm', ['userPin']),
+
+    pin: {
+      get(): Zone {
+        return this.userPin;
+      },
+
+      set(pin: Zone) {
+        if (pin === CENTER) {
+          return;
+        }
+        window.localStorage.setItem('wm-pin', pin as string);
+        this.$store.commit('wm/setUserPin', pin);
+      },
+    },
+
+  },
+
+  methods: {
+
+    onDragStart() {
+      this.drag.active = true;
+    },
+
+    onDragOver(event: DragEvent, zone: Zone) {
+      this.drag.zone = zone;
+      if (zone !== CENTER) {
+        event.preventDefault();
+      }
+    },
+
+    onDragEnd() {
+      this.pin = this.drag.zone;
+      this.drag = {
+        active: false,
+        zone:   CENTER,
+      };
+    },
+
+  }
+});
+</script>
+
+<template>
+  <div v-if="drag.active">
+    <span
+      v-if="drag.zone != pin"
+      class="pin-effect-area"
+      :class="drag.zone"
+    />
+    <span
+      class="drag-area center"
+      @dragover="onDragOver($event, 'center')"
+    />
+    <span
+      class="drag-area right"
+      @dragover="onDragOver($event, 'right')"
+    />
+    <span
+      class="drag-area bottom"
+      @dragover="onDragOver($event, 'bottom')"
+    />
+    <span
+      class="drag-area left"
+      @dragover="onDragOver($event, 'left')"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+  .pin-effect-area {
+    position: absolute;
+    z-index: 997;
+    width: 0;
+    height: 0;
+    border-style: hidden;
+
+    &.right {
+      top: 55px;
+      right: 0;
+      width: 300px;
+      transition: width .5s ease;
+      height: 100%;
+      background-image: linear-gradient(to right, var(--drag-over-outer-bg), var(--drag-over-inner-bg));
+      border-left: 1px;
+      border-style: hidden hidden hidden dashed;
+    }
+
+    &.left {
+      top: 55px;
+      left: 0;
+      width: 300px;
+      transition: width .5s ease;
+      height: 100%;
+      background-image: linear-gradient(to left, var(--drag-over-outer-bg), var(--drag-over-inner-bg));
+      border-right: 1px;
+      border-style: hidden dashed hidden hidden;
+    }
+
+    &.bottom {
+      bottom: 0;
+      height: 270px;
+      transition: height .5s ease;
+      width: 100%;
+      background-image: linear-gradient(to top, var(--drag-over-inner-bg), var(--drag-over-outer-bg));
+      border-top: 1px;
+      border-style: dashed hidden hidden hidden;
+    }
+
+    &.center {
+      width: 0;
+      height: 0;
+    }
+  }
+
+  // ToDo make height and width as input variable
+  .drag-area {
+    position: absolute;
+    z-index: 999;
+    width: 0;
+    height: 0;
+    opacity: 0;
+
+    &.center {
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 998;
+    }
+
+    &.right {
+      top: 55px;
+      right: 0;
+      width: 300px;
+      height: 100%;
+    }
+
+    &.left {
+      top: 55px;
+      left: 0;
+      width: 300px;
+      height: 100%;
+    }
+
+    &.bottom {
+      bottom: 0;
+      height: 270px;
+      width: 100%;
+    }
+  }
+</style>

package/rancher-components/Utils/DraggableZone/index.ts

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

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,111 @@
+<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,174 @@
+<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.test.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import { Card } from './index';
+
+describe('component: Card', () => {
+  const title = 'Card title';
+  const body = 'Card body';
+
+  it('should have a card title', () => {
+    const wrapper = mount(Card, {
+      propsData: { title },
+      slots:     { title: '<div>Card title</div>' }
+    });
+
+    const element = wrapper.find('[data-testid="card-title-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(title);
+  });
+
+  it('should have a card body', () => {
+    const wrapper = mount(Card, {
+      propsData: { body },
+      slots:     { body: '<div>Card body</div>' }
+    });
+    const element = wrapper.find('[data-testid="card-body-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(body);
+  });
+
+  it('should display the default card actions', () => {
+    const wrapper = mount(Card);
+    const element = wrapper.find('[data-testid="card-actions-slot"]');
+
+    expect(element.exists()).toBe(true);
+  });
+});

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

@@ -0,0 +1,166 @@
+<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"
+        data-testid="card-title-slot"
+      >
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <hr>
+      <div
+        class="card-body"
+        data-testid="card-body-slot"
+      >
+        <slot name="body">
+          {{ content }}
+        </slot>
+      </div>
+      <div
+        v-if="showActions"
+        class="card-actions"
+        data-testid="card-actions-slot"
+      >
+        <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';