@rancher/shell 0.1.3 → 0.1.21

package/components/AsyncButton.vue

@@ -95,7 +95,13 @@ export default Vue.extend({
     currentPhase: {
       type:    String,
       default: ASYNC_BUTTON_STATES.ACTION,
-    }
+    },
+
+    manual: {
+      type:    Boolean,
+      default: false,
+    },
+
   },
 
   data(): { phase: string, timer?: NodeJS.Timeout} {
@@ -190,6 +196,12 @@ export default Vue.extend({
     }
   },
 
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  },
+
   methods: {
     clicked($event: MouseEvent) {
       if ($event) {
@@ -205,7 +217,10 @@ export default Vue.extend({
         clearTimeout(this.timer);
       }
 
-      this.phase = ASYNC_BUTTON_STATES.WAITING;
+      // If manual property is set, don't automatically change the button on click
+      if (!this.manual) {
+        this.phase = ASYNC_BUTTON_STATES.WAITING;
+      }
 
       const cb: AsyncButtonCallback = (success) => {
         this.done(success);

package/components/ButtonDropdown.vue

@@ -194,6 +194,10 @@ export default {
     @search:focus="onFocus"
     @input="$emit('click-action', $event)"
   >
+    <template slot="no-options">
+      <slot name="no-options"></slot>
+    </template>
+
     <template #selected-option="option">
       <button
         tabindex="-1"

package/components/Carousel.vue

@@ -0,0 +1,291 @@
+<script>
+import { get } from '@shell/utils/object';
+import { BadgeState } from '@components/BadgeState';
+
+export default {
+  components: { BadgeState },
+  name:       'Carousel',
+  props:      {
+    sliders: {
+      type:     Array,
+      required: true,
+    },
+    keyField: {
+      type:    String,
+      default: 'key',
+    },
+    asLink: {
+      type:    Boolean,
+      default: false,
+    },
+    linkField: {
+      type:    String,
+      default: 'link'
+    },
+    targetField: {
+      type:    String,
+      default: 'target',
+    },
+    rel: {
+      type:    String,
+      default: 'noopener noreferrer nofollow'
+    },
+  },
+  data() {
+    return {
+      slider:          this.sliders,
+      activeItemId:    0,
+      autoScroll:      true
+    };
+  },
+
+  computed: {
+
+    trackStyle() {
+      const sliderItem = this.activeItemId * 100 / this.slider.length;
+      const width = 60 * this.slider.length;
+
+      return `transform: translateX(-${ sliderItem }%); width: ${ width }%`;
+    },
+  },
+
+  methods: {
+    get,
+
+    select(slide, i) {
+      this.$emit('clicked', slide, i);
+    },
+
+    scrollSlide(i) {
+      this.autoScroll = false;
+      this.activeItemId = i;
+      setTimeout(() => {
+        this.slidePosition();
+      }, 400);
+    },
+
+    nextPrev(item) {
+      this.autoScroll = false;
+      if (item === 'next' && this.activeItemId < this.slider.length - 1) {
+        this.activeItemId++;
+      }
+
+      if (item === 'prev' && this.activeItemId > 0) {
+        this.activeItemId--;
+      }
+
+      this.slidePosition();
+    },
+
+    timer() {
+      setInterval(this.autoScrollSlide, 2000);
+    },
+    autoScrollSlide() {
+      if (this.activeItemId < this.slider.length && this.autoScroll ) {
+        this.activeItemId++;
+      }
+
+      if (this.activeItemId > this.slider.length - 1) {
+        this.autoScroll = false;
+        this.activeItemId = 0;
+      }
+      this.slidePosition();
+    },
+
+    slidePosition() {
+      if (this.activeItemId <= 1) {
+        this.$refs.slide[this.slider.length - 1].style.left = '-93%';
+        this.$refs.slide[0].style.left = '7%';
+      } else {
+        this.$refs.slide[this.slider.length - 1].style.left = '7%';
+        this.$refs.slide[0].style.left = '107%';
+      }
+    }
+  },
+
+  mounted() {
+    this.timer();
+  }
+};
+
+</script>
+
+<template>
+  <div class="slider">
+    <div id="slide-track" ref="slider" :style="trackStyle" class="slide-track">
+      <div
+        :is="asLink ? 'a' : 'div'"
+        v-for="(slide, i) in sliders"
+        :id="`slide` + i"
+        ref="slide"
+        :key="get(slide, keyField)"
+        class="slide"
+        :href="asLink ? get(slide, linkField) : null"
+        :target="get(slide, targetField)"
+        :rel="rel"
+        @click="select(slide, i)"
+      >
+        <div class="slide-content">
+          <div class="slide-img">
+            <img :src="slide.icon ? slide.icon : `/_nuxt/shell/assets/images/generic-catalog.svg`" />
+          </div>
+          <div class="slide-content-right">
+            <BadgeState :label="slide.repoName" color="slider-badge mb-20" />
+            <h1>{{ slide.chartNameDisplay }}</h1>
+            <p>{{ slide.chartDescription }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="controls">
+      <div
+        v-for="(slide, i) in slider"
+        :key="i"
+        class="control-item"
+        :class="{'active': activeItemId === i}"
+        @click="scrollSlide(i, slider.length)"
+      ></div>
+    </div>
+    <div ref="prev" class="prev" :class="[activeItemId === 0 ? 'disabled' : 'prev']" @click="nextPrev('prev')">
+      <i class="icon icon-chevron-left icon-4x"></i>
+    </div>
+    <div ref="next" class="next" :class="[activeItemId === slider.length - 1 ? 'disabled' : 'next']" @click="nextPrev('next')">
+      <i class="icon icon-chevron-right icon-4x"></i>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+ .slider {
+  margin: auto;
+  position: relative;
+  width: 100%;
+  place-items: center;
+  overflow: hidden;
+  margin-bottom: 30px;
+  min-width: 700px;
+
+  &:hover {
+    .prev,
+    .next {
+      display: block;
+    }
+  }
+}
+
+.slide-track {
+  display: flex;
+  animation: scrolls 10s ;
+  position: relative;
+  transition: 1s ease-in-out;
+}
+
+.slider-badge {
+  background: var(--app-partner-accent);
+  color: var(--body-bg);
+}
+.slide {
+  min-height: 210px;
+  width: 60%;
+  max-width: 60%;
+  margin: 0 10px;
+  position: relative;
+  border: 1px solid var(--tabbed-border);
+  border-radius: var(--border-radius);
+  left: 7%;
+  cursor: pointer;
+
+  &:last-child {
+    left: -93%;
+  }
+
+  .slide-header {
+    background: var(--default);
+    width: 100%;
+    padding: 10px 15px;
+  }
+  .slide-content {
+    display: flex;
+    padding: 30px;
+
+    .slide-img {
+      width: 150px;
+      background: var(--card-badge-text);
+      border-radius: calc(2 * var(--border-radius));
+
+      img {
+        width: 100%;
+      }
+    }
+
+    .slide-content-right {
+      border-left: 1px solid var(--tabbed-border);
+      margin-left: 30px;
+      padding-left: 30px;
+
+      span {
+        margin: 0;
+      }
+    }
+
+  }
+}
+
+.slider::before,
+.slider::after {
+  background: linear-gradient(to right, var(--slider-light-bg) 0%, var(--slider-light-bg-right) 100%);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 15%;
+  z-index: z-index('overContent');
+}
+
+.slider::before {
+  left: 0;
+  top: 0;
+}
+.slider::after{
+  right: -1px;
+  top: 0;
+  transform: rotate(180deg);
+}
+
+.controls {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+
+  .control-item {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--scrollbar-thumb);
+    margin: 5px;
+    cursor: pointer;
+
+    &.active {
+      background:var(--body-text);
+    }
+  }
+}
+.prev,
+.next {
+  position: absolute;
+  z-index: 20;
+  top: 90px;
+  display: none;
+  cursor: pointer;
+
+  &.disabled .icon {
+    color: var(--disabled-bg);
+    cursor: not-allowed;
+  }
+}
+
+.next {
+  right: 0;
+}
+
+</style>

package/components/CommunityLinks.vue

@@ -1,12 +1,15 @@
 <script>
-import { options } from '@shell/config/footer';
 import SimpleBox from '@shell/components/SimpleBox';
 import Closeable from '@shell/mixins/closeable';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { mapGetters } from 'vuex';
+import { isRancherPrime } from '@shell/config/version';
+import { fetchLinks } from '@shell/config/home-links';
 
 export default {
+  name: 'CommunityLinks',
+
   components: { SimpleBox },
 
   props: {
@@ -16,41 +19,63 @@ export default {
         return {};
       },
     },
+    isSupportPage: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   mixins: [Closeable],
 
   async fetch() {
-    this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
-    this.communitySetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.COMMUNITY_LINKS });
+    this.links = await fetchLinks(this.$store, this.hasSupport, this.isSupportPage, str => this.t(str));
   },
 
   data() {
-    return { uiIssuesSetting: null, communitySetting: null };
+    return { links: {} };
   },
 
   computed: {
-
     ...mapGetters('i18n', [
       'selectedLocaleLabel'
     ]),
 
+    hasOptions() {
+      return !!Object.keys(this.options).length || !!Object.keys(this.$slots).length;
+    },
+
+    hasSupport() {
+      return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
+    },
+
     options() {
-      if (Object.keys(this.linkOptions).length > 0) {
-        return this.linkOptions;
+      // Use linkOptions if provided - used by Harvester
+      if (this.linkOptions && Object.keys(this.linkOptions).length) {
+        const options = [];
+
+        Object.keys(this.linkOptions).forEach((key) => {
+          options.push({
+            key,
+            label: this.t(key),
+            value: this.linkOptions[key]
+          });
+        });
+
+        return options;
       }
 
-      if (this.communitySetting?.value === 'false') {
-        return options(this.uiIssuesSetting?.value, true);
-      }
+      // Combine the links
+      const all = [];
 
-      return options(this.uiIssuesSetting?.value);
-    },
+      if (this.links.custom) {
+        all.push(...this.links.custom);
+      }
 
-    title() {
-      const hasCustomizedFileIssueLink = this.uiIssuesSetting?.value;
+      if (this.links.defaults) {
+        all.push(...this.links.defaults.filter(link => link.enabled));
+      }
 
-      return hasCustomizedFileIssueLink ? 'landing.support' : 'landing.community.title';
+      return all;
     }
   },
   methods: {
@@ -65,12 +90,20 @@ export default {
 </script>
 
 <template>
-  <div>
-    <SimpleBox :title="t(title)" :pref="pref" :pref-key="prefKey">
-      <div v-for="(value, name) in options" :key="name" class="support-link">
-        <a v-t="name" :href="value" target="_blank" rel="noopener noreferrer nofollow" />
+  <div v-if="hasOptions">
+    <SimpleBox :pref="pref" :pref-key="prefKey">
+      <template #title>
+        <h2>
+          {{ t('customLinks.displayTitle') }}
+        </h2>
+      </template>
+      <div v-for="link in options" :key="link.label" class="support-link">
+        <n-link v-if="link.value.startsWith('/') " :to="link.value">
+          {{ link.label }}
+        </n-link>
+        <a v-else :href="link.value" rel="noopener noreferrer nofollow" target="_blank"> {{ link.label }} </a>
       </div>
-
+      <slot />
       <div v-if="selectedLocaleLabel === t('locale.zh-hans')" class="support-link">
         <a class="link" @click="show">
           {{ t('footer.wechat.title') }}
@@ -97,8 +130,17 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-  .support-link:not(:first-child) {
-    margin-top: 15px;
+  h2 {
+    display: flex;
+    align-items: center;
+
+    i {
+      font-size: 12px;
+      margin-left: 5px;
+    }
+  }
+  .support-link:not(:last-child) {
+    margin-bottom: 15px;
   }
 
   .wechat-modal {

package/components/CruResource.vue

@@ -2,7 +2,7 @@
 import isEmpty from 'lodash/isEmpty';
 import { createYaml } from '@shell/utils/create-yaml';
 import { clone, get } from '@shell/utils/object';
-import { SCHEMA } from '@shell/config/types';
+import { SCHEMA, NAMESPACE } from '@shell/config/types';
 import ResourceYaml from '@shell/components/ResourceYaml';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
@@ -329,10 +329,18 @@ export default {
 
     async createNamespaceIfNeeded() {
       const inStore = this.$store.getters['currentStore'](this.resource);
+      const newNamespaceName = get(this.resource, this.namespaceKey);
+      let namespaceAlreadyExists = false;
 
-      if (this.createNamespace) {
+      try {
+        // This is in a try-catch block because the call to fetch
+        // a namespace throws an error if the namespace is not found.
+        namespaceAlreadyExists = !!(await this.$store.dispatch(`${ inStore }/find`, { type: NAMESPACE, id: newNamespaceName }));
+      } catch {}
+
+      if (this.createNamespace && !namespaceAlreadyExists) {
         try {
-          const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: get(this.resource, this.namespaceKey) }, { root: true });
+          const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: newNamespaceName }, { root: true });
 
           newNamespace.applyDefaults();
           await newNamespace.save();

package/components/Dialog.vue

@@ -0,0 +1,102 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  components: { AsyncButton },
+
+  props: {
+    name: {
+      type:     String,
+      required: true,
+    },
+
+    title: {
+      type:     String,
+      required: true,
+    },
+
+    mode: {
+      type:    String,
+      default: '',
+    }
+  },
+
+  data() {
+    return { closed: false };
+  },
+
+  methods: {
+    beforeOpen() {
+      this.closed = false;
+    },
+
+    ok(btnCb) {
+      const callback = (ok) => {
+        btnCb(ok);
+        if (ok) {
+          this.closeDialog(true);
+        }
+      };
+
+      this.$emit('okay', callback);
+    },
+
+    closeDialog(result) {
+      if (!this.closed) {
+        this.$modal.hide(this.name);
+        this.$emit('closed', result);
+        this.closed = true;
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <modal
+    :name="name"
+    height="auto"
+    :scrollable="true"
+    @closed="closeDialog(false)"
+    @before-open="beforeOpen"
+  >
+    <div class="modal-dialog">
+      <h4>
+        {{ title }}
+      </h4>
+      <slot></slot>
+      <div class="dialog-buttons mt-20">
+        <slot name="buttons"></slot>
+        <div v-if="!$slots.buttons">
+          <button class="btn role-secondary" @click="closeDialog(false)">
+            {{ t('generic.cancel') }}
+          </button>
+          <button v-if="!mode" class="btn role-primary ml-10" @click="closeDialog(true)">
+            {{ t('generic.ok') }}
+          </button>
+          <AsyncButton v-else :mode="mode" class="ml-10" @click="ok" />
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<style lang="scss" scoped>
+  .modal-dialog {
+    padding: 10px;
+
+    h4 {
+      font-weight: bold;
+    }
+
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>

package/components/ExplorerMembers.vue

@@ -1,7 +1,6 @@
 <script>
 import { MANAGEMENT, NORMAN, VIRTUAL_TYPES } from '@shell/config/types';
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { AGE, ROLE, STATE, PRINCIPAL } from '@shell/config/table-headers';
 import { canViewClusterPermissionsEditor } from '@shell/components/form/Members/ClusterPermissionsEditor.vue';
@@ -17,7 +16,6 @@ export default {
 
   components: {
     Banner,
-    Loading,
     Masthead,
     ResourceTable
   },
@@ -96,8 +94,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending || !currentCluster" />
-  <div v-else>
+  <div>
     <Masthead
       :schema="schema"
       :resource="resource"
@@ -116,6 +113,7 @@ export default {
       :rows="filteredClusterRoleTemplateBindings"
       :groupable="false"
       :namespaced="false"
+      :loading="$fetchState.pending || !currentCluster"
       sub-search="subSearch"
       :sub-fields="['nameDisplay']"
     />