E2E to test creating the very first file via Web IDE

Regression, see https://gitlab.com/gitlab-org/gitlab/-/issues/27915

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

@@ -141,6 +141,7 @@ export default {
                       variant="success"
                       :title="__('New file')"
                       :aria-label="__('New file')"
+                      data-qa-selector="first_file_button"
                       @click="createNewFile()"
                     >
                       {{ __('New file') }}

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

@@ -133,7 +133,7 @@ export default {
   <gl-modal
     ref="modal"
     modal-id="ide-new-entry"
-    modal-class="qa-new-file-modal"
+    data-qa-selector="new_file_modal"
     :title="modalTitle"
     :ok-title="buttonLabel"
     ok-variant="success"
@@ -148,7 +148,8 @@ export default {
           ref="fieldName"
           v-model.trim="entryName"
           type="text"
-          class="form-control qa-full-file-path"
+          class="form-control"
+          data-qa-selector="file_name_field"
           :placeholder="placeholder"
         />
         <ul

qa/qa.rb

@@ -440,6 +440,10 @@ module QA
 
       module WebIDE
         autoload :Alert, 'qa/page/component/web_ide/alert'
+
+        module Modal
+          autoload :CreateNewFile, 'qa/page/component/web_ide/modal/create_new_file'
+        end
       end
 
       module Project

qa/qa/page/component/web_ide/modal/create_new_file.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module WebIDE
+        module Modal
+          class CreateNewFile < Page::Base
+            view 'app/assets/javascripts/ide/components/new_dropdown/modal.vue' do
+              element :file_name_field, required: true
+              element :new_file_modal, required: true
+              element :template_list, required: true
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -20,12 +20,6 @@ module QA
             element :file_list
           end
 
-          view 'app/assets/javascripts/ide/components/new_dropdown/modal.vue' do
-            element :full_file_path
-            element :new_file_modal
-            element :template_list
-          end
-
           view 'app/assets/javascripts/ide/components/file_templates/bar.vue' do
             element :file_templates_bar
             element :file_template_dropdown
@@ -52,6 +46,10 @@ module QA
             element :editor_container
           end
 
+          view 'app/assets/javascripts/ide/components/ide.vue' do
+            element :first_file_button
+          end
+
           def has_file?(file_name)
             within_element(:file_list) do
               page.has_content? file_name
@@ -59,10 +57,7 @@ module QA
           end
 
           def create_new_file_from_template(file_name, template)
-            click_element :new_file
-
-            # Wait for the modal animation to complete before clicking on the file name
-            wait_for_animated_element(:new_file_modal)
+            click_element(:new_file, Page::Component::WebIDE::Modal::CreateNewFile)
 
             within_element(:template_list) do
               click_on file_name
@@ -130,6 +125,13 @@ module QA
               find('.modified textarea.inputarea')
             end
           end
+
+          def create_first_file(file_name)
+            finished_loading?
+            click_element(:first_file_button, Page::Component::WebIDE::Modal::CreateNewFile)
+            fill_element(:file_name_field, file_name)
+            click_button('Create file')
+          end
         end
       end
     end

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

+# frozen_string_literal: true
+
+module QA
+  context 'Create' do
+    describe 'First file using Web IDE' do
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'empty-project'
+          project.initialize_with_readme = false
+        end
+      end
+
+      let(:web_ide_url) { current_url + '-/ide/project/' + project.path_with_namespace }
+      let(:file_name) { 'the very first file.txt' }
+
+      before do
+        Flow::Login.sign_in
+      end
+
+      it "creates the first file in an empty project via Web IDE" do
+        # In the first iteration, the test opens Web IDE by modifying the URL to address past regressions.
+        # Once the Web IDE button is introduced for empty projects, the test will be modified to go through UI.
+        # See https://gitlab.com/gitlab-org/gitlab/-/issues/27915 and https://gitlab.com/gitlab-org/gitlab/-/issues/27535.
+        page.visit(web_ide_url)
+
+        Page::Project::WebIDE::Edit.perform do |ide|
+          ide.create_first_file(file_name)
+          ide.commit_changes
+        end
+
+        project.visit!
+
+        Page::Project::Show.perform do |project|
+          expect(project).to have_file(file_name)
+        end
+      end
+    end
+  end
+end