Address code review comments

Addressed maintainer review comments

app/assets/javascripts/repository/components/fork_suggestion.vue

@@ -23,8 +23,10 @@ export default {
 </script>
 
 <template>
-  <div class="file-fork-suggestion">
-    <span class="file-fork-suggestion-note" data-testid="message">{{ $options.i18n.message }}</span>
+  <div
+    class="gl-display-flex gl-justify-content-end gl-align-items-center gl-bg-gray-10 gl-px-5 gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-100"
+  >
+    <span class="gl-mr-6" data-testid="message">{{ $options.i18n.message }}</span>
 
     <gl-button
       class="gl-mr-3"
@@ -36,7 +38,7 @@ export default {
       {{ $options.i18n.fork }}
     </gl-button>
 
-    <gl-button class="gl-mr-3" data-testid="cancel" @click="$emit('cancel')">
+    <gl-button data-testid="cancel" @click="$emit('cancel')">
       {{ $options.i18n.cancel }}
     </gl-button>
   </div>

spec/frontend/repository/components/fork_suggestion_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ForkSuggestion from '~/repository/components/fork_suggestion.vue';
 
 const DEFAULT_PROPS = { forkPath: 'some_file.js/fork' };
@@ -7,7 +7,7 @@ describe('ForkSuggestion component', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMount(ForkSuggestion, {
+    wrapper = shallowMountExtended(ForkSuggestion, {
       propsData: { ...DEFAULT_PROPS },
     });
   };
@@ -16,32 +16,24 @@ describe('ForkSuggestion component', () => {
 
   afterEach(() => wrapper.destroy());
 
-  const findMessage = () => wrapper.find('[data-testid="message"]');
-  const findForkButton = () => wrapper.find('[data-testid="fork"]');
-  const findCancelButton = () => wrapper.find('[data-testid="cancel"]');
+  const { i18n } = ForkSuggestion;
+  const findMessage = () => wrapper.findByTestId('message');
+  const findForkButton = () => wrapper.findByTestId('fork');
+  const findCancelButton = () => wrapper.findByTestId('cancel');
 
   it('renders a message', () => {
-    expect(findMessage().exists()).toBe(true);
-    expect(findMessage().text()).toBe(
-      'You can’t edit files directly in this project. Fork this project and submit a merge request with your changes.',
-    );
-  });
-
-  it('renders component', () => {
-    const { forkPath } = DEFAULT_PROPS;
-
-    expect(wrapper.props()).toMatchObject({ forkPath });
+    expect(findMessage().text()).toBe(i18n.message);
   });
 
   it('renders a Fork button', () => {
-    expect(findForkButton().exists()).toBe(true);
-    expect(findForkButton().text()).toBe('Fork');
-    expect(findForkButton().attributes('href')).toBe(DEFAULT_PROPS.forkPath);
+    const forkButton = findForkButton();
+
+    expect(forkButton.text()).toBe(i18n.fork);
+    expect(forkButton.attributes('href')).toBe(DEFAULT_PROPS.forkPath);
   });
 
   it('renders a Cancel button', () => {
-    expect(findCancelButton().exists()).toBe(true);
-    expect(findCancelButton().text()).toBe('Cancel');
+    expect(findCancelButton().text()).toBe(i18n.cancel);
   });
 
   it('emits a cancel event when Cancel button is clicked', () => {