JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: new project dashboard routing updates

Browse Source 
Updated routes to handle new project dashboard.

Change-Id: I2e96d4eb3e9acb6bd998e6b9cfb8e7726de7ccdf
This commit is contained in:
Vitalii Shpital 2021-11-03 16:03:30 +02:00
parent bde8fb0a59
commit 16c8a08014
5 changed files with 28 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/satellite/src/components/project/NewProjectDashboard.vue Normal file
View File

@ -0,0 +1,14 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="project-dashboard" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class NewProjectDashboard extends Vue {}
</script>

13
web/satellite/src/router/index.ts
View File

@ -32,6 +32,7 @@ import OldOverviewStep from '@/components/onboardingTour/steps/oldFlow/OldOvervi
import CreateProject from '@/components/project/CreateProject.vue'; import CreateProject from '@/components/project/CreateProject.vue';
import EditProjectDetails from '@/components/project/EditProjectDetails.vue'; import EditProjectDetails from '@/components/project/EditProjectDetails.vue';
import ProjectDashboard from '@/components/project/ProjectDashboard.vue'; import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
import NewProjectDashboard from "@/components/project/NewProjectDashboard.vue";
import ProjectsList from '@/components/projectsList/ProjectsList.vue'; import ProjectsList from '@/components/projectsList/ProjectsList.vue';
import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue'; import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
import CLIInstall from "@/components/onboardingTour/steps/cliFlow/CLIInstall.vue"; import CLIInstall from "@/components/onboardingTour/steps/cliFlow/CLIInstall.vue";
@ -50,6 +51,7 @@ import AGPermissions from "@/components/onboardingTour/steps/cliFlow/AGPermissio
import store from '@/store'; import store from '@/store';
import { OBJECTS_ACTIONS } from '@/store/modules/objects'; import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { NavigationLink } from '@/types/navigation'; import { NavigationLink } from '@/types/navigation';
import { MetaUtils } from "@/utils/meta";
const DashboardArea = () => import('@/views/DashboardArea.vue'); const DashboardArea = () => import('@/views/DashboardArea.vue');
const ForgotPassword = () => import('@/views/ForgotPassword.vue'); const ForgotPassword = () => import('@/views/ForgotPassword.vue');
@ -72,6 +74,7 @@ export abstract class RouteConfig {
public static ResetPassword = new NavigationLink('/password-recovery', 'Reset Password'); public static ResetPassword = new NavigationLink('/password-recovery', 'Reset Password');
public static Account = new NavigationLink('/account', 'Account'); public static Account = new NavigationLink('/account', 'Account');
public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard'); public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard');
public static NewProjectDashboard = new NavigationLink('/new-project-dashboard', 'Dashboard ');
public static Users = new NavigationLink('/project-members', 'Users'); public static Users = new NavigationLink('/project-members', 'Users');
public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour'); public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour');
public static CreateProject = new NavigationLink('/create-project', 'Create Project'); public static CreateProject = new NavigationLink('/create-project', 'Create Project');
@ -130,6 +133,11 @@ export abstract class RouteConfig {
public static UploadFileChildren = new NavigationLink('*', 'Objects Upload Children'); public static UploadFileChildren = new NavigationLink('*', 'Objects Upload Children');
} }
const isNewProjectDashboard = MetaUtils.getMetaContent('new-project-dashboard') === 'true';
if (isNewProjectDashboard) {
RouteConfig.ProjectDashboard = RouteConfig.NewProjectDashboard
}
export const notProjectRelatedRoutes = [ export const notProjectRelatedRoutes = [
RouteConfig.Login.name, RouteConfig.Login.name,
RouteConfig.Register.name, RouteConfig.Register.name,
@ -222,6 +230,11 @@ export const router = new Router({
}, },
], ],
}, },
{
path: RouteConfig.NewProjectDashboard.path,
name: RouteConfig.NewProjectDashboard.name,
component: NewProjectDashboard,
},
{ {
path: RouteConfig.ProjectDashboard.path, path: RouteConfig.ProjectDashboard.path,
name: RouteConfig.ProjectDashboard.name, name: RouteConfig.ProjectDashboard.name,

1
web/satellite/src/views/LoginArea.vue
View File

@ -287,6 +287,7 @@ export default class Login extends Vue {
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING); await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
this.isLoading = false; this.isLoading = false;
await this.$router.push(RouteConfig.ProjectDashboard.path); await this.$router.push(RouteConfig.ProjectDashboard.path);
} }

106
web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
View File

@ -1,106 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import Router from 'vue-router';
import Vuex from 'vuex';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
import { RouteConfig } from '@/router';
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '../mock/api/projects';
const api = new ProjectsApiMock();
api.setMockProjects([new Project('1')]);
const projectsModule = makeProjectsModule(api);
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Router);
const store = new Vuex.Store({ modules: { projectsModule } });
const expectedLinks: NavigationLink[] = [
RouteConfig.ProjectDashboard,
RouteConfig.Buckets,
RouteConfig.AccessGrants,
RouteConfig.Users,
];
describe('NavigationArea', () => {
it('snapshot not changed during onboarding tour', (): void => {
const router = new Router({
mode: 'history',
routes: [{
path: '/onboarding-tour',
name: RouteConfig.OnboardingTour.name,
component: OnboardingTourArea,
}],
});
router.push('/onboarding-tour');
const wrapper = shallowMount(NavigationArea, {
store,
localVue,
router,
});
const navigationElements = wrapper.findAll('.navigation-area__item-container');
expect(navigationElements.length).toBe(0);
expect(wrapper).toMatchSnapshot();
});
const router = new Router({
mode: 'history',
routes: [{
path: '/',
name: RouteConfig.ProjectDashboard.name,
component: ProjectDashboard,
}],
});
// TODO: enable when objects page will be finished
it.skip('snapshot not changed with project', async () => {
const projects = await store.dispatch('fetchProjects');
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, projects[0].id);
router.push('/');
const wrapper = shallowMount(NavigationArea, {
store,
localVue,
router,
});
const navigationElements = wrapper.findAll('.navigation-area__item-container');
expect(navigationElements.length).toBe(4);
expect(wrapper).toMatchSnapshot();
});
// TODO: enable when objects page will be finished
it.skip('navigation links are correct', () => {
const wrapper = shallowMount(NavigationArea, {
store,
localVue,
router,
});
const navigationLinks = wrapper.vm.navigation;
expect(navigationLinks.length).toBe(expectedLinks.length);
expectedLinks.forEach((_link: NavigationLink, i: number) => {
expect(navigationLinks[i].name).toBe(expectedLinks[i].name);
expect(navigationLinks[i].path).toBe(expectedLinks[i].path);
});
});
});

33
web/satellite/tests/unit/navigationArea/__snapshots__/NavigationArea.spec.ts.snap
View File

@ -1,33 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NavigationArea snapshot not changed during onboarding tour 1`] = ``;
exports[`NavigationArea snapshot not changed with project 1`] = `
<div class="navigation-area">
<editprojectdropdown-stub></editprojectdropdown-stub>
<router-link-stub to="/project-dashboard" tag="a" ariacurrentvalue="page" event="click" aria-label="Dashboard" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
<p class="navigation-area__item-container__link__title">Dashboard</p>
</div>
</router-link-stub>
<router-link-stub to="/objects" tag="a" ariacurrentvalue="page" event="click" aria-label="Objects" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
<p class="navigation-area__item-container__link__title">Objects</p>
</div>
</router-link-stub>
<router-link-stub to="/access-grants" tag="a" ariacurrentvalue="page" event="click" aria-label="Access" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
<p class="navigation-area__item-container__link__title">Access</p>
</div>
</router-link-stub>
<router-link-stub to="/project-members" tag="a" ariacurrentvalue="page" event="click" aria-label="Users" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
<p class="navigation-area__item-container__link__title">Users</p>
</div>
</router-link-stub>
</div>
`;