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

web/satellite: replacing api keys with access grants

Browse Source 
WHAT:
api keys appearence is replaced with access grants

WHY:
last step of access grants implementing

Change-Id: Ibef391849c7185fa56627b482218c76fb2d31b46
This commit is contained in:
VitaliiShpital 2020-12-07 01:32:35 +02:00
parent 70795c68ff
commit c8e8fea052
18 changed files with 43 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
View File

@ -28,7 +28,8 @@ import { Component, Vue } from 'vue-property-decorator';
import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
import {RouteConfig} from "@/router";
import { RouteConfig } from '@/router';
@Component({
components: {
@ -101,6 +102,7 @@ export default class BucketsSelection extends Vue {
justify-content: space-between;
padding: 15px 20px;
width: calc(100% - 40px);
border-radius: 6px;
&__name {
font-style: normal;

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

@ -20,7 +20,7 @@ import { Component, Vue } from 'vue-property-decorator';
import { AuthHttpApi } from '@/api/auth';
import { RouteConfig } from '@/router';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
@ -58,7 +58,7 @@ export default class AccountDropdown extends Vue {
await this.$store.dispatch(PM_ACTIONS.CLEAR);
await this.$store.dispatch(PROJECTS_ACTIONS.CLEAR);
await this.$store.dispatch(USER_ACTIONS.CLEAR);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
await this.$store.dispatch(NOTIFICATION_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
await this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);

4
web/satellite/src/components/header/projectsDropdown/ProjectDropdown.vue
View File

@ -39,7 +39,7 @@ import { Component, Vue } from 'vue-property-decorator';
import SelectionIcon from '@/../static/images/header/selection.svg';
import { RouteConfig } from '@/router';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
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';
@ -68,7 +68,7 @@ export default class ProjectDropdown extends Vue {
try {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(API_KEYS_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, this.FIRST_PAGE);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
} catch (error) {

6
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -24,7 +24,7 @@ import { Component, Vue } from 'vue-property-decorator';
import EditProjectDropdown from '@/components/navigation/EditProjectDropdown.vue';
import ApiKeysIcon from '@/../static/images/navigation/apiKeys.svg';
import AccessGrantsIcon from '@/../static/images/navigation/apiKeys.svg';
import DashboardIcon from '@/../static/images/navigation/dashboard.svg';
import TeamIcon from '@/../static/images/navigation/team.svg';
@ -34,7 +34,7 @@ import { NavigationLink } from '@/types/navigation';
@Component({
components: {
DashboardIcon,
ApiKeysIcon,
AccessGrantsIcon,
TeamIcon,
EditProjectDropdown,
},
@ -45,7 +45,7 @@ export default class NavigationArea extends Vue {
*/
public readonly navigation: NavigationLink[] = [
RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
RouteConfig.ApiKeys.withIcon(ApiKeysIcon),
RouteConfig.AccessGrants.withIcon(AccessGrantsIcon),
RouteConfig.Users.withIcon(TeamIcon),
];

2
web/satellite/src/components/onboardingTour/steps/AddPaymentStep.vue
View File

@ -154,7 +154,7 @@ export default class AddPaymentStep extends Vue {
* Sets tour area to creating access grant state.
*/
public setCreateGrantStep(): void {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.AccessGrantName).path);
}
/**

6
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -9,7 +9,7 @@ import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import { RouteConfig } from '@/router';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
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';
@ -81,12 +81,12 @@ export default class OverviewStep extends Vue {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, createdProjectId);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
this.isLoading = false;
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).with(RouteConfig.AccessGrantName).path);
} catch (error) {
await this.$notify.error(error.message);
this.isLoading = false;

4
web/satellite/src/components/onboardingTour/steps/paymentStates/AddCardState.vue
View File

@ -35,7 +35,7 @@ import VButton from '@/components/common/VButton.vue';
import LockImage from '@/../static/images/account/billing/lock.svg';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
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';
@ -108,7 +108,7 @@ export default class AddCardState extends Vue {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, createdProjectId);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
this.setDefaultState();

4
web/satellite/src/components/onboardingTour/steps/paymentStates/AddStorjState.vue
View File

@ -53,7 +53,7 @@ import PayingStep from '@/components/onboardingTour/steps/paymentStates/tokenSub
import VerifiedStep from '@/components/onboardingTour/steps/paymentStates/tokenSubSteps/VerifiedStep.vue';
import VerifyingStep from '@/components/onboardingTour/steps/paymentStates/tokenSubSteps/VerifyingStep.vue';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
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';
@ -128,7 +128,7 @@ export default class AddStorjState extends Vue {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, createdProjectId);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
this.toggleIsLoading();

4
web/satellite/src/components/project/CreateProject.vue
View File

@ -65,7 +65,7 @@ import HeaderedInput from '@/components/common/HeaderedInput.vue';
import VButton from '@/components/common/VButton.vue';
import { RouteConfig } from '@/router';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
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';
@ -200,7 +200,7 @@ export default class NewProjectPopup extends Vue {
* Clears api keys store.
*/
private clearApiKeys(): void {
this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
}
/**

6
web/satellite/src/components/project/DeleteProjectPopup.vue
View File

@ -58,7 +58,7 @@ import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import DeleteProjectIcon from '@/../static/images/project/deleteProject.svg';
import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import {
@ -146,7 +146,7 @@ export default class DeleteProjectPopup extends Vue {
private async selectProject(): Promise<void> {
if (this.$store.state.projectsModule.projects.length === 0) {
await this.$store.dispatch(PM_ACTIONS.CLEAR);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
return;
@ -155,7 +155,7 @@ export default class DeleteProjectPopup extends Vue {
// TODO: reuse select project functionality
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, this.$store.state.projectsModule.projects[0].id);
await this.$store.dispatch(PM_ACTIONS.FETCH, 1);
await this.$store.dispatch(API_KEYS_ACTIONS.FETCH, 1);
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, 1);
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, 1);
}
}

10
web/satellite/src/components/project/summary/ProjectSummary.vue
View File

@ -18,8 +18,8 @@
background-color="#f5f6fa"
title-color="#1b2533"
value-color="#000"
title="API Keys"
:value="apiKeysAmount"
title="Access Grants"
:value="accessGrantsAmount"
/>
<SummaryItem
class="right-indent"
@ -80,10 +80,10 @@ export default class ProjectSummary extends Vue {
}
/**
* apiKeysAmount returns API keys amount for selected project.
* accessGrantsAmount returns access grants' amount for selected project.
*/
public get apiKeysAmount(): number {
return this.$store.state.apiKeysModule.page.totalCount;
public get accessGrantsAmount(): number {
return this.$store.state.accessGrantsModule.page.totalCount;
}
/**

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

@ -18,7 +18,6 @@ import AccountBilling from '@/components/account/billing/BillingArea.vue';
import DetailedHistory from '@/components/account/billing/depositAndBillingHistory/DetailedHistory.vue';
import CreditsHistory from '@/components/account/billing/freeCredits/CreditsHistory.vue';
import SettingsArea from '@/components/account/SettingsArea.vue';
import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
import Page404 from '@/components/errors/Page404.vue';
import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
import AddPaymentStep from '@/components/onboardingTour/steps/AddPaymentStep.vue';
@ -50,7 +49,6 @@ export abstract class RouteConfig {
public static Account = new NavigationLink('/account', 'Account');
public static ProjectDashboard = new NavigationLink('/project-dashboard', 'Dashboard');
public static Users = new NavigationLink('/project-members', 'Users');
public static ApiKeys = new NavigationLink('/api-keys', 'API Keys');
public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour');
public static CreateProject = new NavigationLink('/create-project', 'Create Project');
public static EditProjectDetails = new NavigationLink('/edit-project-details', 'Edit Project Details');
@ -179,11 +177,6 @@ export const router = new Router({
name: RouteConfig.Users.name,
component: ProjectMembersArea,
},
{
path: RouteConfig.ApiKeys.path,
name: RouteConfig.ApiKeys.name,
component: ApiKeysArea,
},
{
path: RouteConfig.OnboardingTour.path,
name: RouteConfig.OnboardingTour.name,

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

@ -52,12 +52,10 @@ import NoPaywallInfoBar from '@/components/noPaywallInfoBar/NoPaywallInfoBar.vue
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { USER_ACTIONS } from '@/store/modules/users';
import { ApiKeysPage } from '@/types/apiKeys';
import { Project } from '@/types/projects';
import { User } from '@/types/users';
import { Size } from '@/utils/bytesSize';
@ -176,30 +174,10 @@ export default class DashboardArea extends Vue {
this.selectProject(projects);
let apiKeysPage: ApiKeysPage = new ApiKeysPage();
try {
apiKeysPage = await this.$store.dispatch(API_KEYS_ACTIONS.FETCH, this.FIRST_PAGE);
} catch (error) {
await this.$notify.error(`Unable to fetch api keys. ${error.message}`);
}
if (projects.length === 1 && projects[0].ownerId === user.id && apiKeysPage.apiKeys.length === 0) {
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
try {
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
} catch (error) {
return;
}
return;
}
try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE);
} catch (error) {
await this.$notify.error(`Unable to fetch api keys. ${error.message}`);
await this.$notify.error(`Unable to fetch access grants. ${error.message}`);
}
try {

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

@ -28,7 +28,7 @@ const store = new Vuex.Store({ modules: { projectsModule } });
const expectedLinks: NavigationLink[] = [
RouteConfig.ProjectDashboard,
RouteConfig.ApiKeys,
RouteConfig.AccessGrants,
RouteConfig.Users,
];

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

@ -11,10 +11,10 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
<h1 class="navigation-area__item-container__link__title">Dashboard</h1>
</div>
</router-link-stub>
<router-link-stub to="/api-keys" tag="a" ariacurrentvalue="page" event="click" aria-label="API Keys" class="navigation-area__item-container">
<router-link-stub to="/access-grants" tag="a" ariacurrentvalue="page" event="click" aria-label="Access Grants" class="navigation-area__item-container">
<div class="navigation-area__item-container__link">
<anonymous-stub></anonymous-stub>
<h1 class="navigation-area__item-container__link__title">API Keys</h1>
<h1 class="navigation-area__item-container__link__title">Access Grants</h1>
</div>
</router-link-stub>
<router-link-stub to="/project-members" tag="a" ariacurrentvalue="page" event="click" aria-label="Users" class="navigation-area__item-container">

10
web/satellite/tests/unit/project/summary/ProjectSummary.spec.ts
View File

@ -5,7 +5,7 @@ import Vuex from 'vuex';
import ProjectSummary from '@/components/project/summary/ProjectSummary.vue';
import { makeApiKeysModule } from '@/store/modules/apiKeys';
import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectMembersModule } from '@/store/modules/projectMembers';
@ -13,7 +13,7 @@ import { makeProjectsModule } from '@/store/modules/projects';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import { createLocalVue, mount } from '@vue/test-utils';
import { ApiKeysMock } from '../../mock/api/apiKeys';
import { AccessGrantsMock } from '../../mock/api/accessGrants';
import { BucketsMock } from '../../mock/api/buckets';
import { PaymentsMock } from '../../mock/api/payments';
import { ProjectMembersApiMock } from '../../mock/api/projectMembers';
@ -35,12 +35,12 @@ const paymentsApi = new PaymentsMock();
const paymentsModule = makePaymentsModule(paymentsApi);
const bucketsApi = new BucketsMock();
const bucketUsageModule = makeBucketsModule(bucketsApi);
const apiKeysApi = new ApiKeysMock();
const apiKeysModule = makeApiKeysModule(apiKeysApi);
const accessGrantsApi = new AccessGrantsMock();
const accessGrantsModule = makeAccessGrantsModule(accessGrantsApi);
const projectMembersApi = new ProjectMembersApiMock();
const projectMembersModule = makeProjectMembersModule(projectMembersApi);
const store = new Vuex.Store({ modules: { projectsModule, paymentsModule, bucketUsageModule, projectMembersModule, apiKeysModule }});
const store = new Vuex.Store({ modules: { projectsModule, paymentsModule, bucketUsageModule, projectMembersModule, accessGrantsModule }});
describe('ProjectSummary.vue', (): void => {
it('renders correctly', (): void => {

2
web/satellite/tests/unit/project/summary/__snapshots__/ProjectSummary.spec.ts.snap
View File

@ -9,7 +9,7 @@ exports[`ProjectSummary.vue renders correctly 1`] = `
<p class="summary-item__value" style="color: rgb(0, 0, 0);">0</p>
</div>
<div class="summary-item right-indent" style="background-color: rgb(245, 246, 250);">
<h1 class="summary-item__title" style="color: rgb(27, 37, 51);">API Keys</h1>
<h1 class="summary-item__title" style="color: rgb(27, 37, 51);">Access Grants</h1>
<p class="summary-item__value" style="color: rgb(0, 0, 0);">0</p>
</div>
<div class="summary-item right-indent" style="background-color: rgb(177, 193, 217);">

10
web/satellite/tests/unit/views/DashboardArea.spec.ts
View File

@ -4,7 +4,7 @@
import Vuex from 'vuex';
import { RouteConfig, router } from '@/router';
import { makeApiKeysModule } from '@/store/modules/apiKeys';
import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { appStateModule } from '@/store/modules/appState';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule } from '@/store/modules/notifications';
@ -12,7 +12,6 @@ import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectMembersModule } from '@/store/modules/projectMembers';
import { makeProjectsModule } from '@/store/modules/projects';
import { makeUsersModule } from '@/store/modules/users';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { User } from '@/types/users';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AppState } from '@/utils/constants/appStateEnum';
@ -21,6 +20,7 @@ import { SegmentioPlugin } from '@/utils/plugins/segment';
import DashboardArea from '@/views/DashboardArea.vue';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { AccessGrantsMock } from '../mock/api/accessGrants';
import { ApiKeysMock } from '../mock/api/apiKeys';
import { BucketsMock } from '../mock/api/buckets';
import { PaymentsMock } from '../mock/api/payments';
@ -43,7 +43,7 @@ projectsApi.setMockProjects([]);
const usersModule = makeUsersModule(usersApi);
const projectsModule = makeProjectsModule(projectsApi);
const apiKeysModule = makeApiKeysModule(new ApiKeysMock());
const accessGrantsModule = makeAccessGrantsModule(new AccessGrantsMock());
const teamMembersModule = makeProjectMembersModule(new ProjectMembersApiMock());
const bucketsModule = makeBucketsModule(new BucketsMock());
const notificationsModule = makeNotificationsModule();
@ -53,7 +53,7 @@ const store = new Vuex.Store({
modules: {
notificationsModule,
bucketsModule,
apiKeysModule,
accessGrantsModule,
usersModule,
projectsModule,
appStateModule,
@ -114,7 +114,7 @@ describe('Dashboard', () => {
it('loads routes correctly when authorithed without project with unavailable routes', async () => {
const unavailableWithoutProject = [
RouteConfig.ApiKeys.path,
RouteConfig.AccessGrants.path,
RouteConfig.Users.path,
RouteConfig.ProjectDashboard.path,
];