@rancher/shell 3.0.0-rc.3 → 3.0.0-rc.5

package/components/form/Probe.vue

@@ -16,6 +16,8 @@ const KINDS = [
 ];
 
 export default {
+  emits: ['update:value'],
+
   components: {
     LabeledInput, LabeledSelect, UnitInput, ShellInput, KeyValue,
   },
@@ -179,7 +181,7 @@ export default {
           data-testid="input-probe-port"
         >
           <LabeledInput
-            v-model.number="httpGet.port"
+            v-model:value.number="httpGet.port"
             type="number"
             min="1"
             max="65535"
@@ -208,7 +210,7 @@ export default {
           data-testid="input-probe-socket"
         >
           <LabeledInput
-            v-model.number="tcpSocket.port"
+            v-model:value.number="tcpSocket.port"
             type="number"
             min="1"
             max="65535"
@@ -303,7 +305,7 @@ export default {
             class="col span-6"
           >
             <LabeledInput
-              v-model.number="probe.successThreshold"
+              v-model:value.number="probe.successThreshold"
               type="number"
               min="1"
               :mode="mode"
@@ -317,7 +319,7 @@ export default {
             class="col span-6"
           >
             <LabeledInput
-              v-model.number="probe.failureThreshold"
+              v-model:value.number="probe.failureThreshold"
               type="number"
               min="1"
               :mode="mode"
@@ -335,6 +337,7 @@ export default {
             <div class="col span-12">
               <KeyValue
                 v-model:value="httpGet.httpHeaders"
+                data-testid="input-probe-http-headers"
                 key-name="name"
                 :mode="mode"
                 :as-map="false"
@@ -343,6 +346,7 @@ export default {
                 :key-label="t('generic.name')"
                 :value-label="t('generic.value')"
                 :add-label="t('generic.add')"
+                @update:value="update"
               >
                 <template #title>
                   <h3>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -6,6 +6,8 @@ import { formatSi, parseSi } from '@shell/utils/units';
 import { ROW_COMPUTED } from './shared';
 
 export default {
+  emits: ['update:value'],
+
   components: {
     Select, PercentageBar, UnitInput
   },

package/components/form/ResourceQuota/Project.vue

@@ -4,6 +4,8 @@ import Row from './ProjectRow';
 import { QUOTA_COMPUTED } from './shared';
 
 export default {
+  emits: ['remove', 'input'],
+
   components: { ArrayList, Row },
 
   props: {

package/components/form/ResourceQuota/ProjectRow.vue

@@ -4,6 +4,8 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { ROW_COMPUTED } from './shared';
 
 export default {
+  emits: ['type-change'],
+
   components: { Select, UnitInput },
 
   props: {

package/components/form/RuleSelector.vue

@@ -12,6 +12,8 @@ const OPERATOR_VALUES = {
 };
 
 export default {
+  emits: ['update:value', 'input'],
+
   components: {
     ArrayList,
     LabeledInput,

package/components/form/SecretSelector.vue

@@ -10,6 +10,7 @@ import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 const NONE = '__[[NONE]]__';
 
 export default {
+  emits:      ['update:value'],
   components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {

package/components/form/Security.vue

@@ -6,6 +6,8 @@ import { mapGetters } from 'vuex';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
+  emits: ['update:value'],
+
   components: {
     RadioGroup,
     LabeledInput,
@@ -48,7 +50,8 @@ export default {
       'SETGID',
       'SETPCAP',
       'SETUID',
-      'SYSLOGSYS_ADMIN',
+      'SYSLOG',
+      'SYS_ADMIN',
       'SYS_BOOT',
       'SYS_CHROOT',
       'SYS_MODULE',
@@ -198,7 +201,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model.number="runAsUser"
+          v-model:value.number="runAsUser"
           :label="t('workload.container.security.runAsUser')"
           :mode="mode"
           @update:value="update"

package/components/form/Select.vue

@@ -6,12 +6,13 @@ import { LabeledTooltip } from '@components/LabeledTooltip';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 
 export default {
+  emits: ['update:value', 'createdListItem'],
+
   components: { LabeledTooltip },
   mixins:     [
     LabeledFormElement,
     VueSelectOverrides,
   ],
-  emits: ['createdListItem', 'on-focus', 'on-blur'],
   props: {
     appendToBody: {
       default: true,

package/components/form/SelectOrCreateAuthSecret.vue

@@ -16,6 +16,8 @@ import {
 export default {
   name: 'SelectOrCreateAuthSecret',
 
+  emits: ['inputauthval', 'update:value'],
+
   components: {
     LabeledInput,
     LabeledSelect,

package/components/form/ServiceNameSelect.vue

@@ -5,6 +5,8 @@ import { Banner } from '@components/Banner';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledSelect, Banner },
 
   mixins: [labeledFormElement],

package/components/form/ServicePorts.vue

@@ -7,6 +7,8 @@ import Select from '@shell/components/form/Select';
 import Error from '@shell/components/form/Error';
 
 export default {
+  emits: ['update:value'],
+
   components: { Select, Error },
   props:      {
     value: {

package/components/form/ShellInput.vue

@@ -2,6 +2,8 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledInput },
 
   props: {

package/components/form/SimpleSecretSelector.vue

@@ -28,6 +28,8 @@ import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 const NONE = '__[[NONE]]__';
 
 export default {
+  emits: ['updateSecretName', 'updateSecretKey'],
+
   components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {

package/components/form/Taints.vue

@@ -10,6 +10,8 @@ const DEFAULT_EFFECT_VALUES = {
 };
 
 export default {
+  emits: ['update:value', 'input'],
+
   components: { KeyValue, Select },
 
   props: {

package/components/form/Tolerations.vue

@@ -7,6 +7,8 @@ import { _VIEW } from '@shell/config/query-params';
 import { random32 } from '@shell/utils/string';
 
 export default {
+  emits: ['update:value'],
+
   components: {
     LabeledInput,
     Select,

package/components/form/ValueFromResource.vue

@@ -6,6 +6,8 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
+  emits: ['update:value', 'remove'],
+
   components: {
     LabeledSelect,
     LabeledInput

package/components/form/WorkloadPorts.vue

@@ -12,6 +12,8 @@ import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { CAPI, SERVICE } from '@shell/config/types';
 
 export default {
+  emits: ['update:value'],
+
   components: {
     LabeledInput,
     LabeledSelect,
@@ -302,7 +304,7 @@ export default {
 
       <div class="port">
         <LabeledInput
-          v-model.number="row.containerPort"
+          v-model:value.number="row.containerPort"
           :mode="mode"
           type="number"
           min="1"
@@ -331,7 +333,7 @@ export default {
       >
         <LabeledInput
           ref="port"
-          v-model.number="row.hostPort"
+          v-model:value.number="row.hostPort"
           :mode="mode"
           type="number"
           min="1"
@@ -373,7 +375,7 @@ export default {
       <div v-if="row._serviceType === 'LoadBalancer' || row._serviceType === 'NodePort'">
         <LabeledInput
           ref="port"
-          v-model.number="row._listeningPort"
+          v-model:value.number="row._listeningPort"
           type="number"
           :mode="mode"
           :label="t('workload.container.ports.listeningPort')"

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

@@ -0,0 +1,28 @@
+import HookOption from '@shell/components/form/HookOption.vue';
+import { _EDIT } from '@shell/config/query-params';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+describe('component: HookOption', () => {
+  it('should render a row  of inputs per http header', async() => {
+    const wrapper = shallowMount(HookOption, { props: { value: { httpGet: {} }, mode: _EDIT } });
+
+    const addButton = wrapper.get('[data-testid="hookoption-add-header-button"]');
+
+    addButton.trigger('click');
+
+    await nextTick();
+
+    let headerRows = wrapper.findAll('[data-testid="hookoption-header-row"]');
+
+    expect(headerRows).toHaveLength(1);
+
+    addButton.trigger('click');
+
+    await nextTick();
+
+    headerRows = wrapper.findAll('[data-testid="hookoption-header-row"]');
+
+    expect(headerRows).toHaveLength(2);
+  });
+});

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

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { defineComponent } from 'vue';
 
 describe('component: LabeledSelect', () => {
   describe('should display correct label', () => {
@@ -135,4 +136,45 @@ describe('component: LabeledSelect', () => {
       });
     });
   });
+
+  describe('given attributes from parent element', () => {
+    it('should not pass classes to the select element', () => {
+      const customClass = 'bananas';
+      const ParentComponent = defineComponent({
+        components: { LabeledSelect },
+        template:   `<LabeledSelect class="${ customClass }" />`,
+      });
+      const wrapper = mount(ParentComponent);
+      const input = wrapper.find('.v-select');
+
+      expect(input.classes).not.toContain(customClass);
+    });
+
+    it.each([
+      [true, ['bananas']],
+      [false, 'bananas'],
+    ])('given multiple as %p, should emit %p', async(multiple, expectation) => {
+      const ParentComponent = defineComponent({
+        components: { LabeledSelect },
+        template:   `
+          <LabeledSelect
+            v-model:value="myValue"
+            :multiple="${ multiple }"
+            :options="options"
+            :appendToBody="false"
+          />`,
+        data: () => ({
+          myValue: [],
+          options: ['bananas']
+        })
+      });
+      const wrapper = mount(ParentComponent);
+
+      // https://test-utils.vuejs.org/guide/essentials/event-handling#Asserting-the-arguments-of-the-event
+      await wrapper.find('input').trigger('focus');
+      await wrapper.find('.vs__dropdown-option').trigger('click');
+
+      expect(wrapper.vm.$data.myValue).toStrictEqual(expectation);
+    });
+  });
 });

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

@@ -59,4 +59,16 @@ describe('component: Probe', () => {
 
     expect(wrapper.emitted('update:value')).toHaveLength(2);
   });
+
+  it('should emit an update when http headers are modified', () => {
+    const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { props: { mode: _EDIT, value: { httpGet: { scheme: 'https' } } } });
+
+    const httpHeaders = wrapper.getComponent('[data-testid="input-probe-http-headers"]');
+
+    httpHeaders.vm.$emit('update:value', [{ name: 'abc', value: 'def' }]);
+
+    expect(wrapper.emitted()?.['update:value']?.[0]?.[0]).toStrictEqual({
+      exec: null, httpGet: { httpHeaders: [{ name: 'abc', value: 'def' }], scheme: 'HTTPS' }, tcpSocket: null
+    });
+  });
 });

package/components/nav/Header.vue

@@ -21,6 +21,7 @@ import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
 import { authProvidersInfo, parseAuthProvidersInfo } from '@shell/utils/auth';
+import HeaderPageActionMenu from './HeaderPageActionMenu.vue';
 
 export default {
 
@@ -35,6 +36,7 @@ export default {
     ClusterProviderIcon,
     IconOrSvg,
     AppModal,
+    HeaderPageActionMenu,
   },
 
   props: {
@@ -72,8 +74,20 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['clusterReady', 'isExplorer', 'isRancher', 'currentCluster',
-      'currentProduct', 'rootProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
+    ...mapGetters([
+      'clusterReady',
+      'isExplorer',
+      'isRancher',
+      'currentCluster',
+      'currentProduct',
+      'rootProduct',
+      'backToRancherLink',
+      'backToRancherGlobalLink',
+      'pageActions',
+      'isSingleProduct',
+      'isRancherInHarvester',
+      'showTopLevelMenu'
+    ]),
 
     authProviderEnabled() {
       const authProviders = this.$store.getters['management/all'](MANAGEMENT.AUTH_CONFIG);
@@ -294,14 +308,6 @@ export default {
       this.showSearchModal = false;
     },
 
-    showPageActionsMenu(show) {
-      this.isPageActionMenuOpen = show;
-    },
-
-    pageAction(action) {
-      this.$store.dispatch('handlePageAction', action);
-    },
-
     checkClusterName() {
       this.$nextTick(() => {
         const el = this.$refs.clusterName;
@@ -610,57 +616,7 @@ export default {
         </button>
       </div>
 
-      <div
-        v-if="showPageActions"
-        id="page-actions"
-        class="actions"
-      >
-        <i
-          data-testid="page-actions-menu"
-          class="icon icon-actions"
-          tabindex="0"
-          @blur="showPageActionsMenu(false)"
-          @click="showPageActionsMenu(true)"
-          @focus.capture="showPageActionsMenu(true)"
-        />
-        <v-dropdown
-          :triggers="[]"
-          :shown="isPageActionMenuOpen"
-          :autoHide="false"
-          :flip="false"
-          :content="false"
-          :placement="'bottom-end'"
-          :distance="14"
-          :container="'#page-actions'"
-        >
-          <template #popper>
-            <div class="user-menu">
-              <ul
-                data-testid="page-actions-dropdown"
-                class="list-unstyled dropdown"
-                @click.stop="showPageActionsMenu(false)"
-              >
-                <li
-                  v-for="(a, i) in pageActions"
-                  :key="i"
-                  class="user-menu-item"
-                >
-                  <a
-                    v-if="!a.separator"
-                    @click="pageAction(a)"
-                  >{{ a.labelKey ? t(a.labelKey) : a.label }}</a>
-                  <div
-                    v-else
-                    class="menu-separator"
-                  >
-                    <div class="menu-separator-line" />
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </template>
-        </v-dropdown>
-      </div>
+      <header-page-action-menu v-if="showPageActions" />
 
       <div class="header-spacer" />
       <div
@@ -1002,7 +958,7 @@ export default {
         }
       }
 
-      .actions {
+      :deep(.actions) {
         align-items: center;
         cursor: pointer;
         display: flex;
@@ -1014,6 +970,14 @@ export default {
             color: var(--link);
           }
         }
+
+        :deep(.v-popper:focus) {
+          outline: 0;
+        }
+
+        .dropdown {
+          margin: 0 -10px;
+        }
       }
 
       .header-spacer {
@@ -1113,70 +1077,4 @@ export default {
     color: var(--secondary);
   }
 
-  #page-actions {
-    :deep() .v-popper__arrow-container {
-      display: none;
-    }
-  }
-
-  .user-menu {
-    :deep() .v-popper__arrow-container {
-      display: none;
-    }
-    // Remove the default padding on the popup so that the hover on menu items goes full width of the menu
-    :deep() .v-popper__inner {
-      padding: 0 0 10px 0;
-    }
-
-    :deep() .v-popper {
-      display: flex;
-    }
-  }
-
-  .actions {
-    :deep() .v-popper:focus {
-      outline: 0;
-    }
-
-    .dropdown {
-      margin: 0 -10px;
-    }
-  }
-
-  .user-menu-item {
-    a, &.no-link > span {
-      cursor: pointer;
-      padding: 0px 10px;
-
-      &:hover {
-        background-color: var(--dropdown-hover-bg);
-        color: var(--dropdown-hover-text);
-        text-decoration: none;
-      }
-
-      // When the menu item is focused, pop the margin and compensate the padding, so that
-      // the focus border appears within the menu
-      &:focus {
-        margin: 0 2px;
-        padding: 10px 8px;
-      }
-    }
-
-    &.no-link > span {
-      display: flex;
-      justify-content: space-between;
-      padding: 10px;
-      color: var(--link);
-    }
-
-    div.menu-separator {
-      cursor: default;
-      padding: 4px 0;
-
-      .menu-separator-line {
-        background-color: var(--border);
-        height: 1px;
-      }
-    }
-  }
 </style>