E2E to add new directory in Web IDE

See https://gitlab.com/gitlab-org/gitlab/-/issues/270083

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

@@ -85,7 +85,11 @@ export default {
       role="button"
       @click="openFileInEditor"
     >
-      <span class="multi-file-commit-list-file-path d-flex align-items-center">
+      <span
+        class="multi-file-commit-list-file-path d-flex align-items-center"
+        data-qa-selector="file_to_commit_content"
+        :data-qa-file-name="file.name"
+      >
         <file-icon :file-name="file.name" class="gl-mr-3" />
         <template v-if="file.prevName && file.prevName !== file.name">
           {{ file.prevName }} &#x2192;

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

@@ -58,8 +58,9 @@ export default {
         <new-entry-button
           :label="__('New file')"
           :show-label="false"
-          class="d-flex border-0 p-0 mr-3 qa-new-file"
+          class="d-flex border-0 p-0 mr-3"
           icon="doc-new"
+          data-qa-selector="new_file_button"
           @click="createNewFile()"
         />
         <upload
@@ -73,6 +74,7 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0"
           icon="folder-new"
+          data-qa-selector="new_directory_button"
           @click="createNewFolder()"
         />
       </div>

app/assets/javascripts/vue_shared/components/file_icon.vue

@@ -90,6 +90,12 @@ export default {
     <svg v-else-if="!folder" :key="spriteHref" :class="[iconSizeClass, cssClasses]">
       <use v-bind="{ 'xlink:href': spriteHref }" />
     </svg>
-    <gl-icon v-else :name="folderIconName" :size="size" class="folder-icon" />
+    <gl-icon
+      v-else
+      :name="folderIconName"
+      :size="size"
+      class="folder-icon"
+      data-qa-selector="folder_icon_content"
+    />
   </span>
 </template>

qa/qa/page/project/web_ide/edit.rb

@@ -18,7 +18,8 @@ module QA
           end
 
           view 'app/assets/javascripts/ide/components/ide_tree.vue' do
-            element :new_file
+            element :new_file_button
+            element :new_directory_button
           end
 
           view 'app/assets/javascripts/ide/components/ide_tree_list.vue' do
@@ -83,6 +84,10 @@ module QA
             element :changed_file_icon_content
           end
 
+          view 'app/assets/javascripts/vue_shared/components/file_icon.vue' do
+            element :folder_icon_content
+          end
+
           view 'app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue' do
             element :preview_container
           end
@@ -99,12 +104,20 @@ module QA
             element :file_upload_field
           end
 
+          view 'app/assets/javascripts/ide/components/commit_sidebar/list_item.vue' do
+            element :file_to_commit_content
+          end
+
           def has_file?(file_name)
             within_element(:file_list) do
-              has_text?(file_name)
+              has_element?(:file_name_content, file_name: file_name)
             end
           end
 
+          def has_file_to_commit?(file_name)
+            has_element?(:file_to_commit_content, file_name: file_name)
+          end
+
           def has_project_path?(project_path)
             has_element?(:project_path_content, project_path: project_path)
           end
@@ -115,6 +128,12 @@ module QA
             end
           end
 
+          def has_folder_icon?(file_name)
+            within_element(:file_row_container, file_name: file_name) do
+              has_element?(:folder_icon_content)
+            end
+          end
+
           def has_download_button?(file_name)
             click_element(:file_row_container, file_name: file_name)
             within_element(:preview_container) do
@@ -141,7 +160,7 @@ module QA
           end
 
           def create_new_file_from_template(file_name, template)
-            click_element(:new_file, Page::Component::WebIDE::Modal::CreateNewFile)
+            click_element(:new_file_button, Page::Component::WebIDE::Modal::CreateNewFile)
 
             within_element(:template_list) do
               click_on file_name
@@ -234,7 +253,7 @@ module QA
           end
 
           def add_file(file_name, file_text)
-            click_element(:new_file, Page::Component::WebIDE::Modal::CreateNewFile)
+            click_element(:new_file_button, Page::Component::WebIDE::Modal::CreateNewFile)
             fill_element(:file_name_field, file_name)
             click_button('Create file')
             wait_until(reload: false) { has_file?(file_name) }
@@ -243,6 +262,13 @@ module QA
             end
           end
 
+          def add_directory(directory_name)
+            click_element(:new_directory_button, Page::Component::WebIDE::Modal::CreateNewFile)
+            fill_element(:file_name_field, directory_name)
+            click_button('Create directory')
+            wait_until(reload: false) { has_file?(directory_name) }
+          end
+
           def rename_file(file_name, new_file_name)
             click_element(:file_name_content, file_name: file_name)
             click_element(:dropdown_button)
@@ -273,6 +299,10 @@ module QA
             click_element(:dropdown_button)
             click_element(:delete_button)
           end
+
+          def switch_to_commit_tab
+            click_element(:commit_mode_tab)
+          end
         end
       end
     end

qa/qa/specs/features/browser_ui/3_create/web_ide/add_new_directory_in_web_ide_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create' do
+    describe 'Add a directory in Web IDE' do
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'add-directory-project'
+          project.initialize_with_readme = true
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+
+        project.visit!
+      end
+
+      context 'when a directory with the same name already exists' do
+        let(:directory_name) { 'first_directory' }
+
+        before do
+          Resource::Repository::Commit.fabricate_via_api! do |commit|
+            commit.project = project
+            commit.add_files([
+              {
+                file_path: 'first_directory/test_file.txt',
+                content: "Test file content"
+              }
+            ])
+          end
+
+          project.visit!
+
+          Page::Project::Show.perform(&:open_web_ide!)
+        end
+
+        it 'throws an error' do
+          Page::Project::WebIDE::Edit.perform do |ide|
+            ide.add_directory(directory_name)
+          end
+
+          expect(page).to have_content('The name "first_directory" is already taken in this directory.')
+        end
+      end
+
+      context 'when user adds a new empty directory' do
+        let(:directory_name) { 'new_empty_directory' }
+
+        before do
+          Page::Project::Show.perform(&:open_web_ide!)
+        end
+
+        it 'shows in the tree view but cannot be committed' do
+          Page::Project::WebIDE::Edit.perform do |ide|
+            ide.add_directory(directory_name)
+
+            expect(ide).to have_file(directory_name)
+            expect(ide).to have_folder_icon(directory_name)
+            expect(ide).not_to have_file_addition_icon(directory_name)
+
+            ide.switch_to_commit_tab
+
+            expect(ide).not_to have_file_to_commit(directory_name)
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/specs/features/browser_ui/3_create/web_ide/upload_new_file_in_web_ide_spec.rb

@@ -22,7 +22,7 @@ module QA
       context 'when a file with the same name already exists' do
         let(:file_name) { 'README.md' }
 
-        it 'throws an error' do
+        it 'throws an error', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1136' do
           Page::Project::WebIDE::Edit.perform do |ide|
             ide.upload_file(file_path)
           end
@@ -34,7 +34,7 @@ module QA
       context 'when the file is a text file' do
         let(:file_name) { 'text_file.txt' }
 
-        it 'shows the Edit tab with the text' do
+        it 'shows the Edit tab with the text', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1138' do
           Page::Project::WebIDE::Edit.perform do |ide|
             ide.upload_file(file_path)
 
@@ -52,7 +52,7 @@ module QA
       context 'when the file is binary' do
         let(:file_name) { 'logo_sample.svg' }
 
-        it 'shows a Download button' do
+        it 'shows a Download button', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1137' do
           Page::Project::WebIDE::Edit.perform do |ide|
             ide.upload_file(file_path)
 
@@ -70,7 +70,7 @@ module QA
       context 'when the file is an image' do
         let(:file_name) { 'dk.png' }
 
-        it 'shows an image viewer' do
+        it 'shows an image viewer', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1139' do
           Page::Project::WebIDE::Edit.perform do |ide|
             ide.upload_file(file_path)