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

 <script>
-  import { mapActions, mapState, mapGetters } from 'vuex';
-  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 { mapActions, mapState, mapGetters } from 'vuex';
+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';
 
-  export default {
-    name: 'ImportProjectsTable',
+export default {
+  name: 'ImportProjectsTable',
 
-    components: {
-      ImportedProjectTableRow,
-      ProviderRepoTableRow,
-      LoadingButton,
-    },
+  components: {
+    ImportedProjectTableRow,
+    ProviderRepoTableRow,
+    LoadingButton,
+  },
 
-    props: {
-      providerTitle: {
-        type: String,
-        required: true,
-      },
+  props: {
+    providerTitle: {
+      type: String,
+      required: true,
     },
+  },
 
-    computed: {
-      ...mapState(['importedProjects', 'providerRepos', 'isLoadingRepos']),
-      ...mapGetters(['isImportingAnyRepo', 'hasProviderRepos', 'hasImportedProjects']),
-
-      emptyStateText() {
-        const emptyStateText = this.__('No  %{providerTitle} repositories available to import');
+  computed: {
+    ...mapState(['importedProjects', 'providerRepos', 'isLoadingRepos']),
+    ...mapGetters(['isImportingAnyRepo', 'hasProviderRepos', 'hasImportedProjects']),
 
-        return this.sprintf(emptyStateText, { providerTitle: this.providerTitle });
-      },
+    emptyStateText() {
+      const emptyStateText = this.__('No  %{providerTitle} repositories available to import');
 
-      fromHeaderText() {
-        return this.sprintf(this.__('From %{providerTitle}'), { providerTitle: this.providerTitle });
-      },
+      return this.sprintf(emptyStateText, { providerTitle: this.providerTitle });
     },
 
-    mounted() {
-      return this.fetchRepos().then(this.pollJobs);
+    fromHeaderText() {
+      return this.sprintf(this.__('From %{providerTitle}'), { providerTitle: this.providerTitle });
     },
+  },
+
+  mounted() {
+    return this.fetchRepos().then(this.pollJobs);
+  },
 
-    methods: {
-      ...mapActions(['fetchRepos', 'fetchJobs', 'pollJobs']),
+  methods: {
+    ...mapActions(['fetchRepos', 'fetchJobs', 'pollJobs']),
 
-      importAll() {
-        eventHub.$emit('importAll');
-      },
+    importAll() {
+      eventHub.$emit('importAll');
     },
-  }
+  },
+};
 </script>
 
 <template>