Add button for the diff file header options menu

[Rapid Diffs]

app/assets/javascripts/rapid_diffs/adapters.js

 import { ExpandLinesAdapter } from '~/rapid_diffs/expand_lines/adapter';
+import { OptionsMenuAdapter } from '~/rapid_diffs/options_menu/adapter';
 import { ToggleFileAdapter } from '~/rapid_diffs/toggle_file/adapter';
 
 const RAPID_DIFFS_VIEWERS = {
@@ -6,7 +7,7 @@ const RAPID_DIFFS_VIEWERS = {
   text_parallel: 'text_parallel',
 };
 
-const COMMON_ADAPTERS = [ExpandLinesAdapter, ToggleFileAdapter];
+const COMMON_ADAPTERS = [ExpandLinesAdapter, OptionsMenuAdapter, ToggleFileAdapter];
 
 export const VIEWER_ADAPTERS = {
   [RAPID_DIFFS_VIEWERS.text_inline]: COMMON_ADAPTERS,

app/assets/javascripts/rapid_diffs/options_menu/adapter.js

+import Vue from 'vue';
+import { GlDisclosureDropdown } from '@gitlab/ui';
+
+export const OptionsMenuAdapter = {
+  clicks: {
+    toggleOptionsMenu(event) {
+      const button = event.target.closest('.js-options-button');
+
+      if (!this.sink.optionsMenu) {
+        this.sink.optionsMenu = new Vue({
+          el: Vue.version.startsWith('2') ? button : button.parentElement,
+          name: 'GlDisclosureDropdown',
+          render: (createElement = Vue.h) =>
+            createElement(GlDisclosureDropdown, {
+              props: {
+                icon: 'ellipsis_v',
+                startOpened: true,
+                noCaret: true,
+                category: 'tertiary',
+                size: 'small',
+              },
+            }),
+        });
+      }
+    },
+  },
+};

app/components/rapid_diffs/diff_file_header_component.html.haml

@@ -48,3 +48,6 @@
     %span.rd-lines-removed
       %span>= "−".html_safe
       %span{ "data-testid" => "js-file-deletion-line" }= @diff_file.removed_lines
+  .rd-diff-file-options-menu.gl-ml-2
+    .js-options-menu
+      = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, icon: 'ellipsis_v', button_options: { class: 'js-options-button', data: { click: 'toggleOptionsMenu' }, aria: { label: _('Options') } })

spec/frontend/rapid_diffs/options_menu/adapter_spec.js

+import { DiffFile } from '~/rapid_diffs/diff_file';
+import { OptionsMenuAdapter } from '~/rapid_diffs/options_menu/adapter';
+
+describe('Diff File Options Menu', () => {
+  const html = `
+    <diff-file data-viewer="any">
+      <div class="rd-diff-file">
+        <div class="rd-diff-file-header" data-testid="rd-diff-file-header">
+        <div class="rd-diff-file-options-menu gl-ml-2">
+          <div class="js-options-menu">
+            <button class="js-options-button" data-click="toggleOptionsMenu" type="button"></button>
+          </div>
+        </div>
+      </div>
+      <div data-file-body=""><!-- body content --></div>
+      <diff-file-mounted></diff-file-mounted>
+    </diff-file>
+  `;
+
+  function get(element) {
+    const elements = {
+      file: () => document.querySelector('diff-file'),
+      container: () => get('file').querySelector('.js-options-menu'),
+      serverButton: () => get('container').querySelector('.js-options-button'),
+      vueButton: () => get('container').querySelector('[data-testid="base-dropdown-toggle"]'),
+    };
+
+    return elements[element]?.();
+  }
+
+  function assignAdapter(customAdapter) {
+    get('file').adapterConfig = { any: [customAdapter] };
+  }
+
+  beforeAll(() => {
+    customElements.define('diff-file', DiffFile);
+  });
+
+  beforeEach(() => {
+    document.body.innerHTML = html;
+    assignAdapter(OptionsMenuAdapter);
+    get('file').mount();
+  });
+
+  it('starts with the server-rendered button', () => {
+    expect(get('serverButton')).not.toBeNull();
+  });
+
+  it('replaces the server-rendered button with a Vue GlDisclosureDropdown when the button is clicked', () => {
+    const button = get('serverButton');
+
+    expect(get('vueButton')).toBeNull();
+    expect(button).not.toBeNull();
+
+    button.click();
+
+    expect(get('vueButton')).not.toBeNull();
+    /*
+     * This button being replaced also means this replacement can only
+     * happen once (desireable!), so testing that it's no longer present is good
+     */
+    expect(get('serverButton')).toBeNull();
+  });
+});