https://gitlab.com/gitlab-org/gitlab/-/issues/416251

We are moving away from VueX in favour of Vue
and ApolloClient. We want to ling against new
VueX imports to make sure to warn developers
not to introduce new stores.

Merge branch 'security-diff-comment-file-fix' into 'master'

See merge request gitlab-org/security/gitlab!3401

Changelog: security

- Fix rendering of discussions that do not have "diff_file.diff_refs".
Some comments on a whole file (imported from GitHub)
did not render properly as they use LegacyDiffNotes on the
backend which does not include "diff_refs". This fix adds a
fallback value for the old / new SHA to use "commit_id"
which when passed, renders the correct file path.
- Add "no_preview" option as a diffFile viewer option. This makes
sure we don't show the "replaced" side-by-side option for
file comments.

Changelog: fixed

This allows users to comment on the full diff file instead of
only being allowed to comment on a line in a diff file.

This change moves all GlSafeHtmlDirective
imports to use SafeHtml directive in `vue_shared`
directory. This is a fork from gitlab ui which was
added earlier to roll out changes more reliably.

It also restricts future import of GlSafeDirective
with the help of a new eslint rule.

Changelog: changed

No visual changes

Use webpack aliases to make import paths more readable

See https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/issues/18
for more information.

Part of our prettier migration; changing the arrow-parens style.

This changes the positioning of the image diff comments
from absolute x & y positions to instead use percents.
These percents then mean that the comment bubble can
correctly adjust depending on the screen size.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/225961

Of course, this means that there's a bunch of logic
to coordinate the new flag with the original -
`automaticallyCollapsed` - flag.

In addition: the UI is updated to use the new flag
whenever it's been set, but to continue to fall back
to the old flag. This is primarily facilitated by a new
helper utility for diff files to do the resolution in a
single centralized place.

Of note: the diff_file is updated to depend on the
global store as the authoritative source of determining
whether the file is collapsed or not. The previous
version kept a local `isCollapsed` in sync with the
global store, which introduced a huge amount of
interwoven complexity. The update ingests the
resolved collapsed state from the store when
various observed properties update instead of
inverting that flow.

This is a full refactor of file collapsing.
Because the previous version was a single flag, then
modified with a user preference (file-by-file), there
were some issues including a THIRD possible way
that collapsing works. This update slightly simplifies
how collapsing works by depending more heavily
on the two flags stored in state and only modifying
them with the user preference when necessary.

- This leaves a small inaccuracy since now the "manual" (user) collapsed
    files are toggling the "automatic" flag. This will be resolved in an
    upcoming merge request.

Will be replaced with GlSkeletonLoader, but for not this just
indicates that GlSkeletonLoading is deprecated

This enables an eslint rule to prevent
usage of v-html to avoid potential
XSS vulnerabilities

Also updates other components that eventually
use the same component

Error is just a boolean and should never be displayed.

We are migrating all specs in javascripts/notes to frontend/notes

The eslint rule paths have changed.
So we need to explitly change to the shorter path

only for CE-specific contents under /app/assets/javascripts/[j-n]*

Disables the vue-i18n eslint rules for files
that are not able to be autofixed, this will
stop these offences causing pipeline failures
but they will need manual fixing.

Disables the vue-i18n eslint rules for files
that are not able to be autofixed, this will
stop these offences causing pipeline failures
but they will need manual fixing.

i18n linting for .vue files under the
app/assets/javascripts/notes directory

i18n linting for .vue files under the
app/assets/javascripts/notes directory

Add test for checking output

We need this to be able to distinguish between Markdown tables and diff
tables.

We need this to be able to distinguish between Markdown tables and diff
tables.

- replaced file.too_large
- replaced file.text
- replaced file.collapsed

Before, diff file `higlighted_diff_lines`/`parallel_diff_lines` and
diff discussion `truncated_diff_lines` were inconsistent: `text` and
`rich_text` on the latter included the leading +/-/<space> character,
like on the backend, while the former had no `text` and its `rich_text`
had dropped this char.

This resulted in a bug when the suggestions feature expected these diff
line objects to be identical in format and thus interchangeable, which
was not the case.