Merge branch 'master' into 34312-eslint-vue-plugin

* master: (140 commits)
  Add Gitter room link to I want to contribute since you always have questions
  Use workhorse 3.4.0
  chore: remove symbolic link
  Add memoization for properties
  Resolve "Allow QA tests to run with `CHROME_HEADLESS=false`"
  Resolve "Add graph value to hover"
  Fix slash commands dropdown description
  disables the shortcut to the issue boards when issues are disabled
  Fix static analysys
  Disable STI of ActiveRecord. Refactoring specs.
  Fix StaticSnalysys
  Fix change log
  Add changelog
  Revert bulk_insert and bring back AR insert(one by one)
  Add a new test for emptified params
  Use batch update for Service deactivation
  Fix query to look for proper unmanaged kubernetes service
  Fix static anylysy
  Use bulk_insert instead of AR create
  Opitmize migration process by using both unmanaged_kubernetes_service and kubernetes_service_without_template
  ...

4 files changed, 112 insertions, 75 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 46c3224d582..b2a9437e93e 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -9,14 +9,11 @@ import repoPreview from './repo_preview.vue';
 import repoEditor from './repo_editor.vue';
 
 export default {
-  components: {
-    ideSidebar,
-    ideContextbar,
-    repoTabs,
-    repoFileButtons,
-    ideStatusBar,
-    repoEditor,
-    repoPreview,
+  props: {
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState([
@@ -28,6 +25,15 @@ export default {
       'activeFile',
     ]),
   },
+  components: {
+    ideSidebar,
+    ideContextbar,
+    repoTabs,
+    repoFileButtons,
+    ideStatusBar,
+    repoEditor,
+    repoPreview,
+  },
   mounted() {
     const returnValue = 'Are you sure you want to lose unsaved changes?';
     window.onbeforeunload = (e) => {
@@ -51,26 +57,39 @@ export default {
       class="multi-file-edit-pane"
     >
       <template
-        v-if="activeFile"
-      >
-        <repo-tabs />
+        v-if="activeFile">
+        <repo-tabs/>
         <component
           class="multi-file-edit-pane-content"
           :is="currentBlobView"
         />
-        <repo-file-buttons />
+        <repo-file-buttons/>
         <ide-status-bar
-          :file="selectedFile"
-        />
+          :file="selectedFile"/>
       </template>
       <template
-        v-else
-      >
+        v-else>
         <div class="ide-empty-state">
-          <h2 class="clgray">Welcome to the GitLab IDE</h2>
+          <div class="row js-empty-state">
+            <div class="col-xs-12">
+              <div class="svg-content svg-250">
+                <img :src="emptyStateSvgPath">
+              </div>
+            </div>
+            <div class="col-xs-12">
+              <div class="text-content text-center">
+                <h4>
+                  Welcome to the GitLab IDE
+                </h4>
+                <p>
+                  You can select a file in the left sidebar to begin editing and use the right sidebar to commit your changes.
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
       </template>
     </div>
-    <ide-contextbar />
+    <ide-contextbar/>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue
index 35d21fae086..bd89ebe47d9 100644
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
@@ -1,68 +1,71 @@
 <script>
-  import { mapState } from 'vuex';
-  import RepoPreviousDirectory from './repo_prev_directory.vue';
-  import RepoFile from './repo_file.vue';
-  import RepoLoadingFile from './repo_loading_file.vue';
-  import { treeList } from '../stores/utils';
+import { mapState } from 'vuex';
+import repoPreviousDirectory from './repo_prev_directory.vue';
+import repoFile from './repo_file.vue';
+import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
+import { treeList } from '../stores/utils';
 
-  export default {
-    components: {
-      'repo-previous-directory': RepoPreviousDirectory,
-      'repo-file': RepoFile,
-      'repo-loading-file': RepoLoadingFile,
+export default {
+  components: {
+    repoPreviousDirectory,
+    repoFile,
+    skeletonLoadingContainer,
+  },
+  props: {
+    treeId: {
+      type: String,
+      required: true,
     },
-    props: {
-      treeId: {
-        type: String,
-        required: true,
+  },
+  computed: {
+    ...mapState([
+      'trees',
+      'isRoot',
+    ]),
+    ...mapState({
+      projectName(state) {
+        return state.project.name;
       },
+    }),
+    fetchedList() {
+      return treeList(this.$store.state, this.treeId);
     },
-    computed: {
-      ...mapState([
-        'loading',
-        'isRoot',
-      ]),
-      ...mapState({
-        projectName(state) {
-          return state.project.name;
-        },
-      }),
-      fetchedList() {
-        return treeList(this.$store.state, this.treeId);
-      },
-      hasPreviousDirectory() {
-        return !this.isRoot && this.fetchedList.length;
-      },
-      showLoading() {
-        return this.loading;
-      },
+    hasPreviousDirectory() {
+      return !this.isRoot && this.fetchedList.length;
+    },
+    showLoading() {
+      if (this.trees[this.treeId]) {
+        return this.trees[this.treeId].loading;
+      }
+      return true;
     },
-  };
+  },
+};
 </script>
 
 <template>
-  <div>
-    <div class="ide-file-list">
-      <table class="table">
-        <tbody
-          v-if="treeId"
-        >
-          <repo-previous-directory
-            v-if="hasPreviousDirectory"
-          />
-          <template v-if="showLoading">
-            <repo-loading-file
-              v-for="n in 5"
-              :key="n"
-            />
-          </template>
-          <repo-file
-            v-for="file in fetchedList"
-            :key="file.key"
-            :file="file"
-          />
-        </tbody>
-      </table>
-    </div>
+<div>
+  <div class="ide-file-list">
+    <table class="table">
+      <tbody
+        v-if="treeId">
+        <repo-previous-directory
+          v-if="hasPreviousDirectory"
+        />
+        <div
+          class="multi-file-loading-container"
+          v-if="showLoading"
+          v-for="n in 3"
+          :key="n">
+          <skeleton-loading-container/>
+        </div>
+        <repo-file
+          v-for="file in fetchedList"
+          :key="file.key"
+          :file="file"
+        />
+      </tbody>
+    </table>
   </div>
+</div>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index d88cde8adfe..e404a838ac4 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -3,12 +3,14 @@ import { mapState, mapActions } from 'vuex';
 import projectTree from './ide_project_tree.vue';
 import icon from '../../vue_shared/components/icon.vue';
 import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
 export default {
   components: {
     projectTree,
     icon,
     panelResizer,
+    skeletonLoadingContainer,
   },
   data() {
     return {
@@ -17,6 +19,7 @@ export default {
   },
   computed: {
     ...mapState([
+      'loading',
       'projects',
       'leftPanelCollapsed',
     ]),
@@ -32,6 +35,9 @@ export default {
       }
       return {};
     },
+    showLoading() {
+      return this.loading;
+    },
   },
   methods: {
     ...mapActions([
@@ -63,6 +69,13 @@ export default {
     :style="panelStyle"
   >
     <div class="multi-file-commit-panel-inner">
+      <div
+        class="multi-file-loading-container"
+        v-if="showLoading"
+        v-for="n in 3"
+        :key="n">
+        <skeleton-loading-container/>
+      </div>
       <project-tree
         v-for="project in projects"
         :key="project.id"
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 75e332090cb..02d4bd87ab0 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -8,9 +8,11 @@ export const getProjectData = (
   { namespace, projectId, force = false } = {},
 ) => new Promise((resolve, reject) => {
   if (!state.projects[`${namespace}/${projectId}`] || force) {
+    commit(types.TOGGLE_LOADING, state);
     service.getProjectData(namespace, projectId)
     .then(res => res.data)
     .then((data) => {
+      commit(types.TOGGLE_LOADING, state);
       commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
       if (!state.currentProjectId) commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
       resolve(data);