Merge pull request #17355 from rak-phillip/task/labeled-select-composable

Migrate components off the LabeledFormElement mixin

Author: rak-phillip

shell/chart/__tests__/S3.test.ts

@@ -3,7 +3,7 @@ import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 
 import S3 from '@shell/chart/rancher-backup/S3';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 
 describe('rancher-backup: S3', () => {
   const mockStore = {
@@ -16,8 +16,15 @@ describe('rancher-backup: S3', () => {
     }
   };
   const wrapper = mount(S3, {
-    plugins: [Vuex],
-    global:  { mocks: { $store: mockStore, $fetchState: { pending: false } } }
+    global:  { mocks: { $store: mockStore, $fetchState: { pending: false } } },
+    provide: {
+      store: createStore({
+        getters: {
+          'cluster/paginationEnabled': () => () => false,
+          currentStore:                () => 'cluster'
+        }
+      })
+    },
   });
 
   it('should emit invalid when form is not filled', () => {

shell/components/form/InputWithSelect.vue

@@ -1,18 +1,22 @@
 <script>
-import labeledFormElement from '@shell/mixins/labeled-form-element';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Select from '@shell/components/form/Select';
+import { computed } from 'vue';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
+
 export default {
-  name:       'InputWithSelect',
+  name: 'InputWithSelect',
+
+  inheritAttrs: false,
+
   emits:      ['update:value'],
   components: {
     LabeledInput,
     LabeledSelect,
     Select,
   },
-  mixins: [labeledFormElement],
-  props:  {
+  props: {
     disabled: {
       type:    Boolean,
       default: false,
@@ -84,23 +88,27 @@ export default {
     selectRules: {
       default: () => [],
       type:    Array,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
     }
 
   },
 
+  setup(props) {
+    const isView = computed(() => props.mode === _VIEW);
+
+    return { isView };
+  },
+
   data() {
     return {
       selected: this.selectValue || this.options[0].value,
       string:   this.textValue,
     };
   },
 
-  computed: {
-    canPaginate() {
-      return false;
-    }
-  },
-
   methods: {
     focus() {
       const comp = this.$refs.text;

shell/components/form/LabeledSelect.vue

@@ -1,16 +1,17 @@
 <script>
 import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { calculatePosition } from '@shell/utils/select';
 import { generateRandomAlphaString } from '@shell/utils/string';
-import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
+import { useLabeledSelectPagination, labeledSelectPaginationProps } from '@shell/components/form/labeled-select-utils/useLabeledSelectPagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 import { mapGetters } from 'vuex';
 import { _VIEW } from '@shell/config/query-params';
 import { useClickOutside } from '@shell/composables/useClickOutside';
+import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
+import { useLabeledSelect } from '@shell/composables/useLabeledSelect';
 import { ref } from 'vue';
 
 export default {
@@ -21,14 +22,18 @@ export default {
   components: { LabeledTooltip },
   mixins:     [
     CompactInput,
-    LabeledFormElement,
     VueSelectOverrides,
-    LabeledSelectPagination
   ],
 
-  emits: ['on-open', 'on-close', 'selecting', 'deselecting', 'search', 'update:validation', 'update:value'],
+  emits: ['on-open', 'on-close', 'on-focus', 'on-blur', 'selecting', 'deselecting', 'search', 'update:validation', 'update:value'],
 
   props: {
+    ...labeledFormElementProps,
+    ...labeledSelectPaginationProps,
+    value: {
+      default: null,
+      type:    [String, Object, Number, Array, Boolean]
+    },
     appendToBody: {
       default: true,
       type:    Boolean,
@@ -37,14 +42,6 @@ export default {
       default: false,
       type:    Boolean
     },
-    disabled: {
-      default: false,
-      type:    Boolean
-    },
-    required: {
-      default: false,
-      type:    Boolean
-    },
     hoverTooltip: {
       default: true,
       type:    Boolean
@@ -99,14 +96,18 @@ export default {
       default: null,
       type:    [String, Object]
     },
-    value: {
-      default: null,
-      type:    [String, Object, Number, Array, Boolean]
-    },
     options: {
       type:    Array,
       default: () => ([])
     },
+    searchable: {
+      default: false,
+      type:    Boolean
+    },
+    filterable: {
+      default: true,
+      type:    Boolean
+    },
     closeOnSelect: {
       type:    Boolean,
       default: true
@@ -117,15 +118,75 @@ export default {
     }
   },
 
-  setup() {
+  setup(props, { emit }) {
     const select = ref(null);
     const isOpen = ref(false);
 
     useClickOutside(select, () => {
       isOpen.value = false;
     });
 
-    return { isOpen, select };
+    const {
+      raised,
+      focused,
+      blurred,
+      empty,
+      isView,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField
+    } = useLabeledFormElement(props, emit);
+
+    const {
+      canPaginate,
+      canLoadMore,
+      optionCounts,
+      _options,
+      pages,
+      totalResults,
+      paginating,
+      loadMore,
+      setPaginationFilter,
+    } = useLabeledSelectPagination(props);
+
+    const {
+      isSearchable,
+      isFilterable,
+      resizeHandler: resizeHandlerFn
+    } = useLabeledSelect(props, canPaginate);
+
+    const resizeHandler = () => {
+      resizeHandlerFn(select);
+    };
+
+    return {
+      isOpen,
+      select,
+      raised,
+      focused,
+      blurred,
+      empty,
+      isView,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField,
+      isSearchable,
+      isFilterable,
+      resizeHandler,
+      canPaginate,
+      canLoadMore,
+      optionCounts,
+      _options,
+      pages,
+      totalResults,
+      paginating,
+      loadMore,
+      setPaginationFilter,
+    };
   },
 
   data() {
@@ -148,11 +209,6 @@ export default {
       return this.canPaginate ? !!this._options.find((o) => o.kind === 'group' && !!o.icon) : false;
     },
 
-    _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,
@@ -207,11 +263,13 @@ export default {
     },
 
     onFocus() {
+      this.$emit('on-focus');
       this.selectedVisibility = 'hidden';
       this.onFocusLabeled();
     },
 
     onBlur() {
+      this.$emit('on-blur');
       this.selectedVisibility = 'visible';
       this.onBlurLabeled();
     },