Migrate iterated dialog components to the universal modal system
- Dominant language
- JavaScript
- Stars
- 400
- Forks
- 89
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 146
Description
`BlueprintTile` and `PipelineStage` both contain dialog components that get rendered inside loops. This means the DOM ends up with tens or potentially hundreds of hidden dialog instances, one per iteration.
## BlueprintTile
`components/blueprints/BlueprintTile.vue` contains an `AssetDetailDialog` (line 59) that renders for each tile. This component is used inside nested v-for loops in 4 places:
* `pages/team/Library/Blueprints.vue` (nested v-for by category, then by blueprint)
* `pages/instance/Blueprints/BlueprintSelection.vue` (nested v-for by group, then by blueprint)
* `pages/admin/FlowBlueprints/index.vue` (v-for over all active blueprints)
* `components/multi-step-forms/instance/steps/flows-step/BlueprintsSection.vue` (nested v-for)
## PipelineStage
`components/pipelines/Stage.vue` contains a `DeployStageDialog` (line 196) that renders per stage. Used through a double iteration:
* `pages/application/Pipelines.vue`: ``
* `components/pipelines/PipelineRow.vue`: ``
## What should happen
* Remove the dialog components from BlueprintTile and PipelineStage
* Trigger them through `Dialog.show()` instead, passing the relevant data as payload
* This brings these two cases down to zero hidden dialog instances regardless of how many items are rendered
Part of #8122.
Contributor guide
Assessment
This issue has not been assessed yet.