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

web/satellite: use access grants pinia module instead of old vuex module

Browse Source 
Start using new pinia module instead of old vuex module

Change-Id: I72e98fcf6910b1a601d005ecc24cec37a8016478
This commit is contained in:
Vitalii 2023-04-12 18:38:39 +03:00 committed by Storj Robot
parent eecb055dfd
commit 7dc2a5e20b
31 changed files with 202 additions and 512 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/satellite/src/components/accessGrants/AccessGrants.vue
View File

@ -165,12 +165,12 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import AccessGrantsHeader from './AccessGrantsHeader.vue';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AccessType } from '@/types/createAccessGrant';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import AccessGrantsItem from '@/components/accessGrants/AccessGrantsItem.vue';
import ConfirmDeletePopup from '@/components/accessGrants/ConfirmDeletePopup.vue';
@ -183,16 +183,11 @@ import AccessGrantsIcon from '@/../static/images/accessGrants/accessGrantsIcon.s
import CLIIcon from '@/../static/images/accessGrants/cli.svg';
import S3Icon from '@/../static/images/accessGrants/s3.svg';
const {
FETCH,
TOGGLE_SELECTION,
CLEAR_SELECTION,
SET_SEARCH_QUERY,
} = ACCESS_GRANTS_ACTIONS;
const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const agStore = useAccessGrantsStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -205,35 +200,35 @@ const areGrantsFetching = ref<boolean>(true);
* Returns access grants pages count from store.
*/
const totalPageCount = computed((): number => {
return store.state.accessGrantsModule.page.pageCount;
return agStore.state.page.pageCount;
});
/**
* Returns access grants total page count from store.
*/
const accessGrantsTotalCount = computed((): number => {
return store.state.accessGrantsModule.page.totalCount;
return agStore.state.page.totalCount;
});
/**
* Returns access grants limit from store.
*/
const accessGrantLimit = computed((): number => {
return store.state.accessGrantsModule.page.limit;
return agStore.state.page.limit;
});
/**
* Returns access grants from store.
*/
const accessGrantsList = computed((): AccessGrant[] => {
return store.state.accessGrantsModule.page.accessGrants;
return agStore.state.page.accessGrants;
});
/**
* Returns search query from store.
*/
const searchQuery = computed((): string => {
return store.state.accessGrantsModule.cursor.search;
return agStore.state.cursor.search;
});
/**
@ -252,7 +247,7 @@ const emptyStateLabel = computed((): string => {
*/
async function onPageClick(index: number): Promise<void> {
try {
await store.dispatch(FETCH, index);
agStore.getAccessGrants(index, store.getters.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch Access Grants. ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);
}
@ -274,27 +269,27 @@ function openDropdown(key: number): void {
/**
* Holds on button click login for deleting access grant process.
*/
async function onDeleteClick(grant: AccessGrant): Promise<void> {
await store.dispatch(TOGGLE_SELECTION, grant);
function onDeleteClick(grant: AccessGrant): void {
agStore.toggleSelection(grant);
isDeleteClicked.value = true;
}
/**
* Clears access grants selection.
*/
async function onClearSelection(): Promise<void> {
function onClearSelection(): void {
isDeleteClicked.value = false;
await store.dispatch(CLEAR_SELECTION);
agStore.clearSelection();
}
/**
* Fetches Access records by name depending on search query.
*/
async function fetch(searchQuery: string): Promise<void> {
await store.dispatch(SET_SEARCH_QUERY, searchQuery);
agStore.setSearchQuery(searchQuery);
try {
await store.dispatch(FETCH, 1);
await agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch accesses: ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);
}
@ -345,7 +340,7 @@ function trackPageVisit(link: string): void {
onMounted(async () => {
try {
await store.dispatch(FETCH, FIRST_PAGE);
await agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id);
areGrantsFetching.value = false;
} catch (error) {
await notify.error(`Unable to fetch Access Grants. ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);

25
web/satellite/src/components/accessGrants/AccessGrantsHeader.vue
View File

@ -48,20 +48,14 @@ import { computed, ref } from 'vue';
import { useNotify, useStore } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { SortDirection } from '@/types/common';
import { AccessGrantsOrderBy } from '@/types/accessGrants';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import AscIcon from '@/../static/images/objects/asc.svg';
import DescIcon from '@/../static/images/objects/desc.svg';
const {
FETCH,
SET_SORT_BY,
SET_SORT_DIRECTION,
TOGGLE_SORT_DIRECTION,
} = ACCESS_GRANTS_ACTIONS;
const agStore = useAccessGrantsStore();
const store = useStore();
const notify = useNotify();
const hover = ref<AccessGrantsOrderBy>();
@ -84,14 +78,14 @@ const dateSortData = computed((): { isHidden: boolean, isDesc: boolean } => {
* Check if a heading is sorted in descending order.
*/
function isDesc(sortOrder: AccessGrantsOrderBy): boolean {
return store.state.accessGrantsModule.cursor.order === sortOrder && store.state.accessGrantsModule.cursor.orderDirection === SortDirection.DESCENDING;
return agStore.state.cursor.order === sortOrder && agStore.state.cursor.orderDirection === SortDirection.DESCENDING;
}
/**
* Check if sorting arrow should be displayed.
*/
function showArrow(heading: AccessGrantsOrderBy): boolean {
return store.state.accessGrantsModule.cursor.order === heading || hover.value === heading;
return agStore.state.cursor.order === heading || hover.value === heading;
}
/**
@ -106,16 +100,15 @@ function mouseOver(heading: AccessGrantsOrderBy): void {
* @param sortBy
*/
async function sortBy(sortBy: AccessGrantsOrderBy): Promise<void> {
if (sortBy === store.state.accessGrantsModule.cursor.order) {
await store.dispatch(TOGGLE_SORT_DIRECTION);
if (sortBy === agStore.state.cursor.order) {
agStore.toggleSortingDirection();
} else {
await store.dispatch(SET_SORT_BY, sortBy);
await store.dispatch(SET_SORT_DIRECTION, SortDirection.ASCENDING);
agStore.setSortingBy(sortBy);
agStore.setSortingDirection(SortDirection.ASCENDING);
}
try {
await store.dispatch(FETCH, store.state.accessGrantsModule.page.currentPage);
await agStore.getAccessGrants(agStore.state.page.currentPage, store.getters.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch accesses. ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);
}

11
web/satellite/src/components/accessGrants/ConfirmDeletePopup.vue
View File

@ -58,10 +58,10 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useStore } from '@/utils/hooks';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
@ -70,6 +70,7 @@ import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
const FIRST_PAGE = 1;
const agStore = useAccessGrantsStore();
const store = useStore();
const notify = useNotify();
@ -81,7 +82,7 @@ const emit = defineEmits(['resetPagination', 'close']);
* Returns list of selected access grants from store.
*/
const selectedAccessGrants = computed((): AccessGrant[] => {
return store.getters.selectedAccessGrants;
return agStore.selectedAccessGrants;
});
/**
@ -100,15 +101,15 @@ async function onDeleteClick(): Promise<void> {
isLoading.value = true;
try {
await store.dispatch(ACCESS_GRANTS_ACTIONS.DELETE);
await agStore.deleteAccessGrants();
await notify.success(`Access Grant deleted successfully`);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.CONFIRM_DELETE_AG_MODAL);
}
try {
await store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE);
await store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR_SELECTION);
await agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id);
agStore.clearSelection();
} catch (error) {
await notify.error(`Unable to fetch Access Grants. ${error.message}`, AnalyticsErrorEventSource.CONFIRM_DELETE_AG_MODAL);
}

15
web/satellite/src/components/accessGrants/createFlow/CreateAccessGrantFlow.vue
View File

@ -124,10 +124,10 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { LocalData } from '@/utils/localData';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import VModal from '@/components/common/VModal.vue';
import CreateNewAccessStep from '@/components/accessGrants/createFlow/steps/CreateNewAccessStep.vue';
@ -145,6 +145,7 @@ const router = useRouter();
const route = useRoute();
const notify = useNotify();
const store = useStore();
const agStore = useAccessGrantsStore();
const initPermissions = [
Permission.Read,
@ -439,7 +440,7 @@ function closeModal(): void {
* Also sets worker's onmessage and onerror logic.
*/
function setWorker(): void {
worker.value = store.state.accessGrantsModule.accessGrantsWebWorker;
worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => {
notify.error(error.message, AnalyticsErrorEventSource.CREATE_AG_MODAL);
@ -455,11 +456,13 @@ async function createCLIAccess(): Promise<void> {
throw new Error('Web worker is not initialized.');
}
const projectID = store.getters.selectedProject.id;
// creates fresh new API key.
const cleanAPIKey: AccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, accessName.value);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(accessName.value, projectID);
try {
await store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE);
await agStore.getAccessGrants(FIRST_PAGE, projectID);
} catch (error) {
await notify.error(`Unable to fetch Access Grants. ${error.message}`, AnalyticsErrorEventSource.CREATE_AG_MODAL);
}
@ -553,9 +556,7 @@ async function createAccessGrant(): Promise<void> {
* Generates edge credentials.
*/
async function createEdgeCredentials(): Promise<void> {
edgeCredentials.value = await store.dispatch(
ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant: accessGrant.value },
);
edgeCredentials.value = await agStore.getEdgeCredentials(accessGrant.value);
analytics.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED);
}

16
web/satellite/src/components/modals/CreateBucketModal.vue
View File

@ -59,13 +59,14 @@ import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { Validator } from '@/utils/validation';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { LocalData } from '@/utils/localData';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -75,6 +76,7 @@ import VButton from '@/components/common/VButton.vue';
import CreateBucketIcon from '@/../static/images/buckets/createBucket.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -87,8 +89,6 @@ const bucketNamesLoading = ref<boolean>(true);
const isLoading = ref<boolean>(false);
const worker = ref<Worker | null>(null);
const FILE_BROWSER_AG_NAME = 'Web file browser API key';
/**
* Returns all bucket names from store.
*/
@ -160,6 +160,8 @@ async function onCreate(): Promise<void> {
isLoading.value = true;
try {
const projectID = store.getters.selectedProject.id;
if (!promptForPassphrase.value) {
if (!edgeCredentials.value.accessKeyId) {
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
@ -193,8 +195,8 @@ async function onCreate(): Promise<void> {
}
if (!apiKey.value) {
await store.dispatch(ACCESS_GRANTS_ACTIONS.DELETE_BY_NAME_AND_PROJECT_ID, FILE_BROWSER_AG_NAME);
const cleanAPIKey: AccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, FILE_BROWSER_AG_NAME);
await agStore.deleteAccessGrantByNameAndProjectID(FILE_BROWSER_AG_NAME, projectID);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(FILE_BROWSER_AG_NAME, projectID);
await store.dispatch(OBJECTS_ACTIONS.SET_API_KEY, cleanAPIKey.secret);
}
@ -245,7 +247,7 @@ async function onCreate(): Promise<void> {
const accessGrant = accessGrantEvent.data.value;
const gatewayCredentials: EdgeCredentials = await store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant });
const gatewayCredentials: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
await store.dispatch(OBJECTS_ACTIONS.SET_GATEWAY_CREDENTIALS_FOR_CREATE, gatewayCredentials);
await store.dispatch(OBJECTS_ACTIONS.CREATE_BUCKET_WITH_NO_PASSPHRASE, bucketName.value);
await store.dispatch(BUCKET_ACTIONS.FETCH, 1);
@ -281,7 +283,7 @@ function closeModal(): void {
* Sets local worker with worker instantiated in store.
*/
function setWorker(): void {
worker.value = store.state.accessGrantsModule.accessGrantsWebWorker;
worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => {
notify.error(error.message, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);

15
web/satellite/src/components/modals/DeleteBucketModal.vue
View File

@ -34,7 +34,6 @@ import { computed, onMounted, ref } from 'vue';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
@ -42,15 +41,17 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
const FILE_BROWSER_AG_NAME = 'Web file browser API key';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const notify = useNotify();
@ -78,10 +79,12 @@ async function onDelete(): Promise<void> {
isLoading.value = true;
const projectID = store.getters.selectedProject.id;
try {
if (!apiKey.value) {
await store.dispatch(ACCESS_GRANTS_ACTIONS.DELETE_BY_NAME_AND_PROJECT_ID, FILE_BROWSER_AG_NAME);
const cleanAPIKey: AccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, FILE_BROWSER_AG_NAME);
await agStore.deleteAccessGrantByNameAndProjectID(FILE_BROWSER_AG_NAME, projectID);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(FILE_BROWSER_AG_NAME, projectID);
await store.dispatch(OBJECTS_ACTIONS.SET_API_KEY, cleanAPIKey.secret);
}
@ -132,7 +135,7 @@ async function onDelete(): Promise<void> {
const accessGrant = accessGrantEvent.data.value;
const gatewayCredentials: EdgeCredentials = await store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant });
const gatewayCredentials: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
await store.dispatch(OBJECTS_ACTIONS.SET_GATEWAY_CREDENTIALS_FOR_DELETE, gatewayCredentials);
await store.dispatch(OBJECTS_ACTIONS.DELETE_BUCKET, name.value);
analytics.eventTriggered(AnalyticsEvent.BUCKET_DELETED);
@ -162,7 +165,7 @@ async function fetchBuckets(page = 1): Promise<void> {
* Sets local worker with worker instantiated in store.
*/
function setWorker(): void {
worker.value = store.state.accessGrantsModule.accessGrantsWebWorker;
worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => {
notify.error(error.message, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);

10
web/satellite/src/components/modals/ShareBucketModal.vue
View File

@ -42,7 +42,6 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
@ -50,6 +49,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -64,6 +64,7 @@ enum ButtonStates {
}
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const notify = useNotify();
@ -112,7 +113,7 @@ async function setShareLink(): Promise<void> {
let path = `${bucketName.value}`;
const now = new Date();
const LINK_SHARING_AG_NAME = `${path}_shared-bucket_${now.toISOString()}`;
const cleanAPIKey: AccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, LINK_SHARING_AG_NAME);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, store.getters.selectedProject.id);
const satelliteNodeURL = MetaUtils.getMetaContent('satellite-nodeurl');
const salt = await store.dispatch(PROJECTS_ACTIONS.GET_SALT, store.getters.selectedProject.id);
@ -157,8 +158,7 @@ async function setShareLink(): Promise<void> {
return;
}
const credentials: EdgeCredentials =
await store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant: data.value, isPublic: true });
const credentials: EdgeCredentials = await agStore.getEdgeCredentials(data.value, undefined, true);
path = encodeURIComponent(path.trim());
@ -176,7 +176,7 @@ async function setShareLink(): Promise<void> {
* Sets local worker with worker instantiated in store.
*/
function setWorker(): void {
worker.value = store.state.accessGrantsModule.accessGrantsWebWorker;
worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => {
notify.error(error.message, AnalyticsErrorEventSource.SHARE_BUCKET_MODAL);

7
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -55,7 +55,6 @@ import { RouteConfig } from '@/router';
import { AuthHttpApi } from '@/api/auth';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -67,6 +66,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -79,6 +79,7 @@ import TierBadgeFree from '@/../static/images/navigation/tierBadgeFree.svg';
import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -155,8 +156,8 @@ async function onLogout(): Promise<void> {
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),

9
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -164,7 +164,6 @@ import { computed, ref } from 'vue';
import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
@ -182,6 +181,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -220,6 +220,7 @@ const navigation: NavigationLink[] = [
];
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -390,7 +391,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
await Promise.all([
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id),
store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE),
agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id),
store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id),
]);
@ -468,8 +469,8 @@ async function onLogout(): Promise<void> {
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),

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

@ -66,7 +66,6 @@ import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { Project } from '@/types/projects';
import { User } from '@/types/users';
@ -77,6 +76,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import VLoader from '@/components/common/VLoader.vue';
@ -88,6 +88,7 @@ import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const userStore = useUsersStore();
@ -231,7 +232,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
if (router.currentRoute.name === RouteConfig.AccessGrants.name) {
try {
await store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE);
await agStore.getAccessGrants(FIRST_PAGE, projectID);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION);
}

9
web/satellite/src/components/objects/UploadFile.vue
View File

@ -15,7 +15,6 @@ import { computed, onBeforeMount, ref, watch } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
@ -26,11 +25,13 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import FileBrowser from '@/components/browser/FileBrowser.vue';
import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -108,7 +109,7 @@ async function generateShareLinkUrl(path: string): Promise<string> {
path = `${bucket.value}/${path}`;
const now = new Date();
const LINK_SHARING_AG_NAME = `${path}_shared-object_${now.toISOString()}`;
const cleanAPIKey: AccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, LINK_SHARING_AG_NAME);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, store.getters.selectedProject.id);
try {
const credentials: EdgeCredentials = await generateCredentials(cleanAPIKey.secret, path, true);
@ -129,7 +130,7 @@ async function generateShareLinkUrl(path: string): Promise<string> {
* Sets local worker with worker instantiated in store.
*/
function setWorker(): void {
worker.value = store.state.accessGrantsModule.accessGrantsWebWorker;
worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => {
notify.error(error.message, AnalyticsErrorEventSource.UPLOAD_FILE_VIEW);
@ -199,7 +200,7 @@ async function generateCredentials(cleanApiKey: string, path: string, areEndless
return new EdgeCredentials();
}
return await store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant: data.value, isPublic: true });
return await agStore.getEdgeCredentials(data.value, undefined, true);
}
/**

5
web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
View File

@ -29,11 +29,11 @@ import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { AccessGrant } from '@/types/accessGrants';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import VInput from '@/components/common/VInput.vue';
@ -41,6 +41,7 @@ import VInput from '@/components/common/VInput.vue';
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -95,7 +96,7 @@ async function onNextClick(): Promise<void> {
let createdAccessGrant: AccessGrant;
try {
createdAccessGrant = await store.dispatch(ACCESS_GRANTS_ACTIONS.CREATE, name.value);
createdAccessGrant = await agStore.createAccessGrant(name.value, store.getters.selectedProject.id);
await notify.success('New clean access grant was generated successfully.');
} catch (error) {

18
web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
View File

@ -47,6 +47,7 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import PermissionsSelect from '@/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue';
@ -58,6 +59,7 @@ import DurationSelection from '@/components/onboardingTour/steps/cliFlow/permiss
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const notify = useNotify();
const nativeRouter = useRouter();
@ -73,7 +75,7 @@ const isLoading = ref<boolean>(true);
* Returns selected bucket names.
*/
const selectedBucketNames = computed((): string[] => {
return store.state.accessGrantsModule.selectedBucketNames;
return agStore.state.selectedBucketNames;
});
/**
@ -87,42 +89,42 @@ const cleanAPIKey = computed((): string => {
* Returns download permission from store.
*/
const storedIsDownload = computed((): boolean => {
return store.state.accessGrantsModule.isDownload;
return agStore.state.isDownload;
});
/**
* Returns upload permission from store.
*/
const storedIsUpload = computed((): boolean => {
return store.state.accessGrantsModule.isUpload;
return agStore.state.isUpload;
});
/**
* Returns list permission from store.
*/
const storedIsList = computed((): boolean => {
return store.state.accessGrantsModule.isList;
return agStore.state.isList;
});
/**
* Returns delete permission from store.
*/
const storedIsDelete = computed((): boolean => {
return store.state.accessGrantsModule.isDelete;
return agStore.state.isDelete;
});
/**
* Returns not before date permission from store.
*/
const notBeforePermission = computed((): Date | null => {
return store.state.accessGrantsModule.permissionNotBefore;
return agStore.state.permissionNotBefore;
});
/**
* Returns not after date permission from store.
*/
const notAfterPermission = computed((): Date | null => {
return store.state.accessGrantsModule.permissionNotAfter;
return agStore.state.permissionNotAfter;
});
/**
@ -130,7 +132,7 @@ const notAfterPermission = computed((): Date | null => {
* Also sets worker's onmessage and onerror logic.
*/
function setWorker(): void {
worker.value = store.state.accessGrantsModule.accessGrantsWebWorker;
worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => {

19
web/satellite/src/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue
View File

@ -44,14 +44,15 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { ACCESS_GRANTS_MUTATIONS } from '@/store/modules/accessGrants';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const isLoading = ref<boolean>(true);
@ -67,28 +68,28 @@ const isDropdownVisible = computed((): boolean => {
* Returns download permission from store.
*/
const storedIsDownload = computed((): boolean => {
return store.state.accessGrantsModule.isDownload;
return agStore.state.isDownload;
});
/**
* Returns upload permission from store.
*/
const storedIsUpload = computed((): boolean => {
return store.state.accessGrantsModule.isUpload;
return agStore.state.isUpload;
});
/**
* Returns list permission from store.
*/
const storedIsList = computed((): boolean => {
return store.state.accessGrantsModule.isList;
return agStore.state.isList;
});
/**
* Returns delete permission from store.
*/
const storedIsDelete = computed((): boolean => {
return store.state.accessGrantsModule.isDelete;
return agStore.state.isDelete;
});
/**
@ -116,28 +117,28 @@ function closeDropdown(): void {
* Sets is download permission.
*/
function toggleIsDownload(): void {
store.commit(ACCESS_GRANTS_MUTATIONS.TOGGLE_IS_DOWNLOAD_PERMISSION);
agStore.toggleIsDownloadPermission();
}
/**
* Sets is upload permission.
*/
function toggleIsUpload(): void {
store.commit(ACCESS_GRANTS_MUTATIONS.TOGGLE_IS_UPLOAD_PERMISSION);
agStore.toggleIsUploadPermission();
}
/**
* Sets is list permission.
*/
function toggleIsList(): void {
store.commit(ACCESS_GRANTS_MUTATIONS.TOGGLE_IS_LIST_PERMISSION);
agStore.toggleIsListPermission();
}
/**
* Sets is delete permission.
*/
function toggleIsDelete(): void {
store.commit(ACCESS_GRANTS_MUTATIONS.TOGGLE_IS_DELETE_PERMISSION);
agStore.toggleIsDeletePermission();
}
</script>

7
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/BucketNameBullet.vue
View File

@ -9,12 +9,11 @@
</template>
<script setup lang="ts">
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { useStore } from '@/utils/hooks';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
const store = useStore();
const agStore = useAccessGrantsStore();
const props = withDefaults(defineProps<{
name: string,
@ -26,7 +25,7 @@ const props = withDefaults(defineProps<{
* Toggles bucket selection.
*/
function toggleBucketSelection(name: string): void {
store.dispatch(ACCESS_GRANTS_ACTIONS.TOGGLE_BUCKET_SELECTION, name);
agStore.toggleBucketSelection(name);
}
</script>

9
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/BucketsDropdown.vue
View File

@ -47,14 +47,15 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import SelectionIcon from '@/../static/images/accessGrants/selection.svg';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const bucketSearch = ref<string>('');
@ -75,14 +76,14 @@ const bucketsList = computed((): string[] => {
* Returns stored selected bucket names.
*/
const selectedBucketNames = computed((): string[] => {
return store.state.accessGrantsModule.selectedBucketNames;
return agStore.state.selectedBucketNames;
});
/**
* Clears selection of specific buckets and closes dropdown.
*/
function clearSelectedBuckets(): void {
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR_SELECTION);
agStore.clearSelection();
closeDropdown();
}
@ -90,7 +91,7 @@ function clearSelectedBuckets(): void {
* Toggles bucket selection.
*/
function toggleBucketSelection(name: string): void {
store.dispatch(ACCESS_GRANTS_ACTIONS.TOGGLE_BUCKET_SELECTION, name);
agStore.toggleBucketSelection(name);
}
/**

6
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/BucketsSelection.vue
View File

@ -21,15 +21,15 @@
import { computed } from 'vue';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import BucketsDropdown from '@/components/onboardingTour/steps/cliFlow/permissions/BucketsDropdown.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
const appStore = useAppStore();
const store = useStore();
const agStore = useAccessGrantsStore();
/**
* Indicates if dropdown is shown.
@ -55,7 +55,7 @@ const selectionLabel = computed((): string => {
* Returns stored selected bucket names.
*/
const storedBucketNames = computed((): string[] => {
return store.state.accessGrantsModule.selectedBucketNames;
return agStore.state.selectedBucketNames;
});
/**

19
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue
View File

@ -23,17 +23,16 @@
</template>
<script setup lang="ts">
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { DurationPermission } from '@/types/accessGrants';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import VDateRangePicker from '@/components/common/VDateRangePicker.vue';
const emit = defineEmits(['setLabel']);
const appStore = useAppStore();
const store = useStore();
const agStore = useAccessGrantsStore();
/**
* onCustomRangePick holds logic for choosing custom date range.
@ -48,7 +47,7 @@ function onCustomRangePick(dateRange: Date[]): void {
const toFormattedString = after.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: '2-digit' });
const rangeLabel = `${fromFormattedString} - ${toFormattedString}`;
store.dispatch(ACCESS_GRANTS_ACTIONS.SET_DURATION_PERMISSION, permission);
agStore.setDurationPermission(permission);
emit('setLabel', rangeLabel);
}
@ -58,7 +57,7 @@ function onCustomRangePick(dateRange: Date[]): void {
function onForeverClick(): void {
const permission = new DurationPermission(null, null);
store.dispatch(ACCESS_GRANTS_ACTIONS.SET_DURATION_PERMISSION, permission);
agStore.setDurationPermission(permission);
emit('setLabel', 'Forever');
closePicker();
}
@ -71,7 +70,7 @@ function onOneMonthClick(): void {
const inAMonth = new Date(now.setMonth(now.getMonth() + 1));
const permission = new DurationPermission(new Date(), inAMonth);
store.dispatch(ACCESS_GRANTS_ACTIONS.SET_DURATION_PERMISSION, permission);
agStore.setDurationPermission(permission);
emit('setLabel', '1 Month');
closePicker();
}
@ -84,7 +83,7 @@ function onOneDayClick(): void {
const inADay = new Date(now.setDate(now.getDate() + 1));
const permission = new DurationPermission(new Date(), inADay);
store.dispatch(ACCESS_GRANTS_ACTIONS.SET_DURATION_PERMISSION, permission);
agStore.setDurationPermission(permission);
emit('setLabel', '24 Hours');
closePicker();
}
@ -97,7 +96,7 @@ function onOneWeekClick(): void {
const inAWeek = new Date(now.setDate(now.getDate() + 7));
const permission = new DurationPermission(new Date(), inAWeek);
store.dispatch(ACCESS_GRANTS_ACTIONS.SET_DURATION_PERMISSION, permission);
agStore.setDurationPermission(permission);
emit('setLabel', '1 Week');
closePicker();
}
@ -110,7 +109,7 @@ function onSixMonthsClick(): void {
const inSixMonth = new Date(now.setMonth(now.getMonth() + 6));
const permission = new DurationPermission(new Date(), inSixMonth);
store.dispatch(ACCESS_GRANTS_ACTIONS.SET_DURATION_PERMISSION, permission);
agStore.setDurationPermission(permission);
emit('setLabel', '6 Months');
closePicker();
}
@ -123,7 +122,7 @@ function onOneYearClick(): void {
const inOneYear = new Date(now.setFullYear(now.getFullYear() + 1));
const permission = new DurationPermission(new Date(), inOneYear);
store.dispatch(ACCESS_GRANTS_ACTIONS.SET_DURATION_PERMISSION, permission);
agStore.setDurationPermission(permission);
emit('setLabel', '1 Year');
closePicker();
}

8
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationSelection.vue
View File

@ -25,15 +25,15 @@
import { computed, onMounted, ref } from 'vue';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import DurationPicker from '@/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
const appStore = useAppStore();
const store = useStore();
const agStore = useAccessGrantsStore();
const dateRangeLabel = ref<string>('Forever');
@ -48,14 +48,14 @@ const isDurationPickerVisible = computed((): boolean => {
* Returns not before date permission from store.
*/
const notBeforePermission = computed((): Date | null => {
return store.state.accessGrantsModule.permissionNotBefore;
return agStore.state.permissionNotBefore;
});
/**
* Returns not after date permission from store.
*/
const notAfterPermission = computed((): Date | null => {
return store.state.accessGrantsModule.permissionNotAfter;
return agStore.state.permissionNotAfter;
});
/**

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

@ -49,7 +49,6 @@
import { computed, onMounted, ref } from 'vue';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project, ProjectsPage } from '@/types/projects';
@ -63,6 +62,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue';
@ -77,6 +77,7 @@ const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -143,7 +144,7 @@ async function onProjectSelected(project: Project): Promise<void> {
await Promise.all([
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id),
store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE),
agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id),
store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id),
]);

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

@ -5,11 +5,9 @@ import Vue from 'vue';
import Vuex from 'vuex';
import { RouteRecord } from 'vue-router';
import { AccessGrantsApiGql } from '@/api/accessGrants';
import { BucketsApiGql } from '@/api/buckets';
import { ProjectsApiGql } from '@/api/projects';
import { notProjectRelatedRoutes, RouteConfig, router } from '@/router';
import { AccessGrantsState, makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { BucketsState, makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule, NotificationsState } from '@/store/modules/notifications';
import { makeObjectsModule, ObjectsState } from '@/store/modules/objects';
@ -20,21 +18,11 @@ import { useAppStore } from '@/store/modules/appStore';
Vue.use(Vuex);
const accessGrantsApi = new AccessGrantsApiGql();
const bucketsApi = new BucketsApiGql();
const projectsApi = new ProjectsApiGql();
// We need to use a WebWorker factory because jest testing does not support
// WebWorkers yet. This is a way to avoid a direct dependency to `new Worker`.
const webWorkerFactory = {
create(): Worker {
return new Worker(new URL('@/utils/accessGrant.worker.js', import.meta.url), { type: 'module' });
},
};
export interface ModulesState {
notificationsModule: NotificationsState;
accessGrantsModule: AccessGrantsState;
projectsModule: ProjectsState;
objectsModule: ObjectsState;
bucketUsageModule: BucketsState;
@ -45,7 +33,6 @@ export interface ModulesState {
export const store = new Vuex.Store<ModulesState>({
modules: {
notificationsModule: makeNotificationsModule(),
accessGrantsModule: makeAccessGrantsModule(accessGrantsApi, webWorkerFactory),
projectsModule: makeProjectsModule(projectsApi),
bucketUsageModule: makeBucketsModule(bucketsApi),
objectsModule: makeObjectsModule(),

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

@ -1,308 +0,0 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
import {
AccessGrant,
AccessGrantCursor,
AccessGrantsApi,
AccessGrantsOrderBy,
AccessGrantsPage,
AccessGrantsWorkerFactory,
DurationPermission,
EdgeCredentials,
} from '@/types/accessGrants';
import { SortDirection } from '@/types/common';
import { StoreModule } from '@/types/store';
export const ACCESS_GRANTS_ACTIONS = {
FETCH: 'fetchAccessGrants',
CREATE: 'createAccessGrant',
DELETE: 'deleteAccessGrants',
DELETE_BY_NAME_AND_PROJECT_ID: 'deleteAccessGrantsByNameAndProjectID',
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',
TOGGLE_SORT_DIRECTION: 'toggleAccessGrantsSortingDirection',
SET_DURATION_PERMISSION: 'setAccessGrantsDurationPermission',
TOGGLE_SELECTION: 'toggleAccessGrantsSelection',
TOGGLE_BUCKET_SELECTION: 'toggleBucketSelection',
CLEAR_SELECTION: 'clearAccessGrantsSelection',
};
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',
CLEAR: 'clearAccessGrants',
CHANGE_SORT_ORDER: 'changeAccessGrantsSortOrder',
CHANGE_SORT_ORDER_DIRECTION: 'changeAccessGrantsSortOrderDirection',
SET_SEARCH_QUERY: 'setAccessGrantsSearchQuery',
SET_PAGE_NUMBER: 'setAccessGrantsPage',
SET_DURATION_PERMISSION: 'setAccessGrantsDurationPermission',
TOGGLE_IS_DOWNLOAD_PERMISSION: 'toggleAccessGrantsIsDownloadPermission',
TOGGLE_IS_UPLOAD_PERMISSION: 'toggleAccessGrantsIsUploadPermission',
TOGGLE_IS_LIST_PERMISSION: 'toggleAccessGrantsIsListPermission',
TOGGLE_IS_DELETE_PERMISSION: 'toggleAccessGrantsIsDeletePermission',
};
const {
SET_PAGE,
TOGGLE_SELECTION,
TOGGLE_BUCKET_SELECTION,
CLEAR_SELECTION,
CLEAR,
CHANGE_SORT_ORDER,
CHANGE_SORT_ORDER_DIRECTION,
SET_SEARCH_QUERY,
SET_PAGE_NUMBER,
SET_DURATION_PERMISSION,
TOGGLE_IS_DOWNLOAD_PERMISSION,
TOGGLE_IS_UPLOAD_PERMISSION,
TOGGLE_IS_LIST_PERMISSION,
TOGGLE_IS_DELETE_PERMISSION,
SET_GATEWAY_CREDENTIALS,
SET_ACCESS_GRANTS_WEB_WORKER,
STOP_ACCESS_GRANTS_WEB_WORKER,
} = ACCESS_GRANTS_MUTATIONS;
export class AccessGrantsState {
public cursor: AccessGrantCursor = new AccessGrantCursor();
public page: AccessGrantsPage = new AccessGrantsPage();
public selectedAccessGrantsIds: string[] = [];
public selectedBucketNames: string[] = [];
public permissionNotBefore: Date | null = null;
public permissionNotAfter: Date | null = null;
public isDownload = true;
public isUpload = true;
public isList = true;
public isDelete = true;
public gatewayCredentials: EdgeCredentials = new EdgeCredentials();
public accessGrantsWebWorker: Worker | null = null;
public isAccessGrantsWebWorkerReady = false;
}
interface AccessGrantsContext {
state: AccessGrantsState
commit: (string, ...unknown) => void
rootGetters: {
selectedProject: {
id: string
}
}
}
/**
* creates access grants module with all dependencies
*
* @param api - accessGrants api
*/
export function makeAccessGrantsModule(api: AccessGrantsApi, workerFactory?: AccessGrantsWorkerFactory): StoreModule<AccessGrantsState, AccessGrantsContext> {
return {
state: new AccessGrantsState(),
mutations: {
[SET_ACCESS_GRANTS_WEB_WORKER](state: AccessGrantsState, worker: Worker): void {
state.accessGrantsWebWorker = worker;
state.isAccessGrantsWebWorkerReady = true;
},
[STOP_ACCESS_GRANTS_WEB_WORKER](state: AccessGrantsState): void {
state.accessGrantsWebWorker?.terminate();
state.accessGrantsWebWorker = null;
state.isAccessGrantsWebWorkerReady = false;
},
[SET_PAGE](state: AccessGrantsState, page: AccessGrantsPage) {
state.page = page;
state.page.accessGrants = state.page.accessGrants.map(accessGrant => {
if (state.selectedAccessGrantsIds.includes(accessGrant.id)) {
accessGrant.isSelected = true;
}
return accessGrant;
});
},
[SET_GATEWAY_CREDENTIALS](state: AccessGrantsState, credentials: EdgeCredentials) {
state.gatewayCredentials = credentials;
},
[SET_PAGE_NUMBER](state: AccessGrantsState, pageNumber: number) {
state.cursor.page = pageNumber;
},
[SET_SEARCH_QUERY](state: AccessGrantsState, search: string) {
state.cursor.search = search;
},
[SET_DURATION_PERMISSION](state: AccessGrantsState, permission: DurationPermission) {
state.permissionNotBefore = permission.notBefore;
state.permissionNotAfter = permission.notAfter;
},
[TOGGLE_IS_DOWNLOAD_PERMISSION](state: AccessGrantsState) {
state.isDownload = !state.isDownload;
},
[TOGGLE_IS_UPLOAD_PERMISSION](state: AccessGrantsState) {
state.isUpload = !state.isUpload;
},
[TOGGLE_IS_LIST_PERMISSION](state: AccessGrantsState) {
state.isList = !state.isList;
},
[TOGGLE_IS_DELETE_PERMISSION](state: AccessGrantsState) {
state.isDelete = !state.isDelete;
},
[CHANGE_SORT_ORDER](state: AccessGrantsState, order: AccessGrantsOrderBy) {
state.cursor.order = order;
},
[CHANGE_SORT_ORDER_DIRECTION](state: AccessGrantsState, direction: SortDirection) {
state.cursor.orderDirection = direction;
},
[TOGGLE_SELECTION](state: AccessGrantsState, accessGrant: AccessGrant) {
if (!state.selectedAccessGrantsIds.includes(accessGrant.id)) {
state.page.accessGrants.forEach((grant: AccessGrant) => {
if (grant.id === accessGrant.id) {
grant.isSelected = true;
}
});
state.selectedAccessGrantsIds.push(accessGrant.id);
return;
}
state.page.accessGrants.forEach((grant: AccessGrant) => {
if (grant.id === accessGrant.id) {
grant.isSelected = false;
}
});
state.selectedAccessGrantsIds = state.selectedAccessGrantsIds.filter(accessGrantId => {
return accessGrant.id !== accessGrantId;
});
},
[TOGGLE_BUCKET_SELECTION](state: AccessGrantsState, bucketName: string) {
if (!state.selectedBucketNames.includes(bucketName)) {
state.selectedBucketNames.push(bucketName);
return;
}
state.selectedBucketNames = state.selectedBucketNames.filter(name => {
return bucketName !== name;
});
},
[CLEAR_SELECTION](state: AccessGrantsState) {
state.selectedBucketNames = [];
state.selectedAccessGrantsIds = [];
state.page.accessGrants = state.page.accessGrants.map((accessGrant: AccessGrant) => {
accessGrant.isSelected = false;
return accessGrant;
});
},
[CLEAR](state: AccessGrantsState) {
state.cursor = new AccessGrantCursor();
state.page = new AccessGrantsPage();
state.selectedAccessGrantsIds = [];
state.selectedBucketNames = [];
state.permissionNotBefore = null;
state.permissionNotAfter = null;
state.gatewayCredentials = new EdgeCredentials();
state.isDownload = true;
state.isUpload = true;
state.isList = true;
state.isDelete = true;
state.accessGrantsWebWorker = null;
state.isAccessGrantsWebWorkerReady = false;
},
},
actions: {
setAccessGrantsWebWorker: async function ({ commit }: AccessGrantsContext): Promise<void> {
if (!workerFactory) {
throw new Error('Worker not supported');
}
const worker = workerFactory.create();
worker.postMessage({ 'type': 'Setup' });
const event: MessageEvent = await new Promise(resolve => worker.onmessage = resolve);
if (event.data.error) {
throw new Error(event.data.error);
}
if (event.data !== 'configured') {
throw new Error('Failed to configure access grants web worker');
}
worker.onerror = (error: ErrorEvent) => {
throw new Error(`Failed to configure access grants web worker. ${error.message}`);
};
commit(SET_ACCESS_GRANTS_WEB_WORKER, worker);
},
stopAccessGrantsWebWorker: function ({ commit }: AccessGrantsContext): void {
commit(STOP_ACCESS_GRANTS_WEB_WORKER);
},
fetchAccessGrants: async function ({ commit, rootGetters, state }: AccessGrantsContext, pageNumber: number): Promise<AccessGrantsPage> {
const projectId = rootGetters.selectedProject.id;
commit(SET_PAGE_NUMBER, pageNumber);
const accessGrantsPage: AccessGrantsPage = await api.get(projectId, state.cursor);
commit(SET_PAGE, accessGrantsPage);
return accessGrantsPage;
},
createAccessGrant: async function ({ rootGetters }: AccessGrantsContext, name: string): Promise<AccessGrant> {
return await api.create(rootGetters.selectedProject.id, name);
},
deleteAccessGrants: async function ({ state }: AccessGrantsContext): Promise<void> {
await api.delete(state.selectedAccessGrantsIds);
},
deleteAccessGrantsByNameAndProjectID: async function ({ rootGetters }: AccessGrantsContext, name: string): Promise<void> {
await api.deleteByNameAndProjectID(name, rootGetters.selectedProject.id);
},
getGatewayCredentials: async function ({ commit }: AccessGrantsContext, payload): Promise<EdgeCredentials> {
const credentials: EdgeCredentials = await api.getGatewayCredentials(payload.accessGrant, payload.optionalURL, payload.isPublic);
commit(SET_GATEWAY_CREDENTIALS, credentials);
return credentials;
},
setAccessGrantsSearchQuery: function ({ commit }: AccessGrantsContext, search: string) {
commit(SET_SEARCH_QUERY, search);
},
setAccessGrantsSortingBy: function ({ commit }: AccessGrantsContext, order: AccessGrantsOrderBy) {
commit(CHANGE_SORT_ORDER, order);
},
setAccessGrantsSortingDirection: function ({ commit }: AccessGrantsContext, direction: SortDirection) {
commit(CHANGE_SORT_ORDER_DIRECTION, direction);
},
toggleAccessGrantsSortingDirection: function ({ commit, state }: AccessGrantsContext) {
let direction = SortDirection.DESCENDING;
if (state.cursor.orderDirection === SortDirection.DESCENDING) {
direction = SortDirection.ASCENDING;
}
commit(CHANGE_SORT_ORDER_DIRECTION, direction);
},
setAccessGrantsDurationPermission: function ({ commit }: AccessGrantsContext, permission: DurationPermission) {
commit(SET_DURATION_PERMISSION, permission);
},
toggleAccessGrantsSelection: function ({ commit }: AccessGrantsContext, accessGrant: AccessGrant): void {
commit(TOGGLE_SELECTION, accessGrant);
},
toggleBucketSelection: function ({ commit }: AccessGrantsContext, bucketName: string): void {
commit(TOGGLE_BUCKET_SELECTION, bucketName);
},
clearAccessGrantsSelection: function ({ commit }: AccessGrantsContext): void {
commit(CLEAR_SELECTION);
},
clearAccessGrants: function ({ commit }: AccessGrantsContext): void {
commit(CLEAR);
commit(CLEAR_SELECTION);
},
},
getters: {
selectedAccessGrants: (state: AccessGrantsState) => state.page.accessGrants.filter((grant: AccessGrant) => grant.isSelected),
worker: (state: AccessGrantsState) => state.accessGrantsWebWorker,
},
};
}

55
web/satellite/src/store/modules/accessGrantsStore.ts
View File

@ -63,7 +63,7 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
state.isAccessGrantsWebWorkerReady = false;
}
async function fetchAccessGrants(projectID: string, pageNumber: number): Promise<AccessGrantsPage> {
async function getAccessGrants(pageNumber: number, projectID: string): Promise<AccessGrantsPage> {
state.cursor.page = pageNumber;
const accessGrantsPage: AccessGrantsPage = await api.get(projectID, state.cursor);
@ -80,7 +80,7 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
return accessGrantsPage;
}
async function createAccessGrant(projectID: string, name: string): Promise<AccessGrant> {
async function createAccessGrant(name: string, projectID: string): Promise<AccessGrant> {
return await api.create(projectID, name);
}
@ -88,7 +88,7 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
await api.delete(state.selectedAccessGrantsIds);
}
async function deleteAccessGrantByNameAndProjectID(projectID: string, name: string): Promise<void> {
async function deleteAccessGrantByNameAndProjectID(name: string, projectID: string): Promise<void> {
await api.deleteByNameAndProjectID(name, projectID);
}
@ -100,24 +100,20 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
return credentials;
}
function setAccessGrantsSearchQuery(query: string): void {
function setSearchQuery(query: string): void {
state.cursor.search = query;
}
function setAccessGrantsSortingBy(order: AccessGrantsOrderBy): void {
function setSortingBy(order: AccessGrantsOrderBy): void {
state.cursor.order = order;
}
function setAccessGrantsSortingDirection(direction: SortDirection): void {
state.cursor.orderDirection = direction;
}
function setAccessGrantsDurationPermission(permission: DurationPermission): void {
function setDurationPermission(permission: DurationPermission): void {
state.permissionNotBefore = permission.notBefore;
state.permissionNotAfter = permission.notAfter;
}
function toggleAccessGrantsSelection(accessGrant: AccessGrant): void {
function toggleSelection(accessGrant: AccessGrant): void {
if (!state.selectedAccessGrantsIds.includes(accessGrant.id)) {
state.page.accessGrants.forEach((grant: AccessGrant) => {
if (grant.id === accessGrant.id) {
@ -151,6 +147,18 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
});
}
function setSortingDirection(direction: SortDirection): void {
state.cursor.orderDirection = direction;
}
function toggleSortingDirection(): void {
let direction = SortDirection.DESCENDING;
if (state.cursor.orderDirection === SortDirection.DESCENDING) {
direction = SortDirection.ASCENDING;
}
state.cursor.orderDirection = direction;
}
function toggleIsDownloadPermission(): void {
state.isDownload = !state.isDownload;
}
@ -167,7 +175,7 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
state.isDelete = !state.isDelete;
}
function clearAccessGrantsSelection(): void {
function clearSelection(): void {
state.selectedBucketNames = [];
state.selectedAccessGrantsIds = [];
state.page.accessGrants = state.page.accessGrants.map((accessGrant: AccessGrant) => {
@ -177,7 +185,7 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
});
}
function clearAccessGrants(): void {
function clear(): void {
state.cursor = new AccessGrantCursor();
state.page = new AccessGrantsPage();
state.selectedAccessGrantsIds = [];
@ -198,26 +206,27 @@ export const useAccessGrantsStore = defineStore('accessGrants', () => {
});
return {
accessGrantsState: state,
state,
selectedAccessGrants,
startWorker,
stopWorker,
fetchAccessGrants,
getAccessGrants,
createAccessGrant,
deleteAccessGrants,
deleteAccessGrantByNameAndProjectID,
getEdgeCredentials,
setAccessGrantsSearchQuery,
setAccessGrantsSortingBy,
setAccessGrantsSortingDirection,
setAccessGrantsDurationPermission,
toggleAccessGrantsSelection,
setSearchQuery,
setSortingBy,
setSortingDirection,
toggleSortingDirection,
setDurationPermission,
toggleSelection,
toggleBucketSelection,
toggleIsDownloadPermission,
toggleIsUploadPermission,
toggleIsListPermission,
toggleIsDeletePermission,
clearAccessGrantsSelection,
clearAccessGrants,
selectedAccessGrants,
clearSelection,
clear,
};
});

15
web/satellite/src/store/modules/bucketsStore.ts
View File

@ -116,23 +116,18 @@ export const useBucketsStore = defineStore('buckets', () => {
}
async function setS3Client(projectID: string): Promise<void> {
const {
createAccessGrant,
deleteAccessGrantByNameAndProjectID,
accessGrantsState,
getEdgeCredentials,
} = useAccessGrantsStore();
const agStore = useAccessGrantsStore();
if (!state.apiKey) {
await deleteAccessGrantByNameAndProjectID(projectID, FILE_BROWSER_AG_NAME);
const cleanAPIKey: AccessGrant = await createAccessGrant(projectID, FILE_BROWSER_AG_NAME);
await agStore.deleteAccessGrantByNameAndProjectID(projectID, FILE_BROWSER_AG_NAME);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(projectID, FILE_BROWSER_AG_NAME);
setApiKey(cleanAPIKey.secret);
}
const now = new Date();
const inThreeDays = new Date(now.setDate(now.getDate() + 3));
const worker = accessGrantsState.accessGrantsWebWorker;
const worker = agStore.state.accessGrantsWebWorker;
if (!worker) {
throw new Error('Worker is not defined');
}
@ -180,7 +175,7 @@ export const useBucketsStore = defineStore('buckets', () => {
}
const accessGrant = accessGrantEvent.data.value;
state.edgeCredentials = await getEdgeCredentials(accessGrant);
state.edgeCredentials = await agStore.getEdgeCredentials(accessGrant);
const s3Config = {
accessKeyId: state.edgeCredentials.accessKeyId,

18
web/satellite/src/store/modules/objects.ts
View File

@ -7,10 +7,10 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { FilesState } from '@/store/modules/files';
import { StoreModule } from '@/types/store';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
export const OBJECTS_ACTIONS = {
CLEAR: 'clearObjects',
@ -218,16 +218,22 @@ export function makeObjectsModule(): StoreModule<ObjectsState, ObjectsContext> {
commit(SET_S3_CLIENT_FOR_CREATE);
},
setS3Client: async function({ commit, dispatch, state, rootGetters }: ObjectsContext): Promise<void> {
const agStore = useAccessGrantsStore();
if (!state.apiKey) {
await dispatch(ACCESS_GRANTS_ACTIONS.DELETE_BY_NAME_AND_PROJECT_ID, FILE_BROWSER_AG_NAME, { root: true });
const cleanAPIKey: AccessGrant = await dispatch(ACCESS_GRANTS_ACTIONS.CREATE, FILE_BROWSER_AG_NAME, { root: true });
await agStore.deleteAccessGrantByNameAndProjectID(FILE_BROWSER_AG_NAME, rootGetters.selectedProject.id);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(FILE_BROWSER_AG_NAME, rootGetters.selectedProject.id);
commit(SET_API_KEY, cleanAPIKey.secret);
}
const now = new Date();
const inThreeDays = new Date(now.setDate(now.getDate() + 3));
const worker = rootGetters.worker;
const worker = agStore.state.accessGrantsWebWorker;
if (!worker) {
throw new Error ('Worker is not set');
}
worker.onerror = (error: ErrorEvent) => {
throw new Error(error.message);
};
@ -270,9 +276,7 @@ export function makeObjectsModule(): StoreModule<ObjectsState, ObjectsContext> {
const accessGrant = accessGrantEvent.data.value;
const gatewayCredentials: EdgeCredentials = await dispatch(
ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant }, { root: true },
);
const gatewayCredentials: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
commit(SET_GATEWAY_CREDENTIALS, gatewayCredentials);
commit(SET_S3_CLIENT);
},

9
web/satellite/src/views/AuthorizeArea.vue
View File

@ -97,12 +97,12 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { OAuthClient, OAuthClientsAPI } from '@/api/oauthClients';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import VInput from '@/components/common/VInput.vue';
@ -118,6 +118,7 @@ const validPerms = {
};
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -203,14 +204,14 @@ async function ensureLogin(): Promise<void> {
async function ensureWorker(): Promise<void> {
try {
await store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER);
await store.dispatch(ACCESS_GRANTS_ACTIONS.SET_ACCESS_GRANTS_WEB_WORKER);
agStore.stopWorker();
await agStore.startWorker();
} catch (error) {
await notify.error(`Unable to set access grants wizard. ${error.message}`, null);
return;
}
worker.value = store.state.accessGrantsModule.accessGrantsWebWorker;
worker.value = agStore.state.accessGrantsWebWorker;
if (worker.value) {
worker.value.onerror = (error: ErrorEvent) => notify.error(error.message, null);
}

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

@ -102,7 +102,6 @@ import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { CouponType } from '@/types/coupons';
import { Project } from '@/types/projects';
@ -123,6 +122,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
@ -137,6 +137,7 @@ import ProjectLimitBanner from '@/components/notifications/ProjectLimitBanner.vu
import BrandedLoader from '@/components/common/BrandedLoader.vue';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const billingStore = useBillingStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
@ -482,8 +483,8 @@ async function handleInactive(): Promise<void> {
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
@ -602,8 +603,8 @@ onMounted(async () => {
}
try {
await store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER);
await store.dispatch(ACCESS_GRANTS_ACTIONS.SET_ACCESS_GRANTS_WEB_WORKER);
agStore.stopWorker();
await agStore.startWorker();
} catch (error) {
await notify.error(`Unable to set access grants wizard. ${error.message}`, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
}

11
web/satellite/src/views/all-dashboard/AllDashboardArea.vue
View File

@ -113,7 +113,6 @@ import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
@ -128,6 +127,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
@ -148,6 +148,7 @@ const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const billingStore = useBillingStore();
const agStore = useAccessGrantsStore();
const appStore = useAppStore();
const analytics = new AnalyticsHttpApi();
@ -340,8 +341,8 @@ async function handleInactive(): Promise<void> {
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
@ -544,8 +545,8 @@ onMounted(async () => {
}
try {
await store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER);
await store.dispatch(ACCESS_GRANTS_ACTIONS.SET_ACCESS_GRANTS_WEB_WORKER);
agStore.stopWorker();
await agStore.startWorker();
} catch (error) {
await notify.error(`Unable to set access grants wizard. ${error.message}`, AnalyticsErrorEventSource.ALL_PROJECT_DASHBOARD);
}

7
web/satellite/src/views/all-dashboard/components/Heading.vue
View File

@ -104,7 +104,6 @@ import { RouteConfig } from '@/router';
import { User } from '@/types/users';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AuthHttpApi } from '@/api/auth';
@ -113,6 +112,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import VButton from '@/components/common/VButton.vue';
@ -135,6 +135,7 @@ const router = useRouter();
const notify = useNotify();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
@ -232,8 +233,8 @@ async function onLogout(): Promise<void> {
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),

7
web/satellite/src/views/all-dashboard/components/MyAccountButton.vue
View File

@ -55,7 +55,6 @@ import { RouteConfig } from '@/router';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import {
@ -70,6 +69,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -87,6 +87,7 @@ const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -157,8 +158,8 @@ async function onLogout(): Promise<void> {
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
usersStore.clear(),
store.dispatch(ACCESS_GRANTS_ACTIONS.STOP_ACCESS_GRANTS_WEB_WORKER),
store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR),
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),

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

@ -4,14 +4,11 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { AccessGrantsMock } from '../../mock/api/accessGrants';
import { BucketsMock } from '../../mock/api/buckets';
import { RouteConfig, router } from '@/router';
import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule } from '@/store/modules/notifications';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import { AnalyticsHttpApi } from '@/api/analytics';
import DashboardArea from '@/views/DashboardArea.vue';
@ -19,7 +16,6 @@ import DashboardArea from '@/views/DashboardArea.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const accessGrantsModule = makeAccessGrantsModule(new AccessGrantsMock());
const bucketsModule = makeBucketsModule(new BucketsMock());
const notificationsModule = makeNotificationsModule();
@ -27,7 +23,6 @@ const store = new Vuex.Store({
modules: {
notificationsModule,
bucketsModule,
accessGrantsModule,
},
});