From 860d84886f5d409dcc451eaa43f8455f2a16ebf4 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 5 Feb 2025 13:37:54 +0100
Subject: [PATCH] Import group: Migrate components used

Migrates header to pageHeading and blocks to Crud.

Changelog: changed
---
 .../pages/groups/new/components/app.vue       |  5 -
 .../projects/new/components/app.vue           |  8 --
 .../new_namespace/new_namespace_page.vue      | 20 ++--
 app/assets/stylesheets/framework/crud.scss    |  4 +
 ...roup_from_another_instance_panel.html.haml | 99 +++++++++----------
 .../_import_group_from_file_panel.html.haml   | 28 +++---
 app/views/groups/_new_group_fields.html.haml  |  4 +-
 app/views/groups/_personalize.html.haml       |  2 +-
 app/views/groups/new.html.haml                |  3 +-
 .../projects/_new_project_fields.html.haml    |  9 +-
 .../import_export/connect_instance_spec.rb    |  8 +-
 .../pages/groups/new/components/app_spec.js   |  4 -
 .../components/__snapshots__/app_spec.js.snap |  3 -
 .../new_namespace/new_namespace_page_spec.js  |  9 +-
 14 files changed, 90 insertions(+), 116 deletions(-)

diff --git a/app/assets/javascripts/pages/groups/new/components/app.vue b/app/assets/javascripts/pages/groups/new/components/app.vue
index 876e85e4a47be1..de930788378d8b 100644
--- a/app/assets/javascripts/pages/groups/new/components/app.vue
+++ b/app/assets/javascripts/pages/groups/new/components/app.vue
@@ -1,7 +1,4 @@
 <script>
-import GROUP_IMPORT_SVG_URL from '@gitlab/svgs/dist/illustrations/group-import.svg?url';
-import GROUP_NEW_SVG_URL from '@gitlab/svgs/dist/illustrations/group-new.svg?url';
-
 import { s__ } from '~/locale';
 import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
 import createGroupDescriptionDetails from './create_group_description_details.vue';
@@ -74,7 +71,6 @@ export default {
             parentGroupName: this.parentGroupName,
             importExistingGroupPath: this.importExistingGroupPath,
           },
-          imageSrc: GROUP_NEW_SVG_URL,
         },
         {
           name: 'import-group-pane',
@@ -84,7 +80,6 @@ export default {
             'GroupsNew|Import a group and related data from another GitLab instance.',
           ),
           details: 'Migrate your existing groups from another instance of GitLab.',
-          imageSrc: GROUP_IMPORT_SVG_URL,
         },
       ];
     },
diff --git a/app/assets/javascripts/projects/new/components/app.vue b/app/assets/javascripts/projects/new/components/app.vue
index 7b55fe6c01cd12..2f650f638bba69 100644
--- a/app/assets/javascripts/projects/new/components/app.vue
+++ b/app/assets/javascripts/projects/new/components/app.vue
@@ -1,8 +1,4 @@
 <script>
-import PROJECT_CREATE_FROM_TEMPLATE_SVG_URL from '@gitlab/svgs/dist/illustrations/project-create-from-template-sm.svg?url';
-import PROJECT_CREATE_NEW_SVG_URL from '@gitlab/svgs/dist/illustrations/project-create-new-sm.svg?url';
-import PROJECT_IMPORT_SVG_URL from '@gitlab/svgs/dist/illustrations/project-import-sm.svg?url';
-import PROJECT_RUN_CICD_PIPELINES_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-devops-md.svg?url';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
 import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
@@ -19,7 +15,6 @@ const PANELS = [
     description: s__(
       'ProjectsNew|Create a blank project to store your files, plan your work, and collaborate on code, among other things.',
     ),
-    imageSrc: PROJECT_CREATE_NEW_SVG_URL,
   },
   {
     key: 'template',
@@ -29,7 +24,6 @@ const PANELS = [
     description: s__(
       'ProjectsNew|Create a project pre-populated with the necessary files to get you started quickly.',
     ),
-    imageSrc: PROJECT_CREATE_FROM_TEMPLATE_SVG_URL,
   },
   {
     key: 'import',
@@ -39,7 +33,6 @@ const PANELS = [
     description: s__(
       'ProjectsNew|Migrate your data from an external source like GitHub, Bitbucket, or another instance of GitLab.',
     ),
-    imageSrc: PROJECT_IMPORT_SVG_URL,
   },
   {
     key: 'ci',
@@ -47,7 +40,6 @@ const PANELS = [
     selector: '#ci-cd-project-pane',
     title: s__('ProjectsNew|Run CI/CD for external repository'),
     description: s__('ProjectsNew|Connect your external repository to GitLab CI/CD.'),
-    imageSrc: PROJECT_RUN_CICD_PIPELINES_SVG_URL,
   },
 ];
 
diff --git a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
index 084b839dc99640..07dfe5e3e5a49f 100644
--- a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
+++ b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
@@ -4,12 +4,14 @@ import NewTopLevelGroupAlert from '~/groups/components/new_top_level_group_alert
 import SuperSidebarToggle from '~/super_sidebar/components/super_sidebar_toggle.vue';
 import { sidebarState, JS_TOGGLE_EXPAND_CLASS } from '~/super_sidebar/constants';
 import { s__ } from '~/locale';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
 import LegacyContainer from './components/legacy_container.vue';
 import WelcomePage from './components/welcome.vue';
 
 export default {
   JS_TOGGLE_EXPAND_CLASS,
   components: {
+    PageHeading,
     NewTopLevelGroupAlert,
     GlBreadcrumb,
     GlIcon,
@@ -150,19 +152,13 @@ export default {
     </div>
 
     <template v-if="activePanel">
-      <div data-testid="active-panel-template" class="gl-flex gl-items-center gl-py-5">
-        <div class="col-auto">
-          <img aria-hidden="true" :src="activePanel.imageSrc" :alt="activePanel.title" />
-        </div>
-        <div class="col">
-          <h1 class="gl-heading-2-fixed gl-my-3">{{ activePanel.title }}</h1>
-
-          <p v-if="hasTextDetails">{{ details }}</p>
+      <page-heading :heading="activePanel.title" data-testid="active-panel-template">
+        <template #description>
+          <template v-if="hasTextDetails">{{ details }}</template>
           <component :is="details" v-else v-bind="detailProps" />
-        </div>
-
-        <slot name="extra-description"></slot>
-      </div>
+          <slot name="extra-description"></slot>
+        </template>
+      </page-heading>
 
       <gl-alert
         v-if="identityVerificationRequired"
diff --git a/app/assets/stylesheets/framework/crud.scss b/app/assets/stylesheets/framework/crud.scss
index 4f1f8f6506c6c6..d61169d2ca6bb8 100644
--- a/app/assets/stylesheets/framework/crud.scss
+++ b/app/assets/stylesheets/framework/crud.scss
@@ -113,3 +113,7 @@ $crud-header-min-height: px-to-rem(49px);
     margin-bottom: 0;
   }
 }
+
+.crud-body .gl-alert {
+  @apply dark:gl-bg-strong;
+}
diff --git a/app/views/groups/_import_group_from_another_instance_panel.html.haml b/app/views/groups/_import_group_from_another_instance_panel.html.haml
index 7a40d03b47b748..d8c4f887442fcb 100644
--- a/app/views/groups/_import_group_from_another_instance_panel.html.haml
+++ b/app/views/groups/_import_group_from_another_instance_panel.html.haml
@@ -1,57 +1,56 @@
 - bulk_imports_enabled = Gitlab::CurrentSettings.bulk_import_enabled?
 
-= gitlab_ui_form_with url: configure_import_bulk_imports_path(namespace_id: params[:parent_id]), class: 'gl-show-field-errors' do |f|
-  .gl-border-l-solid.gl-border-r-solid.gl-border-t-solid.gl-border-default.gl-border-1.gl-p-5.gl-mt-4
-    .gl-flex.gl-items-center.gl-justify-between
-      %h2.gl-flex.gl-heading-2-fixed.gl-my-3
-        = s_('GroupsNew|Import groups by direct transfer')
-      = render Pajamas::ButtonComponent.new(href: history_import_bulk_imports_path, category: :secondary, variant: :confirm, size: :small) do
-        = s_('BulkImport|View import history')
+.gl-flex.gl-flex-col.gl-gap-5
+  - if !bulk_imports_enabled
+    = render Pajamas::AlertComponent.new(dismissible: false, variant: :tip) do |c|
+      - c.with_body do
+        = s_('GroupsNew|Importing groups by direct transfer is currently disabled.')
 
-    - if !bulk_imports_enabled
-      = render Pajamas::AlertComponent.new(dismissible: false, variant: :tip) do |c|
-        - c.with_body do
-          = s_('GroupsNew|Importing groups by direct transfer is currently disabled.')
+        - if current_user.admin?
+          - admin_link = link_to('', general_admin_application_settings_path(anchor: 'js-import-export-settings'))
 
-          - if current_user.admin?
-            - admin_link = link_to('', general_admin_application_settings_path(anchor: 'js-import-export-settings'))
+          = safe_format(s_('GroupsNew|Please %{admin_link_start}enable it in the Admin settings%{admin_link_end}.'), tag_pair(admin_link, :admin_link_start, :admin_link_end))
+        - else
+          = s_('GroupsNew|Please ask your Administrator to enable it in the Admin settings.')
 
-            = safe_format(s_('GroupsNew|Please %{admin_link_start}enable it in the Admin settings%{admin_link_end}.'), tag_pair(admin_link, :admin_link_start, :admin_link_end))
-          - else
-            = s_('GroupsNew|Please ask your Administrator to enable it in the Admin settings.')
+        = s_('GroupsNew|Remember to enable it also on the instance you are migrating from.')
+  - else
+    = render ::Layouts::CrudComponent.new(s_('GroupsNew|Import groups by direct transfer')) do |c|
+      - c.with_actions do
+        = render Pajamas::ButtonComponent.new(href: history_import_bulk_imports_path, size: :small) do
+          = s_('BulkImport|View import history')
+      - c.with_body do
+        = render Pajamas::AlertComponent.new(dismissible: false,
+          variant: :warning) do |c|
+          - c.with_body do
+            - docs_link = link_to('', help_page_path('user/group/import/migrated_items.md', anchor: 'migrated-group-items'), target: '_blank', rel: 'noopener noreferrer')
+            = safe_format(s_('GroupsNew|Not all group items are migrated. %{docs_link_start}What items are migrated%{docs_link_end}?'), tag_pair(docs_link, :docs_link_start, :docs_link_end))
 
-          = s_('GroupsNew|Remember to enable it also on the instance you are migrating from.')
-    - else
-      = render Pajamas::AlertComponent.new(dismissible: false,
-        variant: :warning) do |c|
-        - c.with_body do
-          - docs_link = link_to('', help_page_path('user/group/import/migrated_items.md', anchor: 'migrated-group-items'), target: '_blank', rel: 'noopener noreferrer')
-          = safe_format(s_('GroupsNew|Not all group items are migrated. %{docs_link_start}What items are migrated%{docs_link_end}?'), tag_pair(docs_link, :docs_link_start, :docs_link_end))
+        = gitlab_ui_form_with url: configure_import_bulk_imports_path(namespace_id: params[:parent_id]), class: 'gl-show-field-errors' do |f|
+          %p.gl-mt-5.gl-mb-3
+            - url_link = link_to('', help_page_path('user/group/import/direct_transfer_migrations.md', anchor: 'connect-the-source-gitlab-instance'), target: '_blank', rel: 'noopener noreferrer')
+            = safe_format(s_('GroupsNew|Provide credentials for the %{url_link_start}source instance%{url_link_end} to import from. You can provide this instance as a source to move groups within this instance.'), tag_pair(url_link, :url_link_start, :url_link_end))
+          .form-group.gl-form-group.gl-flex.gl-flex-col
+            = f.label :bulk_import_gitlab_url, s_('GroupsNew|GitLab source instance base URL'), for: 'import_gitlab_url'
+            = f.text_field :bulk_import_gitlab_url, disabled: !bulk_imports_enabled, placeholder: 'https://gitlab.example.com', class: 'gl-form-input col-xs-12 col-sm-8',
+              required: true,
+              title: s_('GroupsNew|Enter the URL for the source instance.'),
+              id: 'import_gitlab_url',
+              data: { testid: 'import-gitlab-url' }
+            %small.form-text.gl-text-subtle
+              = s_('Import|Must only contain the base URL of the source GitLab instance.')
+          .form-group.gl-form-group.gl-flex.gl-flex-col
+            = f.label :bulk_import_gitlab_access_token, s_('GroupsNew|Personal access token'), for: 'import_gitlab_token', class: 'col-form-label'
+            .gl-text-subtle
+              - pat_link = link_to('', help_page_path('user/profile/personal_access_tokens.md'), target: '_blank')
+              - short_living_link = link_to('', help_page_path('security/tokens/_index.md', anchor: 'security-considerations'), target: '_blank')
+              = safe_format(s_('GroupsNew|Create a token in the %{pat_link_start}user settings%{pat_link_end} of the source GitLab instance with the %{code_start}api%{code_end} scope. For source instances on GitLab 15.0 or earlier, the token must additionally have the %{code_start}read_repository%{code_end} scope. For %{short_living_link_start}security reasons%{short_living_link_end}, set a short expiration date for the token. Keep in mind that large migrations take more time.'), tag_pair('<code></code>'.html_safe, :code_start , :code_end), tag_pair(pat_link, :pat_link_start, :pat_link_end), tag_pair(short_living_link, :short_living_link_start, :short_living_link_end))
+            = f.password_field :bulk_import_gitlab_access_token, placeholder: s_('GroupsNew|e.g. h8d3f016698e...'), class: 'gl-form-input gl-mt-3 col-xs-12 col-sm-8',
+              required: true,
+              disabled: !bulk_imports_enabled,
+              autocomplete: 'off',
+              title: s_('GroupsNew|Please fill in your personal access token.'),
+              id: 'import_gitlab_token',
+              data: { testid: 'import-gitlab-token' }
 
-    %p.gl-mt-5.gl-mb-3
-      - url_link = link_to('', help_page_path('user/group/import/direct_transfer_migrations.md', anchor: 'connect-the-source-gitlab-instance'), target: '_blank', rel: 'noopener noreferrer')
-      = safe_format(s_('GroupsNew|Provide credentials for the %{url_link_start}source instance%{url_link_end} to import from. You can provide this instance as a source to move groups within this instance.'), tag_pair(url_link, :url_link_start, :url_link_end))
-    .form-group.gl-form-group.gl-flex.gl-flex-col
-      = f.label :bulk_import_gitlab_url, s_('GroupsNew|GitLab source instance base URL'), for: 'import_gitlab_url'
-      = f.text_field :bulk_import_gitlab_url, disabled: !bulk_imports_enabled, placeholder: 'https://gitlab.example.com', class: 'gl-form-input col-xs-12 col-sm-8',
-        required: true,
-        title: s_('GroupsNew|Enter the URL for the source instance.'),
-        id: 'import_gitlab_url',
-        data: { testid: 'import-gitlab-url' }
-      %small.form-text.gl-text-subtle
-        = s_('Import|Must only contain the base URL of the source GitLab instance.')
-    .form-group.gl-form-group.gl-flex.gl-flex-col
-      = f.label :bulk_import_gitlab_access_token, s_('GroupsNew|Personal access token'), for: 'import_gitlab_token', class: 'col-form-label'
-      .gl-font-normal
-        - pat_link = link_to('', help_page_path('user/profile/personal_access_tokens.md'), target: '_blank')
-        - short_living_link = link_to('', help_page_path('security/tokens/_index.md', anchor: 'security-considerations'), target: '_blank')
-        = safe_format(s_('GroupsNew|Create a token in the %{pat_link_start}user settings%{pat_link_end} of the source GitLab instance with the %{code_start}api%{code_end} scope. For source instances on GitLab 15.0 or earlier, the token must additionally have the %{code_start}read_repository%{code_end} scope. For %{short_living_link_start}security reasons%{short_living_link_end}, set a short expiration date for the token. Keep in mind that large migrations take more time.'), tag_pair('<code></code>'.html_safe, :code_start , :code_end), tag_pair(pat_link, :pat_link_start, :pat_link_end), tag_pair(short_living_link, :short_living_link_start, :short_living_link_end))
-      = f.password_field :bulk_import_gitlab_access_token, placeholder: s_('GroupsNew|e.g. h8d3f016698e...'), class: 'gl-form-input gl-mt-3 col-xs-12 col-sm-8',
-        required: true,
-        disabled: !bulk_imports_enabled,
-        autocomplete: 'off',
-        title: s_('GroupsNew|Please fill in your personal access token.'),
-        id: 'import_gitlab_token',
-        data: { testid: 'import-gitlab-token' }
-  .gl-border-default.gl-border-solid.gl-border-1.gl-p-5
-    = f.submit s_('GroupsNew|Connect instance'), disabled: !bulk_imports_enabled, pajamas_button: true, data: { testid: 'connect-instance-button' }
+          = f.submit s_('GroupsNew|Connect instance'), disabled: !bulk_imports_enabled, pajamas_button: true, data: { testid: 'connect-instance-button' }
diff --git a/app/views/groups/_import_group_from_file_panel.html.haml b/app/views/groups/_import_group_from_file_panel.html.haml
index bde10b200c1f31..7869692641793b 100644
--- a/app/views/groups/_import_group_from_file_panel.html.haml
+++ b/app/views/groups/_import_group_from_file_panel.html.haml
@@ -2,10 +2,8 @@
 - group_path = root_url
 - group_path << parent.full_path + '/' if parent
 
-= gitlab_ui_form_for '', url: import_gitlab_group_path, namespace: 'import_group', class: 'group-form gl-show-field-errors', multipart: true do |f|
-  .gl-border-l-solid.gl-border-r-solid.gl-border-default.gl-border-1.gl-p-5
-    %h2.gl-heading-2-fixed.gl-my-3
-      = _('Import group from file')
+= render ::Layouts::CrudComponent.new(_('Import group from file')) do |c|
+  - c.with_body do
     = render Pajamas::AlertComponent.new(variant: :warning,
       alert_options: { class: 'gl-mb-5' },
       dismissible: false) do |c|
@@ -13,13 +11,15 @@
         - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
         - link_end = '</a>'.html_safe
         = s_('GroupsNew|This feature is deprecated and replaced by group migration by direct transfer. %{docs_link_start}Learn more%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: link_end }
-    = render 'shared/groups/group_name_and_path_fields', f: f
-    .form-group
-      = f.label :file, s_('GroupsNew|Upload file')
-      .gl-font-normal
-        - import_export_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: help_page_path('user/project/settings/import_export.md', anchor: 'migrate-groups-by-uploading-an-export-file-deprecated') }
-        = s_('GroupsNew|To import a group, navigate to the group settings for the GitLab source instance, %{link_start}generate an export file%{link_end}, and upload it here.').html_safe % { link_start: import_export_link_start, link_end: '</a>'.html_safe }
-      .gl-mt-3
-        = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
-  .gl-border-default.gl-border-solid.gl-border-1.gl-p-5
-    = f.submit _('Import'), pajamas_button: true
+
+    = gitlab_ui_form_for '', url: import_gitlab_group_path, namespace: 'import_group', class: 'group-form gl-show-field-errors', multipart: true do |f|
+      = render 'shared/groups/group_name_and_path_fields', f: f
+      .form-group
+        = f.label :file, s_('GroupsNew|Upload file')
+        .gl-text-subtle
+          - import_export_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: help_page_path('user/project/settings/import_export.md', anchor: 'migrate-groups-by-uploading-an-export-file-deprecated') }
+          = s_('GroupsNew|To import a group, navigate to the group settings for the GitLab source instance, %{link_start}generate an export file%{link_end}, and upload it here.').html_safe % { link_start: import_export_link_start, link_end: '</a>'.html_safe }
+        .gl-mt-3
+          = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
+
+      = f.submit _('Import'), pajamas_button: true
diff --git a/app/views/groups/_new_group_fields.html.haml b/app/views/groups/_new_group_fields.html.haml
index 13dc08e673f90f..6812f0d039313a 100644
--- a/app/views/groups/_new_group_fields.html.haml
+++ b/app/views/groups/_new_group_fields.html.haml
@@ -7,7 +7,7 @@
   .form-group.gl-form-group.col-sm-12
     %label.label-bold
       = _('Visibility level')
-    %p
+    %p.gl-text-subtle
       = _('Who will be able to see this group?')
       = link_to _('View the documentation'), help_page_path("user/public_access.md"), target: '_blank', rel: 'noopener noreferrer'
     = render 'shared/visibility_level', f: f, visibility_level: default_group_visibility, can_change_visibility_level: true, form_model: @group, with_label: false
@@ -29,7 +29,7 @@
       .col-sm-4
         = recaptcha_tags nonce: content_security_policy_nonce
 .row
-  .col-sm-12
+  .col-sm-12.gl-flex.gl-gap-3
     = f.submit submit_label, pajamas_button: true, data: { testid: 'create-group-button' }
     = render Pajamas::ButtonComponent.new(href: @parent_group || dashboard_groups_path) do
       = _('Cancel')
diff --git a/app/views/groups/_personalize.html.haml b/app/views/groups/_personalize.html.haml
index 013e854eb32f26..622b9c84d99e99 100644
--- a/app/views/groups/_personalize.html.haml
+++ b/app/views/groups/_personalize.html.haml
@@ -2,7 +2,7 @@
   .form-group.col-sm-12.gl-mb-0
     %label.label-bold
       = _('Now, personalize your GitLab experience')
-    %p
+    %p.gl-text-subtle
       = _("We'll use this to help surface the right features and information to you.")
 
 .row
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index bed49c963655f4..1c4c2d318bf05e 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -15,7 +15,6 @@
       = gitlab_ui_form_for @group, html: { class: 'group-form gl-show-field-errors gl-mt-3' } do |f|
         = render 'new_group_fields', f: f, group_name_id: 'create-group-name'
 
-    #import-group-pane.tab-pane
+    #import-group-pane.tab-pane.gl-flex.gl-flex-col.gl-gap-5
       = render 'import_group_from_another_instance_panel'
-      .gl-mt-7.gl-border-b-solid.gl-border-default.gl-border-1
       = render 'import_group_from_file_panel'
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 3d869819040e48..6a1a28866b5010 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -103,7 +103,8 @@
             = s_("ProjectsNew|Might break existing functionality with other repositories or APIs. It's not possible to change SHA-256 repositories back to the default SHA-1 hashing algorithm.")
 
 
--# this partial is from JiHu, see details in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/675
-= render_if_exists 'shared/other_project_options', f: f, visibility_level: visibility_level, track_label: track_label
-= f.submit _('Create project'), class: "js-create-project-button", data: { testid: 'project-create-button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }, pajamas_button: true
-= link_button_to _('Cancel'), @parent_group || dashboard_groups_path, data: { track_label: "#{track_label}", track_action: "click_button", track_property: "cancel", track_value: "" }
+.gl-flex.gl-gap-3
+  -# this partial is from JiHu, see details in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/675
+  = render_if_exists 'shared/other_project_options', f: f, visibility_level: visibility_level, track_label: track_label
+  = f.submit _('Create project'), class: "js-create-project-button", data: { testid: 'project-create-button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }, pajamas_button: true
+  = link_button_to _('Cancel'), @parent_group || dashboard_groups_path, data: { track_label: "#{track_label}", track_action: "click_button", track_property: "cancel", track_value: "" }
diff --git a/spec/features/groups/import_export/connect_instance_spec.rb b/spec/features/groups/import_export/connect_instance_spec.rb
index a75833114d852e..6f2db4ab2de226 100644
--- a/spec/features/groups/import_export/connect_instance_spec.rb
+++ b/spec/features/groups/import_export/connect_instance_spec.rb
@@ -84,10 +84,10 @@
       open_import_group
     end
 
-    it 'renders fields and button disabled' do
-      expect(page).to have_field('GitLab source instance base URL', disabled: true)
-      expect(page).to have_field('Personal access token', disabled: true)
-      expect(page).to have_button('Connect instance', disabled: true)
+    it "doesn't render fields and button" do
+      expect(page).not_to have_field('GitLab source instance base URL')
+      expect(page).not_to have_field('Personal access token')
+      expect(page).not_to have_button('Connect instance')
     end
   end
 
diff --git a/spec/frontend/pages/groups/new/components/app_spec.js b/spec/frontend/pages/groups/new/components/app_spec.js
index baf0ca2becaa6b..2e70298df38fed 100644
--- a/spec/frontend/pages/groups/new/components/app_spec.js
+++ b/spec/frontend/pages/groups/new/components/app_spec.js
@@ -1,6 +1,4 @@
 import { shallowMount } from '@vue/test-utils';
-import GROUP_IMPORT_SVG_URL from '@gitlab/svgs/dist/illustrations/group-import.svg?url';
-import GROUP_NEW_SVG_URL from '@gitlab/svgs/dist/illustrations/group-new.svg?url';
 
 import App from '~/pages/groups/new/components/app.vue';
 import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
@@ -30,7 +28,6 @@ describe('App component', () => {
       { href: '#', text: 'New group' },
     ]);
     expect(findCreateGroupPanel().title).toBe('Create group');
-    expect(findCreateGroupPanel().imageSrc).toBe(GROUP_NEW_SVG_URL);
   });
 
   it('creates correct component for subgroup creation', () => {
@@ -49,6 +46,5 @@ describe('App component', () => {
     ]);
     expect(findCreateGroupPanel().title).toBe('Create subgroup');
     expect(findCreateGroupPanel().detailProps).toEqual(detailProps);
-    expect(findCreateGroupPanel().imageSrc).toBe(GROUP_IMPORT_SVG_URL);
   });
 });
diff --git a/spec/frontend/projects/new/components/__snapshots__/app_spec.js.snap b/spec/frontend/projects/new/components/__snapshots__/app_spec.js.snap
index e18bb03b66691f..3ec65946ffd14a 100644
--- a/spec/frontend/projects/new/components/__snapshots__/app_spec.js.snap
+++ b/spec/frontend/projects/new/components/__snapshots__/app_spec.js.snap
@@ -4,7 +4,6 @@ exports[`Experimental new project creation app creates correct panels 1`] = `
 [
   {
     "description": "Create a blank project to store your files, plan your work, and collaborate on code, among other things.",
-    "imageSrc": "file-mock",
     "key": "blank",
     "name": "blank_project",
     "selector": "#blank-project-pane",
@@ -12,7 +11,6 @@ exports[`Experimental new project creation app creates correct panels 1`] = `
   },
   {
     "description": "Create a project pre-populated with the necessary files to get you started quickly.",
-    "imageSrc": "file-mock",
     "key": "template",
     "name": "create_from_template",
     "selector": "#create-from-template-pane",
@@ -20,7 +18,6 @@ exports[`Experimental new project creation app creates correct panels 1`] = `
   },
   {
     "description": "Migrate your data from an external source like GitHub, Bitbucket, or another instance of GitLab.",
-    "imageSrc": "file-mock",
     "key": "import",
     "name": "import_project",
     "selector": "#import-project-pane",
diff --git a/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js b/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
index 92200d0bf0f679..3c60aa933d3198 100644
--- a/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
+++ b/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
@@ -16,7 +16,6 @@ describe('Experimental new namespace creation app', () => {
   const findLegacyContainer = () => wrapper.findComponent(LegacyContainer);
   const findTopBar = () => wrapper.findByTestId('top-bar');
   const findBreadcrumb = () => wrapper.findComponent(GlBreadcrumb);
-  const findImage = () => wrapper.find('img');
   const findNewTopLevelGroupAlert = () => wrapper.findComponent(NewTopLevelGroupAlert);
   const findSuperSidebarToggle = () => wrapper.findComponent(SuperSidebarToggle);
   const findAccountVerificationAlert = () => wrapper.findComponent(GlAlert);
@@ -25,8 +24,8 @@ describe('Experimental new namespace creation app', () => {
     title: 'Create something',
     initialBreadcrumbs: [{ text: 'Something', href: '#' }],
     panels: [
-      { name: 'panel1', selector: '#some-selector1', imageSrc: 'panel1.svg' },
-      { name: 'panel2', selector: '#some-selector2', imageSrc: 'panel2.svg' },
+      { name: 'panel1', selector: '#some-selector1' },
+      { name: 'panel2', selector: '#some-selector2' },
     ],
     persistenceKey: 'DEMO-PERSISTENCE-KEY',
   };
@@ -89,10 +88,6 @@ describe('Experimental new namespace creation app', () => {
       expect(breadcrumb.exists()).toBe(true);
       expect(breadcrumb.props().items[0].text).toBe(DEFAULT_PROPS.initialBreadcrumbs[0].text);
     });
-
-    it('renders images', () => {
-      expect(findImage().element.src).toBe(DEFAULT_PROPS.panels[1].imageSrc);
-    });
   });
 
   it('renders extra description if provided', () => {
-- 
GitLab