Merge branch...

Merge branch '342268-app-assets-javascripts-jira_import-components-jira_import_form-vue-consider-using-gltablelite' into 'master'

Update jira_import_form.vue to use GlTableLite

See merge request gitlab-org/gitlab!84384

app/assets/javascripts/jira_import/components/jira_import_form.vue

@@ -12,7 +12,7 @@ import {
   GlLoadingIcon,
   GlSearchBoxByType,
   GlSprintf,
-  GlTable,
+  GlTableLite,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -45,7 +45,7 @@ export default {
     GlLoadingIcon,
     GlSearchBoxByType,
     GlSprintf,
-    GlTable,
+    GlTableLite,
   },
   currentUsername: gon.current_username,
   dropdownLabel,
@@ -295,7 +295,7 @@ export default {
 
       <p>{{ $options.userMappingMessage }}</p>
 
-      <gl-table :fields="$options.tableConfig" :items="userMappings" fixed>
+      <gl-table-lite :fields="$options.tableConfig" :items="userMappings" fixed>
         <template #cell(arrow)>
           <gl-icon name="arrow-right" :aria-label="__('Will be mapped to')" />
         </template>
@@ -326,9 +326,9 @@ export default {
             </gl-dropdown-text>
           </gl-dropdown>
         </template>
-      </gl-table>
+      </gl-table-lite>
 
-      <gl-loading-icon v-if="isInitialLoadingState" size="sm" />
+      <gl-loading-icon v-if="isInitialLoadingState" size="md" />
 
       <gl-button
         v-if="hasMoreUsers"
@@ -343,7 +343,7 @@ export default {
         <gl-button
           type="submit"
           category="primary"
-          variant="success"
+          variant="confirm"
           class="js-no-auto-disable"
           :loading="isSubmitting"
           data-qa-selector="jira_issues_import_button"

app/assets/javascripts/jira_import/index.js

@@ -20,6 +20,7 @@ export default function mountJiraImportApp() {
 
   return new Vue({
     el,
+    name: 'JiraImportRoot',
     apolloProvider,
     render(createComponent) {
       return createComponent(App, {

spec/frontend/jira_import/components/jira_import_form_spec.js

@@ -6,7 +6,7 @@ import {
   GlFormSelect,
   GlLabel,
   GlSearchBoxByType,
-  GlTable,
+  GlTableLite,
 } from '@gitlab/ui';
 import { getByRole } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
@@ -34,19 +34,19 @@ describe('JiraImportForm', () => {
 
   const currentUsername = 'mrgitlab';
 
-  const getAlert = () => wrapper.find(GlAlert);
+  const getAlert = () => wrapper.findComponent(GlAlert);
 
-  const getSelectDropdown = () => wrapper.find(GlFormSelect);
+  const getSelectDropdown = () => wrapper.findComponent(GlFormSelect);
 
-  const getContinueButton = () => wrapper.find(GlButton);
+  const getContinueButton = () => wrapper.findComponent(GlButton);
 
-  const getCancelButton = () => wrapper.findAll(GlButton).at(1);
+  const getCancelButton = () => wrapper.findAllComponents(GlButton).at(1);
 
-  const getLabel = () => wrapper.find(GlLabel);
+  const getLabel = () => wrapper.findComponent(GlLabel);
 
-  const getTable = () => wrapper.find(GlTable);
+  const getTable = () => wrapper.findComponent(GlTableLite);
 
-  const getUserDropdown = () => getTable().find(GlDropdown);
+  const getUserDropdown = () => getTable().findComponent(GlDropdown);
 
   const getHeader = (name) => getByRole(wrapper.element, 'columnheader', { name });
 
@@ -107,14 +107,13 @@ describe('JiraImportForm', () => {
     mutateSpy.mockRestore();
     querySpy.mockRestore();
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('select dropdown project selection', () => {
     it('is shown', () => {
       wrapper = mountComponent();
 
-      expect(wrapper.find(GlFormSelect).exists()).toBe(true);
+      expect(getSelectDropdown().exists()).toBe(true);
     });
 
     it('contains a list of Jira projects to select from', () => {
@@ -273,7 +272,7 @@ describe('JiraImportForm', () => {
 
         wrapper = mountComponent({ mountFunction: mount });
 
-        wrapper.find(GlSearchBoxByType).vm.$emit('input', 'fred');
+        wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', 'fred');
       });
 
       it('makes a GraphQL call', () => {