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

@@ -2,7 +2,6 @@
   import { mapActions, mapState, mapGetters } from 'vuex';
   import ImportedProjectTableRow from './imported_project_table_row.vue';
   import ProviderRepoTableRow from './provider_repo_table_row.vue';
-  import simplePoll from '../../lib/utils/simple_poll';
   import LoadingButton from '../../vue_shared/components/loading_button.vue';
   import eventHub from '../event_hub';
 
@@ -24,7 +23,7 @@
 
     computed: {
       ...mapState(['importedProjects', 'providerRepos', 'isLoadingRepos']),
-      ...mapGetters(['isImportingAnyRepo']),
+      ...mapGetters(['isImportingAnyRepo', 'hasProviderRepos']),
     },
 
     mounted() {
@@ -32,15 +31,11 @@
     },
 
     methods: {
-      ...mapActions(['fetchRepos', 'fetchJobs']),
+      ...mapActions(['fetchRepos', 'fetchJobs', 'pollJobs']),
 
       importAll() {
         eventHub.$emit('importAll');
       },
-
-      pollJobs() {
-        return simplePoll((continuePolling) => this.fetchJobs().then(() => continuePolling()), 3000, Infinity)
-      },
     },
   }
 </script>
@@ -55,6 +50,7 @@
         container-class="btn btn-success"
         :loading="isImportingAnyRepo"
         :label="__('Import all repositories')"
+        :disabled="!hasProviderRepos"
         type="button"
         @click="importAll"
       />
@@ -64,7 +60,7 @@
       class="js-loading-button-icon"
     />
     <div
-      v-else
+      v-else-if="hasProviderRepos"
       class="table-responsive"
     >
       <table class="table">
@@ -94,5 +90,11 @@
         </tbody>
       </table>
     </div>
+    <div
+      v-else
+      class="text-center"
+    >
+      <strong>{{ __(`No  ${providerTitle} repositories available to import`) }}</strong>
+    </div>
   </div>
 </template>