feat: rename application route names to kebab-case

forge/ee/lib/mcp/tools/applications.js

@@ -77,7 +77,7 @@ module.exports = [
             Creates a new application in a team.
             An application is a container that groups together hosted instances and remote instances that work together.
             Before invoking this tool, call platform_list_applications for this team to check whether an application with this name already exists. If one exists, ask the user whether to use the existing one or create a new one with the same name - DO NOT create a duplicate application without asking first.
-            After the application is created, ask the user if they want to be taken to it. If they do, use the ui_navigate tool with the route name "Application" and params { id: <the new application id> }.`,
+            After the application is created, ask the user if they want to be taken to it. If they do, use the ui_navigate tool with the route name "application" and params { id: <the new application id> }.`,
         annotations: { readOnlyHint: false, destructiveHint: false },
         inputSchema: {
             name: z.string().describe('Name for the new application'),

frontend/src/api/team.ts

@@ -160,7 +160,7 @@ const getTeamInstances = async (teamId: string) => {
     res.data.projects = res.data.projects.map(r => {
         r.createdSince = daysSince(r.createdAt)
         r.updatedSince = daysSince(r.updatedAt)
-        r.link = { name: 'Application', params: { id: r.id } }
+        r.link = { name: 'application', params: { id: r.id } }
         promises.push(client.get(`/api/v1/projects/${r.id}`).then(p => {
             r.status = p.data.meta.state
             r.flowLastUpdatedAt = p.data.flowLastUpdatedAt
@@ -183,7 +183,7 @@ const getTeamDashboards = async (teamId: string) => {
         r.updatedSince = daysSince(r.updatedAt)
         r.flowLastUpdatedSince = daysSince(r.flowLastUpdatedAt)
 
-        r.link = { name: 'Application', params: { id: r.id } }
+        r.link = { name: 'application', params: { id: r.id } }
 
         return r
     })

frontend/src/components/DevicesBrowser.vue

@@ -239,7 +239,7 @@
                                 Here, you will see a list of Devices belonging to this Application.
                             </p>
                             <p>
-                                You can deploy <router-link class="ff-link" :to="{name: 'ApplicationSnapshots'}">Snapshots</router-link> of this Application to your connected Devices.
+                                You can deploy <router-link class="ff-link" :to="{name: 'application-snapshots'}">Snapshots</router-link> of this Application to your connected Devices.
                             </p>
                             <p>
                                 A full list of your Team's Devices are available <ff-team-link

frontend/src/components/audit-log/AuditEntry.vue

@@ -21,7 +21,7 @@
                     <router-link class="flex content-center" :to="{ name: 'Instance', params: { id: entry.scope.id } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="association && entry.scope.type === 'application'">
-                    <router-link class="flex content-center" :to="{ name: 'Application', params: { id: entry.scope.id }}"><RectangleGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'application', params: { id: entry.scope.id }}"><RectangleGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="entry.scope.type === 'team'">
                     <router-link class="flex content-center" :to="'#'"><UserGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">This Team</span></router-link>

frontend/src/components/bill-of-materials/InstancesItem.vue

@@ -14,7 +14,7 @@
                 </router-link>
             </h6>
             <h6 v-if="instance.app">
-                <router-link :to="{name: 'Application', params: {id: instance.app.id}}" class="ff-link truncate">
+                <router-link :to="{name: 'application', params: {id: instance.app.id}}" class="ff-link truncate">
                     {{ instance.app.name }}
                 </router-link>
             </h6>

frontend/src/components/global-search/components/ResultSection.vue

@@ -91,7 +91,7 @@ export default {
                 switch (this.resultType) {
                 case 'application':
                     params.team_slug = this.team.slug
-                    routeName = 'Application'
+                    routeName = 'application'
                     break
                 case 'instance':
                     routeName = 'instance-overview'

frontend/src/components/pipelines/PipelineRow.vue

@@ -187,7 +187,7 @@ export default {
         slugify,
         addStage: function () {
             const route = {
-                name: 'CreatePipelineStage',
+                name: 'application-pipeline-stage-create',
                 params: {
                     id: this.application.id,
                     pipelineId: this.pipeline.id

frontend/src/components/pipelines/Stage.vue

@@ -79,7 +79,7 @@
                     </router-link>
                 </div>
                 <div v-if="stage.stageType == StageType.DEVICEGROUP" class="ff-pipeline-stage-type">
-                    <router-link class="flex gap-2 items-center" :to="{name: 'ApplicationDeviceGroupDevices', params: { applicationId: application.id, deviceGroupId: stage.deviceGroup.id }}">
+                    <router-link class="flex gap-2 items-center" :to="{name: 'application-device-group-devices', params: { applicationId: application.id, deviceGroupId: stage.deviceGroup.id }}">
                         <IconDeviceGroupSolid class="ff-icon ff-icon-lg text-teal-700" />
                         <div>
                             <label class="flex items-center gap-2">Device Group:</label>
@@ -330,7 +330,7 @@ export default {
         },
         edit () {
             const route = {
-                name: 'EditPipelineStage',
+                name: 'application-pipeline-stage-edit',
                 params: {
                     // url params
                     id: this.application.id,

frontend/src/composables/Dashboards.ts

@@ -102,7 +102,7 @@ export function useDashboardScope (scope: string) {
             homeRoute: computed(() => {
                 const app = contextStore.application
                 if (!app) return null
-                return { name: 'ApplicationDashboards', params: { team_slug: route.params.team_slug, id: app.id } }
+                return { name: 'application-dashboards', params: { team_slug: route.params.team_slug, id: app.id } }
             }),
             ensureContext: () => {
                 const slug = route.params.team_slug as string

frontend/src/mixins/Instance.js

@@ -105,7 +105,7 @@ export default {
         },
         onInstanceDelete () {
             this.$router.push({
-                name: 'ApplicationInstances',
+                name: 'application-instances',
                 params: { id: this.instance.application.id, team_slug: this.team.slug }
             })
         }

frontend/src/pages/application/Activity.vue

@@ -98,13 +98,13 @@ export default {
         },
         teamMembership () {
             if (!this.hasPermission('application:audit-log', { applicationId: this.applicationId })) {
-                return this.$router.push({ name: 'Application', params: this.$route.params })
+                return this.$router.push({ name: 'application', params: this.$route.params })
             }
         }
     },
     created () {
         if (!this.hasPermission('application:audit-log', { applicationId: this.applicationId })) {
-            return this.$router.replace({ name: 'Application', params: this.$route.params })
+            return this.$router.replace({ name: 'application', params: this.$route.params })
         }
         this.triggerLoad({ users: true, events: true })
     },

frontend/src/pages/application/CreateInstanceMultiStep.vue

@@ -127,7 +127,7 @@ export default {
             this.$emit('application-updated')
 
             this.$router.push({
-                name: 'ApplicationInstances',
+                name: 'application-instances',
                 params: { id: this.application.id }
             })
         }

frontend/src/pages/application/Dashboards.vue

@@ -7,5 +7,5 @@
 <script setup>
 import DashboardList from '@/components/dashboard/DashboardList.vue'
 
-defineOptions({ name: 'ApplicationDashboards' })
+defineOptions({ name: 'application-dashboards' })
 </script>

frontend/src/pages/application/Dependencies/Dependencies.vue

@@ -101,7 +101,7 @@ export default {
     },
     mounted () {
         if (!this.hasTeamPermission) {
-            return this.$router.push({ name: 'Application', params: { id: this.application.id } })
+            return this.$router.push({ name: 'application', params: { id: this.application.id } })
         }
         this.getDependencies()
     },

frontend/src/pages/application/DeviceGroup/Settings/Environment.vue

@@ -48,7 +48,7 @@ import TemplateSettingsEnvironment from '../../../admin/Template/sections/Enviro
  */
 
 export default {
-    name: 'ApplicationDeviceGroupSettingsEnvironment',
+    name: 'application-device-group-settings-environment',
     components: {
         ExclamationCircleIcon,
         TemplateSettingsEnvironment

frontend/src/pages/application/DeviceGroup/Settings/General.vue

@@ -60,7 +60,7 @@ import Alerts from '../../../../services/alerts.js'
 import Dialog from '../../../../services/dialog.js'
 
 export default {
-    name: 'ApplicationDeviceGroupSettingsGeneral',
+    name: 'application-device-group-settings-general',
     components: {
         FormRow,
         FormHeading
@@ -152,7 +152,7 @@ export default {
                     if (response.status === 200) {
                         Alerts.emit('Device Group deleted', 'confirmation')
                         this.$router.push({
-                            name: 'ApplicationDeviceGroups',
+                            name: 'application-device-groups',
                             params: {
                                 id: this.application.id
                             }

frontend/src/pages/application/DeviceGroup/Settings/index.vue

@@ -59,8 +59,8 @@ export default {
                 return false
             }
             this.sideNavigation = [
-                { name: 'General', path: { name: 'ApplicationDeviceGroupSettingsGeneral' } },
-                { name: 'Environment', path: { name: 'ApplicationDeviceGroupSettingsEnvironment' } }
+                { name: 'General', path: { name: 'application-device-group-settings-general' } },
+                { name: 'Environment', path: { name: 'application-device-group-settings-environment' } }
             ]
             return true
         },

frontend/src/pages/application/DeviceGroup/index.vue

@@ -15,10 +15,10 @@
                 <ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: 'team-applications', params: {team_slug: team.slug}}">
                     Applications
                 </ff-nav-breadcrumb>
-                <ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: 'Application', params: {team_slug: team.slug, id: application.id}}">
+                <ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: 'application', params: {team_slug: team.slug, id: application.id}}">
                     {{ application.name }}
                 </ff-nav-breadcrumb>
-                <ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: 'ApplicationDeviceGroups', params: {id: application?.id}}">
+                <ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: 'application-device-groups', params: {id: application?.id}}">
                     Device Groups
                 </ff-nav-breadcrumb>
             </template>
@@ -41,7 +41,7 @@
             <template #context>
                 <div>
                     Application:
-                    <router-link :to="{name: 'Application', params: {id: application?.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ application?.name }}</router-link>
+                    <router-link :to="{name: 'application', params: {id: application?.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ application?.name }}</router-link>
                 </div>
             </template>
         </ff-page-header>
@@ -101,7 +101,7 @@ export default {
                 {
                     label: 'Devices',
                     to: {
-                        name: 'ApplicationDeviceGroupDevices',
+                        name: 'application-device-group-devices',
                         params: {
                             applicationId: this.application?.id,
                             deviceGroupId: this.deviceGroup?.id
@@ -113,7 +113,7 @@ export default {
                 {
                     label: 'Settings',
                     to: {
-                        name: 'ApplicationDeviceGroupSettings',
+                        name: 'application-device-group-settings',
                         params: {
                             applicationId: this.application?.id,
                             deviceGroupId: this.deviceGroup?.id

frontend/src/pages/application/DeviceGroups.vue

@@ -90,7 +90,7 @@ import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
 export default {
-    name: 'ApplicationDeviceGroups',
+    name: 'application-device-groups',
     components: {
         EmptyState,
         FormRow,
@@ -173,7 +173,7 @@ export default {
         teamMembership: {
             handler: function () {
                 if (!this.hasPermission('application:device-group:list', { application: this.application })) {
-                    return this.$router.push({ name: 'Application', params: this.$route.params })
+                    return this.$router.push({ name: 'application', params: this.$route.params })
                 }
             },
             immediate: true
@@ -206,7 +206,7 @@ export default {
         async editDeviceGroup (deviceGroup, index) {
             // navigate to the device group details page for the selected device group @ ./DeviceGroups/edit.vue
             const route = {
-                name: 'ApplicationDeviceGroupIndex',
+                name: 'application-device-group',
                 params: {
                     // url params
                     applicationId: this.application.id,

frontend/src/pages/application/Devices.vue

@@ -20,7 +20,7 @@ import DevicesBrowser from '../../components/DevicesBrowser.vue'
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
 
 export default {
-    name: 'ApplicationDevices',
+    name: 'application-devices',
     components: {
         DevicesBrowser,
         SectionTopMenu

frontend/src/pages/application/Pipeline/create.vue

@@ -63,7 +63,7 @@ import Alerts from '../../../services/alerts.js'
 import { useContextStore } from '@/stores/context.js'
 
 export default {
-    name: 'CreatePipeline',
+    name: 'application-pipeline-create',
     components: {
         SectionTopMenu,
         FormRow
@@ -103,7 +103,7 @@ export default {
             handler (team) {
                 if (team && !this.hasPermission('pipeline:create')) {
                     this.$router.replace({
-                        name: 'ApplicationPipelines',
+                        name: 'application-pipelines',
                         params: {
                             id: this.application.id
                         }
@@ -123,7 +123,7 @@ export default {
                 Alerts.emit('Pipeline successfully created.', 'confirmation')
 
                 this.$router.push({
-                    name: 'ApplicationPipelines',
+                    name: 'application-pipelines',
                     params: {
                         id: this.application.id
                     }

frontend/src/pages/application/Pipeline/index.vue

@@ -51,7 +51,7 @@ export default {
         if (this.hasPermission('application:pipeline:list')) {
             await this.fetchData()
         } else {
-            return this.$router.push({ name: 'Application', params: this.$route.params })
+            return this.$router.push({ name: 'application', params: this.$route.params })
         }
     },
     methods: {

frontend/src/pages/application/PipelineStage/create.vue

@@ -27,7 +27,7 @@ import PipelineStageForm from './form.vue'
 import { useContextStore } from '@/stores/context.js'
 
 export default {
-    name: 'CreatePipelineStage',
+    name: 'application-pipeline-stage-create',
     components: {
         PipelineStageForm
     },
@@ -75,7 +75,7 @@ export default {
             handler (team) {
                 if (team && !this.hasPermission('pipeline:create')) {
                     this.$router.replace({
-                        name: 'ApplicationPipelines',
+                        name: 'application-pipelines',
                         params: {
                             id: this.application.id
                         }
@@ -129,7 +129,7 @@ export default {
             Alerts.emit('Pipeline stage successfully added.', 'confirmation')
 
             this.$router.push({
-                name: 'ApplicationPipelines',
+                name: 'application-pipelines',
                 params: {
                     id: this.application.id
                 }

frontend/src/pages/application/PipelineStage/edit.vue

@@ -31,7 +31,7 @@ import PipelineStageForm from './form.vue'
 import { useContextStore } from '@/stores/context.js'
 
 export default {
-    name: 'EditPipelineStage',
+    name: 'application-pipeline-stage-edit',
     components: {
         PipelineStageForm
     },
@@ -79,7 +79,7 @@ export default {
             handler (team) {
                 if (team && !this.hasPermission('pipeline:edit')) {
                     this.$router.replace({
-                        name: 'ApplicationPipelines',
+                        name: 'application-pipelines',
                         params: {
                             id: this.application.id
                         }
@@ -144,7 +144,7 @@ export default {
             Alerts.emit('Pipeline stage successfully updated.', 'confirmation')
 
             this.$router.push({
-                name: 'ApplicationPipelines',
+                name: 'application-pipelines',
                 params: {
                     id: this.application.id
                 }

frontend/src/pages/application/Pipelines.vue

@@ -26,7 +26,7 @@
                 v-if="hasPermission('pipeline:create', { application })"
                 data-action="pipeline-add"
                 :to="{
-                    name: 'CreatePipeline',
+                    name: 'application-pipeline-create',
                     params: { applicationId: application.id },
                 }"
                 :disabled="!featureEnabled"
@@ -82,7 +82,7 @@
             <ff-button
                 v-if="hasPermission('pipeline:create', { application })"
                 :to="{
-                    name: 'CreatePipeline',
+                    name: 'application-pipeline-create',
                     params: { applicationId: application.id },
                 }"
                 :disabled="!featureEnabled"
@@ -113,7 +113,7 @@ import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
 export default {
-    name: 'ApplicationPipelines',
+    name: 'application-pipelines',
     components: {
         SectionTopMenu,
         PlusSmallIcon,
@@ -165,7 +165,7 @@ export default {
         teamMembership: {
             handler: function () {
                 if (!this.hasPermission('application:pipeline:list', { application: this.application })) {
-                    return this.$router.push({ name: 'Application', params: this.$route.params })
+                    return this.$router.push({ name: 'application', params: this.$route.params })
                 }
             },
             immediate: true

frontend/src/pages/application/Snapshots.vue

@@ -84,7 +84,7 @@ import SnapshotSource from './Snapshots/components/cells/SnapshotSource.vue'
 import SnapshotExportDialog from './Snapshots/components/dialogs/SnapshotExportDialog.vue'
 
 export default {
-    name: 'ApplicationSnapshots',
+    name: 'application-snapshots',
     components: {
         AssetDetailDialog,
         AssetCompareDialog,