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

package/components/SortableTable/index.vue

@@ -22,6 +22,7 @@ import AdvancedFiltering from './advanced-filtering';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { getParent } from '@shell/utils/dom';
 import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
+import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -39,9 +40,17 @@ import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 // --> index.vue displayedRows
 
 export default {
-  name:       'SortableTable',
+  name: 'SortableTable',
+
+  emits: ['clickedActionButton', 'pagination-changed', 'group-value-change', 'selection', 'rowClick'],
+
   components: {
-    THead, Checkbox, AsyncButton, ActionDropdown, LabeledSelect
+    THead,
+    Checkbox,
+    AsyncButton,
+    ActionDropdown,
+    LabeledSelect,
+    ButtonMultiAction,
   },
   mixins: [
     filtering,
@@ -1412,18 +1421,15 @@ export default {
                     name="row-actions"
                     :row="row.row"
                   >
-                    <button
+                    <ButtonMultiAction
                       :id="`actionButton+${i}+${(row.row && row.row.name) ? row.row.name : ''}`"
                       :ref="`actionButton${i}`"
-                      :data-testid="componentTestid + '-' + i + '-action-button'"
                       aria-haspopup="true"
                       aria-expanded="false"
-                      type="button"
-                      class="btn btn-sm role-multi-action actions"
+                      :data-testid="componentTestid + '-' + i + '-action-button'"
+                      :borderless="true"
                       @click="handleActionButtonClick(i, $event)"
-                    >
-                      <i class="icon icon-actions" />
-                    </button>
+                    />
                   </slot>
                 </td>
               </tr>
@@ -1658,17 +1664,7 @@ export default {
     }
   }
 
-  // Remove colors from multi-action buttons in the table
   td {
-    .actions.role-multi-action {
-      background-color: transparent;
-      border: none;
-      &:hover, &:focus {
-        background-color: var(--accent-btn);
-        box-shadow: none;
-      }
-    }
-
     // Aligns with COLUMN_BREAKPOINTS
     @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) {
       // HIDE column on sizes below 480px

package/components/StatusTable.vue

@@ -6,6 +6,8 @@ import SortableTable from '@shell/components/SortableTable';
 import { copyTextToClipboard } from '@shell/utils/clipboard';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
+  emits: ['error'],
+
   components: { SortableTable },
   props:      {
     resource: {

package/components/Tabbed/Tab.vue

@@ -2,6 +2,8 @@
 export default {
   inject: ['addTab', 'removeTab', 'sideTabs'],
 
+  emits: ['active'],
+
   props: {
     label: {
       default: null,

package/components/Tabbed/index.vue

@@ -8,6 +8,8 @@ import findIndex from 'lodash/findIndex';
 export default {
   name: 'Tabbed',
 
+  emits: ['changed', 'addTab', 'removeTab'],
+
   props: {
     defaultTab: {
       type:    String,

package/components/Wizard.vue

@@ -23,6 +23,8 @@ Wizard will emit these events:
 export default {
   name: 'Wizard',
 
+  emits: ['next', 'cancel', 'finish'],
+
   components: {
     AsyncButton,
     Banner,

package/components/YamlEditor.vue

@@ -13,6 +13,8 @@ export const EDITOR_MODES = {
 };
 
 export default {
+  emits: ['update:value', 'newObject', 'onInput', 'onReady', 'onChanges'],
+
   components: {
     CodeMirror,
     FileDiff

package/components/__tests__/ButtonMultiAction.test.ts

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
+
+describe('buttonMultiAction.vue', () => {
+  it('renders correct classes when props are provided', () => {
+    const wrapper = shallowMount(ButtonMultiAction, {
+      props: {
+        borderless: true,
+        invisible:  true,
+      },
+    });
+
+    expect(wrapper.find('button').classes()).toContain('borderless');
+    expect(wrapper.find('button').classes()).toContain('invisible');
+  });
+
+  it('renders correct classes when props are absent', () => {
+    const wrapper = shallowMount(ButtonMultiAction);
+
+    expect(wrapper.find('button').classes()).not.toContain('borderless');
+    expect(wrapper.find('button').classes()).not.toContain('invisible');
+  });
+
+  it('emits click event when button is clicked', () => {
+    const wrapper = shallowMount(ButtonMultiAction);
+
+    wrapper.find('button').trigger('click');
+
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+});

package/components/auth/RoleDetailEdit.vue

@@ -53,6 +53,8 @@ const RBAC_ROLE = SUBTYPE_MAPPING.RBAC_ROLE.key;
  *   - Should show only namespace scoped resources
  */
 export default {
+  emits: ['set-subtype', 'input'],
+
   components: {
     ArrayList,
     CruResource,

package/components/auth/SelectPrincipal.vue

@@ -6,6 +6,8 @@ import { _EDIT } from '@shell/config/query-params';
 import { NORMAN } from '@shell/config/types';
 
 export default {
+  emits: ['add'],
+
   components: {
     LabeledSelect,
     Principal,

package/components/auth/login/ldap.vue

@@ -4,6 +4,8 @@ import AsyncButton from '@shell/components/AsyncButton';
 import Login from '@shell/mixins/login';
 
 export default {
+  emits: ['error', 'showInputs'],
+
   components: { LabeledInput, AsyncButton },
   mixins:     [Login],
 

package/components/form/ArrayList.vue

@@ -8,6 +8,8 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 const DEFAULT_PROTIP = 'Tip: Paste lines into any list field for easy bulk entry';
 
 export default {
+  emits: ['add', 'remove', 'update:value'],
+
   components: { TextAreaAutoGrow, LabeledInput },
   props:      {
     value: {
@@ -78,6 +80,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    required: {
+      type:    Boolean,
+      default: false
+    },
     rules: {
       default:   () => [],
       type:      Array,
@@ -228,6 +234,10 @@ export default {
       <slot name="title">
         <h3>
           {{ title }}
+          <span
+            v-if="required"
+            class="required"
+          >*</span>
           <i
             v-if="showProtip"
             v-clean-tooltip="protip"
@@ -367,6 +377,11 @@ export default {
   .title {
     margin-bottom: 10px;
   }
+
+  .required {
+    color: var(--error);
+  }
+
   .box {
     display: grid;
     grid-template-columns: auto $array-list-remove-margin;
@@ -375,7 +390,7 @@ export default {
     .value {
       flex: 1;
       INPUT {
-        height: $input-height;
+        height: $unlabeled-input-height;
       }
     }
   }

package/components/form/ArrayListSelect.vue

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

package/components/form/ChangePassword.vue

@@ -11,6 +11,8 @@ import { _CREATE, _EDIT } from '@shell/config/query-params';
 // 2) isCreate - New password is for a new user
 // 3) isEdit - New password is for an existing user
 export default {
+  emits: ['valid', 'update:value'],
+
   components: {
     Checkbox, Banner, Password
   },

package/components/form/ColorInput.vue

@@ -2,6 +2,8 @@
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default {
+  emits: ['update:value'],
+
   props: {
     value: {
       type:    String,

package/components/form/Command.vue

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

package/components/form/FileImageSelector.vue

@@ -4,6 +4,8 @@ import FileSelector from '@shell/components/form/FileSelector';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
+  emits: ['update:value', 'error'],
+
   components: { FileSelector, LazyImage },
   props:      {
     value: {

package/components/form/FileSelector.vue

@@ -9,6 +9,8 @@ export function createOnSelected(field) {
 }
 
 export default {
+  emits: ['error', 'selected'],
+
   props: {
     label: {
       type:     String,

package/components/form/Footer.vue

@@ -5,6 +5,8 @@ import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.
 import Banner from '@components/Banner/Banner.vue';
 
 export default defineComponent({
+  emits: ['save', 'done'],
+
   components: { AsyncButton, Banner },
 
   props: {

package/components/form/GitPicker.vue

@@ -57,6 +57,7 @@ const provideProps: NonReactiveProps = {
 };
 
 export default defineComponent({
+  emits: ['change'],
 
   components: {
     LabeledSelect,

package/components/form/HealthCheck.vue

@@ -3,6 +3,8 @@ import Probe from '@shell/components/form/Probe';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
+  emits: ['update:value'],
+
   components: { Probe },
   props:      {
     value: {
@@ -50,7 +52,7 @@ export default {
           :mode="mode"
           :label="t('workload.container.healthCheck.readinessProbe')"
           :description="t('workload.container.healthCheck.readinessTip')"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -64,7 +66,7 @@ export default {
           :mode="mode"
           :label="t('workload.container.healthCheck.livenessProbe')"
           :description="t('workload.container.healthCheck.livenessTip')"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -77,7 +79,7 @@ export default {
         :mode="mode"
         :label="t('workload.container.healthCheck.startupProbe')"
         :description="t('workload.container.healthCheck.startupTip')"
-        @input="update"
+        @update:value="update"
       />
     </div>
   </div>

package/components/form/HookOption.vue

@@ -8,6 +8,8 @@ import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 
 export default {
+  emits: ['update:value'],
+
   props: {
     mode: {
       type:     String,
@@ -162,7 +164,7 @@ export default {
             :mode="mode"
           />
           <LabeledInput
-            v-model.number="value.httpGet.port"
+            v-model:value.number="value.httpGet.port"
             type="number"
             :label="t('workload.container.lifecycleHook.httpGet.port.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.port.placeholder')"
@@ -184,24 +186,25 @@ export default {
         v-for="(header, index) in value.httpGet.httpHeaders"
         :key="index"
         class="var-row"
+        data-testid="hookoption-header-row"
       >
-        <template @update:value="update">
-          <LabeledInput
-            v-model:value="value.httpGet.httpHeaders[index].name"
-            :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
-            :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
-            class="single-value"
-            :mode="mode"
-            required
-          />
-          <LabeledInput
-            v-model:value="value.httpGet.httpHeaders[index].value"
-            :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
-            :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
-            class="single-value"
-            :mode="mode"
-          />
-        </template>
+        <LabeledInput
+          v-model:value="value.httpGet.httpHeaders[index].name"
+          :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
+          :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
+          class="single-value"
+          :mode="mode"
+          required
+          @update:value="update"
+        />
+        <LabeledInput
+          v-model:value="value.httpGet.httpHeaders[index].value"
+          :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
+          :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
+          class="single-value"
+          :mode="mode"
+          @update:value="update"
+        />
         <div class="remove">
           <button
             v-if="!isView"
@@ -221,6 +224,7 @@ export default {
           type="button"
           class="btn role-link mb-20"
           :disabled="mode === 'view'"
+          data-testid="hookoption-add-header-button"
           @click.stop="addHeader"
         >
           Add Header

package/components/form/InputWithSelect.vue

@@ -5,6 +5,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Select from '@shell/components/form/Select';
 export default {
   name:       'InputWithSelect',
+  emits:      ['update:value'],
   components: {
     LabeledInput,
     LabeledSelect,
@@ -126,7 +127,6 @@ export default {
   <div
     :class="{ 'select-after': !selectBeforeText }"
     class="input-container row"
-    @update:value="change"
   >
     <LabeledSelect
       v-if="selectLabel"
@@ -176,6 +176,7 @@ export default {
       :mode="mode"
       :rules="textRules"
       v-bind="$attrs"
+      @update:value="change"
     >
       <template #label>
         <slot name="label" />
@@ -192,6 +193,7 @@ export default {
       :disabled="isView"
       :placeholder="placeholder"
       autocomplete="off"
+      @input="change"
     >
   </div>
 </template>

package/components/form/KeyValue.vue

@@ -16,6 +16,8 @@ import isEqual from 'lodash/isEqual';
 export default {
   name: 'KeyValue',
 
+  emits: ['focusKey', 'update:value'],
+
   components: {
     CodeMirror,
     Select,

package/components/form/LabeledSelect.vue

@@ -23,7 +23,7 @@ export default {
     LabeledSelectPagination
   ],
 
-  emits: ['on-open', 'on-close', 'selecting', 'update:validation'],
+  emits: ['on-open', 'on-close', 'selecting', 'update:validation', 'update:value'],
 
   props: {
     appendToBody: {
@@ -134,7 +134,17 @@ export default {
     _options() {
       // If we're paginated show the page as provided by `paginate`. See label-select-pagination mixin
       return this.canPaginate ? this.page : this.options;
-    }
+    },
+
+    filteredAttrs() {
+      const {
+        class: _class,
+        taggable,
+        ...rest
+      } = this.$attrs;
+
+      return rest;
+    },
   },
 
   methods: {
@@ -285,7 +295,7 @@ export default {
     </div>
     <v-select
       ref="select-input"
-      v-bind="$attrs"
+      v-bind="filteredAttrs"
       class="inline"
       :append-to-body="appendToBody"
       :calculate-position="positionDropdown"

package/components/form/LifecycleHooks.vue

@@ -4,6 +4,8 @@ import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 
 export default {
+  emits: ['update:value'],
+
   components: { HookOption },
 
   props: {

package/components/form/MatchExpressions.vue

@@ -8,6 +8,8 @@ import { convert, simplify } from '@shell/utils/selector';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
+  emits: ['update:value', 'remove'],
+
   components: { Select, LabeledSelect },
   props:      {
     // Array of actual match expressions

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -16,6 +16,8 @@ export function canViewClusterPermissionsEditor(store) {
 }
 
 export default {
+  emits: ['update:value'],
+
   components: {
     Card,
     Checkbox,

package/components/form/Members/MembershipEditor.vue

@@ -16,6 +16,8 @@ export function canViewMembershipEditor(store, needsProject = false) {
 }
 
 export default {
+  emits: ['membership-update'],
+
   components: { ArrayList, Loading },
 
   props: {

package/components/form/NameNsDescription.vue

@@ -10,7 +10,10 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { normalizeName } from '@shell/utils/kube';
 
 export default {
-  name:       'NameNsDescription',
+  name: 'NameNsDescription',
+
+  emits: ['update:value', 'isNamespaceNew'],
+
   components: {
     LabeledInput,
     LabeledSelect,

package/components/form/Networking.vue

@@ -9,6 +9,8 @@ const CLUSTER_FIRST = 'ClusterFirst';
 const CLUSTER_FIRST_HOST = 'ClusterFirstWithHostNet';
 
 export default {
+  emits: ['update:value'],
+
   components: {
     ArrayList, KeyValue, LabeledInput, LabeledSelect
   },

package/components/form/NodeAffinity.vue

@@ -11,6 +11,8 @@ import { randomStr } from '@shell/utils/string';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 
 export default {
+  emits: ['update:value'],
+
   components: {
     ArrayListGrouped, MatchExpressions, LabeledSelect, LabeledInput
   },
@@ -216,7 +218,7 @@ export default {
               class="col span-3"
             >
               <LabeledInput
-                v-model.number="props.row.value.weight"
+                v-model:value.number="props.row.value.weight"
                 :mode="mode"
                 type="number"
                 min="1"
@@ -224,6 +226,7 @@ export default {
                 :label="t('workload.scheduling.affinity.weight.label')"
                 :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
                 :data-testid="`node-affinity-weight-index${props.i}`"
+                @update:value="update"
               />
             </div>
           </div>

package/components/form/Password.vue

@@ -5,6 +5,8 @@ import { CHARSET, randomStr } from '@shell/utils/string';
 import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
+  emits: ['update:value', 'blur'],
+
   components: { LabeledInput },
   props:      {
     value: {

package/components/form/PlusMinus.vue

@@ -1,5 +1,7 @@
 <script>
 export default {
+  emits: ['minus', 'plus'],
+
   props: {
     value: {
       type:     Number,

package/components/form/PodAffinity.vue

@@ -20,6 +20,8 @@ const NAMESPACE_SELECTION_OPTION_VALUES = {
 };
 
 export default {
+  emits: ['update'],
+
   components: {
     ArrayListGrouped, MatchExpressions, LabeledSelect, RadioGroup, LabeledInput
   },
@@ -470,7 +472,7 @@ export default {
               class="col span-3"
             >
               <LabeledInput
-                v-model.number="props.row.value.weight"
+                v-model:value.number="props.row.value.weight"
                 :mode="mode"
                 type="number"
                 min="1"
@@ -478,6 +480,7 @@ export default {
                 :label="t('workload.scheduling.affinity.weight.label')"
                 :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
                 :data-testid="`pod-affinity-weight-index${props.i}`"
+                @update:value="update"
               />
             </div>
           </div>

package/components/form/Ports.vue

@@ -6,6 +6,8 @@ import { clone } from '@shell/utils/object';
 import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
+  emits: ['update:value'],
+
   components: { Checkbox },
   props:      {
     value: {