Merge branch...

Merge branch '219768-replace-gl-deprecated-button-with-gl-button-in-app-assets-javascripts-grafana_integration-2' into 'master'

Replaced deprecated button syntax

Closes #219768

See merge request gitlab-org/gitlab!38634

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

 <script>
-import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlFormCheckbox,
     GlFormGroup,
     GlFormInput,
@@ -58,7 +58,7 @@ export default {
       <h3 class="js-section-header h4">
         {{ s__('GrafanaIntegration|Grafana authentication') }}
       </h3>
-      <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
+      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
         {{ s__('GrafanaIntegration|Embed Grafana charts in GitLab issues.') }}
       </p>
@@ -93,9 +93,9 @@ export default {
             </a>
           </p>
         </gl-form-group>
-        <gl-deprecated-button variant="success" @click="updateGrafanaIntegration">
+        <gl-button variant="success" category="primary" @click="updateGrafanaIntegration">
           {{ __('Save Changes') }}
-        </gl-deprecated-button>
+        </gl-button>
       </form>
     </div>
   </section>

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -16,13 +16,15 @@ exports[`grafana integration component default state to match the default snapsh
     
     </h3>
      
-    <gl-deprecated-button-stub
+    <gl-button-stub
+      category="tertiary"
       class="js-settings-toggle"
-      size="md"
-      variant="secondary"
+      icon=""
+      size="medium"
+      variant="default"
     >
       Expand
-    </gl-deprecated-button-stub>
+    </gl-button-stub>
      
     <p
       class="js-section-sub-header"
@@ -90,14 +92,16 @@ exports[`grafana integration component default state to match the default snapsh
         </p>
       </gl-form-group-stub>
        
-      <gl-deprecated-button-stub
-        size="md"
+      <gl-button-stub
+        category="primary"
+        icon=""
+        size="medium"
         variant="success"
       >
         
         Save Changes
       
-      </gl-deprecated-button-stub>
+      </gl-button-stub>
     </form>
   </div>
 </section>

spec/frontend/grafana_integration/components/grafana_integration_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
 import { createStore } from '~/grafana_integration/store';
@@ -51,7 +51,7 @@ describe('grafana integration component', () => {
     it('renders as an expand button by default', () => {
       wrapper = shallowMount(GrafanaIntegration, { store });
 
-      const button = wrapper.find(GlDeprecatedButton);
+      const button = wrapper.find(GlButton);
 
       expect(button.text()).toBe('Expand');
     });
@@ -77,8 +77,7 @@ describe('grafana integration component', () => {
     });
 
     describe('submit button', () => {
-      const findSubmitButton = () =>
-        wrapper.find('.settings-content form').find(GlDeprecatedButton);
+      const findSubmitButton = () => wrapper.find('.settings-content form').find(GlButton);
 
       const endpointRequest = [
         operationsSettingsEndpoint,