web/satellite: add project details link to dashboard nav area

This change adds a link to the project dashboard nav area to navigate
to the selected project's detail page.

Issue: https://github.com/storj/storj/issues/5930

Change-Id: Ief26505feeb62e88b8e6096d4be70004dc068b64
This commit is contained in:
Wilfred Asomani 2023-06-07 10:05:59 +00:00 committed by Storj Robot
parent f7c7851519
commit 3980fcc39b
2 changed files with 41 additions and 1 deletions

View File

@ -47,11 +47,19 @@
<p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p>
</div>
</div>
<div v-if="isAllProjectsDashboard" tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onProjectDetailsClick" @keyup.enter="onProjectDetailsClick">
<InfoIcon />
<p class="project-selection__dropdown__link-container__label">Project Details</p>
</div>
<div v-if="isAllProjectsDashboard" tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onAllProjectsClick" @keyup.enter="onAllProjectsClick">
<ProjectIcon />
<p class="project-selection__dropdown__link-container__label">All projects</p>
</div>
<div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onManagePassphraseClick" @keyup.enter="onManagePassphraseClick">
<PassphraseIcon />
<p class="project-selection__dropdown__link-container__label">Manage Passphrase</p>
</div>
<div class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick">
<div v-if="!isAllProjectsDashboard" class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick">
<ManageIcon />
<p class="project-selection__dropdown__link-container__label">Manage Projects</p>
</div>
@ -357,6 +365,24 @@ function trackClickEvent(path: string): void {
analytics.pageVisit(path);
}
/**
* Route to all projects page.
*/
function onAllProjectsClick(): void {
analytics.pageVisit(RouteConfig.AllProjectsDashboard.path);
router.push(RouteConfig.AllProjectsDashboard.path);
toggleProjectDropdown();
}
/**
* Route to project details page.
*/
function onProjectDetailsClick(): void {
analytics.pageVisit(RouteConfig.EditProjectDetails.path);
router.push(RouteConfig.EditProjectDetails.path);
toggleProjectDropdown();
}
/**
* Toggles manage passphrase modal shown.
*/

View File

@ -42,6 +42,10 @@
<p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p>
</div>
</div>
<div v-if="isAllProjectsDashboard" tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onProjectDetailsClick" @keyup.enter="onProjectDetailsClick">
<InfoIcon />
<p class="project-selection__dropdown__link-container__label">Project Details</p>
</div>
<div v-if="isAllProjectsDashboard" tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onAllProjectsClick" @keyup.enter="onAllProjectsClick">
<ProjectIcon />
<p class="project-selection__dropdown__link-container__label">All projects</p>
@ -91,6 +95,7 @@ import CheckmarkIcon from '@/../static/images/navigation/checkmark.svg';
import PassphraseIcon from '@/../static/images/navigation/passphrase.svg';
import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
@ -289,6 +294,15 @@ function onAllProjectsClick(): void {
closeDropdown();
}
/**
* Route to project details page.
*/
function onProjectDetailsClick(): void {
analytics.pageVisit(RouteConfig.EditProjectDetails.path);
router.push(RouteConfig.EditProjectDetails.path);
closeDropdown();
}
/**
* Toggles manage passphrase modal shown.
*/