@rancher/shell 0.3.0 → 0.3.1

package/components/form/Labels.vue

@@ -1,8 +1,12 @@
 <script>
 import KeyValue from '@shell/components/form/KeyValue';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 
 export default {
-  components: { KeyValue },
+  components: {
+    ToggleSwitch,
+    KeyValue
+  },
 
   props: {
     value: {
@@ -41,6 +45,10 @@ export default {
     }
   },
 
+  data() {
+    return { toggler: false };
+  },
+
   computed: {
     containerClass() {
       return `${ this.displaySideBySide ? 'row' : '' } ${ this.defaultContainerClass }`.trim();
@@ -48,24 +56,41 @@ export default {
 
     sectionClass() {
       return `${ this.displaySideBySide ? 'col span-6' : 'row' } ${ this.defaultSectionClass }`.trim();
-    }
+    },
+
   }
 };
 </script>
 <template>
   <div :class="containerClass">
-    <div :class="sectionClass">
-      <KeyValue
-        key="labels"
-        :value="value.labels"
-        :add-label="t('labels.addLabel')"
-        :mode="mode"
-        :title="t('labels.labels.title')"
-        :title-protip="labelTitleTooltip"
-        :read-allowed="false"
-        :value-can-be-empty="true"
-        @input="value.setLabels($event)"
-      />
+    <div class="labels">
+      <div class="labels__header">
+        <h3>
+          <t k="labels.labels.title" />
+        </h3>
+        <ToggleSwitch
+          v-if="value.hasSystemLabels"
+          v-model="toggler"
+          name="label-system-toggle"
+          :on-label="t('labels.labels.show')"
+        />
+      </div>
+      <p class="mt-10 mb-10">
+        <t k="labels.labels.description" />
+      </p>
+      <div :class="sectionClass">
+        <KeyValue
+          key="labels"
+          :value="value.labels"
+          :protected-keys="value.systemLabels || []"
+          :toggle-filter="toggler"
+          :add-label="t('labels.addLabel')"
+          :mode="mode"
+          :read-allowed="false"
+          :value-can-be-empty="true"
+          @input="value.setLabels($event)"
+        />
+      </div>
     </div>
     <div class="spacer" />
     <div :class="sectionClass">
@@ -84,6 +109,11 @@ export default {
   </div>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.labels {
+  &__header {
+    display: flex;
+    justify-content: space-between;
+  }
+}
 </style>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -213,9 +213,9 @@ export default {
 </script>
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div
-    v-else
-    class="cluster-permissions-editor"
+  <div
+    v-else
+    class="cluster-permissions-editor"
   >
     <div class="row mt-10">
       <div class="col span-12">
@@ -229,10 +229,10 @@ export default {
       </div>
     </div>
 
-    <Card
-      class="m-0"
-      :show-highlight-border="false"
-      :show-actions="false"
+    <Card
+      class="m-0"
+      :show-highlight-border="false"
+      :show-actions="false"
     >
       <template v-slot:title>
         <div class="type-title">
@@ -248,17 +248,17 @@ export default {
           :options="options"
           name="permission-group"
         />
-        <div
-          v-if="permissionGroup === 'custom'"
-          class="custom-permissions ml-20 mt-10"
-          :class="{'two-column': useTwoColumnsForCustom}"
+        <div
+          v-if="permissionGroup === 'custom'"
+          class="custom-permissions ml-20 mt-10"
+          :class="{'two-column': useTwoColumnsForCustom}"
         >
-          <Checkbox
-            v-for="permission in customPermissions"
-            :key="permission.key"
-            v-model="permission.value"
-            class="mb-5"
-            :label="permission.label"
+          <Checkbox
+            v-for="permission in customPermissions"
+            :key="permission.key"
+            v-model="permission.value"
+            class="mb-5"
+            :label="permission.label"
           />
         </div>
       </template>

package/components/form/Members/MembershipEditor.vue

@@ -138,9 +138,9 @@ export default {
   methods: {
     addMember() {
       this.$store.dispatch('cluster/promptModal', {
-        component:   this.addMemberDialogName,
-        resources:   [this.onAddMember],
-        modalSticky: this.modalSticky
+        component:      this.addMemberDialogName,
+        componentProps: { onAdd: this.onAddMember },
+        modalSticky:    this.modalSticky
       });
     },
 
@@ -173,9 +173,9 @@ export default {
     <template #columns="{row}">
       <div class="columns row">
         <div class="col span-6">
-          <Principal
-            :key="row.value.principalId"
-            :value="row.value.principalId"
+          <Principal
+            :key="row.value.principalId"
+            :value="row.value.principalId"
           />
         </div>
         <div class="col span-6 role">
@@ -194,12 +194,12 @@ export default {
     </template>
     <template #remove-button="{remove, i}">
       <span v-if="(isCreate && i === 0) || isView" />
-      <button
-        v-else
-        type="button"
-        :disabled="isView"
-        class="btn role-link"
-        @click="remove"
+      <button
+        v-else
+        type="button"
+        :disabled="isView"
+        class="btn role-link"
+        @click="remove"
       >
         {{ t('generic.remove') }}
       </button>

package/components/form/NameNsDescription.vue

@@ -405,7 +405,7 @@ export default {
       >
         <i
           v-tooltip="t('generic.cancel')"
-          class="icon icon-lg icon-close align-value"
+          class="icon icon-close align-value"
         />
       </button>
     </div>

package/components/form/NodeScheduling.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import NodeAffinity from '@shell/components/form/NodeAffinity';
-import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 import { HOSTNAME } from '@shell/config/labels-annotations';

package/components/form/Probe.vue

@@ -285,10 +285,10 @@ export default {
           >
             <UnitInput
               v-model="probe.timeoutSeconds"
+              min="0"
               :mode="mode"
               :suffix="t('suffix.sec')"
-              :label="t('probe.timeout.placeholder')"
-              min="0"
+              :label="t('probe.timeout.label')"
               :placeholder="t('probe.timeout.placeholder')"
               @input="update"
             />
@@ -322,7 +322,7 @@ export default {
               min="1"
               :mode="mode"
               :label="t('probe.failureThreshold.label')"
-              :placeholder="t('probe.failureThreshold.label')"
+              :placeholder="t('probe.failureThreshold.placeholder')"
               @input="update"
             />
           </div>

package/components/form/ResourceQuota/Project.vue

@@ -72,12 +72,12 @@ export default {
       @remove="emitRemove"
     >
       <template #columns="props">
-        <Row
-          v-model="value"
-          :mode="mode"
-          :types="remainingTypes(typeValues[props.i])"
-          :type="typeValues[props.i]"
-          @type-change="updateType(props.i, $event)"
+        <Row
+          v-model="value"
+          :mode="mode"
+          :types="remainingTypes(typeValues[props.i])"
+          :type="typeValues[props.i]"
+          @type-change="updateType(props.i, $event)"
         />
       </template>
     </ArrayList>

package/components/form/ResourceTabs/index.vue

@@ -58,11 +58,6 @@ export default {
     needRelated: {
       type:    Boolean,
       default: true
-    },
-
-    alwaysShowEvents: {
-      type:    Boolean,
-      default: false
     }
   },
 
@@ -92,7 +87,7 @@ export default {
       return false;
     },
     showEvents() {
-      return this.isView && this.needEvents && this.hasEvents && (this.events.length || this.alwaysShowEvents);
+      return this.isView && this.needEvents && this.hasEvents;
     },
     showRelated() {
       return this.isView && this.needRelated;

package/components/form/Security.vue

@@ -63,10 +63,10 @@ export default {
 
     const {
       capabilities = {},
-      runAsRoot = true,
+      runAsNonRoot = false,
       readOnlyRootFilesystem = false,
       privileged = false,
-      allowPrivilegeEscalation = true,
+      allowPrivilegeEscalation = false,
       runAsUser
     } = this.value;
     const {
@@ -78,7 +78,7 @@ export default {
       privileged,
       allowPrivilegeEscalation,
       allCapabilities,
-      runAsRoot,
+      runAsNonRoot,
       readOnlyRootFilesystem,
       add,
       drop,
@@ -105,7 +105,7 @@ export default {
   methods: {
     update() {
       const securityContext = {
-        runAsRoot:                this.runAsRoot,
+        runAsNonRoot:             this.runAsNonRoot,
         readOnlyRootFilesystem:   this.readOnlyRootFilesystem,
         capabilities:             { add: this.add, drop: this.drop },
         privileged:               this.privileged,
@@ -115,6 +115,7 @@ export default {
 
       this.$emit('input', securityContext);
     }
+
   }
 };
 </script>
@@ -164,13 +165,13 @@ export default {
           class="col span-6"
         >
           <RadioGroup
+            v-model="runAsNonRoot"
             name="runasNonRoot"
             :label="t('workload.container.security.runAsNonRoot.label')"
-            :value="!runAsRoot"
             :options="[false, true]"
             :labels="[t('workload.container.security.runAsNonRoot.false'), t('workload.container.security.runAsNonRoot.true')]"
             :mode="mode"
-            @input="e=>{runAsRoot = !e; update()}"
+            @input="update"
           />
         </div>
         <div

package/components/form/Select.vue

@@ -135,7 +135,7 @@ export default {
       return true;
     },
     getOptionKey(opt) {
-      if (opt.optionKey) {
+      if (opt?.optionKey) {
         return get(opt, opt.optionKey);
       }
 
@@ -279,9 +279,10 @@ export default {
 
     ::v-deep .vs__selected-options {
       display: flex;
+      margin: 3px;
 
       .vs__selected {
-          width: 100%;
+          width: initial;
       }
     }
 

package/components/form/SelectOrCreateAuthSecret.vue

@@ -1,6 +1,5 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
-import Loading from '@shell/components/Loading';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
@@ -13,7 +12,6 @@ export default {
   name: 'SelectOrCreateAuthSecret',
 
   components: {
-    Loading,
     LabeledInput,
     LabeledSelect,
   },
@@ -131,8 +129,6 @@ export default {
       } else {
         this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
       }
-    } else {
-      this.allSecrets = [];
     }
 
     if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
@@ -170,10 +166,10 @@ export default {
     this.update();
   },
 
-  data() {
+  data(props) {
     return {
-      allCloudCreds: null,
-      allSecrets:    null,
+      allCloudCreds: [],
+      allSecrets:    [],
       selected:      null,
 
       publicKey:  '',
@@ -279,11 +275,26 @@ export default {
           disabled: true
         });
       }
+      if ( this.allowNone ) {
+        out.unshift({
+          label: this.t('generic.none'),
+          value: AUTH_TYPE._NONE,
+        });
+      }
+
+      if (this.allowSsh || this.allowS3 || this.allowBasic) {
+        out.unshift({
+          label:    'divider',
+          disabled: true,
+          kind:     'divider'
+        });
+      }
 
       if ( this.allowSsh ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createSsh'),
           value: AUTH_TYPE._SSH,
+          kind:  'highlighted'
         });
       }
 
@@ -291,6 +302,7 @@ export default {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createS3'),
           value: AUTH_TYPE._S3,
+          kind:  'highlighted'
         });
       }
 
@@ -298,13 +310,7 @@ export default {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createBasic'),
           value: AUTH_TYPE._BASIC,
-        });
-      }
-
-      if ( this.allowNone ) {
-        out.unshift({
-          label: this.t('generic.none'),
-          value: AUTH_TYPE._NONE,
+          kind:  'highlighted'
         });
       }
 
@@ -455,9 +461,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
   <div
-    v-else
     class="select-or-create-auth-secret"
   >
     <div
@@ -469,21 +473,10 @@ export default {
           v-model="selected"
           :mode="mode"
           :label-key="labelKey"
+          :loading="$fetchState.pending"
           :options="options"
           :selectable="option => !option.disabled"
-        >
-          <template v-slot:option="opt">
-            <template v-if="opt.kind === 'divider'">
-              <hr>
-            </template>
-            <template v-else-if="opt.kind === 'title'">
-              {{ opt.label }}
-            </template>
-            <template v-else>
-              {{ opt.label }}
-            </template>
-          </template>
-        </LabeledSelect>
+        />
       </div>
       <template v-if="selected === _SSH">
         <div :class="moreCols">

package/components/form/ServicePorts.vue

@@ -136,6 +136,10 @@ export default {
         </span>
         <span class="port">
           <t k="servicePorts.rules.listening.label" />
+          <i
+            v-tooltip="t('servicesPage.listeningPorts')"
+            class="icon icon-info flex"
+          />
           <span class="text-error">*</span>
         </span>
         <span
@@ -146,6 +150,10 @@ export default {
         </span>
         <span class="target-port">
           <t k="servicePorts.rules.target.label" />
+          <i
+            v-tooltip="t('servicesPage.targetPorts')"
+            class="icon icon-info flex"
+          />
           <span class="text-error">*</span>
 
         </span>

package/components/form/WorkloadPorts.vue

@@ -8,7 +8,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { CAPI, SERVICE } from '@shell/config/types';
 
 export default {
@@ -259,6 +259,12 @@ export default {
 
 <template>
   <div :style="{'width':'100%'}">
+    <p
+      v-if="rows.length > 0"
+      class="padded"
+    >
+      {{ t('workload.container.ports.detailedDescription') }}
+    </p>
     <div
       v-for="(row, idx) in rows"
       :key="idx"

package/components/form/__tests__/ArrayList.test.ts

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+describe('the ArrayList', () => {
+  it('is empty', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: [],
+        mode:  _EDIT
+      },
+    });
+    const elements = wrapper.findAll('[data-testid^="array-list-box"]');
+
+    expect(elements).toHaveLength(0);
+  });
+
+  it('shows an initial empty row', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value:           [],
+        mode:            _EDIT,
+        initialEmptyRow: true
+      },
+    });
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(1);
+  });
+
+  it('expands when the add button is clicked', async() => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: [],
+        mode:  _EDIT,
+      },
+    });
+
+    const arrayListButton = wrapper.find('[data-testid="array-list-button"]').element as HTMLElement;
+
+    await arrayListButton.click();
+    await arrayListButton.click();
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(2);
+  });
+
+  it('contracts when a delete button is clicked', async() => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: ['string 1', 'string 2'],
+        mode:  _EDIT,
+      },
+    });
+    const deleteButton = wrapper.get('[data-testid^="remove-item"]').element as HTMLElement;
+
+    await deleteButton.click();
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(1);
+  });
+
+  it('add button is hidden in read-only mode', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: ['read-only example'],
+        mode:  _VIEW,
+      },
+    });
+    const arrayListButtons = wrapper.findAll('[data-testid="array-list-button"]');
+
+    expect(arrayListButtons).toHaveLength(0);
+  });
+});

package/components/form/__tests__/ArrayListGrouped.test.ts

@@ -4,7 +4,7 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
 describe('component: ArrayListGrouped', () => {
   it('should display enabled add button', () => {
     const wrapper = mount(ArrayListGrouped);
-    const button = wrapper.find('[data-testid^="add-item"]').element as HTMLInputElement;
+    const button = wrapper.find('[data-testid="array-list-button"]').element as HTMLButtonElement;
 
     expect(button.disabled).toBe(false);
   });
@@ -14,7 +14,7 @@ describe('component: ArrayListGrouped', () => {
       mocks: { propsData: { value: ['a', 'b'] } },
       slots: { default: '<div id="test"/>' }
     });
-    const button = wrapper.find('[data-testid^="add-item"]');
+    const button = wrapper.find('[data-testid^="array-list-button"]');
 
     await button.trigger('click');
     await button.trigger('click');
@@ -28,12 +28,14 @@ describe('component: ArrayListGrouped', () => {
       mocks: { propsData: { value: ['a', 'b'] } },
       slots: { default: '<div id="test"/>' }
     });
+    const button = wrapper.find('[data-testid^="array-list-button"]');
 
-    await wrapper.find('[data-testid^="add-item"]').trigger('click');
+    await button.trigger('click');
+    await button.trigger('click');
     await wrapper.find('[data-testid^="remove-item"]').trigger('click');
 
     const elements = wrapper.findAll('#test');
 
-    expect(elements).toHaveLength(0);
+    expect(elements).toHaveLength(1);
   });
 });

package/components/formatter/Checked.vue

@@ -12,7 +12,7 @@ export default {
 
 <template>
   <span v-if="value">
-    <i class="icon icon-lg icon-checkmark" />
+    <i class="icon icon-checkmark" />
   </span>
   <span
     v-else

package/components/formatter/ClusterLink.vue

@@ -62,6 +62,11 @@ export default {
       {{ value }}
     </n-link>
     <span v-else>{{ value }}</span>
+    <i
+      v-if="row.unavailableMachines"
+      v-tooltip="row.unavailableMachines"
+      class="conditions-alert-icon icon-alert icon"
+    />
     <i
       v-if="row.rkeTemplateUpgrade"
       v-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"

package/components/formatter/IconIsDefault.vue

@@ -23,12 +23,12 @@ export default {
 <template>
   <span v-if="row[col.value]">
     <span>
-      <i class="icon icon-2x icon-checkmark" />
+      <i class="icon icon-checkmark" />
     </span>
   </span>
   <span v-else>
     <span>
-      <i class="icon icon-2x icon-x" />
+      <i class="icon icon-x" />
     </span>
   </span>
 </template>