Merge branch '219884-log-buttons' into 'master'

Migrate log controller buttons to GlButton

Closes #219884

See merge request gitlab-org/gitlab!36480

app/assets/javascripts/logs/components/environment_logs.vue

@@ -202,7 +202,7 @@ export default {
 
       <log-control-buttons
         ref="scrollButtons"
-        class="flex-grow-0 pr-2 mb-2 controllers"
+        class="flex-grow-0 pr-2 mb-2 controllers gl-display-inline-flex"
         :scroll-down-button-disabled="scrollDownButtonDisabled"
         @refresh="refreshPodLogs()"
         @scrollDown="scrollDown"

app/assets/javascripts/logs/components/log_control_buttons.vue

 <script>
-import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   components: {
-    Icon,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -51,14 +49,16 @@ export default {
       :title="__('Scroll to top')"
       aria-labelledby="scroll-to-top"
     >
-      <gl-deprecated-button
+      <gl-button
         id="scroll-to-top"
-        class="btn-blank js-scroll-to-top"
+        class="js-scroll-to-top gl-mr-2 btn-blank"
         :aria-label="__('Scroll to top')"
         :disabled="scrollUpButtonDisabled"
+        icon="scroll_up"
+        category="primary"
+        variant="default"
         @click="handleScrollUp()"
-        ><icon name="scroll_up"
-      /></gl-deprecated-button>
+      />
     </div>
     <div
       v-if="scrollDownAvailable"
@@ -68,25 +68,28 @@ export default {
       :title="__('Scroll to bottom')"
       aria-labelledby="scroll-to-bottom"
     >
-      <gl-deprecated-button
+      <gl-button
         id="scroll-to-bottom"
-        class="btn-blank js-scroll-to-bottom"
+        class="js-scroll-to-bottom gl-mr-2 btn-blank"
         :aria-label="__('Scroll to bottom')"
         :v-if="scrollDownAvailable"
         :disabled="scrollDownButtonDisabled"
+        icon="scroll_down"
+        category="primary"
+        variant="default"
         @click="handleScrollDown()"
-        ><icon name="scroll_down"
-      /></gl-deprecated-button>
+      />
     </div>
-    <gl-deprecated-button
+    <gl-button
       id="refresh-log"
       v-gl-tooltip
-      class="ml-1 px-2 js-refresh-log"
+      class="js-refresh-log"
       :title="__('Refresh')"
       :aria-label="__('Refresh')"
+      icon="retry"
+      category="primary"
+      variant="default"
       @click="handleRefreshClick"
-    >
-      <icon name="retry" />
-    </gl-deprecated-button>
+    />
   </div>
 </template>

app/assets/stylesheets/pages/environment_logs.scss

@@ -31,10 +31,6 @@
         width: 160px;
       }
     }
-
-    .controllers {
-      @include build-controllers(16px, flex-end, false, 2, inline);
-    }
   }
 
   .log-lines,

spec/frontend/logs/components/log_control_buttons_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import LogControlButtons from '~/logs/components/log_control_buttons.vue';
 
 describe('LogControlButtons', () => {
@@ -31,9 +31,9 @@ describe('LogControlButtons', () => {
     expect(wrapper.isVueInstance()).toBe(true);
     expect(wrapper.isEmpty()).toBe(false);
 
-    expect(findScrollToTop().is(GlDeprecatedButton)).toBe(true);
-    expect(findScrollToBottom().is(GlDeprecatedButton)).toBe(true);
-    expect(findRefreshBtn().is(GlDeprecatedButton)).toBe(true);
+    expect(findScrollToTop().is(GlButton)).toBe(true);
+    expect(findScrollToBottom().is(GlButton)).toBe(true);
+    expect(findRefreshBtn().is(GlButton)).toBe(true);
   });
 
   it('emits a `refresh` event on click on `refresh` button', () => {