<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/engineering/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Label this issue](https://contributors.gitlab.com/manage-issue?action=label&projectId=278964&issueIid=629193) </details> <!--IssueSummary end--> Part of https://gitlab.com/groups/gitlab-org/-/work_items/6252. This issue tracks the Vue 3 migration of the **Security Policies** and **Policy Store** pages. Two surfaces, 14 entrypoints, two feature flags. ## Entrypoints & apps **Surface 1 — Security Policies (legacy `ee/security_orchestration`)**, 6 entrypoints under `ee/app/assets/javascripts/pages/{groups,projects}/security/policies/`. Flag: `vue3_migrate_security_policies`. | Entrypoint | Vue root | Module | |---|---|---| | `index` (group + project) | `PoliciesAppRoot` | `security_orchestration/security_policies_list.js` | | `new` + `edit` (group + project) | `App` (policy editor) | `security_orchestration/policy_editor.js` | Tree size: 218 `.vue` / 57 `.js`; `components/policy_editor/` alone is 146 `.vue` (scan execution, merge request approval, pipeline execution, vulnerability management policy types). Apollo-backed. Both roots already mount through `initVueApp` from `~/lib/utils/vue3compat/init_vue_app`. **Surface 2 — Policy Store (`ee/policy_store`)**, 8 entrypoints under `ee/app/assets/javascripts/pages/{groups,organizations}/security/policy_store/`. Flag: `vue3_migrate_policy_store`. | Entrypoint | Vue root | Module | |---|---|---| | `index` (group + org) | `PolicyStoreListRoot` | `policy_store/list.js` | | `new` + `edit` (group + org) | `PolicyStoreEditorRoot` | `policy_store/editor.js` | | `show` (group + org) | `PolicyStoreDetailRoot` | `policy_store/detail.js` | Tree size: 30 `.vue` / 20 `.js`. Apollo-backed. No project-level Policy Store exists — org and group only. Coupling: `policy_store` imports two things from `security_orchestration` (`components/shared/base_items_dropdown.vue` + `projects_count_message.vue`, and a `get_group_projects` GraphQL query). `security_orchestration` imports nothing from `policy_store`. ## Risks Low. - All 311 jest suites (5096 tests) across `ee/spec/frontend/security_orchestration` and `ee/spec/frontend/policy_store` already pass under `VUE_VERSION=3`, including the 2 snapshots. - A static audit found no `$listeners`, `$scopedSlots`, `$set`/`$delete`, event buses (`new Vue()`), `functional: true` components, `filters:` option, `Vue.extend`, `render(h)`, legacy `<transition>` classes, `vuedraggable`, or same-element `v-if`+`v-for`. - Two Vue 2 idioms remain, both already marked `suppress-warning` in GitLab's `@vue/compat` config so they keep working in compat mode, and both worth removing before the flags are retired: - `$children` in `security_orchestration/components/policies/list_component.vue` (a `BTable` `clearSelected()` workaround). - `:size.sync` on `panel-resizer` in `security_orchestration/components/policy_editor/editor_layout.vue`. - Feature-spec coverage: 12 Capybara specs in `ee/spec/features/{groups,projects}/security/` cover the legacy policies list and editor. Policy Store has no feature specs, jest only, so its browser verification matters more. ## Tasks / MRs - [x] MR: add the `vue3_migrate_policy_store` flag and `status: rollout` `vue3_migration.yml` on the 8 Policy Store entrypoints. Ships first, smaller and newer surface. - [x] MR: add the `vue3_migrate_security_policies` flag and `status: rollout` `vue3_migration.yml` on the 6 Security Policies entrypoints. - [x] Browser verification per surface, with a walkthrough video: list/filter/drawer, create + edit each policy type, Policy Store detail view; group, project, and organization scope as applicable. Confirm the `[V] Using Vue.js 3 (with @vue/compat) for <root>` console marker and `document.querySelectorAll('[data-gitlab-vue3-app]')`. - [x] Run `VUE_VERSION=3 yarn jest ee/spec/frontend/security_orchestration ee/spec/frontend/policy_store`. - [x] Run the Vue 3 RSpec system jobs via the `~pipeline:run-rspec-vue3` MR label. - [ ] Follow-up MR: remove the `$children` and `.sync` idioms. - [x] Ramp `vue3_migrate_policy_store` per the rollout below. - [ ] Cleanup MR: move the Policy Store `vue3_migration.yml` to `status: migrated` and remove the flag. - [x] Ramp `vue3_migrate_security_policies` per the rollout below. - [ ] Cleanup MR: move the Security Policies `vue3_migration.yml` to `status: migrated` and remove the flag. ## Rollout Same steps for each flag (`vue3_migrate_policy_store`, then `vue3_migrate_security_policies`): ``` 1. Enable the flag for gitlab-org. 2. Enable for 10% of actors. Soak. 3. Enable for 50% of actors. Soak. 4. Enable for 100% of actors. Soak. 5. Enable for all users, keeping default_enabled: false until every entrypoint in epic 6252 is migrated. 6. Open the cleanup MR to set status: migrated. ``` ## Notes - Restart the Vite dev server after adding a `vue3_migration.yml`, or the entry map stays stale. - Local GDK runs Vue 2 by default; use `gdk config set vite.vue_version 3` to test. <!-- AI-Sessions dir: ~/.claude/projects/-Users-alexanderturinske-gdk-gitlab/ 8ecbab5b-e9c9-4986-8a85-7b60ae6874be.jsonl (2026-09-15) -->