@rancher/shell 0.2.5 → 0.3.1

package/chart/istio.vue

@@ -60,7 +60,7 @@ export default {
 
   hasTabs: true,
 
-  props:   {
+  props: {
     value: {
       type:    Object,
       default: () => {

package/chart/monitoring/grafana/index.vue

@@ -129,7 +129,7 @@ export default {
           existingClaim: null,
           subPath:       null,
           type:          null,
-          enabled:          true,
+          enabled:       true,
         };
         break;
       case 'pvc':

package/chart/monitoring/index.vue

@@ -136,7 +136,7 @@ export default {
           rbac: {
             userRoles: {
               create:                  this.mergeValue(this.value?.global?.rbac?.userRoles?.create, true),
-              aggregateToDefaultRoles:  this.mergeValue(this.value?.global?.rbac?.userRoles?.aggregateToDefaultRoles, true),
+              aggregateToDefaultRoles: this.mergeValue(this.value?.global?.rbac?.userRoles?.aggregateToDefaultRoles, true),
             },
           },
         },

package/chart/monitoring/prometheus/index.vue

@@ -37,22 +37,22 @@ export default {
     },
 
     prometheusPods: {
-      type:     Array,
+      type:    Array,
       default: () => ([]),
     },
 
     storageClasses: {
-      type:     Array,
+      type:    Array,
       default: () => ([]),
     },
 
     value: {
-      type:     Object,
+      type:    Object,
       default: () => ({}),
     },
 
     workloads: {
-      type:     Array,
+      type:    Array,
       default: () => ([]),
     },
   },

package/chart/monitoring/steps/uninstall-v1.vue

@@ -40,8 +40,8 @@ export default {
   methods: {
     uninstall(buttonCb) {
       this.$store.dispatch('cluster/promptModal', {
-        component: 'GenericPrompt',
-        resources: {
+        component:      'GenericPrompt',
+        componentProps: {
           applyMode:   'uninstall',
           applyAction: async(buttonDone) => {
             await this.$store.getters['currentCluster'].doAction('disableMonitoring');

package/cloud-credential/azure.vue

@@ -4,6 +4,9 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { azureEnvironments } from '@shell/machine-config/azure';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
+const AZURE_ERROR_MSG_REGEX = /^.*Message=\"(.*)\"$/;
+const AZURE_ERROR_JSON_REGEX = /^.*Response body: ({.*})/;
+
 export default {
   components: { LabeledInput, LabeledSelect },
   mixins:     [CreateEditView],
@@ -53,6 +56,26 @@ export default {
 
         return true;
       } catch (e) {
+        if (e.error) {
+          // Try and parse the response from Azure a couple of ways
+          const msgMatch = e.error.match(AZURE_ERROR_MSG_REGEX);
+
+          if (msgMatch?.length === 2) {
+            return { errors: [msgMatch[1]] };
+          } else {
+            const jsonMatch = e.error.match(AZURE_ERROR_JSON_REGEX);
+
+            if (jsonMatch?.length === 2) {
+              try {
+                const errorObj = JSON.parse(jsonMatch[1]);
+
+                return { errors: [errorObj.error_description] };
+              } catch (e) {}
+            }
+          }
+        }
+
+        // Can't parse error, so go with the generic 'auth failed' error message
         return false;
       }
     },

package/cloud-credential/harvester.vue

@@ -1,19 +1,13 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { RadioGroup } from '@components/Form/Radio';
 
 import { get, set } from '@shell/utils/object';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 
-const IMPORTED = 'imported';
-
 export default {
-  components: {
-    LabeledInput, LabeledSelect, RadioGroup
-  },
-  mixins: [CreateEditView],
+  components: { LabeledSelect },
+  mixins:     [CreateEditView],
 
   async fetch() {
     this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
@@ -22,16 +16,11 @@ export default {
   data() {
     this.$emit('validationChanged', true);
 
-    if (!this.value.decodedData.clusterType) {
-      this.value.setData('clusterType', IMPORTED);
-    }
-
     const cluster = get(this.value, 'harvestercredentialConfig.clusterId') || '';
 
     return {
       clusters: [],
       cluster,
-      IMPORTED,
     };
   },
 
@@ -44,22 +33,9 @@ export default {
         };
       });
     },
-
-    isImportCluster() {
-      return this.value.decodedData.clusterType === IMPORTED;
-    }
   },
 
   watch: {
-    'value.decodedData.clusterType': {
-      handler(neu) {
-        if (this.isCreate) {
-          this.value.setData('kubeconfigContent', '');
-          this.cluster = '';
-        }
-      },
-    },
-
     async cluster(neu) {
       if (!neu) {
         return;
@@ -78,51 +54,51 @@ export default {
       this.$nuxt.$loading.finish();
 
       this.value.setData('kubeconfigContent', kubeconfigContent);
-    }
+    },
+
+    'value.decodedData.clusterId': {
+      handler() {
+        this.emitValidation();
+      },
+      immediate: true,
+    },
+    'value.decodedData.kubeconfigContent': {
+      handler() {
+        this.emitValidation();
+      },
+      immediate: true,
+    },
   },
 
   methods: {
     test() {
       const t = this.$store.getters['i18n/t'];
 
-      if (!this.cluster && this.isImportCluster) {
+      if (!this.cluster) {
         const cluster = t('cluster.credential.harvester.cluster');
         const errors = [t('validation.required', { key: cluster })];
 
         return { errors };
+      } else {
+        return true;
       }
+    },
 
-      if (!this.value.decodedData.kubeconfigContent) {
-        const kubeconfigContent = t('cluster.credential.harvester.kubeconfigContent.label');
-
-        const errors = [t('validation.required', { key: kubeconfigContent })];
-
-        return { errors };
+    emitValidation() {
+      if (this.test() === true) {
+        this.$emit('validationChanged', true);
       } else {
-        return true;
+        this.$emit('validationChanged', false);
       }
     },
-  }
+  },
 };
 </script>
 
 <template>
   <div>
-    <div class="row mb-10">
-      <RadioGroup
-        v-model="value.decodedData.clusterType"
-        :mode="mode"
-        :disabled="isEdit"
-        name="clusterType"
-        :labels="[t('cluster.credential.harvester.import'),t('cluster.credential.harvester.external')]"
-        :options="[IMPORTED, 'external']"
-        @input="value.setData('clusterType', $event);"
-      />
-    </div>
-
     <div class="row mb-10">
       <div
-        v-if="isImportCluster"
         class="col span-6"
       >
         <LabeledSelect
@@ -134,19 +110,6 @@ export default {
           :label="t('cluster.credential.harvester.cluster')"
         />
       </div>
-
-      <div class="col span-6">
-        <LabeledInput
-          v-if="!isImportCluster"
-          :value="value.decodedData.kubeconfigContent"
-          label-key="cluster.credential.harvester.kubeconfigContent.label"
-          :required="true"
-          type="multiline"
-          :min-height="160"
-          :mode="mode"
-          @input="value.setData('kubeconfigContent', $event);"
-        />
-      </div>
     </div>
   </div>
 </template>

package/cloud-credential/pnap.vue

@@ -0,0 +1,80 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { base64Encode } from '@shell/utils/crypto';
+
+export default {
+  components: { LabeledInput },
+  mixins:     [CreateEditView],
+
+  watch: {
+    'value.decodedData.clientIdentifier'(neu) {
+      this.$emit('validationChanged', !!neu);
+    },
+    'value.decodedData.clientSecret'(neu) {
+      this.$emit('validationChanged', !!neu);
+    }
+  },
+
+  methods: {
+    async test() {
+      try {
+        const credentials = `${ this.value.decodedData.clientIdentifier }:${ this.value.decodedData.clientSecret }`;
+        const encoded = base64Encode(credentials);
+
+        const requestOptions = {
+          url:                  'meta/proxy/auth.phoenixnap.com/auth/realms/BMC/protocol/openid-connect/token/',
+          method:               'POST',
+          headers:              { 'Content-Type': 'application/x-www-form-urlencoded', 'X-API-Auth-Header': `Basic ${ encoded }` },
+          data:                 'grant_type=client_credentials',
+          redirectUnauthorized: false,
+        };
+
+        const response = await this.$store.dispatch('management/request', requestOptions);
+        const data = await response;
+
+        if (data.access_token !== undefined && data.access_token !== null && data.access_token !== '') {
+          return true;
+        }
+
+        return false;
+      } catch (e) {
+        return false;
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mt-20">
+      <div class="col span-6">
+        <LabeledInput
+          :value="value.decodedData.clientIdentifier"
+          label-key="cluster.credential.pnap.clientIdentifier.label"
+          placeholder-key="cluster.credential.pnap.clientIdentifier.placeholder"
+          type="text"
+          :mode="mode"
+          @input="value.setData('clientIdentifier', $event);"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          :value="value.decodedData.clientSecret"
+          label-key="cluster.credential.pnap.clientSecret.label"
+          placeholder-key="cluster.credential.pnap.clientSecret.placeholder"
+          type="text"
+          :mode="mode"
+          @input="value.setData('clientSecret', $event);"
+        />
+      </div>
+    </div>
+    <div class="row mt-5">
+      <p
+        class="text-muted mt-10"
+        v-html="t('cluster.credential.pnap.clientSecret.help', {}, true)"
+      />
+    </div>
+  </div>
+</template>

package/components/AdvancedSection.vue

@@ -5,10 +5,17 @@ export default {
       type:     String,
       required: true,
     },
+    isOpenByDefault: {
+      // It may be useful to keep the advanced options open
+      // if the form is in edit mode and it has non-default
+      // advanced options configured.
+      type:    Boolean,
+      default: false
+    }
   },
 
-  data() {
-    return { show: false };
+  data(props) {
+    return { show: props.isOpenByDefault };
   },
 
   methods: {

package/components/Alert.vue

@@ -8,11 +8,11 @@ const STATUS_CLASS_MAP = {
   },
   warning: {
     color: 'bg-warning',
-    icon:  'icon-error'
+    icon:  'icon-warning'
   },
   info: {
     color: 'bg-info',
-    icon:  'icon-error'
+    icon:  'icon-info'
   },
   error: {
     color: 'bg-error',

package/components/AlertTable.vue

@@ -10,7 +10,7 @@ const MAX_FAILURES = 2;
 export default {
   components: { SortableTable },
 
-  props:      {
+  props: {
     monitoringNamespace: {
       type:    String,
       default: 'cattle-monitoring-system'

package/components/AssignTo.vue

@@ -28,7 +28,7 @@ export default {
     };
   },
 
-  computed:   {
+  computed: {
     ...mapState('action-menu', ['showAssignTo', 'toAssign']),
     ...mapGetters({ t: 'i18n/t' }),
     ...mapGetters(['workspace']),

package/components/AsyncButton.vue

@@ -129,8 +129,8 @@ export default Vue.extend({
       const color = typeHelper.memberOfComponent(this, key);
 
       const out = {
-        btn:      true,
-        [color]:  true,
+        btn:     true,
+        [color]: true,
       };
 
       if (this.size) {

package/components/BrandImage.vue

@@ -4,7 +4,7 @@ import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 
 export default {
-  props:      {
+  props: {
     fileName: {
       type:     String,
       required: true

package/components/ButtonDropdown.vue

@@ -277,12 +277,10 @@ export default {
     background: transparent;
 
     .vs__actions {
-      justify-content: center;
 
       &:after {
         color: var(--link);
         line-height: 1;
-        padding-top: 5px;
       }
     }
   }

package/components/ButtonGroup.vue

@@ -27,7 +27,7 @@ export default {
     },
 
     disabled: {
-      type:     Boolean,
+      type:    Boolean,
       default: false,
     }
 
@@ -76,6 +76,7 @@ export default {
       v-for="(opt,idx) in optionObjects"
       :key="idx"
       v-tooltip="opt.tooltipKey ? t(opt.tooltipKey) : opt.tooltip"
+      :data-testid="`button-group-child-${idx}`"
       type="button"
       :class="opt.class"
       :disabled="disabled || opt.disabled"

package/components/ClusterProviderIcon.vue

@@ -6,8 +6,8 @@ export default {
       required: true,
     },
     small: {
-      type:     Boolean,
-      default:  false,
+      type:    Boolean,
+      default: false,
     }
   },
 

package/components/Collapse.vue

@@ -8,8 +8,8 @@ export default {
     },
 
     title: {
-      type:     String,
-      default:  ''
+      type:    String,
+      default: ''
     }
   },
 
@@ -26,15 +26,18 @@ export default {
     <slot name="title">
       <div
         class="advanced text-link"
+        data-testid="collapse-div"
         @click="showAdvanced"
       >
         <i
           v-if="open"
           class="icon icon-chevron-down"
+          data-testid="collapse-icon-down"
         />
         <i
           v-else
           class="icon icon-chevron-right"
+          data-testid="collapse-icon-right"
         />
         {{ title }}
       </div>
@@ -43,6 +46,7 @@ export default {
     <div
       v-if="open"
       class="content"
+      data-testid="collapse-content"
     >
       <slot />
     </div>

package/components/CollapsibleCard.vue

@@ -1,7 +1,7 @@
 <script>
 export default {
-  name:       'CollapsibleCard',
-  props:      {
+  name:  'CollapsibleCard',
+  props: {
     isCollapsed: {
       type:    Boolean,
       default: false
@@ -105,7 +105,6 @@ export default {
   }
 
   &-collapse-icon {
-    font-size: 24px;
     color: #B7B8BB;
   }
 

package/components/ConsumptionGauge.vue

@@ -12,7 +12,7 @@ export default {
      * The name of the resource to be displayed.
      */
     resourceName: {
-      type:     String,
+      type:    String,
       default: ''
     },
     /**
@@ -32,9 +32,9 @@ export default {
     /**
      * The units that should be displayed when referencing amounts of the resource.
      */
-    units:           {
-      type:     String,
-      default:  ''
+    units: {
+      type:    String,
+      default: ''
     },
     /**
      * A method which can be used to format the *capacity* and *used* numbers for display.

package/components/ContainerResourceLimit.vue

@@ -8,7 +8,7 @@ import { _VIEW } from '@shell/config/query-params';
 export default {
   components: { UnitInput },
 
-  props:      {
+  props: {
     mode: {
       type:    String,
       default: 'create'

package/components/CountBox.vue

@@ -3,7 +3,7 @@
 export default {
   name: 'CountBox',
 
-  props:      {
+  props: {
     name: {
       type:     String,
       required: true

package/components/CountGauge.vue

@@ -18,7 +18,7 @@ export default {
       required: true
     },
     primaryColorVar: {
-      type:     String,
+      type:    String,
       default: null,
     },
     warningCount: {

package/components/CruResource.vue

@@ -75,6 +75,14 @@ export default {
       default: () => []
     },
 
+    /**
+     * Set of maps to convert error messages to something more user friendly and apply icons
+     */
+    errorsMap: {
+      type:    Object,
+      default: null
+    },
+
     // Is the edit as yaml button allowed
     canYaml: {
       type:    Boolean,
@@ -98,7 +106,7 @@ export default {
       default: null,
     },
     steps: {
-      type:     Array,
+      type:    Array,
       default: () => []
     },
 
@@ -128,6 +136,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'form'
+    },
+
+    description: {
+      type:    String,
+      default: ''
     }
   },
 
@@ -152,7 +165,7 @@ export default {
         4: '18px',
         5: '16px',
         6: '14px'
-      }
+      },
     };
   },
 
@@ -225,6 +238,19 @@ export default {
     hasErrors() {
       return this.errors?.length && Array.isArray(this.errors);
     },
+
+    /**
+     * Replace returned string with new picked value and icon
+     */
+    mappedErrors() {
+      return !this.errors ? {} : this.errorsMap || this.errors.reduce((acc, error) => ({
+        ...acc,
+        [error]: {
+          message: error,
+          icon:    null
+        }
+      }), {});
+    },
   },
 
   created() {
@@ -358,10 +384,17 @@ export default {
 <template>
   <section class="cru">
     <slot name="noticeBanner" />
+    <p
+      v-if="description"
+      class="description"
+    >
+      {{ description }}
+    </p>
     <form
       :is="(isView? 'div' : 'form')"
       class="create-resource-container cru__form"
       @submit.prevent
+      @keydown.enter.prevent
     >
       <div
         v-if="hasErrors"
@@ -372,8 +405,8 @@ export default {
           v-for="(err, i) in errors"
           :key="i"
           color="error"
-          :label="stringify(err)"
-          :stacked="true"
+          :label="stringify(mappedErrors[err].message)"
+          :icon="mappedErrors[err].icon"
           :closable="true"
           @close="closeError(i)"
         />
@@ -618,7 +651,7 @@ export default {
       </template>
       <!------ YAML ------>
       <section
-        v-else
+        v-else-if="showYaml"
         class="cru-resource-yaml-container resource-container cru__content"
       >
         <ResourceYaml
@@ -804,4 +837,9 @@ form.create-resource-container .cru {
   }
 }
 
+.description {
+  margin-bottom: 15px;
+  margin-top: 5px;
+}
+
 </style>