Updated heading for default state in Web IDE

Resolves https://gitlab.com/gitlab-org/gitlab-ce/issues/60107

2 files changed, 45 insertions, 14 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 9894ebb0624..e41b1530226 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,6 +1,7 @@
 <script>
 import Vue from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import NewModal from './new_dropdown/modal.vue';
@@ -22,6 +23,8 @@ export default {
     FindFile,
     ErrorMessage,
     CommitEditorHeader,
+    GlButton,
+    GlLoadingIcon,
   },
   props: {
     rightPaneComponent: {
@@ -47,13 +50,15 @@ export default {
       'someUncommittedChanges',
       'isCommitModeActive',
       'allBlobs',
+      'emptyRepo',
+      'currentTree',
     ]),
   },
   mounted() {
     window.onbeforeunload = e => this.onBeforeUnload(e);
   },
   methods: {
-    ...mapActions(['toggleFileFinder']),
+    ...mapActions(['toggleFileFinder', 'openNewEntryModal']),
     onBeforeUnload(e = {}) {
       const returnValue = __('Are you sure you want to lose unsaved changes?');
 
@@ -98,17 +103,40 @@ export default {
           <repo-editor :file="activeFile" class="multi-file-edit-pane-content" />
         </template>
         <template v-else>
-          <div v-once class="ide-empty-state">
+          <div class="ide-empty-state">
             <div class="row js-empty-state">
               <div class="col-12">
                 <div class="svg-content svg-250"><img :src="emptyStateSvgPath" /></div>
               </div>
               <div class="col-12">
                 <div class="text-content text-center">
-                  <h4>Welcome to the GitLab IDE</h4>
-                  <p>
-                    Select a file from the left sidebar to begin editing. Afterwards, you'll be able
-                    to commit your changes.
+                  <h4>
+                    {{ __('Make and review changes in the browser with the Web IDE') }}
+                  </h4>
+                  <template v-if="emptyRepo">
+                    <p>
+                      {{
+                        __(
+                          "Create a new file as there are no files yet. Afterwards, you'll be able to commit your changes.",
+                        )
+                      }}
+                    </p>
+                    <gl-button
+                      variant="success"
+                      :title="__('New file')"
+                      :aria-label="__('New file')"
+                      @click="openNewEntryModal({ type: 'blob' })"
+                    >
+                      {{ __('New file') }}
+                    </gl-button>
+                  </template>
+                  <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" />
+                  <p v-else>
+                    {{
+                      __(
+                        "Select a file from the left sidebar to begin editing. Afterwards, you'll be able to commit your changes.",
+                      )
+                    }}
                   </p>
                 </div>
               </div>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 81374f26645..95782b2c88a 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -54,14 +54,17 @@ export default {
         <slot name="header"></slot>
       </header>
       <div class="ide-tree-body h-100">
-        <file-row
-          v-for="file in currentTree.tree"
-          :key="file.key"
-          :file="file"
-          :level="0"
-          :extra-component="$options.FileRowExtra"
-          @toggleTreeOpen="toggleTreeOpen"
-        />
+        <template v-if="currentTree.tree.length">
+          <file-row
+            v-for="file in currentTree.tree"
+            :key="file.key"
+            :file="file"
+            :level="0"
+            :extra-component="$options.FileRowExtra"
+            @toggleTreeOpen="toggleTreeOpen"
+          />
+        </template>
+        <div v-else class="file-row">{{ __('No files') }}</div>
       </div>
     </template>
   </div>