Move import-related assets to generalized locations

- introduce page-specific bundle
- move related javascripts to top-level folder

app/assets/javascripts/import_projects/components/provider_repo_table_row.vue → app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue

@@ -3,8 +3,8 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlIcon, GlBadge } from '@gitlab/ui';
 import Select2Select from '~/vue_shared/components/select2_select.vue';
 import { __ } from '~/locale';
-import ImportStatus from './import_status.vue';
-import { STATUSES } from '../constants';
+import ImportStatus from '../../components/import_status.vue';
+import { STATUSES } from '../../constants';
 import { isProjectImportable, isIncompatible, getImportStatus } from '../utils';
 
 export default {

app/assets/javascripts/import_projects/index.js → app/assets/javascripts/import_entities/import_projects/index.js

 import Vue from 'vue';
-import Translate from '../vue_shared/translate';
+import Translate from '~/vue_shared/translate';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import ImportProjectsTable from './components/import_projects_table.vue';
-import { parseBoolean } from '../lib/utils/common_utils';
 import createStore from './store';
 
 Vue.use(Translate);

app/assets/javascripts/import_projects/store/getters.js → app/assets/javascripts/import_entities/import_projects/store/getters.js

-import { STATUSES } from '../constants';
+import { STATUSES } from '../../constants';
 import { isProjectImportable, isIncompatible } from '../utils';
 
 export const isLoading = state => state.isLoadingRepos || state.isLoadingNamespaces;

app/assets/javascripts/import_projects/store/mutations.js → app/assets/javascripts/import_entities/import_projects/store/mutations.js

 import Vue from 'vue';
 import * as types from './mutation_types';
-import { STATUSES } from '../constants';
+import { STATUSES } from '../../constants';
 
 const makeNewImportedProject = importedProject => ({
   importSource: {

app/assets/javascripts/import_projects/utils.js → app/assets/javascripts/import_entities/import_projects/utils.js

-import { STATUSES } from './constants';
+import { STATUSES } from '../constants';
 
 export function isIncompatible(project) {
   return project.importSource.incompatible;

app/assets/javascripts/pages/import/bitbucket/status/index.js

 import Vue from 'vue';
-import { initStoreFromElement, initPropsFromElement } from '~/import_projects';
-import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue';
+import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects';
+import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');

app/assets/javascripts/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue

 <script>
 import { GlButton } from '@gitlab/ui';
-import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue';
+import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue';
 
 export default {
   components: {

app/assets/javascripts/pages/import/bitbucket_server/status/index.js

 import Vue from 'vue';
-import { initStoreFromElement, initPropsFromElement } from '~/import_projects';
+import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects';
 import BitbucketServerStatusTable from './components/bitbucket_server_status_table.vue';
 
 document.addEventListener('DOMContentLoaded', () => {

app/assets/javascripts/pages/import/fogbugz/status/index.js

-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');

app/assets/javascripts/pages/import/gitea/status/index.js

-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');

app/assets/javascripts/pages/import/github/status/index.js

-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');

app/assets/javascripts/pages/import/gitlab/status/index.js

-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');

app/assets/javascripts/pages/import/manifest/status/index.js

-import mountImportProjectsTable from '~/import_projects';
+import mountImportProjectsTable from '~/import_entities/import_projects';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mountElement = document.getElementById('import-projects-mount-element');

app/assets/stylesheets/_page_specific_files.scss

@@ -10,7 +10,6 @@
 @import './pages/events';
 @import './pages/groups';
 @import './pages/help';
-@import './pages/import';
 @import './pages/incident_management_list';
 @import './pages/issuable';
 @import './pages/issues/issue_count_badge';

app/assets/stylesheets/pages/import.scss → app/assets/stylesheets/page_bundles/import.scss

+@import 'mixins_and_variables_and_functions';
+
 .import-jobs-to-col {
   width: 39%;
 }
@@ -39,3 +41,17 @@
 .import-projects-loading-icon {
   margin-top: $gl-padding-32;
 }
+
+.import-entities-target-select {
+  .select2-container {
+    > .select2-choice {
+      border-color: var(--gray-200, $gray-200);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .gl-form-input {
+    box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
+  }
+}

app/views/import/_githubish_status.html.haml

+- add_page_specific_style 'page_bundles/import'
 - provider = local_assigns.fetch(:provider)
 - extra_data = local_assigns.fetch(:extra_data, {})
 - filterable = local_assigns.fetch(:filterable, true)

config/application.rb

@@ -187,6 +187,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/error_tracking_index.css"
     config.assets.precompile << "page_bundles/signup.css"
     config.assets.precompile << "page_bundles/ide.css"
+    config.assets.precompile << "page_bundles/import.css"
     config.assets.precompile << "page_bundles/issues_list.css"
     config.assets.precompile << "page_bundles/jira_connect.css"
     config.assets.precompile << "page_bundles/jira_connect_users.css"

qa/qa/page/project/import/github.rb

@@ -12,7 +12,7 @@ module QA
             element :authenticate_button
           end
 
-          view 'app/assets/javascripts/import_projects/components/provider_repo_table_row.vue' do
+          view 'app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue' do
             element :project_import_row
             element :project_namespace_select
             element :project_path_field

spec/frontend/import_projects/components/bitbucket_status_table_spec.js → spec/frontend/import_entities/import_projects/components/bitbucket_status_table_spec.js

@@ -2,8 +2,8 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import { GlAlert } from '@gitlab/ui';
-import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue';
-import ImportProjectsTable from '~/import_projects/components/import_projects_table.vue';
+import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue';
+import ImportProjectsTable from '~/import_entities/import_projects/components/import_projects_table.vue';
 
 const ImportProjectsTableStub = {
   name: 'ImportProjectsTable',

spec/frontend/import_projects/components/import_projects_table_spec.js → spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js

@@ -2,11 +2,11 @@ import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon, GlButton, GlIntersectionObserver } from '@gitlab/ui';
-import state from '~/import_projects/store/state';
-import * as getters from '~/import_projects/store/getters';
-import { STATUSES } from '~/import_projects/constants';
-import ImportProjectsTable from '~/import_projects/components/import_projects_table.vue';
-import ProviderRepoTableRow from '~/import_projects/components/provider_repo_table_row.vue';
+import state from '~/import_entities/import_projects/store/state';
+import * as getters from '~/import_entities/import_projects/store/getters';
+import { STATUSES } from '~/import_entities/constants';
+import ImportProjectsTable from '~/import_entities/import_projects/components/import_projects_table.vue';
+import ProviderRepoTableRow from '~/import_entities/import_projects/components/provider_repo_table_row.vue';
 
 describe('ImportProjectsTable', () => {
   let wrapper;

spec/frontend/import_projects/components/provider_repo_table_row_spec.js → spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js

@@ -2,9 +2,9 @@ import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlBadge } from '@gitlab/ui';
-import ProviderRepoTableRow from '~/import_projects/components/provider_repo_table_row.vue';
-import ImportStatus from '~/import_projects/components/import_status.vue';
-import { STATUSES } from '~/import_projects/constants';
+import ProviderRepoTableRow from '~/import_entities/import_projects/components/provider_repo_table_row.vue';
+import ImportStatus from '~/import_entities/components/import_status.vue';
+import { STATUSES } from '~/import_entities//constants';
 import Select2Select from '~/vue_shared/components/select2_select.vue';
 
 describe('ProviderRepoTableRow', () => {

spec/frontend/import_projects/store/actions_spec.js → spec/frontend/import_entities/import_projects/store/actions_spec.js

@@ -17,11 +17,11 @@ import {
   RECEIVE_NAMESPACES_ERROR,
   SET_PAGE,
   SET_FILTER,
-} from '~/import_projects/store/mutation_types';
-import actionsFactory from '~/import_projects/store/actions';
-import { getImportTarget } from '~/import_projects/store/getters';
-import state from '~/import_projects/store/state';
-import { STATUSES } from '~/import_projects/constants';
+} from '~/import_entities/import_projects/store/mutation_types';
+import actionsFactory from '~/import_entities/import_projects/store/actions';
+import { getImportTarget } from '~/import_entities/import_projects/store/getters';
+import state from '~/import_entities/import_projects/store/state';
+import { STATUSES } from '~/import_entities/constants';
 
 jest.mock('~/flash');
 

spec/frontend/import_projects/store/getters_spec.js → spec/frontend/import_entities/import_projects/store/getters_spec.js

@@ -5,9 +5,9 @@ import {
   hasImportableRepos,
   importAllCount,
   getImportTarget,
-} from '~/import_projects/store/getters';
-import { STATUSES } from '~/import_projects/constants';
-import state from '~/import_projects/store/state';
+} from '~/import_entities/import_projects/store/getters';
+import { STATUSES } from '~/import_entities/constants';
+import state from '~/import_entities/import_projects/store/state';
 
 const IMPORTED_REPO = {
   importSource: {},

spec/frontend/import_projects/store/mutations_spec.js → spec/frontend/import_entities/import_projects/store/mutations_spec.js

-import * as types from '~/import_projects/store/mutation_types';
-import mutations from '~/import_projects/store/mutations';
-import getInitialState from '~/import_projects/store/state';
-import { STATUSES } from '~/import_projects/constants';
+import * as types from '~/import_entities/import_projects/store/mutation_types';
+import mutations from '~/import_entities/import_projects/store/mutations';
+import getInitialState from '~/import_entities/import_projects/store/state';
+import { STATUSES } from '~/import_entities/constants';
 
 describe('import_projects store mutations', () => {
   let state;

spec/frontend/import_projects/utils_spec.js → spec/frontend/import_entities/import_projects/utils_spec.js

-import { isProjectImportable, isIncompatible, getImportStatus } from '~/import_projects/utils';
-import { STATUSES } from '~/import_projects/constants';
+import {
+  isProjectImportable,
+  isIncompatible,
+  getImportStatus,
+} from '~/import_entities/import_projects/utils';
+import { STATUSES } from '~/import_entities/constants';
 
 describe('import_projects utils', () => {
   const COMPATIBLE_PROJECT = {

spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 
 import { GlButton } from '@gitlab/ui';
 import BitbucketServerStatusTable from '~/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue';
-import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue';
+import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue';
 
 const BitbucketStatusTableStub = {
   name: 'BitbucketStatusTable',