@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.7

package/edit/fleet.cattle.io.helmop.vue

@@ -4,14 +4,10 @@ import jsyaml from 'js-yaml';
 import { saferDump } from '@shell/utils/create-yaml';
 import { mapGetters } from 'vuex';
 import { base64Encode } from '@shell/utils/crypto';
-import { exceptionToErrorsArray } from '@shell/utils/error';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
-import FleetUtils from '@shell/utils/fleet';
-import {
-  AUTH_TYPE, CONFIG_MAP, FLEET, NORMAN, SECRET, VIRTUAL_HARVESTER_PROVIDER
-} from '@shell/config/types';
-import { CAPI, CATALOG, FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
+import { AUTH_TYPE, CONFIG_MAP, NORMAN, SECRET } from '@shell/config/types';
+import { CATALOG, FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
 import { SOURCE_TYPE } from '@shell/config/product/fleet';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
@@ -26,13 +22,13 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
-import ValueFromResource from '@shell/components/form/ValueFromResource';
 import { mapPref, DIFF } from '@shell/store/prefs';
-import { isHarvesterCluster } from '@shell/utils/cluster';
 import { SECRET_TYPES } from '@shell/config/secret';
 import UnitInput from '@shell/components/form/UnitInput';
+import FleetClusterTargets from '@shell/components/fleet/FleetClusterTargets/index.vue';
 import { toSeconds } from '@shell/utils/duration';
 import { DEFAULT_POLLING_INTERVAL, MINIMUM_POLLING_INTERVAL } from '@shell/models/fleet-application';
+import FleetValuesFrom from '@shell/components/fleet/FleetValuesFrom.vue';
 
 const VALUES_STATE = {
   YAML: 'YAML',
@@ -51,6 +47,8 @@ export default {
     ButtonGroup,
     Checkbox,
     CruResource,
+    FleetClusterTargets,
+    FleetValuesFrom,
     YamlEditor,
     LabeledInput,
     LabeledSelect,
@@ -58,24 +56,14 @@ export default {
     Loading,
     NameNsDescription,
     SelectOrCreateAuthSecret,
-    ValueFromResource,
     UnitInput,
   },
 
   mixins: [CreateEditView, FormValidation],
 
   async fetch() {
-    const hash = await checkSchemasForFindAllHash({
-      allClusters: {
-        inStoreType: 'management',
-        type:        FLEET.CLUSTER
-      },
-
-      allClusterGroups: {
-        inStoreType: 'management',
-        type:        FLEET.CLUSTER_GROUP
-      },
-
+    // Fetch Secrets and ConfigMaps to mask the loading phase in FleetValuesFrom.vue
+    checkSchemasForFindAllHash({
       allSecrets: {
         inStoreType: 'management',
         type:        SECRET
@@ -86,13 +74,6 @@ export default {
         type:        CONFIG_MAP
       }
     }, this.$store);
-
-    this.allClusters = hash.allClusters || [];
-    this.allClusterGroups = hash.allClusterGroups || [];
-    this.allSecrets = hash.allSecrets || [];
-    this.allConfigMaps = hash.allConfigMaps || [];
-
-    this.updateTargets();
   },
 
   data() {
@@ -107,21 +88,6 @@ export default {
       }
     }
 
-    const targetInfo = this.value.targetInfo;
-    const targetCluster = targetInfo.cluster;
-    const targetClusterGroup = targetInfo.clusterGroup;
-    const targetAdvanced = targetInfo.advanced;
-
-    let targetMode = targetInfo.mode;
-
-    if ( this.realMode === _CREATE ) {
-      targetMode = 'all';
-    } else if ( targetMode === 'cluster' ) {
-      targetMode = `cluster://${ targetCluster }`;
-    } else if ( targetMode === 'clusterGroup' ) {
-      targetMode = `group://${ targetClusterGroup }`;
-    }
-
     const correctDriftEnabled = this.value.spec?.correctDrift?.enabled || false;
 
     const chartValues = saferDump(clone(this.value.spec.helm.values));
@@ -129,27 +95,20 @@ export default {
     return {
       VALUES_STATE,
       SOURCE_TYPE,
-      allClusters:          [],
-      allClusterGroups:     [],
-      allSecrets:           [],
-      allConfigMaps:        [],
-      allWorkspaces:        [],
+      allWorkspaces:    [],
       pollingInterval,
-      targetMode,
-      targetAdvanced,
-      targetAdvancedErrors: null,
-      sourceTypeInit:       this.value.sourceType,
-      sourceType:           this.value.sourceType || SOURCE_TYPE.REPO,
-      helmSpecInit:         clone(this.value.spec.helm),
-      yamlForm:             VALUES_STATE.YAML,
+      sourceTypeInit:   this.value.sourceType,
+      sourceType:       this.value.sourceType || SOURCE_TYPE.REPO,
+      helmSpecInit:     clone(this.value.spec.helm),
+      yamlForm:         VALUES_STATE.YAML,
       chartValues,
-      chartValuesInit:      chartValues,
-      valuesFrom:           FleetUtils.HelmOp.fromValuesFrom(this.value.spec.helm.valuesFrom),
+      chartValuesInit:  chartValues,
       correctDriftEnabled,
-      tempCachedValues:     {},
-      doneRouteList:        'c-cluster-fleet-application',
-      isRealModeEdit:       this.realMode === _EDIT,
-      fvFormRuleSets:       []
+      tempCachedValues: {},
+      doneRouteList:    'c-cluster-fleet-application',
+      isRealModeEdit:   this.realMode === _EDIT,
+      targetsCreated:   '',
+      fvFormRuleSets:   [],
     };
   },
 
@@ -220,10 +179,6 @@ export default {
       ];
     },
 
-    isLocal() {
-      return this.value.metadata.namespace === 'fleet-local';
-    },
-
     sourceTypeOptions() {
       return Object.values(SOURCE_TYPE).map((value) => ({
         value,
@@ -231,17 +186,6 @@ export default {
       }));
     },
 
-    valueFromOptions() {
-      return [
-        {
-          value: 'configMapKeyRef', label: 'ConfigMap Key', hideVariableName: true
-        },
-        {
-          value: 'secretKeyRef', label: 'Secret key', hideVariableName: true
-        },
-      ];
-    },
-
     yamlFormOptions() {
       return [{
         labelKey: 'fleet.helmOp.values.yaml.options.edit',
@@ -277,74 +221,12 @@ export default {
       return EDITOR_MODES.EDIT_CODE;
     },
 
-    targetOptions() {
-      const out = [
-        {
-          label: 'No Clusters',
-          value: 'none'
-        },
-        {
-          label: 'All Clusters in the Workspace',
-          value: 'all',
-        },
-        {
-          label: 'Advanced',
-          value: 'advanced'
-        },
-      ];
-
-      const clusters = this.allClusters
-        .filter((x) => {
-          return x.metadata.namespace === this.value.metadata.namespace;
-        })
-        .filter((x) => !isHarvesterCluster(x))
-        .map((x) => {
-          return { label: x.nameDisplay, value: `cluster://${ x.metadata.name }` };
-        });
-
-      if ( clusters.length ) {
-        out.push({ kind: 'divider', disabled: true });
-        out.push({
-          kind:     'title',
-          label:    'Clusters',
-          disabled: true,
-        });
-
-        out.push(...clusters);
-      }
-
-      const groups = this.allClusterGroups
-        .filter((x) => x.metadata.namespace === this.value.metadata.namespace)
-        .map((x) => {
-          return { label: x.nameDisplay, value: `group://${ x.metadata.name }` };
-        });
-
-      if ( groups.length ) {
-        out.push({ kind: 'divider', disabled: true });
-        out.push({
-          kind:     'title',
-          label:    'Cluster Groups',
-          disabled: true
-        });
-
-        out.push(...groups);
-      }
-
-      return out;
-    },
-
     showPollingIntervalWarning() {
       return !this.isView && this.value.isPollingEnabled && this.pollingInterval < MINIMUM_POLLING_INTERVAL;
     },
   },
 
   watch: {
-    'value.metadata.namespace': 'updateTargets',
-    targetMode:                 'updateTargets',
-    targetCluster:              'updateTargets',
-    targetClusterGroup:         'updateTargets',
-    targetAdvanced:             'updateTargets',
-
     workspace(neu) {
       if (this.isCreate) {
         set(this.value, 'metadata.namespace', neu);
@@ -369,52 +251,8 @@ export default {
       this.updateValidationRules(type);
     },
 
-    updateTargets() {
-      const spec = this.value.spec;
-      const mode = this.targetMode;
-
-      let kind, value;
-      const match = mode.match(/([^:]+)(:\/\/(.*))?$/);
-
-      if ( match ) {
-        kind = match[1];
-        value = match[3];
-      }
-
-      if ( kind === 'all' ) {
-        spec.targets = [{
-          clusterSelector: {
-            matchExpressions: [{
-              key:      CAPI.PROVIDER,
-              operator: 'NotIn',
-              values:   [
-                VIRTUAL_HARVESTER_PROVIDER
-              ],
-            }],
-          },
-        }];
-      } else if ( kind === 'none' ) {
-        spec.targets = [];
-      } else if ( kind === 'cluster' ) {
-        spec.targets = [
-          { clusterName: value },
-        ];
-      } else if ( kind === 'group' ) {
-        spec.targets = [
-          { clusterGroup: value }
-        ];
-      } else if ( kind === 'advanced' ) {
-        try {
-          const parsed = jsyaml.load(this.targetAdvanced);
-
-          spec.targets = parsed;
-          this.targetAdvancedErrors = null;
-        } catch (e) {
-          this.targetAdvancedErrors = exceptionToErrorsArray(e);
-        }
-      } else {
-        spec.targets = [];
-      }
+    updateTargets(value) {
+      this.value.spec.targets = value;
     },
 
     enablePolling(value) {
@@ -547,20 +385,6 @@ export default {
       }
     },
 
-    addValueFrom() {
-      this.valuesFrom.push({ valueFrom: {} });
-    },
-
-    updateValueFrom(index, value) {
-      this.valuesFrom[index] = value;
-
-      this.value.spec.helm.valuesFrom = FleetUtils.HelmOp.toValuesFrom(this.valuesFrom, this.workspace);
-    },
-
-    removeValueFrom(index) {
-      this.valuesFrom.splice(index, 1);
-    },
-
     updateBeforeSave() {
       this.value.spec['correctDrift'] = { enabled: this.correctDriftEnabled };
     },
@@ -577,12 +401,12 @@ export default {
           rules: ['required', 'urlRepository'],
         }, {
           path:  'spec.helm.chart',
-          rules: ['required', 'alphanumeric'],
+          rules: ['required'],
         }];
         break;
       case SOURCE_TYPE.OCI:
         this.fvFormRuleSets = [{
-          path:  'spec.helm.chart',
+          path:  'spec.helm.repo',
           rules: ['required', 'ociRegistry'],
         }];
         break;
@@ -720,11 +544,11 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model:value="value.spec.helm.chart"
+              v-model:value="value.spec.helm.repo"
               :mode="mode"
               :label-key="`fleet.helmOp.source.${ sourceType }.chart.label`"
               :placeholder="t(`fleet.helmOp.source.${ sourceType }.chart.placeholder`, null, true)"
-              :rules="fvGetAndReportPathRules('spec.helm.chart')"
+              :rules="fvGetAndReportPathRules('spec.helm.repo')"
               :required="true"
             />
           </div>
@@ -789,78 +613,29 @@ export default {
       </div>
 
       <div class="mb-20">
-        <h2 v-t="'fleet.helmOp.values.valuesFrom.selectLabel'" />
-        <div
-          v-for="(row, i) in valuesFrom"
-          :key="i"
-        >
-          <ValueFromResource
-            :value="row"
-            :options="valueFromOptions"
-            :all-secrets="allSecrets"
-            :all-config-maps="allConfigMaps"
-            :namespaced="true"
-            :mode="mode"
-            :show-variable-name="true"
-            @remove="removeValueFrom(i)"
-            @update:value="updateValueFrom(i, $event)"
-          />
-        </div>
-        <button
-          v-if="!isView"
-          v-t="'workload.container.command.addEnvVar'"
-          type="button"
-          class="btn role-tertiary add"
-          data-testid="add-env-var"
-          @click="addValueFrom"
+        <FleetValuesFrom
+          v-model:value="value.spec.helm.valuesFrom"
+          :namespace="value.metadata.namespace"
+          :mode="realMode"
         />
       </div>
     </template>
 
     <template #target>
-      <h2 v-t="isLocal ? 'fleet.helmOp.target.labelLocal' : 'fleet.helmOp.target.label'" />
-
-      <template v-if="!isLocal">
-        <div class="row">
-          <div class="col span-6">
-            <LabeledSelect
-              v-model:value="targetMode"
-              :options="targetOptions"
-              option-key="value"
-              :mode="mode"
-              :selectable="option => !option.disabled"
-              :label="t('fleet.helmOp.target.selectLabel')"
-            >
-              <template v-slot:option="opt">
-                <hr v-if="opt.kind === 'divider'">
-                <div v-else-if="opt.kind === 'title'">
-                  {{ opt.label }}
-                </div>
-                <div v-else>
-                  {{ opt.label }}
-                </div>
-              </template>
-            </LabeledSelect>
-          </div>
-        </div>
-
-        <div
-          v-if="targetMode === 'advanced'"
-          class="row mt-10"
-        >
-          <div class="col span-12">
-            <YamlEditor v-model:value="targetAdvanced" />
-          </div>
-        </div>
-
-        <Banner
-          v-for="(err, i) in targetAdvancedErrors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
-      </template>
+      <h2 v-t="'fleet.helmOp.target.label'" />
+      <FleetClusterTargets
+        :targets="value.spec.targets"
+        :matching="value.targetClusters"
+        :namespace="value.metadata.namespace"
+        :mode="realMode"
+        :created="targetsCreated"
+        @update:value="updateTargets"
+        @created="targetsCreated=$event"
+      />
 
+      <h3 class="mmt-16">
+        {{ t('fleet.helmOp.target.additionalOptions') }}
+      </h3>
       <div class="row mt-20">
         <div class="col span-6">
           <LabeledInput
@@ -872,7 +647,7 @@ export default {
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model:value="value.spec.targetNamespace"
+            v-model:value="value.spec.namespace"
             :mode="mode"
             label-key="fleet.helmOp.targetNamespace.label"
             placeholder-key="fleet.helmOp.targetNamespace.placeholder"
@@ -965,7 +740,7 @@ export default {
               :label="t('fleet.helmOp.polling.pollingInterval.label')"
               :mode="mode"
               tooltip-key="fleet.helmOp.polling.pollingInterval.tooltip"
-              @update:value="updatePollingInterval"
+              @blur.capture="updatePollingInterval(pollingInterval)"
             />
           </div>
         </template>

package/edit/helm.cattle.io.projecthelmchart.vue

@@ -142,6 +142,7 @@ export default {
           v-if="!!currentNamespace && selectedNamespaceQuestions"
           ref="tabs"
           :side-tabs="true"
+          :use-hash="useTabbedHash"
         >
           <Questions
             v-model:value="value.spec.values"

package/edit/k8s.cni.cncf.io.networkattachmentdefinition.vue

@@ -73,6 +73,7 @@ export default {
       v-bind="$attrs"
       class="mt-15"
       :side-tabs="true"
+      :use-hash="useTabbedHash"
     >
       <Tab
         name="basics"

package/edit/logging-flow/index.vue

@@ -404,6 +404,7 @@ export default {
 
     <Tabbed
       :side-tabs="true"
+      :use-hash="useTabbedHash"
       @changed="tabChanged($event)"
     >
       <Tab

package/edit/logging.banzaicloud.io.output/index.vue

@@ -211,6 +211,7 @@ export default {
         v-else
         ref="tabbed"
         :side-tabs="true"
+        :use-hash="useTabbedHash"
         @changed="tabChanged($event)"
       >
         <Tab

package/edit/management.cattle.io.fleetworkspace.vue

@@ -200,6 +200,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       default-tab="members"
+      :use-hash="useTabbedHash"
     >
       <!-- <Tab name="members" label-key="generic.members" :weight="2">
         <RoleBindings

package/edit/management.cattle.io.oidcclient.vue

@@ -0,0 +1,162 @@
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import UnitInput from '@shell/components/form/UnitInput.vue';
+import CruResource from '@shell/components/CruResource.vue';
+import FormValidation from '@shell/mixins/form-validation';
+import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+
+const DEFAULT_REF_TOKEN_EXP = 3600;
+const DEFAULT_TOKEN_EXP = 600;
+
+export default defineComponent({
+  name: 'EditOidcClient',
+
+  emits: ['input'],
+
+  inheritAttrs: false,
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    ArrayList,
+    UnitInput,
+  },
+
+  mixins: [
+    CreateEditView,
+    FormValidation
+  ],
+
+  created() {
+    // setup the data for creation scenario
+    if (this.isCreate) {
+      this.value.spec = {
+        refreshTokenExpirationSeconds: DEFAULT_REF_TOKEN_EXP,
+        tokenExpirationSeconds:        DEFAULT_TOKEN_EXP
+      };
+    }
+  },
+
+  data() {
+    return {
+      fvFormRuleSets: [
+        { path: 'metadata.name', rules: ['required'] },
+        { path: 'spec.redirectURIs', rules: ['required', 'genericUrl'] },
+        { path: 'spec.refreshTokenExpirationSeconds', rules: ['required'] },
+        { path: 'spec.tokenExpirationSeconds', rules: ['required'] },
+      ],
+    };
+  },
+
+  computed: {
+    finishButtonMode(): string {
+      return this.isCreate ? 'registerApplication' : 'saveApplication';
+    },
+
+    doneLocationOverride() {
+      if (this.isCreate) {
+        const afterCreateRoute = Object.assign({}, this.value.detailLocation);
+
+        afterCreateRoute.state = { displaySecret: 'true' };
+
+        return afterCreateRoute;
+      }
+
+      return undefined;
+    },
+  },
+});
+</script>
+
+<template>
+  <CruResource
+    :mode="mode"
+    :resource="value"
+    :doneLocationOverride="doneLocationOverride"
+    class="create-edit"
+    :finish-button-mode="finishButtonMode"
+    :errors="errors"
+    :validation-passed="fvFormIsValid"
+    @finish="save"
+    @error="e=>errors=e"
+  >
+    <div class="mb-10">
+      <!-- app name, app description -->
+      <div class="row mt-20">
+        <div class="col span-12">
+          <NameNsDescription
+            :value="value"
+            :mode="mode"
+            :namespaced="false"
+            :name-placeholder="'oidcclient.appName.placeholder'"
+            :description-key="'spec.description'"
+            :description-placeholder="'oidcclient.appDescription.placeholder'"
+            :rules="{ name: fvGetAndReportPathRules('metadata.name'), description: [] }"
+            @update:value="$emit('input', $event)"
+          />
+        </div>
+      </div>
+      <!-- cb urls, tokens -->
+      <div class="row ">
+        <div class="col span-6">
+          <ArrayList
+            v-model:value="value.spec.redirectURIs"
+            class="mt-20"
+            :mode="mode"
+            :title="t('oidcclient.redirectURIs.label')"
+            :a11y-label="t('oidcclient.redirectURIs.label')"
+            :add-label="t('oidcclient.redirectURIs.addLabel')"
+            :required="true"
+            :protip="false"
+            :showHeader="true"
+            :rules="fvGetAndReportPathRules('spec.redirectURIs')"
+            :value-label="''"
+            data-testid="oidc-client-cb-urls-list"
+          />
+        </div>
+      </div>
+      <h3 class="mt-40">
+        {{ t('oidcclient.tokenExpirationSeconds.label') }}
+      </h3>
+      <div class="row mt-20 mb-20">
+        <div
+          class="col span-3"
+          data-testid="oidc-client-token-exp-input"
+        >
+          <UnitInput
+            v-model:value="value.spec.tokenExpirationSeconds"
+            :mode="mode"
+            :increment="1"
+            :required="true"
+            base-unit="s"
+            :positive="true"
+            :rules="fvGetAndReportPathRules('spec.tokenExpirationSeconds')"
+            :label="t('oidcclient.tokenExpirationSeconds.label')"
+            :sub-label="t('oidcclient.tokenExpirationSeconds.placeholder')"
+            :aria-label="t('oidcclient.tokenExpirationSeconds.label')"
+          />
+        </div>
+        <div
+          class="col span-3"
+          data-testid="oidc-client-ref-token-exp-input"
+        >
+          <UnitInput
+            v-model:value="value.spec.refreshTokenExpirationSeconds"
+            :mode="mode"
+            :increment="1"
+            :required="true"
+            base-unit="s"
+            :positive="true"
+            :rules="fvGetAndReportPathRules('spec.refreshTokenExpirationSeconds')"
+            :label="t('oidcclient.refreshTokenExpirationSeconds.label')"
+            :sub-label="t('oidcclient.refreshTokenExpirationSeconds.placeholder')"
+            :aria-label="t('oidcclient.refreshTokenExpirationSeconds.label')"
+          />
+        </div>
+      </div>
+    </div>
+  </CruResource>
+</template>

package/edit/management.cattle.io.project.vue

@@ -195,7 +195,10 @@ export default {
       :rules="{ name: fvGetAndReportPathRules('spec.displayName'), namespace: [], description: [] }"
       @update:value="$emit('input', $event)"
     />
-    <Tabbed :side-tabs="true">
+    <Tabbed
+      :side-tabs="true"
+      :use-hash="useTabbedHash"
+    >
       <Tab
         v-if="canViewMembers"
         name="members"

package/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -203,7 +203,7 @@ export default {
       @input="$emit('input', $event)"
     />
 
-    <Tabbed>
+    <Tabbed :use-hash="useTabbedHash">
       <Tab
         :label="t('monitoring.route.label')"
         :weight="1"