Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Applications routing follow up #4891

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Applications routing follow up #4891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
81b051f
Applications routing follow up
cstns Dec 9, 2024
c9070a5
add e2e tests
cstns Dec 9, 2024
311d451
Merge branch 'main' into app-routes-follow-up
cstns Dec 18, 2024
f372143
Merge remote-tracking branch 'origin/main' into app-routes-follow-up
cstns Dec 18, 2024
e381da0
Merge branch 'main' into app-routes-follow-up
cstns Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion frontend/src/components/drawers/navigation/MainNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,14 @@ export default {
return { ...defaultBackToRoute, ...this.nearestMetaMenu.backTo }

case isNearestMenuAnObject && hasBackToProp && typeof this.nearestMetaMenu.backTo === 'function':
return { ...defaultBackToRoute, ...this.nearestMetaMenu.backTo({ team_slug: this.team.slug }) }
return {
...defaultBackToRoute,
...this.nearestMetaMenu.backTo({
params: this.$route.params,
query: this.$route.query,
team: this.team
})
}

case typeof this.nearestMetaMenu === 'string':
default:
Expand Down
66 changes: 40 additions & 26 deletions frontend/src/pages/application/DeviceGroup/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<main v-if="!application?.id">
<ff-loading message="Loading Application..." />
</main>
<main v-else class="ff-with-status-header">
<main v-else class="ff-with-status-header device-group">
<Teleport v-if="mounted" to="#platform-banner">
<div v-if="isVisitingAdmin" class="ff-banner" data-el="banner-project-as-admin">
You are viewing this device group as an Administrator
Expand All @@ -13,28 +13,31 @@
<div class="ff-instance-header">
<ff-page-header :title="deviceGroup?.name" :tabs="navigation">
<template #breadcrumbs>
<ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: 'ApplicationDeviceGroups', params: {id: application?.id}}">Device Groups</ff-nav-breadcrumb>
<ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: '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}}">
{{ application.name }}
</ff-nav-breadcrumb>
<ff-nav-breadcrumb class="whitespace-nowrap" :to="{name: 'ApplicationDeviceGroups', params: {id: application?.id}}">
Device Groups
</ff-nav-breadcrumb>
</template>
<template #tools>
<InfoCard header="">
<template #content>
<InfoCardRow property="Target Snapshot:">
<template #value>
<span class="flex gap-2 pr-2" data-el="device-group-target-snapshot">
<span class="flex items-center space-x-2 pt-1 text-gray-500 italic">
<ExclamationIcon v-if="!targetSnapshot" class="text-yellow-600 w-4" />
<CheckCircleIcon v-else class="text-green-700 w-4" />
</span>
<div class="flex flex-col">
<span v-if="targetSnapshot" data-el="snapshot-name">{{ targetSnapshot.name }}</span>
<span v-else data-el="snapshot-name">No Target Snapshot Set</span>
<span v-if="targetSnapshot" class="text-xs text-gray-500" data-el="snapshot-id">{{ targetSnapshot.id }}</span>
</div>
</span>
</template>
</InfoCardRow>
</template>
</InfoCard>
<div class="ff-target-snapshot-info">
<p class="ff-title">Target Snapshot: </p>
<div class="flex gap-2 pr-2" data-el="device-group-target-snapshot">
<span class="flex items-center space-x-2 pt-1 text-gray-500 italic">
<ExclamationIcon v-if="!targetSnapshot" class="text-yellow-600 w-4" />
<CheckCircleIcon v-else class="text-green-700 w-4" />
</span>
<div class="flex flex-col">
<span v-if="targetSnapshot" data-el="snapshot-name">{{ targetSnapshot.name }}</span>
<span v-else data-el="snapshot-name">No Target Snapshot Set</span>
<span v-if="targetSnapshot" class="text-xs text-gray-500" data-el="snapshot-id">{{ targetSnapshot.id }}</span>
</div>
</div>
</div>
</template>
<template #context>
<div>
Expand Down Expand Up @@ -64,22 +67,17 @@ import { mapState } from 'vuex'

import ApplicationApi from '../../../api/application.js'

import InfoCard from '../../../components/InfoCard.vue'
import InfoCardRow from '../../../components/InfoCardRow.vue'
import SubscriptionExpiredBanner from '../../../components/banners/SubscriptionExpired.vue'
import TeamTrialBanner from '../../../components/banners/TeamTrial.vue'
import DeviceSolidIcon from '../../../components/icons/DeviceSolid.js'

import permissionsMixin from '../../../mixins/Permissions.js'

// todo page breadcrumbs should be pointing to app > device groups, currently app is missing and layout seems to be out of place
export default {
name: 'DeviceGroup',
components: {
CheckCircleIcon,
ExclamationIcon,
InfoCard,
InfoCardRow,
SubscriptionExpiredBanner,
TeamTrialBanner
},
Expand Down Expand Up @@ -175,3 +173,19 @@ export default {
}
}
</script>

<style lang="scss">
.device-group {
.ff-target-snapshot-info{
border: 1px solid $ff-grey-300;
padding: 10px 15px;
display: flex;
gap: 20px;

.ff-title {
font-weight: 500;
}
}

}
</style>
14 changes: 10 additions & 4 deletions frontend/src/pages/application/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,8 +156,16 @@ export default [
sourceInstanceId: route.query.sourceInstanceId
}),
meta: {
// todo add a back button
title: 'Application - Instances - Create'
title: 'Application - Instances - Create',
menu: {
type: 'back',
backTo: ({ query, params }) => {
return {
label: 'Back',
to: { name: 'ApplicationInstances', params, query }
}
}
}
}
},
{
Expand All @@ -174,7 +182,6 @@ export default [
name: 'ApplicationDeviceGroupDevices',
component: ApplicationDeviceGroupDevices,
meta: {
// todo add a back button to the application device-groups
title: 'Application - Device Group - Members'
}
},
Expand All @@ -183,7 +190,6 @@ export default [
name: 'ApplicationDeviceGroupSettings',
component: ApplicationDeviceGroupSettings,
meta: {
// todo add back button
title: 'Application - Device Group - Settings'
},
redirect: {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/team/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,10 +227,10 @@ export default [
title: 'Create Team',
menu: {
type: 'back',
backTo: (params) => {
backTo: ({ team }) => {
return {
label: 'Back to Dashboard',
to: { name: 'Team', params }
to: { name: 'Team', params: { team_slug: team.slug } }
}
}
}
Expand Down
32 changes: 32 additions & 0 deletions test/e2e/frontend/cypress/tests/applications.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,23 @@ describe('FlowForge - Applications', () => {
cy.contains(INSTANCE_NAME)
})
})

it('should have a back button', () => {
cy.request('GET', 'api/v1/teams').then((response) => {
const team = response.body.teams[0]

cy.visit(`/team/${team.slug}/applications/create`)

cy.url().should('contain', '/applications/create')

cy.get('[data-nav="back"]').should('exist')
cy.get('[data-nav="back"]').contains('Back to Dashboard')

cy.get('[data-nav="back"]').click()

cy.url().should('match', /^.*\/team\/.*\/applications/)
})
})
})

it('can be viewed', () => {
Expand Down Expand Up @@ -318,6 +335,21 @@ describe('FlowForge - Applications', () => {
cy.get('[data-action="delete-application"]').should('not.be.disabled')
})
})

it('should display the back button when creating an instance from the application page', () => {
cy.visit('/')
cy.get('[data-action="view-application"]').first().click()

cy.get('[data-action="create-instance"]').should('exist')
cy.get('[data-action="create-instance"]').should('not.be.disabled')
cy.get('[data-action="create-instance"]').click()

cy.get('[data-nav="back"]').should('exist')
cy.get('[data-nav="back"]').contains('Back')
cy.get('[data-nav="back"]').click()

cy.url().should('match', /^.*\/team\/.*\/applications\/.*\/instances/)
})
})

describe('FlowForge stores audit logs for an application', () => {
Expand Down
15 changes: 15 additions & 0 deletions test/e2e/frontend/cypress/tests/team/team.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,4 +203,19 @@ describe('Navigation', () => {
cy.contains('instance-2-1')
cy.contains('instance-2-with-devices')
})

it('should display the back button when creating a team', () => {
cy.login('alice', 'aaPassword')

cy.visit('/team/create')

cy.url().should('contain', '/team/create')

cy.get('[data-nav="back"]').should('exist')
cy.get('[data-nav="back"]').contains('Back to Dashboard')

cy.get('[data-nav="back"]').click()

cy.url().should('match', /^.*\/team\/.*\/applications/)
})
})
Loading