Merge branch 'marcel-update-deprecated-button-1' into 'master'

Update gldeprecatedbutton to glbutton in CI Variables list

Closes #219762

See merge request gitlab-org/gitlab!38757

app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue

 <script>
-import { GlPopover, GlIcon, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   maxTextLength: 95,
   components: {
     GlPopover,
-    GlIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -39,16 +38,18 @@ export default {
 <template>
   <div id="popover-container">
     <gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
-      <div class="d-flex justify-content-between position-relative">
-        <div class="pr-5 w-100 ci-popover-value">{{ displayValue }}</div>
-        <gl-deprecated-button
+      <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+        <div class="ci-popover-value gl-pr-3">
+          {{ displayValue }}
+        </div>
+        <gl-button
           v-gl-tooltip
-          class="btn-transparent btn-clipboard position-absolute position-top-0 position-right-0"
+          category="tertiary"
+          icon="copy-to-clipboard"
           :title="tooltipText"
           :data-clipboard-text="value"
-        >
-          <gl-icon name="copy-to-clipboard" />
-        </gl-deprecated-button>
+          :aria-label="__('Copy to clipboard')"
+        />
       </div>
     </gl-popover>
   </div>

changelogs/unreleased/marcel-update-deprecated-button-1.yml

+---
+title: Change to glbutton component in CI variables list
+merge_request: 38757
+author:
+type: other

locale/gitlab.pot

@@ -6931,6 +6931,9 @@ msgstr ""
 msgid "Copy the code below to implement tracking in your application:"
 msgstr ""
 
+msgid "Copy to clipboard"
+msgstr ""
+
 msgid "Copy token"
 msgstr ""
 

spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import CiVariablePopover from '~/ci_variable_list/components/ci_variable_popover.vue';
 import mockData from '../services/mock_data';
 
@@ -18,7 +18,7 @@ describe('Ci Variable Popover', () => {
     });
   };
 
-  const findButton = () => wrapper.find(GlDeprecatedButton);
+  const findButton = () => wrapper.find(GlButton);
 
   beforeEach(() => {
     createComponent();