Resolve "Helpful and instructing Empty state for multi file editor"

app/assets/images/icons.json

@@ -1 +1 @@
-{"iconCount":186,"spriteSize":84748,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
+{"iconCount":189,"spriteSize":85766,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","bookmark","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder-o-open","folder-o","folder-open","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-external","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","podcast","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","staged","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","unstaged","user","users","volume-up","warning","work"]}

app/assets/images/illustrations/multi_file_editor_empty.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="430" height="300"><g fill="none" fill-rule="evenodd" transform="translate(35 29)"><path fill="#EEE" fill-rule="nonzero" d="M90 23a2 2 0 1 1 0-4h10a2 2 0 0 1 0 4H90zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h10a2 2 0 0 1 0 4h-10zm20 0a2 2 0 0 1 0-4h1a11.98 11.98 0 0 1 9.457 4.612 2 2 0 0 1-3.151 2.464A7.981 7.981 0 0 0 331 23h-1zm9 11.39a2 2 0 0 1 4 0v10a2 2 0 0 1-4 0v-10zm0 180a2 2 0 1 1 4 0V223c0 .56-.038 1.114-.114 1.662a2 2 0 0 1-3.962-.55A8.21 8.21 0 0 0 339 223v-8.61zm-4.769 15.931a2 2 0 0 1 1.618 3.658A11.967 11.967 0 0 1 331 235h-5.782a2 2 0 0 1 0-4H331c1.13 0 2.224-.233 3.231-.679zm-19.013.679a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zm-20 0a2 2 0 1 1 0 4h-10a2 2 0 0 1 0-4h10zM115 231a2 2 0 0 1 0 4h-10a2 2 0 0 1 0-4h10zm-26.2 4c.131-.646.2-1.315.2-2v-2h4a2 2 0 0 1 0 4h-4.2z"/><path fill="#EEE" fill-rule="nonzero" d="M103 211h258a6 6 0 0 0 6-6V63a6 6 0 0 0-6-6H166a5 5 0 0 1-5-5v-8.5a5.5 5.5 0 0 0-5.5-5.5H109a6 6 0 0 0-6 6v167zm62-167.5V52a1 1 0 0 0 1 1h195c5.523 0 10 4.477 10 10v142c0 5.523-4.477 10-10 10H99V44c0-5.523 4.477-10 10-10h46.5a9.5 9.5 0 0 1 9.5 9.5z"/><rect width="40" height="4" x="118" y="78" fill="#6B4FBB" rx="2"/><rect width="30" height="4" x="118" y="90" fill="#EFEDF8" rx="2"/><rect width="30" height="4" x="153" y="90" fill="#E1DBF1" rx="2"/><rect width="150" height="4" x="118" y="102" fill="#EFEDF8" rx="2"/><rect width="90" height="4" x="118" y="114" fill="#E1DBF1" rx="2"/><rect width="60" height="4" x="118" y="138" fill="#EFEDF8" rx="2"/><rect width="20" height="4" x="118" y="150" fill="#6B4FBB" rx="2"/><rect width="20" height="4" x="144" y="150" fill="#C3B8E3" rx="2"/><rect width="20" height="4" x="170" y="150" fill="#E1DBF1" rx="2"/><rect width="130" height="4" x="118" y="162" fill="#EFEDF8" rx="2"/><rect width="30" height="4" x="118" y="174" fill="#C3B8E3" rx="2"/><rect width="30" height="4" x="154" y="174" fill="#EFEDF8" rx="2"/><rect width="30" height="4" x="190" y="174" fill="#EFEDF8" rx="2"/><rect width="40" height="4" x="118" y="186" fill="#E1DBF1" rx="2"/><path fill="#F9F9F9" d="M89 24.292l11.434 19.326v170.326L89 226.336V24.292z"/><path fill="#EEE" fill-rule="nonzero" d="M89 229.286v-5.9l9.434-10.223V44.165L89 28.22v-7.856l13.434 22.707v171.655L89 229.286zM10 4a6 6 0 0 0-6 6v223a6 6 0 0 0 6 6h69a6 6 0 0 0 6-6V10a6 6 0 0 0-6-6H10zm0-4h69c5.523 0 10 4.477 10 10v223c0 5.523-4.477 10-10 10H10c-5.523 0-10-4.477-10-10V10C0 4.477 4.477 0 10 0z"/><circle cx="25" cy="23" r="11" fill="#FEF0E8"/><path fill="#FEE1D3" d="M46 17h16a2 2 0 1 1 0 4H46a2 2 0 1 1 0-4zm0 8h27a2 2 0 1 1 0 4H46a2 2 0 1 1 0-4z"/><path fill="#EEE" d="M16 50h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm14 2h24a2 2 0 1 1 0 4H30a2 2 0 1 1 0-4zm-4 12h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm14 2h24a2 2 0 1 1 0 4H40a2 2 0 1 1 0-4zM26 78h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm14 2h24a2 2 0 1 1 0 4H40a2 2 0 1 1 0-4z"/><g transform="translate(14 110)"><rect width="8" height="8" fill="#FEE1D3" rx="2"/><rect width="28" height="4" x="14" y="2" fill="#FEF0E8" rx="2"/></g><path fill="#EEE" d="M16 140h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm14 2h24a2 2 0 1 1 0 4H30a2 2 0 1 1 0-4zm-14 14h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm14 2h24a2 2 0 1 1 0 4H30a2 2 0 1 1 0-4zm-14 14h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm14 2h24a2 2 0 1 1 0 4H30a2 2 0 1 1 0-4zm-14 14h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm14 2h24a2 2 0 1 1 0 4H30a2 2 0 1 1 0-4z"/><g transform="translate(24 124)"><rect width="8" height="8" fill="#FEE1D3" rx="2"/><rect width="28" height="4" x="14" y="2" fill="#FEF0E8" rx="2"/></g><g fill="#FC6D26" transform="translate(24 92)"><rect width="8" height="8" rx="2"/><rect width="28" height="4" x="14" y="2" rx="2"/></g><path fill="#FDC4A8" fill-rule="nonzero" d="M152 50.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></g></svg>

app/assets/javascripts/ide/components/ide.vue

@@ -9,6 +9,12 @@ import repoPreview from './repo_preview.vue';
 import repoEditor from './repo_editor.vue';
 
 export default {
+  props: {
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     ...mapState([
       'currentBlobView',
@@ -64,7 +70,23 @@ export default {
       <template
         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>

app/assets/javascripts/ide/components/ide_repo_tree.vue

@@ -1,15 +1,15 @@
 <script>
 import { mapState } from 'vuex';
-import RepoPreviousDirectory from './repo_prev_directory.vue';
+import repoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFile from './repo_file.vue';
+import repoFile from './repo_file.vue';
-import RepoLoadingFile from './repo_loading_file.vue';
+import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 import { treeList } from '../stores/utils';
 
 export default {
   components: {
-    'repo-previous-directory': RepoPreviousDirectory,
+    repoPreviousDirectory,
-    'repo-file': RepoFile,
+    repoFile,
-    'repo-loading-file': RepoLoadingFile,
+    skeletonLoadingContainer,
   },
   props: {
     treeId: {
@@ -19,7 +19,7 @@ export default {
   },
   computed: {
     ...mapState([
-      'loading',
+      'trees',
       'isRoot',
     ]),
     ...mapState({
@@ -34,7 +34,10 @@ export default {
       return !this.isRoot && this.fetchedList.length;
     },
     showLoading() {
-      return this.loading;
+      if (this.trees[this.treeId]) {
+        return this.trees[this.treeId].loading;
+      }
+      return true;
     },
   },
 };
@@ -49,11 +52,13 @@ export default {
         <repo-previous-directory
           v-if="hasPreviousDirectory"
         />
-        <repo-loading-file
+        <div
+          class="multi-file-loading-container"
           v-if="showLoading"
-          v-for="n in 5"
+          v-for="n in 3"
-          :key="n"
+          :key="n">
-        />
+          <skeleton-loading-container/>
+        </div>
         <repo-file
           v-for="file in fetchedList"
           :key="file.key"

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -3,6 +3,7 @@ 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 {
   data() {
@@ -14,9 +15,11 @@ export default {
     projectTree,
     icon,
     panelResizer,
+    skeletonLoadingContainer,
   },
   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, index) in projects"
         :key="project.id"

app/assets/javascripts/ide/index.js

@@ -1,12 +1,8 @@
 import Vue from 'vue';
-import { mapActions } from 'vuex';
-import { convertPermissionToBoolean } from '../lib/utils/common_utils';
 import ide from './components/ide.vue';
-
 import store from './stores';
 import router from './ide_router';
 import Translate from '../vue_shared/translate';
-import ContextualSidebar from '../contextual_sidebar';
 
 function initIde(el) {
   if (!el) return null;
@@ -18,29 +14,12 @@ function initIde(el) {
     components: {
       ide,
     },
-    methods: {
-      ...mapActions([
-        'setInitialData',
-      ]),
-    },
-    created() {
-      const data = el.dataset;
-
-      this.setInitialData({
-        endpoints: {
-          rootEndpoint: data.url,
-          newMergeRequestUrl: data.newMergeRequestUrl,
-          rootUrl: data.rootUrl,
-        },
-        canCommit: convertPermissionToBoolean(data.canCommit),
-        onTopOfBranch: convertPermissionToBoolean(data.onTopOfBranch),
-        path: data.currentPath,
-        isRoot: convertPermissionToBoolean(data.root),
-        isInitialRoot: convertPermissionToBoolean(data.root),
-      });
-    },
     render(createElement) {
-      return createElement('ide');
+      return createElement('ide', {
+        props: {
+          emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+        },
+      });
     },
   });
 }
@@ -50,6 +29,3 @@ const ideElement = document.getElementById('ide');
 Vue.use(Translate);
 
 initIde(ideElement);
-
-const contextualSidebar = new ContextualSidebar();
-contextualSidebar.bindEvents();

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);

app/assets/stylesheets/pages/repo.scss

@@ -92,6 +92,19 @@
   padding: 6px 12px;
 }
 
+.multi-file-loading-container {
+  margin-top: 10px;
+  padding: 10px;
+
+  .animation-container {
+    background: $gray-light;
+
+    div {
+      background: $gray-light;
+    }
+  }
+}
+
 table.table tr td.multi-file-table-name {
   width: 350px;
   padding: 6px 12px;

app/views/ide/index.html.haml

@@ -6,7 +6,7 @@
 
 .ide-flash-container.flash-container
 
-#ide.ide-loading
+#ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg')} }
   .text-center
     = icon('spinner spin 2x')
-    %h2.clgray= _('IDE Loading ...')
+    %h2.clgray= _('Loading the GitLab IDE...')

app/views/layouts/nav/_dashboard.html.haml

@@ -49,6 +49,12 @@
     = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
       Projects
 
+  - if current_controller?('ide')
+    %li.line-separator.hidden-xs
+      = nav_link(controller: 'ide') do
+        = link_to '#', class: 'dashboard-shortcuts-web-ide', title: 'Web IDE' do
+          Web IDE
+
   - if current_user.admin? || Gitlab::Sherlock.enabled?
     %li.line-separator.hidden-xs
   - if current_user.admin?

package.json

@@ -88,7 +88,7 @@
     "worker-loader": "^1.1.0"
   },
   "devDependencies": {
-    "@gitlab-org/gitlab-svgs": "^1.4.0",
+    "@gitlab-org/gitlab-svgs": "^1.5.0",
     "babel-plugin-istanbul": "^4.1.5",
     "eslint": "^3.10.1",
     "eslint-config-airbnb-base": "^10.0.1",

spec/javascripts/repo/components/ide_repo_tree_spec.js

@@ -41,11 +41,11 @@ describe('IdeRepoTree', () => {
     expect(tbody.querySelector('.file')).toBeTruthy();
   });
 
-  it('renders 5 loading files if tree is loading', (done) => {
+  it('renders 3 loading files if tree is loading', (done) => {
-    vm.$store.state.loading = true;
+    vm.treeId = '123';
 
     Vue.nextTick(() => {
-      expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
+      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toEqual(3);
 
       done();
     });

spec/javascripts/repo/components/ide_spec.js

@@ -10,7 +10,9 @@ describe('ide component', () => {
   beforeEach(() => {
     const Component = Vue.extend(ide);
 
-    vm = createComponentWithStore(Component, store).$mount();
+    vm = createComponentWithStore(Component, store, {
+      emptyStateSvgPath: 'svg',
+    }).$mount();
   });
 
   afterEach(() => {

yarn.lock

@@ -54,9 +54,9 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@gitlab-org/gitlab-svgs@^1.4.0":
+"@gitlab-org/gitlab-svgs@^1.5.0":
-  version "1.4.0"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.4.0.tgz#83c0a76485c1378babf2e83456b4d2442efa98e8"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.5.0.tgz#6635df6aad6c71fb293ff113efd4311a744c0e2c"
 
 "@types/jquery@^2.0.40":
   version "2.0.48"