CE Improve import status table UI

What does this MR do?

EE: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/8707

Improve import status table UI, replace with vue app.

• Add "Go to project" button
• Align import buttons to the right
• Remove namespace select grey container
• Removing row status colour and use ci-style status icons to represent status

What are the relevant issue numbers?

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/14010

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the database guides

app/assets/javascripts/import_projects/components/import_projects_table.vue

@@ -5,6 +5,7 @@ import ImportedProjectTableRow from './imported_project_table_row.vue';
 import ProviderRepoTableRow from './provider_repo_table_row.vue';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
+import { __, sprintf } from '../../locale';
 
 export default {
   name: 'ImportProjectsTable',
@@ -28,22 +29,27 @@ export default {
     ...mapGetters(['isImportingAnyRepo', 'hasProviderRepos', 'hasImportedProjects']),
 
     emptyStateText() {
-      const emptyStateText = this.__('No  %{providerTitle} repositories available to import');
+      const emptyStateText = __('No  %{providerTitle} repositories available to import');
 
-      return this.sprintf(emptyStateText, { providerTitle: this.providerTitle });
+      return sprintf(emptyStateText, { providerTitle: this.providerTitle });
     },
 
     fromHeaderText() {
-      return this.sprintf(this.__('From %{providerTitle}'), { providerTitle: this.providerTitle });
+      return sprintf(__('From %{providerTitle}'), { providerTitle: this.providerTitle });
     },
   },
 
   mounted() {
-    return this.fetchRepos().then(this.pollJobs);
+    return this.fetchRepos().then(() => this.fetchJobs());
+  },
+
+  beforeDestroy() {
+    this.stopJobsPolling();
+    this.clearJobsEtagPoll();
   },
 
   methods: {
-    ...mapActions(['fetchRepos', 'pollJobs']),
+    ...mapActions(['fetchRepos', 'fetchJobs', 'stopJobsPolling', 'clearJobsEtagPoll']),
 
     importAll() {
       eventHub.$emit('importAll');