@rancher/shell 0.3.16 → 0.3.18

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

@@ -7,10 +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, { normalizeName } 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 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';
@@ -19,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 {
@@ -56,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: {
@@ -112,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
@@ -214,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>
@@ -267,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()"
@@ -284,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/initialize/App.js

@@ -1,23 +1,13 @@
 import Vue from 'vue';
 
-import {
-  getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, sanitizeComponent
-} from '../utils/nuxt';
+import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError } from '../utils/nuxt';
 import NuxtError from '../layouts/error.vue';
 import NuxtLoading from '../components/nav/GlobalLoading.vue';
 
 import '../assets/styles/app.scss';
+import { getLayouts } from './layouts';
 
-import blank from '../layouts/blank.vue';
-import defaultLayout from '../layouts/default.vue';
-import home from '../layouts/home.vue';
-import plain from '../layouts/plain.vue';
-import unauthenticated from '../layouts/unauthenticated.vue';
-import standalone from '../layouts/standalone.vue';
-
-const layouts = {
-  _blank: sanitizeComponent(blank), _default: sanitizeComponent(defaultLayout), _home: sanitizeComponent(home), _plain: sanitizeComponent(plain), _unauthenticated: sanitizeComponent(unauthenticated), _standalone: sanitizeComponent(standalone)
-};
+const layouts = getLayouts();
 
 export default {
   render(h) {

package/initialize/layouts.ts

@@ -0,0 +1,26 @@
+import { sanitizeComponent } from '@shell/utils/nuxt';
+import blank from '@shell/layouts/blank.vue';
+import defaultLayout from '@shell/layouts/default.vue';
+import home from '@shell/layouts/home.vue';
+import plain from '@shell/layouts/plain.vue';
+import unauthenticated from '@shell/layouts/unauthenticated.vue';
+import standalone from '@shell/layouts/standalone.vue';
+
+export type Component = { [key: string]: any };
+export type Layouts = { [key: string]: Component };
+const layouts: Layouts = { };
+
+export function getLayouts(): Layouts {
+  return layouts;
+}
+
+export function registerLayout(name: string, component: Component): void {
+  layouts[`_${ name }`] = sanitizeComponent(component);
+}
+
+registerLayout('blank', blank) ;
+registerLayout('default', defaultLayout) ;
+registerLayout('home', home) ;
+registerLayout('plain', plain) ;
+registerLayout('unauthenticated', unauthenticated) ;
+registerLayout('standalone', standalone);

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/list/provisioning.cattle.io.cluster.vue

@@ -135,6 +135,13 @@ export default {
     },
 
     harvesterEnabled: mapFeature(HARVESTER_FEATURE),
+
+    nonStandardNamespaces() {
+      // Show the namespace grouping option if there's clusters with namespaces other than 'fleet-default' or 'fleet-local'
+      // This will be used when there's clusters from extension based provisioners
+      // We should re-visit this for scaling reasons
+      return this.filteredRows.some((c) => c.metadata.namespace !== 'fleet-local' && c.metadata.namespace !== 'fleet-default');
+    }
   },
 
   $loadingResources() {
@@ -182,7 +189,7 @@ export default {
     <ResourceTable
       :schema="schema"
       :rows="filteredRows"
-      :namespaced="false"
+      :namespaced="nonStandardNamespaces"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"