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/ci_variable_list/ajax_variable_list.js

@@ -7,11 +7,13 @@ import statusCodes from '../lib/utils/http_status';
 import VariableList from './ci_variable_list';
 
 function generateErrorBoxContent(errors) {
-  const errorList = [].concat(errors).map(errorString => `
+  const errorList = [].concat(errors).map(
+    errorString => `
     <li>
       ${_.escape(errorString)}
     </li>
-  `);
+  `,
+  );
 
   return `
     <p>
@@ -25,13 +27,7 @@ function generateErrorBoxContent(errors) {
 
 // Used for the variable list on CI/CD projects/groups settings page
 export default class AjaxVariableList {
-  constructor({
-    container,
-    saveButton,
-    errorBox,
-    formField = 'variables',
-    saveEndpoint,
-  }) {
+  constructor({ container, saveButton, errorBox, formField = 'variables', saveEndpoint }) {
     this.container = container;
     this.saveButton = saveButton;
     this.errorBox = errorBox;
@@ -58,18 +54,21 @@ export default class AjaxVariableList {
     // to match it up in `updateRowsWithPersistedVariables`
     this.variableList.toggleEnableRow(false);
 
-    return axios.patch(this.saveEndpoint, {
-      variables_attributes: this.variableList.getAllData(),
-    }, {
-      // We want to be able to process the `res.data` from a 400 error response
-      // and print the validation messages such as duplicate variable keys
-      validateStatus: status => (
-          status >= statusCodes.OK &&
-          status < statusCodes.MULTIPLE_CHOICES
-        ) ||
-        status === statusCodes.BAD_REQUEST,
-    })
-      .then((res) => {
+    return axios
+      .patch(
+        this.saveEndpoint,
+        {
+          variables_attributes: this.variableList.getAllData(),
+        },
+        {
+          // We want to be able to process the `res.data` from a 400 error response
+          // and print the validation messages such as duplicate variable keys
+          validateStatus: status =>
+            (status >= statusCodes.OK && status < statusCodes.MULTIPLE_CHOICES) ||
+            status === statusCodes.BAD_REQUEST,
+        },
+      )
+      .then(res => {
         loadingIcon.classList.toggle('hide', true);
         this.variableList.toggleEnableRow(true);
 
@@ -90,18 +89,21 @@ export default class AjaxVariableList {
   }
 
   updateRowsWithPersistedVariables(persistedVariables = []) {
-    const persistedVariableMap = [].concat(persistedVariables).reduce((variableMap, variable) => ({
-      ...variableMap,
-      [variable.key]: variable,
-    }), {});
+    const persistedVariableMap = [].concat(persistedVariables).reduce(
+      (variableMap, variable) => ({
+        ...variableMap,
+        [variable.key]: variable,
+      }),
+      {},
+    );
 
-    this.container.querySelectorAll('.js-row').forEach((row) => {
+    this.container.querySelectorAll('.js-row').forEach(row => {
       // If we submitted a row that was destroyed, remove it so we don't try
       // to destroy it again which would cause a BE error
       const destroyInput = row.querySelector('.js-ci-variable-input-destroy');
       if (convertPermissionToBoolean(destroyInput.value)) {
         row.remove();
-      // Update the ID input so any future edits and `_destroy` will apply on the BE
+        // Update the ID input so any future edits and `_destroy` will apply on the BE
       } else {
         const key = row.querySelector('.js-ci-variable-input-key').value;
         const persistedVariable = persistedVariableMap[key];