@rancher/shell 0.3.17 → 0.3.18

package/edit/ui.cattle.io.navlink.vue

@@ -7,11 +7,10 @@ import CruResource from '@shell/components/CruResource';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import FileImageSelector from '@shell/components/form/FileImageSelector';
-import NameNsDescription from '@shell/components/form/NameNsDescription';
-import Tab from '@shell/components/Tabbed/Tab';
-import Tabbed from '@shell/components/Tabbed';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
-import { normalizeName } from '@shell/utils/kube';
+import NameNsDescription, { normalizeName } from '@shell/components/form/NameNsDescription';
+import { Banner } from '@components/Banner';
+import FormValidation from '@shell/mixins/form-validation';
 
 const LINK_TYPE_URL = 'url';
 const LINK_TYPE_SERVICE = 'service';
@@ -20,16 +19,15 @@ const LINK_TARGET_BLANK = '_blank';
 const LINK_TARGET_SELF = '_self';
 
 export default {
-  mixins:     [CreateEditView],
+  mixins:     [CreateEditView, FormValidation],
   components: {
     CruResource,
     LabeledInput,
     RadioGroup,
     NameNsDescription,
-    Tabbed,
-    Tab,
     FileImageSelector,
-    LabeledSelect
+    LabeledSelect,
+    Banner
   },
   data() {
     return {
@@ -57,12 +55,19 @@ export default {
           label: this.t('navLink.tabs.link.type.service')
         }
       ],
-      currentLinkType:  null,
-      targetName:       null,
-      currentTarget:    LINK_TARGET_BLANK,
-      protocolsOptions: PROTOCOLS,
-      services:         [],
-      currentService:   null,
+      currentLinkType:   null,
+      targetName:        null,
+      currentTarget:     LINK_TARGET_BLANK,
+      protocolsOptions:  PROTOCOLS,
+      services:          [],
+      currentService:    null,
+      imageErrorMessage: '',
+      fvFormRuleSets:    [
+        { path: 'metadata.name', rules: ['nameRequired'] },
+        { path: 'spec.toURL', rules: ['urlRequired'] },
+        { path: 'spec.toService.namespace', rules: ['serviceNamespaceRequired'] },
+        { path: 'spec.toService.scheme', rules: ['serviceSchemeRequired'] }],
+
     };
   },
   props: {
@@ -113,6 +118,44 @@ export default {
         label: id, id, name, namespace
       }) );
     },
+    imageError() {
+      return !!this.imageErrorMessage && !this.value.spec.iconSrc;
+    },
+    fvExtraRules() {
+      const isLinkTypeUrl = this.currentLinkType === LINK_TYPE_URL;
+      const isServiceTypeUrl = this.currentLinkType === LINK_TYPE_SERVICE;
+
+      return {
+        nameRequired: () => {
+          if (!this.value.metadata.name) {
+            return this.getError('navLink.name.label');
+          }
+        },
+
+        urlRequired: () => {
+          const condition = this.value.spec.toURL;
+
+          if (isLinkTypeUrl && !condition) {
+            return this.getError('navLink.tabs.link.toURL.label');
+          }
+        },
+        serviceNamespaceRequired: () => {
+          const condition = this.value.spec.toService.name && this.value.spec.toService.namespace;
+
+          if (isServiceTypeUrl && !condition) {
+            return this.getError('navLink.tabs.link.toService.service.label');
+          }
+        },
+        serviceSchemeRequired: () => {
+          const condition = this.value.spec.toService.scheme;
+
+          if (isServiceTypeUrl && !condition) {
+            return this.getError('navLink.tabs.link.toService.scheme.label');
+          }
+        }
+
+      };
+    }
   },
   async fetch() {
     this.services = await this.$store
@@ -215,50 +258,20 @@ export default {
     getError(label) {
       return this.$store.getters['i18n/t']('validation.required', { key: this.t(label) });
     },
-    /**
-     * Verify all fields are fulfilled or display footer notification
-     */
-    validate() {
-      const errors = [];
-
-      switch (this.currentLinkType) {
-      case LINK_TYPE_URL:
-        if (!this.value.spec.toURL) {
-          errors.push(this.getError('navLink.tabs.link.toURL.label'));
-        }
-        break;
-
-      case LINK_TYPE_SERVICE:
-        if (!this.value.spec.toService.name || !this.value.spec.toService.namespace) {
-          errors.push(this.getError(`navLink.tabs.link.toService.service.label`));
-        }
 
-        if (!this.value.spec.toService.scheme) {
-          errors.push(this.getError(`navLink.tabs.link.toService.scheme.label`));
-        }
-        break;
-
-        // no default
-      }
-
-      if (!this.value.metadata.name) {
-        errors.push(this.getError('navLink.name.label'));
-      }
-
-      if (errors.length) {
-        throw (errors.join('\n'));
-      }
+    setImageError(e) {
+      this.imageErrorMessage = e;
     },
+    setIcon(value) {
+      this.imageErrorMessage = '';
+      this.$emit('update:value.spec.iconSrc ', value);
+    }
   },
   created() {
     this.setDefaultValues();
     this.setUrlType();
     this.setTargetOption();
     this.setCurrentService();
-    // Validate error presence by allowing or resetting submission process
-    if (this.registerBeforeHook) {
-      this.registerBeforeHook(this.validate);
-    }
   }
 };
 </script>
@@ -268,8 +281,10 @@ export default {
     :can-yaml="!isCreate"
     :mode="mode"
     :resource="value"
-    :errors="errors"
+    :errors="fvUnreportedValidationErrors"
     :cancel-event="true"
+    :validation-passed="fvFormIsValid"
+    data-testid="Navlink-CRU"
     @error="e=>errors = e"
     @finish="save"
     @cancel="done()"
@@ -285,147 +300,158 @@ export default {
       name-placeholder="navLink.name.placeholder"
       description-label="navLink.label.label"
       description-placeholder="navLink.label.placeholder"
+      data-testid="Navlink-name-field"
+      :rules="{ name: fvGetAndReportPathRules('metadata.name'), namespace: [], description: [] }"
     />
 
-    <Tabbed
-      :side-tabs="true"
-    >
-      <Tab
-        name="link"
-        :label="t('navLink.tabs.link.label')"
-      >
-        <div class="row mb-20">
-          <div class="col span-6">
-            <RadioGroup
-              v-model="linkType"
-              name="type"
-              :mode="mode"
-              :options="urlTypeOptions"
-            />
-          </div>
-        </div>
-
-        <template v-if="isURL">
-          <div class="row mb-20">
-            <LabeledInput
-              v-model="value.spec.toURL"
-              :mode="mode"
-              :label="t('navLink.tabs.link.toURL.label')"
-              :required="isURL"
-              :placeholder="t('navLink.tabs.link.toURL.placeholder')"
-            />
-          </div>
-        </template>
-        <template v-if="isService">
-          <div class="row mb-20">
-            <div class="col span-2">
-              <LabeledSelect
-                v-model="value.spec.toService.scheme"
-                :mode="mode"
-                :label="t('navLink.tabs.link.toService.scheme.label')"
-                :required="isService"
-                :options="protocolsOptions"
-                :placeholder="t('navLink.tabs.link.toService.scheme.placeholder')"
-              />
-            </div>
-            <div class="col span-5">
-              <LabeledSelect
-                v-model="currentService"
-                :mode="mode"
-                :label="t('navLink.tabs.link.toService.service.label')"
-                :options="mappedServices"
-                :required="isService"
-                :placeholder="t('navLink.tabs.link.toService.service.placeholder')"
-                @input="setService"
-              />
-            </div>
-            <div class="col span-2">
-              <LabeledInput
-                v-model="value.spec.toService.port"
-                :mode="mode"
-                :label="t('navLink.tabs.link.toService.port.label')"
-                type="number"
-                :placeholder="t('navLink.tabs.link.toService.port.placeholder')"
-              />
-            </div>
-            <div class="col span-3">
-              <LabeledInput
-                v-model="value.spec.toService.path"
-                :mode="mode"
-                :label="t('navLink.tabs.link.toService.path.label')"
-                :placeholder="t('navLink.tabs.link.toService.path.placeholder')"
-              />
-            </div>
-          </div>
-        </template>
-      </Tab>
+    <div class="spacer" />
+    <h2 v-t="'navLink.tabs.link.label'" />
+    <div class="row mb-20">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="linkType"
+          name="type"
+          :mode="mode"
+          :options="urlTypeOptions"
+          data-testid="Navlink-link-radiogroup"
+        />
+      </div>
+    </div>
 
-      <Tab
-        name="target"
-        :label="t('navLink.tabs.target.label')"
-      >
-        <div class="row mb-20">
-          <div class="col span-6">
-            <RadioGroup
-              v-model="currentTarget"
-              name="type"
-              :mode="mode"
-              :options="targetOptions"
-              :required="true"
-              @input="setTargetValue($event)"
-            />
-          </div>
-          <div class="col span-6">
-            <LabeledInput
-              v-if="isNamedWindow"
-              v-model="targetName"
-              :mode="mode"
-              :label="t('navLink.tabs.target.namedValue.label')"
-              @input="setTargetValue($event);"
-            />
-          </div>
+    <template v-if="isURL">
+      <div class="row mb-20">
+        <LabeledInput
+          v-model="value.spec.toURL"
+          :mode="mode"
+          :label="t('navLink.tabs.link.toURL.label')"
+          :required="isURL"
+          :placeholder="t('navLink.tabs.link.toURL.placeholder')"
+          :rules="fvGetAndReportPathRules('spec.toURL')"
+          data-testid="Navlink-url-field"
+        />
+      </div>
+    </template>
+    <template v-if="isService">
+      <div class="row mb-20">
+        <div class="col span-2">
+          <LabeledSelect
+            v-model="value.spec.toService.scheme"
+            :mode="mode"
+            :label="t('navLink.tabs.link.toService.scheme.label')"
+            :required="isService"
+            :options="protocolsOptions"
+            :placeholder="t('navLink.tabs.link.toService.scheme.placeholder')"
+            :rules="fvGetAndReportPathRules('spec.toService.scheme')"
+            data-testid="Navlink-scheme-field"
+          />
         </div>
-      </Tab>
-
-      <Tab
-        name="group"
-        :label="t('navLink.tabs.group.label')"
-      >
-        <div class="row mb-20">
-          <div class="col span-6">
-            <LabeledInput
-              v-model="value.spec.group"
-              :mode="mode"
-              :tooltip="t('navLink.tabs.group.group.tooltip')"
-              :label="t('navLink.tabs.group.group.label')"
-            />
-          </div>
-          <div class="col span-6">
-            <LabeledInput
-              v-model="value.spec.sideLabel"
-              :mode="mode"
-              :label="t('navLink.tabs.group.sideLabel.label')"
-            />
-          </div>
+        <div class="col span-5">
+          <LabeledSelect
+            v-model="currentService"
+            :mode="mode"
+            :label="t('navLink.tabs.link.toService.service.label')"
+            :options="mappedServices"
+            :required="isService"
+            :placeholder="t('navLink.tabs.link.toService.service.placeholder')"
+            :rules="fvGetAndReportPathRules('spec.toService.namespace')"
+            data-testid="Navlink-currentService-field"
+            @input="setService"
+          />
         </div>
-
-        <div class="row mb-20">
-          <div class="col span-6">
-            <LabeledInput
-              v-model="value.spec.description"
-              :mode="mode"
-              :label="t('navLink.tabs.group.description.label')"
-            />
-          </div>
-          <div class="col span-2">
-            <FileImageSelector
-              v-model="value.spec.iconSrc"
-              :mode="mode"
-              :label="t('navLink.tabs.group.iconSrc.label')"
-            />
-          </div>
+        <div class="col span-2">
+          <LabeledInput
+            v-model="value.spec.toService.port"
+            :mode="mode"
+            :label="t('navLink.tabs.link.toService.port.label')"
+            type="number"
+            :placeholder="t('navLink.tabs.link.toService.port.placeholder')"
+          />
         </div>
-      </Tab>
-    </Tabbed>
+        <div class="col span-3">
+          <LabeledInput
+            v-model="value.spec.toService.path"
+            :mode="mode"
+            :label="t('navLink.tabs.link.toService.path.label')"
+            :placeholder="t('navLink.tabs.link.toService.path.placeholder')"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="spacer" />
+    <h2 v-t="'navLink.tabs.target.label'" />
+    <div class="row mb-20">
+      <div class="col span-6">
+        <RadioGroup
+          v-model="currentTarget"
+          name="type"
+          :mode="mode"
+          :options="targetOptions"
+          @input="setTargetValue($event)"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-if="isNamedWindow"
+          v-model="targetName"
+          :mode="mode"
+          :label="t('navLink.tabs.target.namedValue.label')"
+          @input="setTargetValue($event);"
+        />
+      </div>
+    </div>
+    <div class="spacer" />
+    <h2 v-t="'navLink.tabs.group.label'" />
+
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.spec.group"
+          :mode="mode"
+          :tooltip="t('navLink.tabs.group.group.tooltip')"
+          :label="t('navLink.tabs.group.group.label')"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.spec.sideLabel"
+          :mode="mode"
+          :label="t('navLink.tabs.group.sideLabel.label')"
+        />
+      </div>
+    </div>
+
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabeledInput
+          v-model="value.spec.description"
+          :mode="mode"
+          :label="t('navLink.tabs.group.description.label')"
+        />
+      </div>
+    </div>
+
+    <h4 v-t="'navLink.tabs.groupImage.label'" />
+    <div class="row">
+      <label class="text-label">
+        {{ t('navLink.tabs.groupImage.iconSrc.tip', {}, true) }}
+      </label>
+    </div>
+    <div class="row">
+      <FileImageSelector
+        v-model="value.spec.iconSrc"
+        :read-as-data-url="true"
+        :mode="mode"
+        :label="t('navLink.tabs.groupImage.iconSrc.label')"
+        accept="image/jpeg,image/png,image/svg+xml"
+        @error="setImageError"
+        @input="setIcon"
+      />
+    </div>
+    <Banner
+      v-if="imageError"
+      color="error"
+    >
+      {{ imageErrorMessage }}
+    </Banner>
   </CruResource>
 </template>

package/layouts/default.vue

@@ -38,7 +38,7 @@ import PageHeaderActions from '@shell/mixins/page-actions';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import { getClusterFromRoute, getProductFromRoute } from '@shell/middleware/authenticated';
 import { BOTTOM } from '@shell/utils/position';
-import { BLANK_CLUSTER } from '@shell/store';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 

package/list/group.principal.vue

@@ -8,7 +8,7 @@ import { applyProducts } from '@shell/store/type-map';
 import { NAME } from '@shell/config/product/auth';
 import { MODE, _EDIT } from '@shell/config/query-params';
 import { mapState } from 'vuex';
-import { BLANK_CLUSTER } from '@shell/store';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { allHash } from '@shell/utils/promise';
 
 export default {

package/middleware/authenticated.js

@@ -126,12 +126,20 @@ function setProduct(store, to, redirect) {
  */
 function invalidResource(store, to, redirect) {
   const product = store.getters['currentProduct'];
-  const inStore = product?.inStore;
-  const schemaFor = store.getters[`${ inStore }/schemaFor`]; // There's a chance we're in an extension's product who's store could be anything
   const resource = getResourceFromRoute(to);
 
-  // In order to check a resource is valid we need all of these
-  if (!product || !inStore || !schemaFor || !resource) {
+  // In order to check a resource is valid we need these
+  if (!product || !resource) {
+    return false;
+  }
+
+  // Note - don't use the current products store... because products can override stores for resources with `typeStoreMap`
+  const inStore = store.getters['currentStore'](resource);
+  // There's a chance we're in an extension's product who's store could be anything, so confirm schemaFor exists
+  const schemaFor = store.getters[`${ inStore }/schemaFor`];
+
+  // In order to check a resource is valid we need these
+  if (!inStore || !schemaFor) {
     return false;
   }
 

package/mixins/create-edit-view/impl.js

@@ -65,9 +65,9 @@ export default {
 
       let name = this.$route.name;
 
-      if ( name.endsWith('-id') ) {
+      if ( name?.endsWith('-id') ) {
         name = name.replace(/(-namespace)?-id$/, '');
-      } else if ( name.endsWith('-create') ) {
+      } else if ( name?.endsWith('-create') ) {
         name = name.replace(/-create$/, '');
       }
 

package/models/chart.js

@@ -2,7 +2,7 @@ import { compatibleVersionsFor } from '@shell/store/catalog';
 import {
   REPO_TYPE, REPO, CHART, VERSION, _FLAGGED, HIDE_SIDE_NAV
 } from '@shell/config/query-params';
-import { BLANK_CLUSTER } from '@shell/store';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import SteveModel from '@shell/plugins/steve/steve-class';
 
 export default class Chart extends SteveModel {

package/models/fleet.cattle.io.cluster.js

@@ -4,6 +4,7 @@ import { _RKE2 } from '@shell/store/prefs';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { escapeHtml } from '@shell/utils/string';
 import { insertAt } from '@shell/utils/array';
+import jsyaml from 'js-yaml';
 
 export default class FleetCluster extends SteveModel {
   get _availableActions() {
@@ -89,7 +90,7 @@ export default class FleetCluster extends SteveModel {
   }
 
   get state() {
-    if ( this.spec?.paused === true ) {
+    if (this.spec?.paused === true) {
       return 'paused';
     }
 
@@ -124,19 +125,47 @@ export default class FleetCluster extends SteveModel {
     return mgmt;
   }
 
-  get norman() {
-    const norman = this.$rootGetters['rancher/byId'](NORMAN.CLUSTER, this.metadata.labels?.[FLEET_LABELS.CLUSTER_NAME]);
+  get basicNorman() {
+    const norman = this.$rootGetters['rancher/byId'](NORMAN.CLUSTER, this.metadata?.labels?.[FLEET_LABELS.CLUSTER_NAME]);
 
     return norman;
   }
 
+  get norman() {
+    if (this.basicNorman) {
+      return this.basicNorman;
+    }
+
+    // If navigate to YAML view directly, norman is not loaded yet
+    return this.$dispatch('rancher/find', { type: NORMAN.CLUSTER, id: this.metadata.labels[FLEET_LABELS.CLUSTER_NAME] }, { root: true });
+  }
+
+  async normanClone() {
+    const norman = await this.norman;
+
+    return this.$dispatch('rancher/clone', { resource: norman }, { root: true });
+  }
+
   get groupByLabel() {
     const name = this.metadata.namespace;
 
-    if ( name ) {
+    if (name) {
       return this.$rootGetters['i18n/t']('resourceTable.groupLabel.workspace', { name: escapeHtml(name) });
     } else {
       return this.$rootGetters['i18n/t']('resourceTable.groupLabel.notInAWorkspace');
     }
   }
+
+  async saveYaml(yaml) {
+    await this._saveYaml(yaml);
+
+    const parsed = jsyaml.load(yaml);
+
+    const norman = await this.normanClone();
+
+    norman.setLabels(parsed.metadata.labels);
+    norman.setAnnotations(parsed.metadata.annotations);
+
+    await norman.save();
+  }
 }