### What Refactor the pipeline subscriptions feature to Vue/GraphQL. ### Why This will allow the feature to be much more maintainable. We will also be able to move the UI components to utilize our component library to follow our design system. ### Where This feature is located in **Settings \> CI/CD \> Pipeline subscriptions** #### Legacy UI screenshot  ## Refactor proposal This proposal is broken up into steps that can be shipped as smaller MRs that will lead to the completion of the refactor. This is to ensure the scope is smaller, easier to review and easier to schedule. ### Step 0 Add ability to create, delete and fetch project subscriptions via GraphQL. Add ability to fetch projects subscribed to a project via GraphQL. Ensure all data needed is added. I.E project, namespace, subscription count etc. ### Step 1 Create flag `pipeline_subscriptions_vue` and inject flag showing basic Vue app **Note:** Make sure to update feature specs to add test coverage as the refactor happens with flag on. ### Step 2 Build a reusable dynamic pipeline subscriptions table component. It should take a prop `upstream` that determines how the table should behave. I.E the projects subscriptions or projects that are subscribed to the current project. This step should just focus on fetching any projects and displaying the data in the table. ### Step 3 Add ability to delete pipeline subscription. Delete icon button should open a confirmation modal to ensure the user indeed wants to delete the subscription. ### Step 4 Add ability to create new subscription in the UI. `Add new` button that dynamically displays an input for user to add new subscription. ### Step 5 Rollout feature flag incrementally with a project actor. Ship a cleanup MR to remove the flag/old code and refactor feature spec `ee/spec/features/projects/settings/pipeline_subscriptions_spec.rb`