@rancher/shell 0.1.3 → 0.1.4

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

@@ -7,6 +7,8 @@ import { SETTING } from '@shell/config/settings';
 import { mapGetters } from 'vuex';
 
 export default {
+  name: 'CommunityLinks',
+
   components: { SimpleBox },
 
   props: {
@@ -21,12 +23,27 @@ export default {
   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 });
+    // If user already have custom links and uiIssueSetting Doc URL set
+    // This should already be in the uiCustomLinks
+    try {
+      this.uiCustomLinks = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_CUSTOM_LINKS });
+    } catch (err) {
+
+    }
+
+    // Fallback:
+    // NB: this.uiIssueSetting is deprecated now.
+    if (!this.uiCustomLinks) {
+      try {
+        this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
+      } catch (err) {
+
+      }
+    }
   },
 
   data() {
-    return { uiIssuesSetting: null, communitySetting: null };
+    return { uiCustomLinks: null, uiIssuesSetting: null };
   },
 
   computed: {
@@ -35,25 +52,42 @@ export default {
       'selectedLocaleLabel'
     ]),
 
+    hasOptions() {
+      return !!Object.keys(this.options).length || !!Object.keys(this.$slots).length;
+    },
+
     options() {
+      // Link options are provided
       if (Object.keys(this.linkOptions).length > 0) {
         return this.linkOptions;
       }
 
-      if (this.communitySetting?.value === 'false') {
-        return options(this.uiIssuesSetting?.value, true);
+      // Custom links set from settings
+      if (!!this.uiCustomLinks?.value) {
+        try {
+          const customLinks = JSON.parse(this.uiCustomLinks.value);
+
+          if (Array.isArray(customLinks)) {
+            return customLinks.reduce((prev, curr) => {
+              prev[curr.key] = curr.value;
+
+              return prev;
+            }, {});
+          }
+        } catch (e) {
+          console.error('Could not parse custom links setting', e); // eslint-disable-line no-console
+        }
       }
 
-      return options(this.uiIssuesSetting?.value);
+      // Fallback
+      return options(false, this.uiIssuesSetting?.value);
     },
-
-    title() {
-      const hasCustomizedFileIssueLink = this.uiIssuesSetting?.value;
-
-      return hasCustomizedFileIssueLink ? 'landing.support' : 'landing.community.title';
-    }
   },
   methods: {
+    getLabel(label) {
+      return this.$store.getters['i18n/withFallback'](`customLinks.defaults.${ label }`, null, label);
+    },
+
     show() {
       this.$modal.show('wechat-modal');
     },
@@ -65,12 +99,20 @@ export default {
 </script>
 
 <template>
-  <div>
-    <SimpleBox :title="t(title)" :pref="pref" :pref-key="prefKey">
+  <div v-if="hasOptions">
+    <SimpleBox :pref="pref" :pref-key="prefKey">
+      <template #title>
+        <h2>
+          {{ t('customLinks.displayTitle') }}
+        </h2>
+      </template>
       <div v-for="(value, name) in options" :key="name" class="support-link">
-        <a v-t="name" :href="value" target="_blank" rel="noopener noreferrer nofollow" />
+        <n-link v-if="value.startsWith('/') " :to="value">
+          {{ getLabel(name) }}
+        </n-link>
+        <a v-else :href="value" rel="noopener noreferrer nofollow" target="_blank"> {{ getLabel(name) }} </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 +139,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']"
     />

package/components/ExplorerProjectsNamespaces.vue

@@ -4,10 +4,9 @@ import ResourceTable from '@shell/components/ResourceTable';
 import { STATE, AGE, NAME } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
 import { PROJECT_ID } from '@shell/config/query-params';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import { mapPref, GROUP_RESOURCES, DEV } from '@shell/store/prefs';
+import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
@@ -15,7 +14,7 @@ import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 export default {
   name:       'ListProjectNamespace',
   components: {
-    Loading, Masthead, MoveModal, ResourceTable
+    Masthead, MoveModal, ResourceTable
   },
 
   props: {
@@ -184,8 +183,8 @@ export default {
       return this.groupPreference === 'none' ? this.rows : this.rowsWithFakeNamespaces;
     },
     rows() {
-      if (this.$store.getters['prefs/get'](DEV)) {
-        // If developer tools are turned on in the user preferences,
+      if (this.$store.getters['prefs/get'](ALL_NAMESPACES)) {
+        // If all namespaces options are turned on in the user preferences,
         // return all namespaces including system namespaces and RBAC
         // management namespaces.
         return this.activeNamespaces;
@@ -302,8 +301,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending || !currentCluster" />
-  <div v-else class="project-namespaces">
+  <div class="project-namespaces">
     <Masthead
       :schema="projectSchema"
       :type-display="t('projectNamespaces.label')"
@@ -321,6 +319,7 @@ export default {
       :rows="filteredRows"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
+      :loading="$fetchState.pending || !currentCluster"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
       v-on="$listeners"

package/components/IconMessage.vue

@@ -21,12 +21,16 @@ export default {
       type:    String,
       default: null
     },
+    subtle: {
+      type:     Boolean,
+      default: false,
+    }
   },
 };
 </script>
 
 <template>
-  <div class="message-icon" :class="{'vertical': vertical}">
+  <div class="message-icon" :class="{'vertical': vertical, 'subtle': subtle}">
     <i class="icon" :class="{ [icon]: true, [iconState]: !!iconState}" />
     <div class="message">
       <slot name="message">
@@ -47,6 +51,10 @@ export default {
     width: 100%;
   }
 
+  .subtle {
+    opacity: 0.7;
+  }
+
   .message-icon {
     display: flex;
     align-items: center;