Merge branch 'main' into housekeeping-sso-cert-expiry

Author: hardillb

docs/user/envvar.md

@@ -49,16 +49,17 @@ The image below shows an instance with the following environment variables:
 Standard environment variables are set for all Node-RED instances running
 within the platform:
 
-- `FF_INSTANCE_ID`
-- `FF_INSTANCE_NAME`
+- `FF_INSTANCE_ID` - The unique identifier of the instance
+- `FF_INSTANCE_NAME` - The name of the instance as set in FlowFuse
+- `FF_INSTANCE_URL` - The full URL of the instance (e.g. `https://my-instance.flowfuse.cloud`)
 
 In addition, the following variables are set when running on a device:
 
-- `FF_DEVICE_ID`
-- `FF_DEVICE_NAME`
-- `FF_DEVICE_TYPE`
-- `FF_SNAPSHOT_ID`
-- `FF_SNAPSHOT_NAME`
+- `FF_DEVICE_ID` - The unique identifier of the device
+- `FF_DEVICE_NAME` - The name of the device as set in FlowFuse
+- `FF_DEVICE_TYPE` - The device type label assigned in FlowFuse
+- `FF_SNAPSHOT_ID` - The unique identifier of the snapshot currently deployed to the device
+- `FF_SNAPSHOT_NAME` - The name of the snapshot currently deployed to the device
 
 When deploying the same set of flows out to multiple devices, these variables can
 be used by the flows to identify the specific device being run on.

forge/db/controllers/Project.js

@@ -1,7 +1,7 @@
 const crypto = require('crypto')
 
 const { ControllerError } = require('../../lib/errors')
-const { KEY_SETTINGS, KEY_STACK_UPGRADE_HOUR } = require('../models/ProjectSettings')
+const { KEY_CUSTOM_HOSTNAME, KEY_SETTINGS, KEY_STACK_UPGRADE_HOUR } = require('../models/ProjectSettings')
 
 /**
  * inflightProjectState - when projects are transitioning between states, there
@@ -314,11 +314,20 @@ module.exports = {
         const makeVar = (name, value, deprecated) => {
             return { name, value: value || '', platform: true, deprecated } // add `platform` and `deprecated` flags for UI
         }
+
+        let customHostname
+        if (app.config.features.enabled('customHostnames')) {
+            const projectURL = URL.parse(project.url)
+            const hostnameSetting = project.ProjectSettings?.find(setting => setting.key === KEY_CUSTOM_HOSTNAME)
+            customHostname = hostnameSetting?.value ? `${projectURL.protocol}//${hostnameSetting.value}` : undefined
+        }
+
         const result = []
         result.push(makeVar('FF_INSTANCE_ID', project.id || ''))
         result.push(makeVar('FF_INSTANCE_NAME', project.name || ''))
         result.push(makeVar('FF_PROJECT_ID', project.id || '', true)) // deprecated as of V1.6.0
         result.push(makeVar('FF_PROJECT_NAME', project.name || '', true)) // deprecated as of V1.6.0
+        result.push(makeVar('FF_INSTANCE_URL', customHostname || project.url || ''))
         result.push(...app.db.controllers.Project.removePlatformSpecificEnvVars(envVars))
 
         return result

forge/db/controllers/ProjectSnapshot.js

@@ -382,7 +382,7 @@ module.exports = {
         }
         if (options.settings?.env) {
             // derive the project's service env but not the rest
-            const serviceEnv = ['FF_INSTANCE_ID', 'FF_INSTANCE_NAME', 'FF_PROJECT_ID', 'FF_PROJECT_NAME']
+            const serviceEnv = ['FF_INSTANCE_ID', 'FF_INSTANCE_NAME', 'FF_PROJECT_ID', 'FF_PROJECT_NAME', 'FF_INSTANCE_URL']
             snapshotOptions.settings.env = {
                 ...options.settings.env,
                 ...serviceEnv.reduce((obj, key) => {

frontend/src/App.vue

@@ -104,7 +104,7 @@ export default {
         ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
         ...mapState(useAccountAuthStore, ['user']),
         ...mapState(useUxLoadingStore, ['appLoader', 'offline']),
-        ...mapVuexState('account', ['team', 'settings']),
+        ...mapVuexState('account', ['settings']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },

frontend/src/components/DevicesBrowser.vue

@@ -348,7 +348,7 @@ import { CogIcon, PlusSmIcon } from '@heroicons/vue/solid'
 
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import deviceApi from '../api/devices.js'
 import teamApi from '../api/team.js'
@@ -386,6 +386,7 @@ import DevicesStatusBar from './charts/DeviceStatusBar.vue'
 import AddDeviceToGroupDialog from './dialogs/device-group-management/AddDeviceToGroupDialog.vue'
 import RemoveDeviceFromGroupDialog from './dialogs/device-group-management/RemoveDeviceFromGroupDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -461,7 +462,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['team']),
         ...mapGetters('account', ['featuresCheck']),
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxToursStore, ['tours']),
@@ -615,7 +616,7 @@ export default {
         if (this.deviceCountDeltaSincePageLoad !== 0) {
             // Trigger a refresh of team info to resync following device
             // changes
-            await this.$store.dispatch('account/refreshTeam')
+            await useContextStore().refreshTeam()
         }
     },
     methods: {

frontend/src/components/NotificationsButton.vue

@@ -11,19 +11,18 @@
 import { MailIcon } from '@heroicons/vue/outline'
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters } from 'vuex'
 
 import NotificationsDrawer from './drawers/notifications/NotificationsDrawer.vue'
 
+import { useAccountStore } from '@/stores/account.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
     name: 'NotificationsButton',
     components: { MailIcon },
     computed: {
         ...mapState(useUxDrawersStore, ['rightDrawer']),
-        ...mapGetters('account', ['hasNotifications']),
-        ...mapGetters('account', ['unreadNotificationsCount']),
+        ...mapState(useAccountStore, ['hasNotifications', 'unreadNotificationsCount']),
         notificationsCount: function () {
             // Return null if count = 0 so we don't show a 0 in the pill
             if (!this.unreadNotificationsCount) {

frontend/src/components/PageHeader.vue

@@ -104,7 +104,7 @@
 import { AcademicCapIcon, AdjustmentsIcon, CogIcon, CursorClickIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, XIcon } from '@heroicons/vue/solid'
 import { mapActions, mapState } from 'pinia'
 import { ref } from 'vue'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
@@ -120,6 +120,8 @@ import TeamSelection from './TeamSelection.vue'
 import GlobalSearch from './global-search/GlobalSearch.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -132,8 +134,9 @@ export default {
         },
         ...mapState(useUxDrawersStore, ['leftDrawer', 'hiddenLeftDrawer']),
         ...mapState(useAccountAuthStore, ['user']),
-        ...mapVuexState('account', ['team', 'teams']),
-        ...mapGetters('account', ['notifications', 'hasAvailableTeams', 'defaultUserTeam', 'canCreateTeam', 'isTrialAccount', 'featuresCheck']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams', 'notifications', 'hasAvailableTeams', 'defaultUserTeam']),
+        ...mapGetters('account', ['canCreateTeam', 'featuresCheck']),
         navigationOptions () {
             return [
                 {

frontend/src/components/TeamSelection.vue

@@ -42,12 +42,16 @@ import {
     ListboxOption
 } from '@headlessui/vue'
 import { PlusIcon, UserAddIcon } from '@heroicons/vue/solid'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
 import NavItem from './NavItem.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'FFTeamSelection',
     emits: ['option-selected'],
@@ -61,8 +65,10 @@ export default {
         return { PlusIcon, UserAddIcon, hasPermission }
     },
     computed: {
-        ...mapState('account', ['team', 'teams', 'settings']),
-        ...mapGetters('account', ['hasAvailableTeams', 'canCreateTeam']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams', 'hasAvailableTeams']),
+        ...mapVuexState('account', ['settings']),
+        ...mapGetters('account', ['canCreateTeam']),
         teamOptions () {
             return [
                 ...this.teams.map(team => {
@@ -101,7 +107,7 @@ export default {
     methods: {
         selectTeam (team) {
             if (team) {
-                this.$store.dispatch('account/setTeam', team.slug)
+                useAccountStore().setTeam(team.slug)
                     .then(() => this.$router.push({
                         name: 'Team',
                         params: {

frontend/src/components/TeamTypeTile.vue

@@ -31,11 +31,11 @@
 
 <script>
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import { useHubspotHelper } from '../composables/Hubspot.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 
 export default {
     name: 'TeamTypeTile',
@@ -59,7 +59,7 @@ export default {
         return { talkToSalesCalendarModal }
     },
     computed: {
-        ...mapVuexState('account', ['teams']),
+        ...mapState(useAccountStore, ['teams']),
         ...mapState(useAccountAuthStore, ['user']),
         pricing: function () {
             const billingDescriptionKey = this.billingInterval === 'year' ? 'yrDescription' : 'description'

frontend/src/components/banners/FeatureUnavailableToTeam.vue

@@ -26,7 +26,9 @@
 <script>
 import { SparklesIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'FeatureUnavailableToTeam',
@@ -49,7 +51,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         upgradePath () {
             return { name: 'TeamChangeType', params: { team_slug: this.team.slug } }
         }