@rancher/shell 0.1.0 → 0.1.1

package/chart/example.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/chart/istio.vue

@@ -1,12 +1,12 @@
 <script>
 import debounce from 'lodash/debounce';
 import jsyaml from 'js-yaml';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import YamlEditor from '@shell/components/YamlEditor';
 import { mapGetters } from 'vuex';
 import FileSelector from '@shell/components/form/FileSelector';
 import Tab from '@shell/components/Tabbed/Tab';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 
 const defaultOverlayFile = `#apiVersion: install.istio.io/v1alpha1
 #kind: IstioOperator

package/chart/logging/index.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Checkbox from '@shell/components/form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
   components: { Checkbox, LabeledInput },

package/chart/monitoring/alerting/index.vue

@@ -1,9 +1,9 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
 
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 
 const DEFAULT_MONITORING_NAMESPACE = 'cattle-monitoring-system';
 

package/chart/monitoring/grafana/index.vue

@@ -1,6 +1,6 @@
 <script>
-import RadioGroup from '@shell/components/form/RadioGroup';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import KeyValue from '@shell/components/form/KeyValue';
 import ArrayList from '@shell/components/form/ArrayList';

package/chart/monitoring/index.vue

@@ -5,10 +5,10 @@ import merge from 'lodash/merge';
 import { mapGetters } from 'vuex';
 
 import Alerting from '@shell/chart/monitoring/alerting';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import ClusterSelector from '@shell/chart/monitoring/ClusterSelector';
 import Grafana from '@shell/chart/monitoring/grafana';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import Loading from '@shell/components/Loading';
 import Prometheus from '@shell/chart/monitoring/prometheus';
 import Tab from '@shell/components/Tabbed/Tab';

package/chart/monitoring/prometheus/index.vue

@@ -2,13 +2,13 @@
 import isEmpty from 'lodash/isEmpty';
 import { mapGetters } from 'vuex';
 
-import Banner from '@shell/components/Banner';
-import Checkbox from '@shell/components/form/Checkbox';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
 import StorageClassSelector from '@shell/chart/monitoring/StorageClassSelector';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 
 import { set } from '@shell/utils/object';
 import { simplify, convert } from '@shell/utils/selector';

package/chart/rancher-alerting-drivers.vue

@@ -1,6 +1,6 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
-import Banner from '@shell/components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
+import { Banner } from '@components/Banner';
 
 export default {
   components: { Banner, Checkbox },
@@ -11,12 +11,26 @@ export default {
         return {};
       }
     }
+  },
+  computed: {
+    mustSelectOne() {
+      if (!this.value.prom2teams.enabled && !this.value.sachet.enabled) {
+        return 'error';
+      }
+
+      return 'info';
+    }
+  },
+  mounted() {
+    if (this.mustSelectOne === 'error') {
+      this.value.sachet.enabled = true;
+    }
   }
 };
 </script>
 <template>
   <div>
-    <Banner color="info">
+    <Banner :color="mustSelectOne">
       {{ t('rancherAlertingDrivers.selectOne') }}
     </Banner>
     <div class="row">

package/chart/rancher-backup/S3.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Checkbox from '@shell/components/form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
 import FileSelector from '@shell/components/form/FileSelector';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { mapGetters } from 'vuex';
@@ -48,6 +48,19 @@ export default {
     ...mapGetters({ t: 'i18n/t' })
   },
 
+  methods: {
+    setCA(ca) {
+      try {
+        const encoded = btoa(ca);
+
+        this.$set(this.value, 'endpointCA', encoded);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(e);
+      }
+    }
+  },
+
   created() {
     const { credentialSecretName, credentialSecretNamespace } = this.value;
 
@@ -89,9 +102,29 @@ export default {
         <Checkbox v-model="value.insecureTLSSkipVerify" class="mt-10" :mode="mode" :label="t('backupRestoreOperator.s3.insecureTLSSkipVerify')" />
       </div>
       <div class="col span-6">
-        <LabeledInput v-model="value.endpointCA" :mode="mode" type="multiline" :label="t('backupRestoreOperator.s3.endpointCA')" />
-        <FileSelector v-if="mode!=='view'" class="btn btn-sm role-primary mt-5" :mode="mode" :label="t('generic.readFromFile')" @selected="e=>$set(value, 'endpointCA', e)" />
+        <LabeledInput v-model="value.endpointCA" :mode="mode" type="multiline" :label="t('backupRestoreOperator.s3.endpointCA.label')" />
+        <div class="ca-controls">
+          <FileSelector v-if="mode!=='view'" class="btn btn-sm role-primary mt-5" :mode="mode" :label="t('generic.readFromFile')" @selected="e=> setCA(e)" />
+          <div class="ca-tooltip">
+            <i v-tooltip="t('backupRestoreOperator.s3.endpointCA.prompt')" class="icon icon-info" />
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
+<style lang="scss" scoped>
+  .ca-controls {
+    display: flex;
+
+    .ca-tooltip {
+      flex: 1;
+      margin-top: 4px;
+      text-align: right;
+
+      > i {
+        font-size: 16px;
+      };
+    }
+  }
+</style>

package/chart/rancher-backup/index.vue

@@ -1,10 +1,10 @@
 <script>
 import Tab from '@shell/components/Tabbed/Tab';
 import S3 from '@shell/chart/rancher-backup/S3';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Banner from '@shell/components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, SECRET, PV } from '@shell/config/types';

package/cloud-credential/aws.vue

@@ -1,7 +1,7 @@
 <script>
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {

package/cloud-credential/azure.vue

@@ -1,6 +1,6 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { azureEnvironments } from '@shell/machine-config/azure';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 

package/cloud-credential/digitalocean.vue

@@ -1,6 +1,6 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/cloud-credential/gcp.vue

@@ -1,6 +1,6 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector from '@shell/components/form/FileSelector';
 
 export default {

package/cloud-credential/generic.vue

@@ -1,7 +1,7 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import KeyValue from '@shell/components/form/KeyValue';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { simplify, iffyFields, likelyFields } from '@shell/store/plugins';
 
 export default {

package/cloud-credential/harvester.vue

@@ -1,8 +1,8 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 
 import { get, set } from '@shell/utils/object';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';

package/cloud-credential/linode.vue

@@ -1,6 +1,6 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/cloud-credential/s3.vue

@@ -1,8 +1,8 @@
 <script>
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
-import Checkbox from '@shell/components/form/Checkbox';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {

package/cloud-credential/vmwarevsphere.vue

@@ -1,6 +1,6 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { NORMAN } from '@shell/config/types';
 
 export default {

package/components/ActionMenu.vue

@@ -63,6 +63,15 @@ export default {
       type:    PointerEvent,
       default: null
     },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'action-menu'
+    }
   },
 
   data() {
@@ -224,10 +233,11 @@ export default {
     <div class="background" @click="hide" @contextmenu.prevent></div>
     <ul class="list-unstyled menu" :style="style">
       <li
-        v-for="opt in menuOptions"
+        v-for="(opt, i) in menuOptions"
         :key="opt.action"
         :disabled="opt.disabled"
         :class="{divider: opt.divider}"
+        :data-testid="componentTestid + '-' + i + '-item'"
         @click="execute(opt, $event)"
       >
         <i v-if="opt.icon" :class="{icon: true, [opt.icon]: true}" />

package/components/Alert.vue

@@ -1,5 +1,5 @@
 <script>
-import BadgeState from '@shell/components/BadgeState';
+import { BadgeState } from '@components/BadgeState';
 
 const STATUS_CLASS_MAP = {
   success: {

package/components/AssignTo.vue

@@ -4,8 +4,8 @@ import { FLEET, NORMAN } from '@shell/config/types';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import KeyValue from '@shell/components/form/KeyValue';
 import AsyncButton from '@shell/components/AsyncButton';
-import Card from '@shell/components/Card';
-import Banner from '@shell/components/Banner';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { set } from '@shell/utils/object';
 

package/components/AsyncButton.vue

@@ -2,10 +2,12 @@
 import Vue from 'vue';
 import typeHelper from '@shell/utils/type-helpers';
 
-const ACTION = 'action';
-const WAITING = 'waiting';
-const SUCCESS = 'success';
-const ERROR = 'error';
+export const ASYNC_BUTTON_STATES = {
+  ACTION:  'action',
+  WAITING: 'waiting',
+  SUCCESS: 'success',
+  ERROR:   'error',
+};
 
 const TEXT = 'text';
 const TOOLTIP = 'tooltip';
@@ -88,11 +90,22 @@ export default Vue.extend({
     size: {
       type:    String,
       default: '',
+    },
+
+    currentPhase: {
+      type:    String,
+      default: ASYNC_BUTTON_STATES.ACTION,
     }
   },
 
   data(): { phase: string, timer?: NodeJS.Timeout} {
-    return { phase: ACTION };
+    return { phase: this.currentPhase };
+  },
+
+  watch: {
+    currentPhase(neu) {
+      this.phase = neu;
+    }
   },
 
   computed: {
@@ -158,11 +171,11 @@ export default Vue.extend({
     },
 
     isSpinning(): boolean {
-      return this.phase === WAITING;
+      return this.phase === ASYNC_BUTTON_STATES.WAITING;
     },
 
     isDisabled(): boolean {
-      return this.disabled || this.phase === WAITING;
+      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
     },
 
     tooltip(): { content: string, hideOnTargetClick: boolean} | null {
@@ -192,7 +205,7 @@ export default Vue.extend({
         clearTimeout(this.timer);
       }
 
-      this.phase = WAITING;
+      this.phase = ASYNC_BUTTON_STATES.WAITING;
 
       const cb: AsyncButtonCallback = (success) => {
         this.done(success);
@@ -203,9 +216,9 @@ export default Vue.extend({
 
     done(success: boolean | 'cancelled') {
       if (success === 'cancelled') {
-        this.phase = ACTION;
+        this.phase = ASYNC_BUTTON_STATES.ACTION;
       } else {
-        this.phase = (success ? SUCCESS : ERROR );
+        this.phase = (success ? ASYNC_BUTTON_STATES.SUCCESS : ASYNC_BUTTON_STATES.ERROR );
         this.timer = setTimeout(() => {
           this.timerDone();
         }, this.delay );
@@ -213,8 +226,8 @@ export default Vue.extend({
     },
 
     timerDone() {
-      if ( this.phase === SUCCESS || this.phase === ERROR ) {
-        this.phase = ACTION;
+      if ( this.phase === ASYNC_BUTTON_STATES.SUCCESS || this.phase === ASYNC_BUTTON_STATES.ERROR ) {
+        this.phase = ASYNC_BUTTON_STATES.ACTION;
       }
     },
 

package/components/AwsComplianceBanner.vue

@@ -0,0 +1,44 @@
+<script>
+// This component is used to show warnings when current usage exceeds support purchased through AWS Marketplace
+import { MANAGEMENT } from '@shell/config/types';
+
+export default {
+  async fetch() {
+    if ( this.$store.getters['management/schemaFor'](MANAGEMENT.USER_NOTIFICATION)) {
+      this.notifications = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.USER_NOTIFICATION });
+    }
+  },
+
+  data() {
+    return { notifications: [] };
+  },
+
+  computed: {
+    // The notification will always come from the csp-adapter component & there will be no more than one
+    // Backend will remove the notification when its no longer relevant
+    awsNotification() {
+      return this.notifications.find(notification => notification.componentName === 'csp-adapter');
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="awsNotification" class="aws-compliance">
+    {{ awsNotification.message }}
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.aws-compliance {
+    background-color: var(--error);
+    color: var(--error-text);
+    line-height: 2em;
+    width: 100%;
+        text-align: center;
+
+    >p{
+        text-align: center;
+    }
+}
+</style>

package/components/BannerGraphic.vue

@@ -29,10 +29,19 @@ export default {
     <div class="graphic">
       <BrandImage class="banner" file-name="banner.svg" :draggable="false" />
     </div>
-    <div v-if="titleKey" class="title">
+    <div
+      v-if="titleKey"
+      data-testid="banner-title-key"
+      class="title"
+    >
       <t :k="titleKey" />
     </div>
-    <h1 v-else-if="title" class="title" v-html="title"></h1>
+    <h1
+      v-else-if="title"
+      data-testid="banner-title"
+      class="title"
+      v-html="title"
+    ></h1>
     <div v-if="pref" class="close-button" @click="hide()">
       <i class="icon icon-close" />
     </div>

package/components/ChartReadme.vue

@@ -49,6 +49,7 @@ export default {
   .md {
     overflow: auto;
     max-width: 100%;
+    line-height: 1.6;
 
     ::v-deep {
       * + H1,
@@ -62,9 +63,12 @@ export default {
     }
 
     ::v-deep code {
-      padding: 0;
+      font-size: 13.5px;
       white-space: break-spaces;
-      word-break: break-word;
+      word-wrap: break-word;
+      padding-left: 5px;
+      padding-right: 5px;
+      border: 0;
     }
 
     ::v-deep pre {
@@ -75,6 +79,10 @@ export default {
     ::v-deep  > h1:first-of-type {
       display: none;
     }
+
+    ::v-deep p {
+      margin-bottom: 0.5em;
+    }
   }
 
 </style>

package/components/CompoundStatusBadge.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  name:  'CompoundStatusBadge',
+  props: {
+    tooltipText: {
+      type:    String,
+      default: ''
+    },
+    badgeClass: {
+      type:    String,
+      default: ''
+    },
+    icon: {
+      type:    String,
+      default: ''
+    },
+    value: {
+      type:    String,
+      default: ''
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-tooltip.bottom="tooltipText"
+    class="compound-cluster-badge"
+    :class="`bg-${badgeClass}`"
+  >
+    <i v-if="icon" :class="`icon-${icon}`" />
+    <span>{{ value }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.compound-cluster-badge {
+  padding: 4px 12px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  cursor: default;
+
+  i {
+    font-size: 16px;
+    margin-right: 6px;
+  }
+}
+</style>

package/components/CopyToClipboardText.vue

@@ -12,18 +12,34 @@ export default {
     }
   },
 
+  data() {
+    return { copied: false };
+  },
+
   methods: {
     clicked(event) {
-      event.preventDefault();
-      this.$copyText(this.text);
+      if (!this.copied) {
+        event.preventDefault();
+        this.$copyText(this.text);
+        this.copied = true;
+
+        let t = event.target;
+
+        if (t.tagName === 'I') {
+          t = t.parentElement || t;
+        }
+        setTimeout(() => {
+          this.copied = false;
+        }, 500);
+      }
     },
   }
 };
 </script>
 
 <template>
-  <a class="copy-to-clipboard-text" :class="{'plain': plain}" href="#" @click="clicked">
-    {{ text }} <i class="icon icon-copy" />
+  <a class="copy-to-clipboard-text" :class="{ 'copied': copied, 'plain': plain}" href="#" @click="clicked">
+    {{ text }} <i class="icon" :class="{ 'icon-copy': !copied, 'icon-checkmark': copied}" />
   </a>
 </template>
 <style lang="scss" scoped>
@@ -35,5 +51,10 @@ export default {
         text-decoration: none;
       }
     }
+
+    &.copied {
+      pointer-events: none;
+      color: var(--success);
+    }
   }
 </style>