Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc41

3 files changed, 76 insertions, 10 deletions

diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue
new file mode 100644
index 00000000000..e42d9154866
--- /dev/null
+++ b/app/assets/javascripts/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue
@@ -0,0 +1,66 @@
+<script>
+import { GlPopover, GlFormInputGroup } from '@gitlab/ui';
+import { __ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+export default {
+  components: {
+    GlPopover,
+    GlFormInputGroup,
+    ClipboardButton,
+  },
+  inject: ['pushToCreateProjectCommand', 'workingWithProjectsHelpPath'],
+  props: {
+    target: {
+      type: [Function, HTMLElement],
+      required: true,
+    },
+  },
+  i18n: {
+    clipboardButtonTitle: __('Copy command'),
+    commandInputAriaLabel: __('Push project from command line'),
+    helpLinkText: __('What does this command do?'),
+    labelText: __('Private projects can be created in your personal namespace with:'),
+    popoverTitle: __('Push to create a project'),
+  },
+};
+</script>
+<template>
+  <gl-popover
+    :target="target"
+    :title="$options.i18n.popoverTitle"
+    triggers="click blur"
+    placement="top"
+  >
+    <p>
+      <label for="push-to-create-tip" class="gl-font-weight-normal">
+        {{ $options.i18n.labelText }}
+      </label>
+    </p>
+    <p>
+      <gl-form-input-group
+        id="push-to-create-tip"
+        :value="pushToCreateProjectCommand"
+        readonly
+        select-on-click
+        :aria-label="$options.i18n.commandInputAriaLabel"
+      >
+        <template #append>
+          <clipboard-button
+            :text="pushToCreateProjectCommand"
+            :title="$options.i18n.clipboardButtonTitle"
+            tooltip-placement="right"
+          />
+        </template>
+      </gl-form-input-group>
+    </p>
+    <p>
+      <a
+        :href="`${workingWithProjectsHelpPath}#push-to-create-a-new-project`"
+        class="gl-font-sm"
+        target="_blank"
+        >{{ $options.i18n.helpLinkText }}</a
+      >
+    </p>
+  </gl-popover>
+</template>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue b/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
index 63a65975fff..ed82a635b1f 100644
--- a/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
+++ b/app/assets/javascripts/projects/experiment_new_project_creation/components/welcome.vue
@@ -1,15 +1,13 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlPopover } from '@gitlab/ui';
 import Tracking from '~/tracking';
-import LegacyContainer from './legacy_container.vue';
+import NewProjectPushTipPopover from './new_project_push_tip_popover.vue';
 
 const trackingMixin = Tracking.mixin(gon.tracking_data);
 
 export default {
   components: {
-    GlPopover,
-    LegacyContainer,
+    NewProjectPushTipPopover,
   },
   mixins: [trackingMixin],
   props: {
@@ -52,19 +50,15 @@ export default {
       <p>
         {{ __('You can also create a project from the command line.') }}
         <a
-          id="cli-tip"
+          ref="clipTip"
           href="#"
           click.prevent
           class="push-new-project-tip"
-          data-title="Push to create a project"
           rel="noopener noreferrer"
         >
           {{ __('Show command') }}
         </a>
-
-        <gl-popover target="cli-tip" triggers="click blur" placement="top">
-          <legacy-container selector=".push-new-project-tip-template" />
-        </gl-popover>
+        <new-project-push-tip-popover :target="() => $refs.clipTip" />
       </p>
     </div>
   </div>
diff --git a/app/assets/javascripts/projects/experiment_new_project_creation/index.js b/app/assets/javascripts/projects/experiment_new_project_creation/index.js
index 0414f7ef6a5..ea686d4e1e8 100644
--- a/app/assets/javascripts/projects/experiment_new_project_creation/index.js
+++ b/app/assets/javascripts/projects/experiment_new_project_creation/index.js
@@ -2,11 +2,17 @@ import Vue from 'vue';
 import NewProjectCreationApp from './components/app.vue';
 
 export default function initNewProjectCreation(el, props) {
+  const { pushToCreateProjectCommand, workingWithProjectsHelpPath } = el.dataset;
+
   return new Vue({
     el,
     components: {
       NewProjectCreationApp,
     },
+    provide: {
+      workingWithProjectsHelpPath,
+      pushToCreateProjectCommand,
+    },
     render(h) {
       return h(NewProjectCreationApp, { props });
     },