Merge pull request #3249 from FlowFuse/fix-3246-disable-button

Device Groups: Disable rather than hide Device Group option
FlowFuse · Dec 21, 2023 · 07b3bf5 · 07b3bf5
2 parents 197f3b3 + cd318a2
commit 07b3bf5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/frontend/src/pages/application/PipelineStage/form.vue b/frontend/src/pages/application/PipelineStage/form.vue
@@ -45,11 +45,13 @@
                     <template #icon><IconDeviceSolid /></template>
                 </ff-tile-selection-option>
                 <ff-tile-selection-option
-                    v-if="!isFirstStage && deviceGroupsEnabled"
+                    v-if="deviceGroupsEnabled"
                     label="Device Group"
                     :value="StageType.DEVICEGROUP"
                     description=""
                     color="#31959A"
+                    :disabled="isFirstStage"
+                    disabledTooltip="Device Groups are not available for the first stage in a pipeline"
                 >
                     <template #icon><IconDeviceGroupSolid /></template>
                 </ff-tile-selection-option>

diff --git a/frontend/src/ui-components/components/form/TileSelectionOption.vue b/frontend/src/ui-components/components/form/TileSelectionOption.vue
@@ -1,27 +1,35 @@
 <template>
-    <div ref="input" class="ff-tile-selection-option"
-         :class="{'editable': editable, 'disabled': disabled, 'active': selected}"
-         :style="{'--ff-tile-selection-color': color || null}"
-         tabindex="0" @click="select(false)" @keydown.space.prevent="select(true)"
+    <div
+        v-ff-tooltip="disabled ? disabledTooltip : undefined"
     >
-        <div class="ff-tile-selection-option--header">
-            <h2>
-                <PencilAltIcon v-if="editable" class="ff-tile-selection-option--edit" @click="select(true)" />
-                <slot v-else name="icon"><CheckCircleIcon /></slot>
-                {{ label }}
-            </h2>
-            <div class="ff-tile-selection-option--price">
-                <h2>{{ price }}</h2>
-                <label>{{ priceInterval }}</label>
+        <div ref="input"
+             :class="{'editable': editable, 'disabled': disabled, 'active': selected}"
+             class="ff-tile-selection-option"
+             :style="{'--ff-tile-selection-color': color || null}"
+             tabindex="0"
+             :data-form="`tile-selection-option-${value}`"
+             @click="select(false)"
+             @keydown.space.prevent="select(true)"
+        >
+            <div class="ff-tile-selection-option--header">
+                <h2>
+                    <PencilAltIcon v-if="editable" class="ff-tile-selection-option--edit" @click="select(true)" />
+                    <slot v-else name="icon"><CheckCircleIcon /></slot>
+                    {{ label }}
+                </h2>
+                <div class="ff-tile-selection-option--price">
+                    <h2>{{ price }}</h2>
+                    <label>{{ priceInterval }}</label>
+                </div>
             </div>
-        </div>
-        <div v-if="description" class="ff-tile-selection-option--description">
-            <ff-markdown-viewer :content="description" />
-        </div>
-        <div v-if="meta" class="ff-tile-selection-option--meta">
-            <div v-for="(row, $index) in meta" :key="$index">
-                <span>{{ row.key }}</span>
-                <span>{{ row.value }}</span>
+            <div v-if="description" class="ff-tile-selection-option--description">
+                <ff-markdown-viewer :content="description" />
+            </div>
+            <div v-if="meta" class="ff-tile-selection-option--meta">
+                <div v-for="(row, $index) in meta" :key="$index">
+                    <span>{{ row.key }}</span>
+                    <span>{{ row.value }}</span>
+                </div>
             </div>
         </div>
     </div>
@@ -51,6 +59,10 @@ export default {
             default: false,
             type: Boolean
         },
+        disabledTooltip: {
+            default: undefined,
+            type: String
+        },
         label: {
             default: '',
             type: String

diff --git a/frontend/src/ui-components/directives/Tooltip.js b/frontend/src/ui-components/directives/Tooltip.js
@@ -16,6 +16,10 @@ function renderTooltip (el, binding, vnode) {
 const directive = {
     name: 'ff-tooltip',
     mounted: (el, binding) => {
+        if (!binding.value) {
+            return
+        }
+
         if (el && binding && binding.value) {
             renderTooltip(el, binding)
         }

diff --git a/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js b/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
@@ -388,7 +388,7 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
             cy.get('[data-action="add-stage"]').click()
         })
 
-        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option:contains("Device")').click()
+        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option[data-form="tile-selection-option-device"]').click()
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
@@ -511,7 +511,7 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
         cy.get(`[data-el="pipelines-list"] [data-el="pipeline-row"]:contains("${PIPELINE_NAME}")`).within(() => {
             cy.get('[data-action="add-stage"]').click()
         })
-        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option:contains("Device")').not(':contains("Group")').click()
+        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option[data-form="tile-selection-option-device"]').click()
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
@@ -582,8 +582,8 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
             cy.get('[data-action="add-stage"]').click()
         })
 
-        // there should NOT be a tile with the text "Device Group"
-        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option:contains("Device Group")').should('not.exist')
+        // Device group tile is disabled
+        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option[data-form="tile-selection-option-device-group"]').should('have.class', 'disabled')
     })
 
     it('cannot add any more stages after a device group', () => {
@@ -627,7 +627,7 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
             cy.get('[data-action="add-stage"]').click()
         })
 
-        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option:contains("Device Group")').click()
+        cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option[data-form="tile-selection-option-device-group"]').click()
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
         // stage-action should not be present for device group