From b401abb1b181df3d07c41866a13c2e55a0205f49 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Thu, 30 Jan 2025 14:26:29 +0100
Subject: [PATCH] Add command line to the new project creation form

---
 .../projects/new_v2/components/app.vue        | 16 ++++++
 .../new_v2/components/command_line.vue        | 53 +++++++++++++++++++
 .../javascripts/projects/new_v2/index.js      |  2 +
 locale/gitlab.pot                             |  9 ++++
 .../projects/new_v2/components/app_spec.js    | 16 ++++++
 5 files changed, 96 insertions(+)
 create mode 100644 app/assets/javascripts/projects/new_v2/components/command_line.vue

diff --git a/app/assets/javascripts/projects/new_v2/components/app.vue b/app/assets/javascripts/projects/new_v2/components/app.vue
index de5114309f1a6f..d198166a733058 100644
--- a/app/assets/javascripts/projects/new_v2/components/app.vue
+++ b/app/assets/javascripts/projects/new_v2/components/app.vue
@@ -1,11 +1,13 @@
 <script>
 import { GlButton, GlButtonGroup, GlFormGroup, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 import SingleChoiceSelector from '~/vue_shared/components/single_choice_selector.vue';
 import SingleChoiceSelectorItem from '~/vue_shared/components/single_choice_selector_item.vue';
 
 import NewProjectDestinationSelect from './project_destination_select.vue';
+import CommandLine from './command_line.vue';
 
 const OPTIONS = {
   blank: {
@@ -65,6 +67,10 @@ export default {
     SingleChoiceSelector,
     SingleChoiceSelectorItem,
     NewProjectDestinationSelect,
+    CommandLine,
+  },
+  directives: {
+    SafeHtml,
   },
   props: {
     rootPath: {
@@ -127,6 +133,11 @@ export default {
       required: false,
       default: null,
     },
+    newProjectGuidelines: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -211,5 +222,10 @@ export default {
         <single-choice-selector-item v-bind="$options.OPTIONS.transfer" :disabled="true" />
       </single-choice-selector>
     </template>
+    <template #footer>
+      <div v-if="newProjectGuidelines" v-safe-html="newProjectGuidelines" class="gl-mb-6"></div>
+
+      <command-line v-if="isPersonalProject" />
+    </template>
   </multi-step-form-template>
 </template>
diff --git a/app/assets/javascripts/projects/new_v2/components/command_line.vue b/app/assets/javascripts/projects/new_v2/components/command_line.vue
new file mode 100644
index 00000000000000..c66fa12464a320
--- /dev/null
+++ b/app/assets/javascripts/projects/new_v2/components/command_line.vue
@@ -0,0 +1,53 @@
+<script>
+import { GlFormGroup, GlLink, GlFormInputGroup } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlLink,
+    GlFormInputGroup,
+    ClipboardButton,
+  },
+  directives: {
+    SafeHtml,
+  },
+  inject: ['projectHelpPath', 'pushToCreateProjectCommand'],
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-mb-6 gl-flex gl-items-center gl-gap-4">
+      <div class="gl-border-t gl-w-full"></div>
+      <div class="gl-text-primary">{{ __('or') }}</div>
+      <div class="gl-border-t gl-w-full"></div>
+    </div>
+
+    <gl-form-group
+      :label="s__('ProjectNew|You can also create a project from the command line')"
+      data-testid="new-project-with-command"
+    >
+      <template #label-description>
+        <gl-link :href="`${projectHelpPath}#create-a-new-project-with-git-push`" target="_blank">
+          {{ s__('ProjectNew|What does this command do?') }}
+        </gl-link>
+      </template>
+      <gl-form-input-group
+        :value="pushToCreateProjectCommand"
+        readonly
+        select-on-click
+        :aria-label="s__('ProjectNew|Push project from command line')"
+      >
+        <template #append>
+          <clipboard-button
+            :text="pushToCreateProjectCommand"
+            :title="__('Copy command')"
+            tooltip-placement="right"
+          />
+        </template>
+      </gl-form-input-group>
+    </gl-form-group>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/new_v2/index.js b/app/assets/javascripts/projects/new_v2/index.js
index 92db791b3b6dbc..8552f8346d6cfe 100644
--- a/app/assets/javascripts/projects/new_v2/index.js
+++ b/app/assets/javascripts/projects/new_v2/index.js
@@ -26,6 +26,7 @@ export function initNewProjectForm() {
     namespaceId,
     userNamespaceId,
     trackLabel,
+    newProjectGuidelines,
   } = el.dataset;
 
   const props = {
@@ -41,6 +42,7 @@ export function initNewProjectForm() {
     namespaceId,
     userNamespaceId,
     trackLabel,
+    newProjectGuidelines,
   };
 
   const provide = {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5526f4e8fe831e..f13b8bd1f836d4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -44543,9 +44543,18 @@ msgstr ""
 msgid "ProjectMaintenance|You will receive an email notification when the process is complete. To remove old versions from the repository, run housekeeping."
 msgstr ""
 
+msgid "ProjectNew|Push project from command line"
+msgstr ""
+
 msgid "ProjectNew|What do you want to create?"
 msgstr ""
 
+msgid "ProjectNew|What does this command do?"
+msgstr ""
+
+msgid "ProjectNew|You can also create a project from the command line"
+msgstr ""
+
 msgid "ProjectOverview|Create new fork"
 msgstr ""
 
diff --git a/spec/frontend/projects/new_v2/components/app_spec.js b/spec/frontend/projects/new_v2/components/app_spec.js
index b53adfdab4608d..99300f8f300218 100644
--- a/spec/frontend/projects/new_v2/components/app_spec.js
+++ b/spec/frontend/projects/new_v2/components/app_spec.js
@@ -1,5 +1,6 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import App from '~/projects/new_v2/components/app.vue';
+import CommandLine from '~/projects/new_v2/components/command_line.vue';
 import MultiStepFormTemplate from '~/vue_shared/components/multi_step_form_template.vue';
 
 describe('New project creation app', () => {
@@ -17,6 +18,7 @@ describe('New project creation app', () => {
   };
 
   const findMultyStepForm = () => wrapper.findComponent(MultiStepFormTemplate);
+  const findCommandLine = () => wrapper.findComponent(CommandLine);
 
   it('renders a form', () => {
     createComponent();
@@ -38,4 +40,18 @@ describe('New project creation app', () => {
       expect(wrapper.findByTestId('group-selector').exists()).toBe(false);
     });
   });
+
+  describe('with command line', () => {
+    it('renders for a personal namespace', () => {
+      createComponent();
+
+      expect(findCommandLine().exists()).toBe(true);
+    });
+
+    it('does not renders for a group namespace', () => {
+      createComponent({ namespaceId: '13' });
+
+      expect(findCommandLine().exists()).toBe(false);
+    });
+  });
 });
-- 
GitLab