[7891] Frontend: Remove feature flag + simplify shared instances component

frontend/src/pages/application/index.vue

@@ -65,7 +65,7 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team']),
-        ...mapState(useAccountSettingsStore, ['features', 'featuresCheck']),
+        ...mapState(useAccountSettingsStore, ['features']),
         ...mapState(useLiveStatusStore, { liveInstanceMetadata: 'instanceMetadata', statusChannelLive: 'live' }),
         navigation () {
             const routes = [
@@ -84,8 +84,7 @@ export default {
                 {
                     label: 'Dashboards',
                     to: { name: 'ApplicationDashboards' },
-                    tag: 'application-dashboards',
-                    hidden: !this.featuresCheck?.isEmbeddedDashboardEnabled
+                    tag: 'application-dashboards'
                 },
                 {
                     label: 'Device Groups',

frontend/src/pages/instance/index.vue

@@ -147,7 +147,7 @@ export default {
             return [
                 { label: 'Overview', to: { name: 'instance-overview', params: { id: this.instance.id } }, tag: 'instance-overview' },
                 { label: 'Devices', to: { name: 'instance-devices', params: { id: this.instance.id } }, tag: 'instance-remote' },
-                { label: 'Dashboard', to: { name: 'instance-dashboard', params: { id: this.instance.id } }, tag: 'instance-dashboard', hidden: !this.hasDashboard2 || !this.featuresCheck.isEmbeddedDashboardEnabled },
+                { label: 'Dashboard', to: { name: 'instance-dashboard', params: { id: this.instance.id } }, tag: 'instance-dashboard', hidden: !this.hasDashboard2 },
                 { label: 'Version History', to: versionHistoryRoute, tag: 'instance-version-history' },
                 { label: 'Assets', to: { name: 'instance-assets', params: { id: this.instance.id } }, tag: 'instance-assets', hidden: !this.hasPermission('project:files:list', { application: this.instance.application }) },
                 { label: 'Audit Log', to: { name: 'instance-audit-log', params: { id: this.instance.id } }, tag: 'instance-activity' },

frontend/src/pages/team/Instances.vue

@@ -1,10 +1,9 @@
 <template>
     <ff-page>
         <template #header>
-            <ff-page-header :title="dashboardRoleOnly ? 'Dashboards' : 'Hosted Instances'">
+            <ff-page-header title="Hosted Instances">
                 <template #context>
-                    <span v-if="!dashboardRoleOnly">A list of all dashboards belonging to this Team.</span>
-                    <span v-else>A list of Node-RED instances with Dashboards belonging to this Team.</span>
+                    <span>A list of all Node-RED instances belonging to this Team.</span>
                 </template>
                 <template #help-header>
                     Instances
@@ -14,14 +13,14 @@
                 </template>
                 <template #helptext>
                     <p>
-                        This is a list of <span v-if="!dashboardRoleOnly">all</span> Node-RED instances belonging to this team running
+                        This is a list of all Node-RED instances belonging to this team running
                         in this FlowFuse.
                     </p>
                     <p>
                         Each Instance is a customised version of Node-RED that includes various
                         FlowFuse plugins to integrate it with the platform.
                     </p>
-                    <p v-if="!dashboardRoleOnly">
+                    <p>
                         A number of the standard Node-RED settings are exposed for customisation,
                         and they can be preset by applying a Template upon creation of an Instance.
                     </p>
@@ -39,7 +38,7 @@
                     data-el="instances-table" :columns="columns" :rows="instances" :show-search="true"
                     search-placeholder="Search Instances..."
                     :initialSortKey="sort.key" :initialSortOrder="sort.order"
-                    :rows-selectable="!dashboardRoleOnly"
+                    :rows-selectable="true"
                     :pagination="paginationProps"
                     @row-selected="openInstance"
                     @update:search="updateSearch"
@@ -103,7 +102,7 @@
                         />
                     </template>
                 </ff-data-table>
-                <EmptyState v-else-if="!dashboardRoleOnly">
+                <EmptyState v-else>
                     <template #img>
                         <img src="../../images/empty-states/team-instances.png">
                     </template>
@@ -135,12 +134,6 @@
                         </ff-button>
                     </template>
                 </EmptyState>
-                <EmptyState v-else>
-                    <template #img>
-                        <img src="../../images/empty-states/team-instances.png">
-                    </template>
-                    <template #header>There are no dashboards in this team.</template>
-                </EmptyState>
             </template>
             <template v-else>
                 <EmptyState>
@@ -204,13 +197,6 @@ export default {
         FeatureUnavailableToTeam
     },
     mixins: [instanceActionsMixin],
-    props: {
-        dashboardRoleOnly: {
-            required: false,
-            default: false,
-            type: Boolean
-        }
-    },
     setup () {
         const { isRunningState } = useInstanceStates()
         const { navigateTo } = useNavigationHelper()
@@ -285,7 +271,6 @@ export default {
             return this.featuresCheck?.isHostedInstancesEnabledForTeam
         },
         paginationProps () {
-            if (this.dashboardRoleOnly) return null
             return {
                 page: this.page,
                 pageSize: this.pageSize,
@@ -324,9 +309,6 @@ export default {
                         },
                         includeMeta: true
                     })
-                } else if (this.hasPermission('team:read')) {
-                    // Dashboards endpoint not paginated server-side; keep current behavior.
-                    response = await teamApi.getTeamDashboards(this.team.id)
                 }
                 const projects = response?.projects || []
                 this.totalRows = response?.meta?.total ?? response?.count ?? projects.length

frontend/src/pages/team/index.vue

@@ -12,8 +12,7 @@
         <router-view :key="team.id" />
     </template>
     <template v-else-if="!canAccessTeam">
-        <TeamDashboards v-if="isEmbeddedDashboardEnabled" />
-        <TeamInstances v-else :dashboard-role-only="true" />
+        <TeamDashboards />
     </template>
 </template>
 
@@ -26,7 +25,6 @@ import TeamTrialBanner from '../../components/banners/TeamTrial.vue'
 import { Roles } from '../../utils/roles.js'
 
 import TeamDashboards from './Dashboards/index.vue'
-import TeamInstances from './Instances.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
@@ -39,7 +37,6 @@ export default {
     name: 'TeamPage',
     components: {
         TeamDashboards,
-        TeamInstances,
         SubscriptionExpiredBanner,
         TeamSuspendedBanner,
         TeamTrialBanner
@@ -57,7 +54,7 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team', 'teamMembership']),
-        ...mapState(useAccountSettingsStore, ['requiresBilling', 'featuresCheck']),
+        ...mapState(useAccountSettingsStore, ['requiresBilling']),
         ...mapState(useAccountAuthStore, ['user', 'isAdminUser']),
         ...mapState(useUxToursStore, ['shouldPresentTour']),
         ...mapState(useProductExpertStore, ['shouldWakeUpAssistant']),
@@ -73,9 +70,6 @@ export default {
         },
         canAccessTeam: function () {
             return this.isAdminUser || this.teamMembership?.role >= Roles.Viewer
-        },
-        isEmbeddedDashboardEnabled: function () {
-            return this.featuresCheck?.isEmbeddedDashboardEnabled
         }
     },
     watch: {

frontend/src/stores/account-settings.js

@@ -6,8 +6,7 @@ import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useContextStore } from '@/stores/context.js'
 
 export const POSTHOG_FLAGS = {
-    FF_FEATURE_FLAGS: 'FF_FEATURE_FLAGS',
-    EMBEDDED_DASHBOARD_ENABLED: 'EMBEDDED_DASHBOARD_ENABLED'
+    FF_FEATURE_FLAGS: 'FF_FEATURE_FLAGS'
 }
 
 export const useAccountSettingsStore = defineStore('account-settings', {
@@ -50,7 +49,6 @@ export const useAccountSettingsStore = defineStore('account-settings', {
 
             // adding in PostHog Feature Flags
             checks.isPostHogFeatureFlagsEnabled = !!state.posthogFlags[POSTHOG_FLAGS.FF_FEATURE_FLAGS]
-            checks.isEmbeddedDashboardEnabled = !!state.posthogFlags[POSTHOG_FLAGS.EMBEDDED_DASHBOARD_ENABLED]
 
             return checks
         }

frontend/src/stores/ux-navigation.js

@@ -251,8 +251,7 @@ export const useUxNavigationStore = defineStore('ux-navigation', {
                                 },
                                 tag: 'team-dashboards',
                                 icon: ChartPieIcon,
-                                disabled: requiresBilling,
-                                hidden: features.isEmbeddedDashboardEnabled
+                                disabled: requiresBilling
                             },
                             {
                                 label: 'Groups',

test/e2e/frontend/cypress/tests-ee/rbac/rbac-management.spec.js

@@ -303,16 +303,16 @@ describe('FlowFuse - RBAC GUI Management', () => {
             cy.get('[data-nav="user-access"]').should('not.exist')
 
             // checking that a plain dashboard user has access to all application instances when he has no additional rbac permissions set
-            cy.get('[data-el="instances-table"]').should('exist')
-            cy.get('[data-el="instances-table"] tbody tr').should('have.length', 5)
+            cy.get('[data-el="dashboards-table"]').should('exist')
+            cy.get('[data-el="dashboards-table"] tbody tr').should('have.length', 5)
             // application 1 should not be visible to anyone
-            cy.get('[data-el="instances-table"] [data-el="row-application-1-instance-1"]').should('not.exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-1-instance-1"]').should('not.exist')
             // application 2 should be visible to dashboard users
-            cy.get('[data-el="instances-table"] [data-el="row-application-2-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-3-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-4-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-5-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-6-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-2-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-3-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-4-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-5-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-6-instance-1"]').should('exist')
         })
     })
 })

test/e2e/frontend/cypress/tests/brokers/clients.spec.js

@@ -29,7 +29,7 @@ describe('FlowFuse - Brokers Clients', () => {
             cy.get('[data-nav="team-brokers"]').should('not.exist')
             cy.visit('team/ateam/brokers/team-broker/clients')
 
-            cy.get('[data-el="instances-table"]').should('exist')
+            cy.get('[data-el="dashboards-list"]').should('exist')
         })
     })
 })

test/e2e/frontend/cypress/tests/brokers/hierarchy.spec.js

@@ -17,7 +17,7 @@ describe('FlowFuse - Brokers Hierarchy', () => {
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
             cy.visit('team/ateam/brokers/team-broker/hierarchy')
 
-            cy.get('[data-el="instances-table"]').should('exist')
+            cy.get('[data-el="dashboards-list"]').should('exist')
         })
     })
 })

test/e2e/frontend/cypress/tests/team/instances.spec.js

@@ -75,23 +75,21 @@ describe('Team - Instances', () => {
             cy.contains('There are no dashboards in this team.')
         })
 
-        it('are shown a list of instances when dashboard instances are found', () => {
+        it('are shown a list of dashboards and can open one in the viewer', () => {
             cy.login('dashboard-dave', 'ddPassword')
             cy.visit('/team/ateam')
 
             cy.wait('@getTeam')
 
-            cy.contains('instance-1-2')
-                .closest('tr')
-                .within(() => {
-                    cy.get('[data-action="open-dashboard"]').should('be.disabled')
-                })
+            cy.get('[data-el="dashboards-table"]').within(() => {
+                cy.contains('instance-1-1')
+                cy.contains('instance-1-2')
+            })
 
-            cy.contains('instance-1-1')
-                .closest('tr')
-                .within(() => {
-                    cy.get('[data-action="open-dashboard"]').should('not.be.disabled')
-                })
+            cy.contains('instance-1-1').closest('tr').click()
+
+            cy.url().should('include', '/dashboards/')
+            cy.get('[data-el="dashboards-viewer"]').should('exist')
         })
     })
 })