Merge branch 'renovate/major-gitlab-packages' into 'master'

Update dependency @gitlab/eslint-plugin to v7

See merge request gitlab-org/gitlab!52155

.eslintrc.yml

@@ -48,3 +48,4 @@ overrides:
       - '**/spec/**/*'
     rules:
       "@gitlab/require-i18n-strings": off
+      "@gitlab/no-runtime-template-compiler": off

app/assets/javascripts/boards/components/board_sidebar.js

-/* eslint-disable no-new */
+// This is a true violation of @gitlab/no-runtime-template-compiler, as it
+// relies on app/views/shared/boards/components/_sidebar.html.haml for its
+// template.
+/* eslint-disable no-new, @gitlab/no-runtime-template-compiler */
 
 import $ from 'jquery';
 import Vue from 'vue';

app/assets/javascripts/boards/components/toggle_focus.vue

+<script>
+import { GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { hide } from '~/tooltips';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    issueBoardsContentSelector: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  methods: {
+    toggleFocusMode() {
+      hide(this.$refs.toggleFocusModeButton);
+
+      const issueBoardsContent = document.querySelector(this.issueBoardsContentSelector);
+      issueBoardsContent.classList.toggle('is-focused');
+
+      this.isFullscreen = !this.isFullscreen;
+    },
+  },
+  i18n: {
+    toggleFocusMode: __('Toggle focus mode'),
+  },
+};
+</script>
+
+<template>
+  <div class="board-extra-actions">
+    <a
+      ref="toggleFocusModeButton"
+      href="#"
+      class="btn btn-default has-tooltip gl-ml-3 js-focus-mode-btn"
+      data-qa-selector="focus_mode_button"
+      role="button"
+      :aria-label="$options.i18n.toggleFocusMode"
+      :title="$options.i18n.toggleFocusMode"
+      @click="toggleFocusMode"
+    >
+      <gl-icon :name="isFullscreen ? 'minimize' : 'maximize'" />
+    </a>
+  </div>
+</template>

app/assets/javascripts/boards/toggle_focus.js

-import $ from 'jquery';
 import Vue from 'vue';
-import { GlIcon } from '@gitlab/ui';
-import { hide } from '~/tooltips';
+import ToggleFocus from './components/toggle_focus.vue';
 
-export default (ModalStore, boardsStore) => {
-  const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
+export default () => {
+  const issueBoardsContentSelector = '.content-wrapper > .js-focus-mode-board';
 
   return new Vue({
-    el: document.getElementById('js-toggle-focus-btn'),
-    components: {
-      GlIcon,
+    el: '#js-toggle-focus-btn',
+    render(h) {
+      return h(ToggleFocus, {
+        props: {
+          issueBoardsContentSelector,
+        },
+      });
     },
-    data: {
-      modal: ModalStore.store,
-      store: boardsStore.state,
-      isFullscreen: false,
-    },
-    methods: {
-      toggleFocusMode() {
-        const $el = $(this.$refs.toggleFocusModeButton);
-        hide($el);
-
-        issueBoardsContent.classList.toggle('is-focused');
-
-        this.isFullscreen = !this.isFullscreen;
-      },
-    },
-    template: `
-      <div class="board-extra-actions">
-        <a
-          href="#"
-          class="btn btn-default has-tooltip gl-ml-3 js-focus-mode-btn"
-          data-qa-selector="focus_mode_button"
-          role="button"
-          aria-label="Toggle focus mode"
-          title="Toggle focus mode"
-          ref="toggleFocusModeButton"
-          @click="toggleFocusMode">
-          <gl-icon :name="isFullscreen ? 'minimize' : 'maximize'" />
-        </a>
-      </div>
-    `,
   });
 };

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

+// This is a true violation of @gitlab/no-runtime-template-compiler, as it
+// relies on app/views/projects/cycle_analytics/show.html.haml for its
+// template.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';

app/assets/javascripts/filtered_search/recent_searches_root.js

@@ -28,19 +28,18 @@ class RecentSearchesRoot {
     const { state } = this.store;
     this.vm = new Vue({
       el: this.wrapperElement,
-      components: {
-        RecentSearchesDropdownContent,
-      },
       data() {
         return state;
       },
-      template: `
-        <recent-searches-dropdown-content
-          :items="recentSearches"
-          :is-local-storage-available="isLocalStorageAvailable"
-          :allowed-keys="allowedKeys"
-          />
-      `,
+      render(h) {
+        return h(RecentSearchesDropdownContent, {
+          props: {
+            items: this.recentSearches,
+            isLocalStorageAvailable: this.isLocalStorageAvailable,
+            allowedKeys: this.allowedKeys,
+          },
+        });
+      },
     });
   }
 

app/assets/javascripts/merge_conflicts/components/diff_file_editor.js

-/* eslint-disable no-param-reassign */
+// This is a true violation of @gitlab/no-runtime-template-compiler, as it relies on
+// app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+// for its template.
+/* eslint-disable no-param-reassign, @gitlab/no-runtime-template-compiler */
 
 import Vue from 'vue';
 import { debounce } from 'lodash';

app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js

-/* eslint-disable no-param-reassign */
+// This is a true violation of @gitlab/no-runtime-template-compiler, as it relies on
+// app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
+// for its template.
+/* eslint-disable no-param-reassign, @gitlab/no-runtime-template-compiler */
 
 import Vue from 'vue';
 import actionsMixin from '../mixins/line_conflict_actions';

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js

@@ -15,6 +15,9 @@ import utilsMixin from '../mixins/line_conflict_utils';
         required: true,
       },
     },
+    // This is a true violation of @gitlab/no-runtime-template-compiler, as it
+    // has a template string.
+    // eslint-disable-next-line @gitlab/no-runtime-template-compiler
     template: `
       <table class="diff-wrap-lines code js-syntax-highlight">
         <tr class="line_holder parallel" v-for="section in file.parallelLines">

app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js

+// This is a true violation of @gitlab/no-runtime-template-compiler, as it
+// relies on app/views/projects/merge_requests/conflicts/show.html.haml for its
+// template.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import $ from 'jquery';
 import Vue from 'vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';

app/assets/javascripts/monitoring/monitoring_app.js

@@ -26,7 +26,24 @@ export default (props = {}) => {
           dashboardProps: { ...dataProps, ...props },
         };
       },
-      template: `<router-view :dashboardProps="dashboardProps"/>`,
+      render(h) {
+        return h('RouterView', {
+          // This is attrs rather than props because:
+          //  1. RouterView only actually defines one prop: `name`.
+          //  2. The RouterView [throws away other props][1] given to it, in
+          //     favour of those configured in the route config/params.
+          //  3. The Vue template compiler itself in general compiles anything
+          //     like <some-component :foo="bar" /> into roughly
+          //     h('some-component', { attrs: { foo: bar } }). Then later, Vue
+          //     [extract props from attrs and merges them with props][2],
+          //     matching them up according to the component's definition.
+          // [1]: https://github.com/vuejs/vue-router/blob/v3.4.9/src/components/view.js#L124
+          // [2]: https://github.com/vuejs/vue/blob/v2.6.12/src/core/vdom/helpers/extract-props.js#L12-L50
+          attrs: {
+            dashboardProps: this.dashboardProps,
+          },
+        });
+      },
     });
   }
 };

app/assets/javascripts/pages/admin/application_settings/general/index.js

+// This is a true violation of @gitlab/no-runtime-template-compiler, as it
+// relies on app/views/admin/application_settings/_gitpod.html.haml for its
+// template.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import Vue from 'vue';
 import initUserInternalRegexPlaceholder from '../account_and_limits';
 import IntegrationHelpText from '~/vue_shared/components/integrations_help_text.vue';

app/assets/javascripts/pages/projects/jobs/index/index.js

@@ -7,10 +7,13 @@ document.addEventListener('DOMContentLoaded', () => {
   remainingTimeElements.forEach(
     (el) =>
       new Vue({
-        ...GlCountdown,
         el,
-        propsData: {
-          endDateString: el.dateTime,
+        render(h) {
+          return h(GlCountdown, {
+            props: {
+              endDateString: el.dateTime,
+            },
+          });
         },
       }),
   );

app/assets/javascripts/performance/vue_performance_plugin.js

+// This is a false violation of @gitlab/no-runtime-template-compiler, since it
+// is simply defining a global Vue mixin.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 const ComponentPerformancePlugin = {
   install(Vue, options) {
     Vue.mixin({

app/assets/javascripts/vue_merge_request_widget/index.js

+// This is a false violation of @gitlab/no-runtime-template-compiler, since it
+// creates a new Vue instance by spreading a _valid_ Vue component definition
+// into the Vue constructor.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import Vue from 'vue';
 import MrWidgetOptions from 'ee_else_ce/vue_merge_request_widget/mr_widget_options.vue';
 import VueApollo from 'vue-apollo';

app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js

+// This is a false violation of @gitlab/no-runtime-template-compiler, since it
+// is simply defining a global Vue mixin.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 export default (Vue) => {
   Vue.mixin({
     provide: {

app/assets/javascripts/vue_shared/translate.js

+// This is a false violation of @gitlab/no-runtime-template-compiler, since it
+// is simply defining a global Vue mixin.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import { __, n__, s__, sprintf } from '../locale';
 
 export default (Vue) => {

ee/app/assets/javascripts/boards/components/board_list_header.vue

 <script>
+// This is a false violation of @gitlab/no-runtime-template-compiler, since it
+// extends a valid Vue single file component.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import BoardListHeaderFoss from '~/boards/components/board_list_header.vue';
 import { __, sprintf, s__ } from '~/locale';
 

ee/app/assets/javascripts/boards/components/board_list_header_deprecated.vue

 <script>
+// This is a false violation of @gitlab/no-runtime-template-compiler, since it
+// extends a valid Vue single file component.
+/* eslint-disable @gitlab/no-runtime-template-compiler */
 import BoardListHeaderFoss from '~/boards/components/board_list_header_deprecated.vue';
 import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';

ee/app/assets/javascripts/boards/components/config_toggle.vue

+<script>
+import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlModalDirective,
+  },
+  props: {
+    boardsStore: {
+      type: Object,
+      required: true,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: true,
+    },
+    hasScope: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      state: this.boardsStore.state,
+    };
+  },
+  computed: {
+    buttonText() {
+      return this.canAdminList ? s__('Boards|Edit board') : s__('Boards|View scope');
+    },
+    tooltipTitle() {
+      return this.hasScope ? __("This board's scope is reduced") : '';
+    },
+  },
+  methods: {
+    showPage(page) {
+      return this.boardsStore.showPage(page);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-ml-3">
+    <gl-button
+      v-gl-modal-directive="'board-config-modal'"
+      v-gl-tooltip
+      :title="tooltipTitle"
+      :class="{ 'dot-highlight': hasScope }"
+      data-qa-selector="boards_config_button"
+      @click.prevent="showPage('edit')"
+    >
+      {{ buttonText }}
+    </gl-button>
+  </div>
+</template>
+};

ee/app/assets/javascripts/boards/config_toggle.js

 import Vue from 'vue';
-import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+import ConfigToggle from './components/config_toggle.vue';
 
 export default (boardsStore) => {
   const configEl = document.querySelector('.js-board-config');
@@ -8,45 +7,15 @@ export default (boardsStore) => {
   if (configEl) {
     gl.boardConfigToggle = new Vue({
       el: configEl,
-      components: {
-        GlButton,
+      render(h) {
+        return h(ConfigToggle, {
+          props: {
+            boardsStore,
+            canAdminList: configEl.hasAttribute('data-can-admin-list'),
+            hasScope: configEl.hasAttribute('data-has-scope'),
+          },
+        });
       },
-      directives: {
-        GlTooltip: GlTooltipDirective,
-        GlModalDirective,
-      },
-      data() {
-        return {
-          canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
-          hasScope: this.$options.el.hasAttribute('data-has-scope'),
-          state: boardsStore.state,
-        };
-      },
-      computed: {
-        buttonText() {
-          return this.canAdminList ? s__('Boards|Edit board') : s__('Boards|View scope');
-        },
-        tooltipTitle() {
-          return this.hasScope ? __("This board's scope is reduced") : '';
-        },
-      },
-      methods: {
-        showPage: (page) => boardsStore.showPage(page),
-      },
-      template: `
-        <div class="gl-ml-3">
-          <gl-button
-            v-gl-modal-directive="'board-config-modal'"
-            v-gl-tooltip
-            :title="tooltipTitle"
-            :class="{ 'dot-highlight': hasScope }"
-            data-qa-selector="boards_config_button"
-            @click.prevent="showPage('edit')"
-          >
-            {{ buttonText }}
-          </gl-button>
-        </div>
-      `,
     });
   }
 };

locale/gitlab.pot

@@ -29937,6 +29937,9 @@ msgstr ""
 msgid "Toggle emoji award"
 msgstr ""
 
+msgid "Toggle focus mode"
+msgstr ""
+
 msgid "Toggle navigation"
 msgstr ""
 

package.json

@@ -163,7 +163,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
-    "@gitlab/eslint-plugin": "6.0.0",
+    "@gitlab/eslint-plugin": "7.0.0",
     "@testing-library/dom": "^7.16.2",
     "@vue/test-utils": "1.1.2",
     "acorn": "^6.3.0",

qa/qa/ee/page/component/issue_board/show.rb

@@ -15,7 +15,7 @@ module QA
                   element :board_scope_modal
                 end
 
-                view 'ee/app/assets/javascripts/boards/config_toggle.js' do
+                view 'ee/app/assets/javascripts/boards/components/config_toggle.vue' do
                   element :boards_config_button
                 end
               end

qa/qa/page/component/issue_board/show.rb

@@ -39,7 +39,7 @@ module QA
             element :boards_list
           end
 
-          view 'app/assets/javascripts/boards/toggle_focus.js' do
+          view 'app/assets/javascripts/boards/components/toggle_focus.vue' do
             element :focus_mode_button
           end
 

spec/frontend/filtered_search/recent_searches_root_spec.js

-import Vue from 'vue';
+import { setHTMLFixture } from 'helpers/fixtures';
 import RecentSearchesRoot from '~/filtered_search/recent_searches_root';
 
-jest.mock('vue');
+const containerId = 'test-container';
+const dropdownElementId = 'test-dropdown-element';
 
 describe('RecentSearchesRoot', () => {
   describe('render', () => {
-    let recentSearchesRoot;
-    let data;
-    let template;
+    let recentSearchesRootMockInstance;
+    let vm;
+    let containerEl;
 
     beforeEach(() => {
-      recentSearchesRoot = {
+      setHTMLFixture(`
+        <div id="${containerId}">
+          <div id="${dropdownElementId}"></div>
+        </div>
+      `);
+
+      containerEl = document.getElementById(containerId);
+
+      recentSearchesRootMockInstance = {
         store: {
-          state: 'state',
+          state: {
+            recentSearches: ['foo', 'bar', 'qux'],
+            isLocalStorageAvailable: true,
+            allowedKeys: ['test'],
+          },
         },
+        wrapperElement: document.getElementById(dropdownElementId),
       };
 
-      Vue.mockImplementation((options) => {
-        ({ data, template } = options);
-      });
+      RecentSearchesRoot.prototype.render.call(recentSearchesRootMockInstance);
+      vm = recentSearchesRootMockInstance.vm;
 
-      RecentSearchesRoot.prototype.render.call(recentSearchesRoot);
+      return vm.$nextTick();
     });
 
-    it('should instantiate Vue', () => {
-      expect(Vue).toHaveBeenCalled();
-      expect(data()).toBe(recentSearchesRoot.store.state);
-      expect(template).toContain(':is-local-storage-available="isLocalStorageAvailable"');
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('should render the recent searches', () => {
+      const { recentSearches } = recentSearchesRootMockInstance.store.state;
+
+      recentSearches.forEach((recentSearch) => {
+        expect(containerEl.textContent).toContain(recentSearch);
+      });
     });
   });
 });

yarn.lock

@@ -845,10 +845,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/at.js/-/at.js-1.5.7.tgz#1ee6f838cc4410a1d797770934df91d90df8179e"
   integrity sha512-c6ySRK/Ma7lxwpIVbSAF3P+xiTLrNTGTLRx4/pHK111AdFxwgUwrYF6aVZFXvmG65jHOJHoa0eQQ21RW6rm0Rg==
 
-"@gitlab/eslint-plugin@6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-6.0.0.tgz#deb18f63808af1cb1cc117a92558f07edb1e2256"
-  integrity sha512-3TihEG0EzbGtc6wxZLANZN1ge2tnAv0qU8w6smUACmPhqFj0/DrCq9V6QKPqAHk/Yn3hrfGk5nznAzzuMEgwDQ==
+"@gitlab/eslint-plugin@7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-7.0.0.tgz#3c46d88dde2f7aa0be2a7df5af8e593006becea9"
+  integrity sha512-XqISaNqQwJ12jTanESvAFNVAniqFN/UFKj068ESiNumlsxnQA36V945wZ6LnwI7WgSCGQCUfHi9MEgyjUvuvdg==
   dependencies:
     babel-eslint "^10.0.3"
     eslint-config-airbnb-base "^14.0.0"