FlowFuse / FlowFuse/flowfuse

Migrate iterated dialog components to the universal modal system

Open
#8,124 0 comments 0 reactions 1 assignee Claimed by @cstns View on GitHub
area:frontend
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.