Add vue3_migrate_security_policies flag for policy pages

What does this MR do and why?

• Opts the six security policies page entrypoints into the Vue 3 migration, per the Vue 3 migration guide. Sibling of the Policy Store MR: !255746 (merged)
• Adds a status: rollout vue3_migration.yml to pages/{groups,projects}/security/policies/{index,new,edit}.
• Adds the vue3_migrate_security_policies beta flag. With it enabled, Rails serves the .vue3 bundle; otherwise the Vue 2 bundle is unchanged.
• No application or spec changes. Two remaining Vue 2 idioms, $children in list_component.vue and :size.sync in editor_layout.vue, are suppress-warning in the @vue/compat config. Replacing them is tracked on the migration issue as a prerequisite for status: migrated.

References

• Migration issue: #629193
• Epic: gitlab-org#6252

Screenshots or screen recordings

Before	After
N/A (no visual change; same UI, different Vue runtime)	See the recordings and stills below

Captured on a local GDK with vite.vue_version 3 and the flag enabled; every page logs [V] Using Vue.js 3 for PoliciesAppRoot. Recordings play at 3x speed with the page URL and a step caption overlaid.

1. Project policy list: sorting, filtering, drawer

gitlab-org/ror-app-2, 12 direct and inherited policies. Sorting on Name (ascending and descending), Policy type, Source, Scope and Last modified; the Type filter through its options with filtered results; the Source filter including inherited only; a row click opens the policy drawer, its Details and YAML tabs, then closes it, which exercises the $children-based clearSelected path.

2. Project policy: create and save

flightjs/Flight. New policy, the policy type selection page, then the scan execution editor: name and description with the YAML preview updating live, scan execution strategy radios, scanner checkboxes, configuration type template and custom, policy status enabled and disabled, and a .yaml mode to Rule mode round trip with values preserved. Saving opens a merge request in the security policy project; merging it makes the new policy appear in the list.

3. Project policy: edit and delete

Row actions dropdown, Edit (the stored YAML deserializes back into rule mode), rename plus status disabled, save, merge, and the list reflecting the edit. Then Delete from the row actions dropdown, merge, and the policy gone from the list.

4. Group level: list, editor, save, delete

pep-demo group. The group list with its Scope column, Type and Source filters, and the group policy drawer. The group merge request approval policy editor: the policy scope dropdown (all projects in this group, specific projects, all projects in the linked groups, projects with compliance frameworks), the rule scan type dropdown, the branch dropdown, the approver type dropdown, and .yaml mode. Then creating a group scan execution policy, saving, merging, seeing it listed, and deleting it through the row actions dropdown.

Stills (each screenshot shows the page URL)

Group policy list (gitlab-org), Scope column with compliance frameworks and linked groups:

Project policy list, direct and inherited policies:

Policy drawer, Details tab:

Policy drawer, YAML tab:

Policy type selection page:

Scan execution editor, rule mode:

Scan execution editor, .yaml mode:

Group merge request approval editor, rule mode:

Policy scope dropdown, group level:

Rule scan type dropdown:

List Type filter dropdown:

List Source filter dropdown:

Automated checks

• bundle exec rspec spec/lib/gitlab/vue3_migration_files_spec.rb: 1332 examples, 0 failures.
• VUE_VERSION=3 node_modules/.bin/jest ee/spec/frontend/security_orchestration: 282 suites, 4630 tests, all passing.
• ee/spec/features/projects/security/user_creates_merge_request_approval_policy_spec.rb: 5 of 6 examples pass. Line 24 fails locally with Unable to find button "Select scan type", the same failure this environment produces with the migration ymls removed. Feature specs run with the flag off, so they take the unchanged Vue 2 path.

Console output

• Unknown Monaco worker label: "editorWorkerService" appears when a Monaco editor mounts (.yaml mode, drawer YAML tab). It reproduces on the same GDK with vite.vue_version 2, so it is a Vite dev-server issue unrelated to this change.
• Vue 3 only: clicking an item in a policy row actions dropdown logs [Vue warn]: Error in native event handler: "TypeError: Cannot read properties of null (reading 'containsElement')". It comes from @gitlab/ui's GlDisclosureDropdown.handleAutoClose, where this.$refs.baseDropdown is already null by the time the native click handler runs, because the click navigates away. It does not reproduce with vite.vue_version 2. No policies code is involved and the action always completed correctly in testing (the merge request was created, the policy was edited or deleted), so this is a console warning with no observed functional impact; the fix belongs in @gitlab/ui. Tracked with a repro recording in #629489 (closed)

How to set up and validate locally

1. gdk config set vite.vue_version 3, then gdk reconfigure and gdk restart.
2. In gdk rails c, run Feature.enable(:vue3_migrate_security_policies).
3. Visit a group and a project policy list, plus new and edit for a policy.
4. Confirm the console logs [V] Using Vue.js 3 for PoliciesAppRoot.
5. Run VUE_VERSION=3 node_modules/.bin/jest ee/spec/frontend/security_orchestration and bundle exec rspec spec/lib/gitlab/vue3_migration_files_spec.rb.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.