Implement select on focus behavior

app/assets/javascripts/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue

 <script>
-import { GlPopover, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
+import { GlPopover, GlFormInputGroup } from '@gitlab/ui';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
@@ -8,7 +8,6 @@ export default {
     GlPopover,
     GlFormInputGroup,
     ClipboardButton,
-    GlFormInput,
   },
   inject: ['pushToCreateProjectCommand', 'workingWithProjectsHelpPath'],
   props: {
@@ -39,14 +38,13 @@ export default {
       </label>
     </p>
     <p>
-      <gl-form-input-group>
-        <gl-form-input
-          id="push-to-create-tip"
-          class="monospace js-select-on-focus"
-          readonly
-          :value="pushToCreateProjectCommand"
-          :aria-label="$options.i18n.commandInputAriaLabel"
-        />
+      <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"

spec/frontend/projects/experiment_new_project_creation/components/new_project_push_tip_popover_spec.js

-import { GlPopover, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
+import { GlPopover, GlFormInputGroup } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import NewProjectPushTipPopover from '~/projects/experiment_new_project_creation/components/new_project_push_tip_popover.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -11,7 +11,7 @@ describe('New project push tip popover', () => {
 
   const findPopover = () => wrapper.findComponent(GlPopover);
   const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
-  const findFormInput = () => wrapper.findComponent(GlFormInput);
+  const findFormInput = () => wrapper.findComponent(GlFormInputGroup);
   const findHelpLink = () => wrapper.find('a');
   const findTarget = () => document.getElementById(targetId);
 
@@ -49,11 +49,14 @@ describe('New project push tip popover', () => {
   });
 
   it('renders a readonly form input with the push to create command', () => {
-    expect(findFormInput().attributes()).toMatchObject({
+    expect(findFormInput().props()).toMatchObject({
       value: pushToCreateProjectCommand,
-      readonly: '',
+      selectOnClick: true,
+    });
+    expect(findFormInput().attributes()).toMatchObject({
+      'aria-label': 'Push project from command line',
+      readonly: 'readonly',
     });
-    expect(findFormInput().classes()).toContain('js-select-on-focus');
   });
 
   it('allows copying the push command using the clipboard button', () => {