@rancher/shell 0.3.0 → 0.3.1

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/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

@@ -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/CollapsibleCard.vue

@@ -105,7 +105,6 @@ export default {
   }
 
   &-collapse-icon {
-    font-size: 24px;
     color: #B7B8BB;
   }
 

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,
@@ -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,6 +384,12 @@ 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"
@@ -373,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)"
         />
@@ -619,7 +651,7 @@ export default {
       </template>
       <!------ YAML ------>
       <section
-        v-else
+        v-else-if="showYaml"
         class="cru-resource-yaml-container resource-container cru__content"
       >
         <ResourceYaml
@@ -805,4 +837,9 @@ form.create-resource-container .cru {
   }
 }
 
+.description {
+  margin-bottom: 15px;
+  margin-top: 5px;
+}
+
 </style>

package/components/DetailTop.vue

@@ -22,6 +22,28 @@ export default {
       default: () => {
         return [];
       }
+    },
+
+    /**
+     * Optionally replace key/value and display tooltips for the tab
+     * Dictionary key based
+     */
+    tooltips: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    /**
+     * Optionally display icons next to the tab
+     * Dictionary key based
+     */
+    icons: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
     }
   },
 
@@ -68,13 +90,21 @@ export default {
     },
 
     labels() {
-      if (this.showAllLabels || !this.showFilteredSystemLabels) {
+      if (!this.showFilteredSystemLabels) {
         return this.value?.labels || {};
       }
 
       return this.value?.filteredSystemLabels;
     },
 
+    internalTooltips() {
+      return this.value?.detailTopTooltips || this.tooltips;
+    },
+
+    internalIcons() {
+      return this.value?.detailTopIcons || this.icons;
+    },
+
     annotations() {
       return this.value?.annotations || {};
     },
@@ -114,7 +144,16 @@ export default {
     },
 
     showFilteredSystemLabels() {
-      return !!this.value.filteredSystemLabels;
+      // It would be nicer to use hasSystemLabels here, but not all places have implemented it
+      // Instead check that there's a discrepancy between all labels and all labels without system ones
+      if (this.value?.labels && this.value?.filteredSystemLabels) {
+        const labelCount = Object.keys(this.value.labels).length;
+        const filteredSystemLabelsCount = Object.keys(this.value.filteredSystemLabels).length;
+
+        return labelCount !== filteredSystemLabelsCount;
+      }
+
+      return false;
     },
   },
   methods: {
@@ -200,7 +239,19 @@ export default {
           v-for="(prop, key) in labels"
           :key="key + prop"
         >
-          {{ key }}<span v-if="prop">: </span>{{ prop }}
+          <i
+            v-if="internalIcons[key]"
+            class="icon"
+            :class="internalIcons[key]"
+          />
+          <span
+            v-if="internalTooltips[key]"
+            v-tooltip="prop ? `${key} : ${prop}` : key"
+          >
+            <span>{{ internalTooltips[key] ? internalTooltips[key] : key }}</span>
+            <span v-if="showAllLabels">: {{ key }}</span>
+          </span>
+          <span v-else>{{ prop ? `${key} : ${prop}` : key }}</span>
         </Tag>
         <a
           v-if="showFilteredSystemLabels"
@@ -304,5 +355,9 @@ export default {
         margin-bottom: $spacing;
       }
     }
+
+    .icon {
+      vertical-align: top;
+    }
   }
 </style>

package/components/DisableAuthProviderModal.vue

@@ -0,0 +1,106 @@
+<script>
+import { Card } from '@components/Card';
+export default {
+  name:       'PromptRemove',
+  components: { Card },
+  props:      {
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'disable-auth-provider'
+    }
+  },
+  methods: {
+    show() {
+      this.$modal.show('disableAuthProviderModal');
+    },
+    close() {
+      this.$modal.hide('disableAuthProviderModal');
+    },
+    disable() {
+      this.$modal.hide('disableAuthProviderModal');
+      this.$emit('disable');
+    },
+  }
+};
+</script>
+
+<template>
+  <modal
+    class="remove-modal"
+    name="disableAuthProviderModal"
+    :width="400"
+    height="auto"
+    styles="max-height: 100vh;"
+    @closed="close"
+  >
+    <Card
+      class="disable-auth-provider"
+      :show-highlight-border="false"
+    >
+      <h4
+        slot="title"
+        class="text-default-text"
+      >
+        {{ t('promptRemove.title') }}
+      </h4>
+      <div slot="body">
+        <div class="mb-10">
+          <p v-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
+        </div>
+      </div>
+      <template #actions>
+        <button
+          class="btn role-secondary"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <div class="spacer" />
+        <button
+          class="btn role-primary bg-error ml-10"
+          :data-testid="componentTestid + '-confirm-button'"
+          @click="disable"
+        >
+          {{ t('generic.disable') }}
+        </button>
+      </template>
+    </Card>
+  </modal>
+</template>
+
+<style lang='scss'>
+  .disable-auth-provider {
+    &.card-container {
+      box-shadow: none;
+    }
+    #confirm {
+      width: 90%;
+      margin-left: 3px;
+    }
+
+    .remove-modal {
+        border-radius: var(--border-radius);
+        overflow: scroll;
+        max-height: 100vh;
+        & ::-webkit-scrollbar-corner {
+          background: rgba(0,0,0,0);
+        }
+    }
+
+    .actions {
+      text-align: right;
+    }
+
+    .card-actions {
+      display: flex;
+
+      .spacer {
+        flex: 1;
+      }
+    }
+  }
+</style>