Merge branch 'slashmanov/restrict-private-instance-next-tick' into 'master'

Add an eslint rule to restrict component instance $nextTick usage

See merge request gitlab-org/gitlab!79108

.eslintrc.yml

@@ -95,7 +95,8 @@ rules:
         order: ignore
 overrides:
   - files:
-      - '**/spec/**/*'
+    - 'ee/spec/frontend*/**/*'
+    - 'spec/frontend*/**/*'
     rules:
       '@gitlab/require-i18n-strings': off
       '@gitlab/no-runtime-template-compiler': off
@@ -103,6 +104,8 @@ overrides:
         - error
         - selector: CallExpression[callee.object.name=/(wrapper|vm)/][callee.property.name="setData"]
           message: 'Avoid using "setData" on VTU wrapper'
+        - selector: MemberExpression[object.type!='ThisExpression'][property.type='Identifier'][property.name='$nextTick']
+          message: 'Using $nextTick from a component instance is discouraged. Import nextTick directly from the Vue package.'
   - files:
       - 'config/**/*'
       - 'scripts/**/*'

spec/frontend/ide/components/preview/clientside_spec.js

@@ -121,7 +121,7 @@ describe('IDE clientside preview', () => {
 
     it('pings usage success', async () => {
       dispatchCodesandboxReady();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(2);
       expect(storeClientsideActions.pingUsage).toHaveBeenCalledWith(
         expect.anything(),