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

web/satellite: mod project options menu for all projects dashboard

Browse Source 
The project options has been modified to account for whether the all
projects dashboard is enabled or not. The "Manage projects" item is
hidden, and an "All projects" item is added if it is enabled.

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

Change-Id: Ic2e8337d2e5577d1c27231287ab3284145fa5b9b
This commit is contained in:
Wilfred Asomani 2023-05-11 13:26:33 +00:00 committed by Storj Robot
parent b11ba50b94
commit 331a3348a0
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -42,17 +42,21 @@
<p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p> <p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p>
</div> </div>
</div> </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"> <div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onManagePassphraseClick" @keyup.enter="onManagePassphraseClick">
<PassphraseIcon /> <PassphraseIcon />
<p class="project-selection__dropdown__link-container__label">Manage Passphrase</p> <p class="project-selection__dropdown__link-container__label">Manage Passphrase</p>
</div> </div>
<div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick" @keyup.enter="onProjectsLinkClick"> <div v-if="!isAllProjectsDashboard" tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick" @keyup.enter="onProjectsLinkClick">
<ManageIcon /> <ManageIcon />
<p class="project-selection__dropdown__link-container__label">Manage Projects</p> <p class="project-selection__dropdown__link-container__label">Manage Projects</p>
</div> </div>
<div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onCreateLinkClick" @keyup.enter="onCreateLinkClick"> <div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onCreateLinkClick" @keyup.enter="onCreateLinkClick">
<CreateProjectIcon /> <CreateProjectIcon />
<p class="project-selection__dropdown__link-container__label">Create new</p> <p class="project-selection__dropdown__link-container__label">Create new project</p>
</div> </div>
</div> </div>
</div> </div>
@ -76,6 +80,7 @@ import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore'; import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore';
import VLoader from '@/components/common/VLoader.vue'; import VLoader from '@/components/common/VLoader.vue';
@ -93,6 +98,7 @@ const pmStore = useProjectMembersStore();
const billingStore = useBillingStore(); const billingStore = useBillingStore();
const userStore = useUsersStore(); const userStore = useUsersStore();
const projectsStore = useProjectsStore(); const projectsStore = useProjectsStore();
const configStore = useConfigStore();
const notify = useNotify(); const notify = useNotify();
const nativeRouter = useRouter(); const nativeRouter = useRouter();
const router = reactive(nativeRouter); const router = reactive(nativeRouter);
@ -119,6 +125,13 @@ const isOnboardingTour = computed((): boolean => {
return router.currentRoute.path.includes(RouteConfig.OnboardingTour.path); return router.currentRoute.path.includes(RouteConfig.OnboardingTour.path);
}); });
/**
* Indicates if all projects dashboard is enabled.
*/
const isAllProjectsDashboard = computed((): boolean => {
return configStore.state.config.allProjectsDashboard;
});
/** /**
* Indicates if dropdown is shown. * Indicates if dropdown is shown.
*/ */
@ -266,6 +279,15 @@ function onProjectsLinkClick(): void {
closeDropdown(); closeDropdown();
} }
/**
* Route to all projects page.
*/
function onAllProjectsClick(): void {
analytics.pageVisit(RouteConfig.AllProjectsDashboard.path);
router.push(RouteConfig.AllProjectsDashboard.path);
closeDropdown();
}
/** /**
* Toggles manage passphrase modal shown. * Toggles manage passphrase modal shown.
*/ */