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

web/satellite: remove upload step from create AG flow, close webworker on logout, styling fixes

Browse Source 
WHAT:
remove upload info step from create access grant flow
close webworker on logout to always initiate new one on login
small styling fixes

WHY:
better user experience

Change-Id: I41ae0fe859b29889a9cced30f874d4a341e09ad2
This commit is contained in:
VitaliiShpital 2021-02-15 15:06:47 +02:00 committed by Vitalii Shpital
parent 8685c6c9cd
commit 28433327cc
12 changed files with 55 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/accessGrants/CreateAccessGrant.vue
View File

@ -42,7 +42,7 @@ export default class CreateAccessGrant extends Vue {
* Indicates if progress bar is hidden.
*/
public get isProgressBarHidden(): boolean {
return this.$route.name === RouteConfig.CLIStep.name || this.$route.name === RouteConfig.UploadStep.name;
return this.$route.name === RouteConfig.CLIStep.name;
}
}
</script>

13
web/satellite/src/components/accessGrants/steps/CLIStep.vue
View File

@ -72,18 +72,7 @@ export default class CLIStep extends Vue {
* Redirects to upload step.
*/
public onDoneClick(): void {
if (this.isOnboardingTour) {
this.$router.push(RouteConfig.ProjectDashboard.path);
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.UploadStep)).name,
params: {
isUplinkSectionEnabled: 'true',
},
});
this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
}
/**

20
web/satellite/src/components/accessGrants/steps/ResultStep.vue
View File

@ -55,7 +55,7 @@
<VButton
class="generate-grant__gateway-area__container__warning__button"
label="Generate Gateway Credentials"
width="100%"
width="calc(100% - 4px)"
height="48px"
:is-blue-white="true"
:on-press="onGenerateCredentialsClick"
@ -101,6 +101,7 @@
</div>
<VButton
class="generate-grant__done-button"
:class="{ 'extra-margin-top': !(isOnboardingTour || areGatewayCredentialsVisible) }"
label="Done"
width="100%"
height="48px"
@ -249,18 +250,7 @@ export default class ResultStep extends Vue {
* Proceed to upload data step.
*/
public onDoneClick(): void {
if (this.isOnboardingTour) {
this.$router.push(RouteConfig.ProjectDashboard.path);
return;
}
this.$router.push({
name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.UploadStep)).name,
params: {
isUplinkSectionEnabled: 'false',
},
});
this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
}
/**
@ -530,4 +520,8 @@ export default class ResultStep extends Vue {
.border-radius {
border-radius: 6px;
}
.extra-margin-top {
margin-top: 76px;
}
</style>

229
web/satellite/src/components/accessGrants/steps/UploadStep.vue
View File

@ -1,229 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="upload-data">
<h1 class="upload-data__title">Upload Data</h1>
<p class="upload-data__sub-title">
From here, you’ll set up Tardigrade to store data for your project using our S3 Gateway, Uplink CLI, or
select from our growing library of connectors to build apps on Tardigrade.
</p>
<div class="upload-data__docs-area" :class="{ justify: !isUplinkSectionEnabled }">
<div class="upload-data__docs-area__option" :class="{ margin: !isUplinkSectionEnabled }">
<h2 class="upload-data__docs-area__option__title">
Migrate Data from your Existing AWS buckets
</h2>
<img src="@/../static/images/accessGrants/s3.png" alt="s3 gateway image">
<h3 class="upload-data__docs-area__option__sub-title">
S3 Gateway
</h3>
<p class="upload-data__docs-area__option__info">
Make the switch with Tardigrade’s S3 Gateway.
</p>
<a
class="upload-data__docs-area__option__link"
href="https://documentation.tardigrade.io/api-reference/s3-gateway"
target="_blank"
rel="noopener noreferrer"
>
S3 Gateway Docs
</a>
</div>
<div class="upload-data__docs-area__option uplink-option" v-if="isUplinkSectionEnabled">
<h2 class="upload-data__docs-area__option__title">
Upload Data from Your Local Environment
</h2>
<img src="@/../static/images/accessGrants/uplinkcli.png" alt="uplink cli image">
<h3 class="upload-data__docs-area__option__sub-title">
Uplink CLI
</h3>
<p class="upload-data__docs-area__option__info">
Start uploading data from the command line.
</p>
<a
class="upload-data__docs-area__option__link"
href="https://documentation.tardigrade.io/getting-started/uploading-your-first-object/set-up-uplink-cli"
target="_blank"
rel="noopener noreferrer"
>
Uplink CLI Docs
</a>
</div>
<div class="upload-data__docs-area__option">
<h2 class="upload-data__docs-area__option__title">
Use Tardigrade for your app’s storage layer
</h2>
<img src="@/../static/images/accessGrants/connectors.png" alt="connectors image">
<h3 class="upload-data__docs-area__option__sub-title">
App Connectors
</h3>
<p class="upload-data__docs-area__option__info">
Integrate Tardigrade into your existing stack.
</p>
<a
class="upload-data__docs-area__option__link"
href="https://tardigrade.io/connectors/"
target="_blank"
rel="noopener noreferrer"
>
App Connectors
</a>
</div>
</div>
<VButton
class="upload-data__button"
label="Close"
width="238px"
height="48px"
:on-press="onCloseClick"
/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import { RouteConfig } from '@/router';
@Component({
components: {
VButton,
},
})
export default class UploadStep extends Vue {
public isUplinkSectionEnabled: boolean = true;
/**
* Lifecycle hook after initial render.
* Sets uplink section visibility from props value.
*/
public mounted(): void {
if (!this.$route.params.isUplinkSectionEnabled) {
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
return;
}
this.$route.params.isUplinkSectionEnabled === 'true' ? this.isUplinkSectionEnabled = true : this.isUplinkSectionEnabled = false;
}
/**
* Holds on close button click logic.
* Redirects to access grants page.
*/
public onCloseClick(): void {
this.$router.push(RouteConfig.AccessGrants.path);
}
}
</script>
<style scoped lang="scss">
.upload-data {
padding: 60px;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 8px;
font-family: 'font_regular', sans-serif;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 32px;
line-height: 39px;
color: #1b2533;
margin: 0 0 25px 0;
}
&__sub-title {
font-size: 16px;
line-height: 24px;
color: #000;
margin-bottom: 35px;
text-align: center;
word-break: break-word;
max-width: 680px;
}
&__docs-area {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 50px;
&__option {
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid rgba(144, 155, 168, 0.4);
border-radius: 8px;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 10px;
line-height: 15px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #1b2533;
margin-bottom: 25px;
max-width: 181px;
word-break: break-word;
}
&__sub-title {
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #354049;
margin: 25px 0 5px 0;
}
&__info {
font-size: 14px;
line-height: 17px;
text-align: center;
color: #61666b;
max-width: 181px;
word-break: break-word;
margin-bottom: 15px;
}
&__link {
font-family: 'font_bold', sans-serif;
width: 181px;
height: 40px;
border: 1px solid #0068dc;
border-radius: 6px;
background-color: #fff;
color: #0068dc;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: #0068dc;
color: #fff;
}
}
}
}
}
.uplink-option {
margin: 0 25px;
}
.justify {
justify-content: center;
}
.margin {
margin-right: 25px;
}
</style>

17
web/satellite/src/components/common/VInfoBar.vue
View File

@ -74,6 +74,7 @@ export default class VInfoBar extends Vue {
margin-right: 5px;
font-size: 14px;
line-height: 17px;
white-space: nowrap;
}
&__button {
@ -101,4 +102,20 @@ export default class VInfoBar extends Vue {
background-color: #2582ff;
color: #fff;
}
@media screen and (max-width: 768px) {
.info-bar {
&__info-area {
&__first-value,
&__second-value,
&__first-description,
&__second-description {
white-space: unset;
}
}
}
}
</style>

1
web/satellite/src/components/header/accountDropdown/AccountDropdown.vue
View File

@ -59,6 +59,7 @@ export default class AccountDropdown extends Vue {
await this.$store.dispatch(PROJECTS_ACTIONS.CLEAR);
await this.$store.dispatch(USER_ACTIONS.CLEAR);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER);
await this.$store.dispatch(NOTIFICATION_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
await this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);

7
web/satellite/src/components/projectsList/ProjectsList.vue
View File

@ -49,7 +49,7 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project, ProjectsCursor, ProjectsPage } from '@/types/projects';
import { Project, ProjectsPage } from '@/types/projects';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { LocalData } from '@/utils/localData';
@ -67,7 +67,6 @@ const {
})
export default class Projects extends Vue {
private currentPageNumber: number = 1;
private currentProjectsPage: ProjectsPage = new ProjectsPage();
private FIRST_PAGE = 1;
/**
@ -83,7 +82,7 @@ export default class Projects extends Vue {
/**
* Fetches owned projects page page by clicked page number.
* @param index
* @param page
*/
public async onPageClick(page: number): Promise<void> {
this.currentPageNumber = page;
@ -142,7 +141,6 @@ export default class Projects extends Vue {
<style lang="scss">
.projects-list {
position: relative;
padding: 40px 30px 55px 30px;
font-family: 'font_regular', sans-serif;
@ -162,7 +160,6 @@ export default class Projects extends Vue {
}
.projects-list-items {
position: relative;
&__content {
background-color: #fff;

8
web/satellite/src/components/projectsList/SortProjectsListHeader.vue
View File

@ -16,12 +16,10 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Component, Vue } from 'vue-property-decorator';
@Component({})
export default class SortProjectsListHeader extends Vue {
}
@Component
export default class SortProjectsListHeader extends Vue {}
</script>
<style scoped lang="scss">

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

@ -12,7 +12,6 @@ import EnterPassphraseStep from '@/components/accessGrants/steps/EnterPassphrase
import NameStep from '@/components/accessGrants/steps/NameStep.vue';
import PermissionsStep from '@/components/accessGrants/steps/PermissionsStep.vue';
import ResultStep from '@/components/accessGrants/steps/ResultStep.vue';
import UploadStep from '@/components/accessGrants/steps/UploadStep.vue';
import AccountArea from '@/components/account/AccountArea.vue';
import AccountBilling from '@/components/account/billing/BillingArea.vue';
import DetailedHistory from '@/components/account/billing/depositAndBillingHistory/DetailedHistory.vue';
@ -28,6 +27,7 @@ import EditProjectDetails from '@/components/project/EditProjectDetails.vue';
import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
import ProjectsList from '@/components/projectsList/ProjectsList.vue';
import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
import store from '@/store';
import { NavigationLink } from '@/types/navigation';
@ -71,7 +71,6 @@ export abstract class RouteConfig {
public static EnterPassphraseStep = new NavigationLink('enter-passphrase', 'Access Grant Enter Passphrase');
public static ResultStep = new NavigationLink('result', 'Access Grant Result');
public static CLIStep = new NavigationLink('cli', 'Access Grant In CLI');
public static UploadStep = new NavigationLink('upload', 'Access Grant Upload Data');
// onboarding tour child paths
public static OverviewStep = new NavigationLink('overview', 'Onboarding Overview');
@ -93,8 +92,6 @@ export const notProjectRelatedRoutes = [
RouteConfig.DepositHistory.name,
RouteConfig.CreditsHistory.name,
RouteConfig.Settings.name,
RouteConfig.AccessGrants.name,
RouteConfig.ProjectsList.name,
];
export const router = new Router({
@ -277,11 +274,6 @@ export const router = new Router({
component: CLIStep,
props: true,
},
{
path: RouteConfig.UploadStep.path,
name: RouteConfig.UploadStep.name,
component: UploadStep,
},
],
},
],

16
web/satellite/src/store/modules/accessGrants.ts
View File

@ -20,6 +20,7 @@ export const ACCESS_GRANTS_ACTIONS = {
CLEAR: 'clearAccessGrants',
GET_GATEWAY_CREDENTIALS: 'getGatewayCredentials',
SET_ACCESS_GRANTS_WEB_WORKER: 'setAccessGrantsWebWorker',
STOP_ACCESS_GRANTS_WEB_WORKER: 'stopAccessGrantsWebWorker',
SET_SEARCH_QUERY: 'setAccessGrantsSearchQuery',
SET_SORT_BY: 'setAccessGrantsSortingBy',
SET_SORT_DIRECTION: 'setAccessGrantsSortingDirection',
@ -33,6 +34,7 @@ export const ACCESS_GRANTS_MUTATIONS = {
SET_PAGE: 'setAccessGrants',
SET_GATEWAY_CREDENTIALS: 'setGatewayCredentials',
SET_ACCESS_GRANTS_WEB_WORKER: 'setAccessGrantsWebWorker',
STOP_ACCESS_GRANTS_WEB_WORKER: 'stopAccessGrantsWebWorker',
TOGGLE_SELECTION: 'toggleAccessGrantsSelection',
TOGGLE_BUCKET_SELECTION: 'toggleBucketSelection',
CLEAR_SELECTION: 'clearAccessGrantsSelection',
@ -57,6 +59,7 @@ const {
SET_DURATION_PERMISSION,
SET_GATEWAY_CREDENTIALS,
SET_ACCESS_GRANTS_WEB_WORKER,
STOP_ACCESS_GRANTS_WEB_WORKER,
} = ACCESS_GRANTS_MUTATIONS;
export class AccessGrantsState {
@ -96,6 +99,13 @@ export function makeAccessGrantsModule(api: AccessGrantsApi): StoreModule<Access
console.error(`Failed to configure access grants web worker. ${error.message}`);
};
},
[STOP_ACCESS_GRANTS_WEB_WORKER](state: AccessGrantsState): void {
state.accessGrantsWebWorker?.postMessage({
'type': 'Stop',
});
state.accessGrantsWebWorker = null;
state.isAccessGrantsWebWorkerReady = false;
},
[SET_PAGE](state: AccessGrantsState, page: AccessGrantsPage) {
state.page = page;
state.page.accessGrants = state.page.accessGrants.map(accessGrant => {
@ -172,13 +182,17 @@ export function makeAccessGrantsModule(api: AccessGrantsApi): StoreModule<Access
state.selectedAccessGrantsIds = [];
state.selectedBucketNames = [];
state.permissionNotBefore = new Date();
state.permissionNotAfter = new Date();
state.permissionNotAfter = new Date('2200-01-01');
state.gatewayCredentials = new GatewayCredentials();
},
},
actions: {
setAccessGrantsWebWorker: function({commit}: any): void {
commit(SET_ACCESS_GRANTS_WEB_WORKER);
},
stopAccessGrantsWebWorker: function({commit}: any): void {
commit(STOP_ACCESS_GRANTS_WEB_WORKER);
},
fetchAccessGrants: async function ({commit, rootGetters, state}, pageNumber: number): Promise<AccessGrantsPage> {
const projectId = rootGetters.selectedProject.id;
commit(SET_PAGE_NUMBER, pageNumber);

8
web/satellite/src/views/DashboardArea.vue
View File

@ -73,7 +73,6 @@ const {
GET_CREDIT_CARDS,
GET_PAYMENTS_HISTORY,
GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP,
GET_PROJECT_USAGE_AND_CHARGES_PREVIOUS_ROLLUP,
} = PAYMENTS_ACTIONS;
@Component({
@ -96,11 +95,12 @@ export default class DashboardArea extends Vue {
* Lifecycle hook before initial render.
* Sets access grants web worker.
*/
public beforeMount(): void {
public async beforeMount(): Promise<void> {
try {
this.$store.dispatch(ACCESS_GRANTS_ACTIONS.SET_ACCESS_GRANTS_WEB_WORKER);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.SET_ACCESS_GRANTS_WEB_WORKER);
} catch (error) {
this.$notify.error(`Unable to set access grants wizard. ${error.message}`);
await this.$notify.error(`Unable to set access grants wizard. ${error.message}`);
}
}

3
web/satellite/static/wasm/accessGrant.worker.js
View File

@ -58,6 +58,9 @@ self.onmessage = function (event) {
self.postMessage(result);
break;
case 'Stop':
self.close();
break;
default:
self.postMessage(new Error('provided message event type is not supported'));
}