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

web/satellite: use new buckets pinia module instead of old vuex modules

Browse Source 
Start using new buckets pinia module instead of old objects and buckets vuex modules

Change-Id: I1afa9b1f0e057b870796498d0e061c89a4a669ee
This commit is contained in:
Vitalii 2023-04-12 19:18:53 +03:00 committed by Storj Robot
parent d94207048a
commit 1373bdb169
42 changed files with 259 additions and 716 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,10 +107,10 @@
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { computed, onMounted, reactive, ref } from 'vue';
import { generateMnemonic } from 'bip39';
import { useNotify, useRoute, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import {
AccessType,
@ -119,15 +119,14 @@ import {
Permission,
STEP_ICON_AND_TITLE,
} from '@/types/createAccessGrant';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VModal from '@/components/common/VModal.vue';
import CreateNewAccessStep from '@/components/accessGrants/createFlow/steps/CreateNewAccessStep.vue';
@ -141,12 +140,13 @@ import CLIAccessCreatedStep from '@/components/accessGrants/createFlow/steps/CLI
import S3CredentialsCreatedStep from '@/components/accessGrants/createFlow/steps/S3CredentialsCreatedStep.vue';
import ConfirmDetailsStep from '@/components/accessGrants/createFlow/steps/ConfirmDetailsStep.vue';
const router = useRouter();
const route = useRoute();
const notify = useNotify();
const store = useStore();
const bucketsStore = useBucketsStore();
const agStore = useAccessGrantsStore();
const appStore = useAppStore();
const store = useStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const notify = useNotify();
const initPermissions = [
Permission.Read,
@ -159,14 +159,14 @@ const initPermissions = [
* Indicates if user has to be prompt to enter project passphrase.
*/
const isPromptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
return bucketsStore.state.promptForPassphrase;
});
/**
* Returns passphrase from store.
*/
const storedPassphrase = computed((): string => {
return store.state.objectsModule.passphrase;
return bucketsStore.state.passphrase;
});
const worker = ref<Worker| null>(null);
@ -604,9 +604,9 @@ async function setLastStep(): Promise<void> {
passphraseOption.value === PassphraseOption.SetMyProjectPassphrase &&
!selectedAccessTypes.value.includes(AccessType.APIKey)
) {
store.commit(OBJECTS_MUTATIONS.SET_GATEWAY_CREDENTIALS, new EdgeCredentials());
store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, enteredPassphrase.value);
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
bucketsStore.setEdgeCredentials(new EdgeCredentials());
bucketsStore.setPassphrase(enteredPassphrase.value);
bucketsStore.setPromptForPassphrase(false);
}
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.CREATE_AG_MODAL);
@ -616,15 +616,15 @@ async function setLastStep(): Promise<void> {
}
onMounted(async () => {
if (route.params?.accessType) {
selectedAccessTypes.value.push(route.params?.accessType as AccessType);
if (router.currentRoute.params.accessType) {
selectedAccessTypes.value.push(router.currentRoute.params.accessType as AccessType);
}
setWorker();
generatedPassphrase.value = generateMnemonic();
try {
await store.dispatch(BUCKET_ACTIONS.FETCH_ALL_BUCKET_NAMES);
await bucketsStore.getAllBucketsNames(store.getters.selectedProject.id);
} catch (error) {
notify.error(`Unable to fetch all bucket names. ${error.message}`, AnalyticsErrorEventSource.CREATE_AG_MODAL);
}

6
web/satellite/src/components/accessGrants/createFlow/steps/AccessEncryptionStep.vue
View File

@ -100,7 +100,7 @@ import {
FunctionalContainer,
PassphraseOption,
} from '@/types/createAccessGrant';
import { useStore } from '@/utils/hooks';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import ContainerWithIcon from '@/components/accessGrants/createFlow/components/ContainerWithIcon.vue';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
@ -117,7 +117,7 @@ const props = defineProps<{
onContinue: () => void;
}>();
const store = useStore();
const bucketsStore = useBucketsStore();
const advancedShown = ref<boolean>(false);
@ -128,7 +128,7 @@ const _PassphraseOption = PassphraseOption;
* Indicates if user has to be prompt to enter project passphrase.
*/
const isPromptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
return bucketsStore.state.promptForPassphrase;
});
/**

7
web/satellite/src/components/accessGrants/createFlow/steps/ChoosePermissionStep.vue
View File

@ -135,8 +135,9 @@ import {
FunctionalContainer,
Permission,
} from '@/types/createAccessGrant';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import ContainerWithIcon from '@/components/accessGrants/createFlow/components/ContainerWithIcon.vue';
import ButtonsContainer from '@/components/accessGrants/createFlow/components/ButtonsContainer.vue';
@ -164,7 +165,7 @@ const props = withDefaults(defineProps<{
notAfter: undefined,
});
const store = useStore();
const bucketsStore = useBucketsStore();
const notify = useNotify();
const allPermissionsShown = ref<boolean>(false);
@ -184,7 +185,7 @@ const isButtonDisabled = computed((): boolean => {
*/
const bucketsList = computed((): string[] => {
const NON_EXIST_INDEX = -1;
const buckets: string[] = store.state.bucketUsageModule.allBucketNames;
const buckets: string[] = bucketsStore.state.allBucketNames;
return buckets.filter((name: string) => {
return name.indexOf(searchQuery.value.toLowerCase()) !== NON_EXIST_INDEX && !props.selectedBuckets.includes(name);

6
web/satellite/src/components/browser/FileBrowser.vue
View File

@ -208,6 +208,7 @@ import { Bucket } from '@/types/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { BrowserObject } from '@/store/modules/files';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VButton from '@/components/common/VButton.vue';
import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
@ -219,6 +220,7 @@ import FileIcon from '@/../static/images/objects/file.svg';
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
import UploadIcon from '@/../static/images/browser/upload.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const nativeRouter = useRouter();
@ -277,7 +279,7 @@ const lockedFilesNumber = computed((): number => {
*/
const objectsCount = computed((): number => {
const name: string = store.state.files.bucket;
const data: Bucket | undefined = store.state.bucketUsageModule.page.buckets.find((bucket: Bucket) => bucket.name === name);
const data: Bucket | undefined = bucketsStore.state.page.buckets.find((bucket: Bucket) => bucket.name === name);
return data?.objectCount || 0;
});
@ -368,7 +370,7 @@ const routePath = ref(calculateRoutePath());
* Returns bucket name from store.
*/
const bucket = computed((): string => {
return store.state.objectsModule.fileComponentBucketName;
return bucketsStore.state.fileComponentBucketName;
});
/**

4
web/satellite/src/components/browser/MultiplePassphrasesBanner.vue
View File

@ -38,6 +38,7 @@ import { useStore } from '@/utils/hooks';
import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import LockedIcon from '@/../static/images/browser/locked.svg';
import CloseIcon from '@/../static/images/browser/close.svg';
@ -49,6 +50,7 @@ const props = withDefaults(defineProps<{
});
const appStore = useAppStore();
const bucketsStore = useBucketsStore();
const store = useStore();
const NUMBER_OF_DISPLAYED_OBJECTS = 1000;
@ -67,7 +69,7 @@ const lockedFilesNumber = computed((): number => {
*/
const objectsCount = computed((): number => {
const name: string = store.state.files.bucket;
const data: Bucket | undefined = store.state.bucketUsageModule.page.buckets.find((bucket: Bucket) => bucket.name === name);
const data: Bucket | undefined = bucketsStore.state.page.buckets.find((bucket: Bucket) => bucket.name === name);
return data?.objectCount || 0;
});

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

@ -56,8 +56,6 @@ import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
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 { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
@ -65,7 +63,7 @@ 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 { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -74,6 +72,7 @@ import VButton from '@/components/common/VButton.vue';
import CreateBucketIcon from '@/../static/images/buckets/createBucket.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
@ -92,35 +91,35 @@ const worker = ref<Worker | null>(null);
* Returns all bucket names from store.
*/
const allBucketNames = computed((): string[] => {
return store.state.bucketUsageModule.allBucketNames;
return bucketsStore.state.allBucketNames;
});
/**
* Returns condition if user has to be prompt for passphrase from store.
*/
const promptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
return bucketsStore.state.promptForPassphrase;
});
/**
* Returns object browser api key from store.
*/
const apiKey = computed((): string => {
return store.state.objectsModule.apiKey;
return bucketsStore.state.apiKey;
});
/**
* Returns edge credentials from store.
*/
const edgeCredentials = computed((): EdgeCredentials => {
return store.state.objectsModule.gatewayCredentials;
return bucketsStore.state.edgeCredentials;
});
/**
* Returns edge credentials for bucket creation from store.
*/
const gatewayCredentialsForCreate = computed((): EdgeCredentials => {
return store.state.objectsModule.gatewayCredentialsForCreate;
const edgeCredentialsForCreate = computed((): EdgeCredentials => {
return bucketsStore.state.edgeCredentialsForCreate;
});
/**
@ -163,11 +162,12 @@ async function onCreate(): Promise<void> {
if (!promptForPassphrase.value) {
if (!edgeCredentials.value.accessKeyId) {
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
await bucketsStore.setS3Client(projectID);
}
await store.dispatch(OBJECTS_ACTIONS.CREATE_BUCKET, bucketName.value);
await store.dispatch(BUCKET_ACTIONS.FETCH, 1);
await store.dispatch(OBJECTS_ACTIONS.SET_FILE_COMPONENT_BUCKET_NAME, bucketName.value);
await bucketsStore.createBucket(bucketName.value);
await bucketsStore.getBuckets(1, projectID);
bucketsStore.setFileComponentBucketName(bucketName.value);
analytics.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
await router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
@ -180,9 +180,9 @@ async function onCreate(): Promise<void> {
return;
}
if (gatewayCredentialsForCreate.value.accessKeyId) {
await store.dispatch(OBJECTS_ACTIONS.CREATE_BUCKET_WITH_NO_PASSPHRASE, bucketName.value);
await store.dispatch(BUCKET_ACTIONS.FETCH, 1);
if (edgeCredentialsForCreate.value.accessKeyId) {
await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
await bucketsStore.getBuckets(1, projectID);
analytics.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
closeModal();
@ -196,7 +196,7 @@ async function onCreate(): Promise<void> {
if (!apiKey.value) {
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);
bucketsStore.setApiKey(cleanAPIKey.secret);
}
const now = new Date();
@ -246,10 +246,10 @@ async function onCreate(): Promise<void> {
const accessGrant = accessGrantEvent.data.value;
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);
const creds: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
bucketsStore.setEdgeCredentialsForCreate(creds);
await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
await bucketsStore.getBuckets(1, projectID);
analytics.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
closeModal();
@ -310,7 +310,7 @@ onMounted(async (): Promise<void> => {
setWorker();
try {
await store.dispatch(BUCKET_ACTIONS.FETCH_ALL_BUCKET_NAMES);
await bucketsStore.getAllBucketsNames(store.getters.selectedProject.id);
bucketName.value = allBucketNames.value.length > 0 ? '' : 'demo-bucket';
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BUCKET_CREATION_NAME_STEP);

5
web/satellite/src/components/modals/CreateProjectModal.vue
View File

@ -68,17 +68,18 @@ import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
@ -150,7 +151,7 @@ async function onCreateProjectClick(): Promise<void> {
isLoading.value = false;
closeModal();
store.commit(OBJECTS_MUTATIONS.CLEAR);
bucketsStore.clearS3Data();
appStore.updateActiveModal(MODALS.createProjectPassphrase);
analytics.pageVisit(RouteConfig.ProjectDashboard.path);

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

@ -31,17 +31,15 @@
<script setup lang="ts">
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 { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
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 { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -49,6 +47,7 @@ import VInput from '@/components/common/VInput.vue';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
@ -62,7 +61,7 @@ const isLoading = ref<boolean>(false);
* Returns apiKey from store.
*/
const apiKey = computed((): string => {
return store.state.objectsModule.apiKey;
return bucketsStore.state.apiKey;
});
/**
@ -84,7 +83,7 @@ async function onDelete(): Promise<void> {
if (!apiKey.value) {
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);
bucketsStore.setApiKey(cleanAPIKey.secret);
}
const now = new Date();
@ -134,9 +133,9 @@ async function onDelete(): Promise<void> {
const accessGrant = accessGrantEvent.data.value;
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);
const edgeCredentials: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
bucketsStore.setEdgeCredentialsForDelete(edgeCredentials);
await bucketsStore.deleteBucket(name.value);
analytics.eventTriggered(AnalyticsEvent.BUCKET_DELETED);
await fetchBuckets();
} catch (error) {
@ -154,7 +153,7 @@ async function onDelete(): Promise<void> {
*/
async function fetchBuckets(page = 1): Promise<void> {
try {
await store.dispatch(BUCKET_ACTIONS.FETCH, page);
await bucketsStore.getBuckets(page, store.getters.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
}

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

@ -41,12 +41,12 @@
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from '@/router';
import { useRouter, useStore } from '@/utils/hooks';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
@ -54,8 +54,8 @@ import VButton from '@/components/common/VButton.vue';
import EnterPassphraseIcon from '@/../static/images/buckets/openBucket.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -75,8 +75,8 @@ function onContinue(): void {
return;
}
store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, passphrase.value);
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
bucketsStore.setPassphrase(passphrase.value);
bucketsStore.setPromptForPassphrase(false);
closeModal();
}

7
web/satellite/src/components/modals/NewCreateProjectModal.vue
View File

@ -83,12 +83,12 @@ import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -97,6 +97,7 @@ import VButton from '@/components/common/VButton.vue';
import BlueBoxIcon from '@/../static/images/common/blueBox.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
@ -172,7 +173,7 @@ async function onCreateProjectClick(): Promise<void> {
isLoading.value = false;
closeModal();
store.commit(OBJECTS_MUTATIONS.CLEAR);
bucketsStore.clearS3Data();
if (usersStore.shouldOnboard && appStore.state.config.allProjectsDashboard) {
analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
@ -191,7 +192,7 @@ async function selectCreatedProject() {
LocalData.setSelectedProjectId(createdProjectId.value);
pmStore.setSearchQuery('');
store.commit(OBJECTS_MUTATIONS.CLEAR);
bucketsStore.clearS3Data();
}
/**

17
web/satellite/src/components/modals/OpenBucketModal.vue
View File

@ -54,13 +54,13 @@
import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { OBJECTS_ACTIONS, OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { Bucket } from '@/types/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
@ -69,6 +69,7 @@ import VButton from '@/components/common/VButton.vue';
import OpenBucketIcon from '@/../static/images/buckets/openBucket.svg';
import OpenWarningIcon from '@/../static/images/objects/openWarning.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
@ -86,14 +87,14 @@ const isWarningState = ref<boolean>(false);
* Returns chosen bucket name from store.
*/
const bucketName = computed((): string => {
return store.state.objectsModule.fileComponentBucketName;
return bucketsStore.state.fileComponentBucketName;
});
/**
* Returns selected bucket name object count.
*/
const bucketObjectCount = computed((): number => {
const data: Bucket | undefined = store.state.bucketUsageModule.page.buckets.find(
const data: Bucket | undefined = bucketsStore.state.page.buckets.find(
(bucket: Bucket) => bucket.name === bucketName.value,
);
@ -107,7 +108,7 @@ async function onContinue(): Promise<void> {
if (isLoading.value) return;
if (isWarningState.value) {
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
bucketsStore.setPromptForPassphrase(false);
closeModal();
analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
@ -126,15 +127,15 @@ async function onContinue(): Promise<void> {
isLoading.value = true;
try {
store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, passphrase.value);
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
const count: number = await store.dispatch(OBJECTS_ACTIONS.GET_OBJECTS_COUNT, bucketName.value);
bucketsStore.setPassphrase(passphrase.value);
await bucketsStore.setS3Client(store.getters.selectedProject.id);
const count: number = await bucketsStore.getObjectsCount(bucketName.value);
if (bucketObjectCount.value > count && bucketObjectCount.value <= NUMBER_OF_DISPLAYED_OBJECTS) {
isWarningState.value = true;
isLoading.value = false;
return;
}
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
bucketsStore.setPromptForPassphrase(false);
isLoading.value = false;
closeModal();

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

@ -49,6 +49,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -62,6 +63,7 @@ enum ButtonStates {
Copied,
}
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
@ -76,14 +78,14 @@ const copyButtonState = ref<ButtonStates>(ButtonStates.Copy);
* Returns chosen bucket name from store.
*/
const bucketName = computed((): string => {
return store.state.objectsModule.fileComponentBucketName;
return bucketsStore.state.fileComponentBucketName;
});
/**
* Returns passphrase from store.
*/
const passphrase = computed((): string => {
return store.state.objectsModule.passphrase;
return bucketsStore.state.passphrase;
});
/**

17
web/satellite/src/components/modals/createProjectPassphrase/CreateProjectPassphraseModal.vue
View File

@ -60,13 +60,12 @@
import { computed, reactive, ref } from 'vue';
import { generateMnemonic } from 'bip39';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { RouteConfig } from '@/router';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -89,8 +88,8 @@ enum CreatePassphraseOption {
Enter = 'Enter',
}
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -186,15 +185,11 @@ async function onContinue(): Promise<void> {
return;
}
try {
store.commit(OBJECTS_MUTATIONS.SET_GATEWAY_CREDENTIALS, new EdgeCredentials());
store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, passphrase.value);
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
bucketsStore.setEdgeCredentials(new EdgeCredentials());
bucketsStore.setPassphrase(passphrase.value);
bucketsStore.setPromptForPassphrase(false);
activeStep.value = CreateProjectPassphraseStep.Success;
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_LEVEL_PASSPHRASE_MODAL);
}
return;
}

8
web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue
View File

@ -27,10 +27,10 @@
</template>
<script setup lang="ts">
import { useNotify, useStore } from '@/utils/hooks';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { useNotify } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VButton from '@/components/common/VButton.vue';
@ -40,15 +40,15 @@ const props = withDefaults(defineProps<{
onCancel: () => () => {},
});
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
/**
* Clears passphrase and edge credentials.
*/
function onClear(): void {
store.commit(OBJECTS_MUTATIONS.CLEAR);
bucketsStore.clearS3Data();
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
notify.success('Passphrase was cleared successfully');
}

17
web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue
View File

@ -38,12 +38,11 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useNotify, useStore } from '@/utils/hooks';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
@ -54,8 +53,8 @@ const props = withDefaults(defineProps<{
onCancel: () => () => {},
});
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
const passphrase = ref<string>('');
@ -84,16 +83,12 @@ async function onSwitch(): Promise<void> {
return;
}
try {
store.commit(OBJECTS_MUTATIONS.SET_GATEWAY_CREDENTIALS, new EdgeCredentials());
store.commit(OBJECTS_MUTATIONS.SET_PASSPHRASE, passphrase.value);
store.commit(OBJECTS_MUTATIONS.SET_PROMPT_FOR_PASSPHRASE, false);
bucketsStore.setEdgeCredentials(new EdgeCredentials());
bucketsStore.setPassphrase(passphrase.value);
bucketsStore.setPromptForPassphrase(false);
notify.success('Passphrase was switched successfully');
appStore.updateActiveModal(MODALS.manageProjectPassphrase);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.SWITCH_PROJECT_LEVEL_PASSPHRASE_MODAL);
}
}
</script>

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

@ -55,8 +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 { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
@ -67,6 +65,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -78,6 +77,7 @@ import LogoutIcon from '@/../static/images/navigation/logout.svg';
import TierBadgeFree from '@/../static/images/navigation/tierBadgeFree.svg';
import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
@ -159,8 +159,7 @@ async function onLogout(): Promise<void> {
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
bucketsStore.clear(),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),

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

@ -164,8 +164,6 @@ import { computed, ref } from 'vue';
import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects';
@ -181,6 +179,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -218,6 +217,7 @@ const navigation: NavigationLink[] = [
RouteConfig.Users.withIcon(UsersIcon),
];
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
@ -381,7 +381,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
isProjectDropdownShown.value = false;
if (isBucketsView.value) {
await store.dispatch(OBJECTS_ACTIONS.CLEAR);
bucketsStore.clear();
analytics.pageVisit(RouteConfig.Buckets.path);
await router.push(RouteConfig.Buckets.path).catch(() => {return; });
}
@ -389,10 +389,10 @@ async function onProjectSelected(projectID: string): Promise<void> {
try {
await Promise.all([
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id),
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),
pmStore.getProjectMembers(FIRST_PAGE, projectID),
agStore.getAccessGrants(FIRST_PAGE, projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID),
]);
} catch (error) {
await notify.error(`Unable to select project. ${error.message}`, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
@ -471,8 +471,7 @@ async function onLogout(): Promise<void> {
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
bucketsStore.clear(),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),

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

@ -66,10 +66,8 @@ import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { Project } from '@/types/projects';
import { User } from '@/types/users';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
@ -77,6 +75,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import VLoader from '@/components/common/VLoader.vue';
@ -87,6 +86,7 @@ import PassphraseIcon from '@/../static/images/navigation/passphrase.svg';
import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
@ -202,10 +202,14 @@ async function onProjectSelected(projectID: string): Promise<void> {
pmStore.setSearchQuery('');
closeDropdown();
store.commit(OBJECTS_MUTATIONS.CLEAR);
bucketsStore.clearS3Data();
appStore.updateActiveModal(MODALS.enterPassphrase);
if (isBucketsView.value) {
if (router.currentRoute.name === RouteConfig.BucketsManagement.name) {
await bucketsStore.getBuckets(FIRST_PAGE, projectID);
}
await router.push(RouteConfig.Buckets.path).catch(() => {return; });
return;
@ -220,8 +224,8 @@ async function onProjectSelected(projectID: string): Promise<void> {
await Promise.all([
store.dispatch(PROJECTS_ACTIONS.FETCH_DAILY_DATA, { since: past, before: now }),
billingStore.getProjectUsageAndChargesCurrentRollup(),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id),
store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
]);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION);

15
web/satellite/src/components/objects/BucketDetails.vue
View File

@ -26,19 +26,20 @@ import { computed, onBeforeMount, reactive, ref } from 'vue';
import { Bucket } from '@/types/buckets';
import { RouteConfig } from '@/router';
import { MONTHS_NAMES } from '@/utils/constants/date';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue';
import VOverallLoader from '@/components/common/VOverallLoader.vue';
import ArrowRightIcon from '@/../static/images/common/arrowRight.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -53,21 +54,23 @@ const isLoading = ref<boolean>(false);
* Returns condition if user has to be prompt for passphrase from store.
*/
const promptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
return bucketsStore.state.promptForPassphrase;
});
/**
* Returns edge credentials from store.
*/
const edgeCredentials = computed((): EdgeCredentials => {
return store.state.objectsModule.gatewayCredentials;
return bucketsStore.state.edgeCredentials;
});
/**
* Bucket from store found by router prop.
*/
const bucket = computed((): Bucket => {
const data = store.state.bucketUsageModule.page.buckets.find((bucket: Bucket) => bucket.name === router.currentRoute.params.bucketName);
const data = bucketsStore.state.page.buckets.find(
(bucket: Bucket) => bucket.name === router.currentRoute.params.bucketName,
);
if (!data) {
redirectToBucketsPage();
@ -90,14 +93,14 @@ function redirectToBucketsPage(): void {
* Holds on bucket click. Proceeds to file browser.
*/
async function openBucket(): Promise<void> {
await store.dispatch(OBJECTS_ACTIONS.SET_FILE_COMPONENT_BUCKET_NAME, bucket.value.name);
bucketsStore.setFileComponentBucketName(bucket.value.name);
if (router.currentRoute.params.backRoute === RouteConfig.UploadFileChildren.name || !promptForPassphrase.value) {
if (!edgeCredentials.value.accessKeyId) {
isLoading.value = true;
try {
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
await bucketsStore.setS3Client(store.getters.selectedProject.id);
isLoading.value = false;
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BUCKET_DETAILS_PAGE);

24
web/satellite/src/components/objects/BucketsTable.vue
View File

@ -69,8 +69,6 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { BucketPage } from '@/types/buckets';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -79,6 +77,7 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { MODALS } from '@/utils/constants/appStatePopUps';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VTable from '@/components/common/VTable.vue';
import BucketItem from '@/components/objects/BucketItem.vue';
@ -101,6 +100,7 @@ const overallLoading = ref<boolean>(false);
const searchLoading = ref<boolean>(false);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -110,14 +110,14 @@ const router = useRouter();
* Returns fetched buckets page from store.
*/
const bucketsPage = computed((): BucketPage => {
return store.state.bucketUsageModule.page;
return bucketsStore.state.page;
});
/**
* Returns buckets search query.
*/
const searchQuery = computed((): string => {
return store.getters.cursor.search;
return bucketsStore.state.cursor.search;
});
/**
@ -145,14 +145,14 @@ const isTableShown = computed((): boolean => {
* Returns condition if user has to be prompt for passphrase from store.
*/
const promptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
return bucketsStore.state.promptForPassphrase;
});
/**
* Returns edge credentials from store.
*/
const edgeCredentials = computed((): EdgeCredentials => {
return store.state.objectsModule.gatewayCredentials;
return bucketsStore.state.edgeCredentials;
});
/**
@ -167,7 +167,7 @@ function onCreateBucketClick(): void {
*/
async function fetchBuckets(page = 1): Promise<void> {
try {
await store.dispatch(BUCKET_ACTIONS.FETCH, page);
await bucketsStore.getBuckets(page, store.getters.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.BUCKET_TABLE);
}
@ -177,13 +177,13 @@ async function fetchBuckets(page = 1): Promise<void> {
* Handles bucket search functionality.
*/
async function searchBuckets(searchQuery: string): Promise<void> {
await store.dispatch(BUCKET_ACTIONS.SET_SEARCH, searchQuery);
bucketsStore.setBucketsSearch(searchQuery);
await analytics.eventTriggered(AnalyticsEvent.SEARCH_BUCKETS);
searchLoading.value = true;
try {
await store.dispatch(BUCKET_ACTIONS.FETCH, 1);
await bucketsStore.getBuckets(1, store.getters.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch buckets: ${error.message}`, AnalyticsErrorEventSource.BUCKET_TABLE);
}
@ -208,13 +208,13 @@ function openDropdown(key: number): void {
* Holds on bucket click. Proceeds to file browser.
*/
async function openBucket(bucketName: string): Promise<void> {
store.dispatch(OBJECTS_ACTIONS.SET_FILE_COMPONENT_BUCKET_NAME, bucketName);
bucketsStore.setFileComponentBucketName(bucketName);
if (!promptForPassphrase.value) {
if (!edgeCredentials.value.accessKeyId) {
overallLoading.value = true;
try {
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
await bucketsStore.setS3Client(store.getters.selectedProject.id);
overallLoading.value = false;
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BUCKET_TABLE);
@ -233,7 +233,7 @@ async function openBucket(bucketName: string): Promise<void> {
}
onBeforeUnmount(() => {
store.dispatch(BUCKET_ACTIONS.SET_SEARCH, '');
bucketsStore.setBucketsSearch('');
});
</script>

12
web/satellite/src/components/objects/BucketsView.vue
View File

@ -21,21 +21,21 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { LocalData } from '@/utils/localData';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { BucketPage } from '@/types/buckets';
import { AnalyticsHttpApi } from '@/api/analytics';
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 { useBucketsStore } from '@/store/modules/bucketsStore';
import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
import BucketsTable from '@/components/objects/BucketsTable.vue';
import WhitePlusIcon from '@/../static/images/common/plusWhite.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const notify = useNotify();
@ -49,14 +49,14 @@ const isServerSideEncryptionBannerHidden = ref<boolean>(true);
* Returns fetched buckets page from store.
*/
const bucketsPage = computed((): BucketPage => {
return store.state.bucketUsageModule.page;
return bucketsStore.state.page;
});
/**
* Indicates if user should be prompt for passphrase.
*/
const promptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
return bucketsStore.state.promptForPassphrase;
});
/**
@ -96,7 +96,7 @@ async function setBucketsView(): Promise<void> {
*/
async function fetchBuckets(page = 1): Promise<void> {
try {
await store.dispatch(BUCKET_ACTIONS.FETCH, page);
await bucketsStore.getBuckets(page, selectedProjectID.value);
} catch (error) {
await notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.BUCKET_PAGE);
}
@ -129,7 +129,7 @@ onMounted(async (): Promise<void> => {
watch(selectedProjectID, async () => {
isLoading.value = true;
await store.dispatch(OBJECTS_ACTIONS.CLEAR);
bucketsStore.clear();
await setBucketsView();
});
</script>

7
web/satellite/src/components/objects/UploadCancelPopup.vue
View File

@ -31,15 +31,16 @@ import { computed } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useRouter, useStore } from '@/utils/hooks';
import { useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VButton from '@/components/common/VButton.vue';
import WarningIcon from '@/../static/images/objects/cancelWarning.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -48,7 +49,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
* Returns leave attempt's route path from store.
*/
const leaveRoute = computed((): string => {
return store.state.objectsModule.leaveRoute;
return bucketsStore.state.leaveRoute;
});
/**

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

@ -20,15 +20,15 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { BucketPage } from '@/types/buckets';
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 { useBucketsStore } from '@/store/modules/bucketsStore';
import FileBrowser from '@/components/browser/FileBrowser.vue';
import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
@ -50,35 +50,35 @@ const isCancelUploadPopupVisible = computed((): boolean => {
* Returns passphrase from store.
*/
const passphrase = computed((): string => {
return store.state.objectsModule.passphrase;
return bucketsStore.state.passphrase;
});
/**
* Returns apiKey from store.
*/
const apiKey = computed((): string => {
return store.state.objectsModule.apiKey;
return bucketsStore.state.apiKey;
});
/**
* Returns bucket name from store.
*/
const bucket = computed((): string => {
return store.state.objectsModule.fileComponentBucketName;
return bucketsStore.state.fileComponentBucketName;
});
/**
* Returns current bucket page from store.
*/
const bucketPage = computed((): BucketPage => {
return store.state.bucketUsageModule.page;
return bucketsStore.state.page;
});
/**
* Returns edge credentials from store.
*/
const edgeCredentials = computed((): EdgeCredentials => {
return store.state.objectsModule.gatewayCredentials;
return bucketsStore.state.edgeCredentials;
});
/**
@ -231,8 +231,10 @@ watch(passphrase, async () => {
return;
}
const projectID = store.getters.selectedProject.id;
try {
await store.dispatch(OBJECTS_ACTIONS.SET_S3_CLIENT);
await bucketsStore.setS3Client(projectID);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.UPLOAD_FILE_VIEW);
return;
@ -246,7 +248,7 @@ watch(passphrase, async () => {
});
try {
await Promise.all([
store.dispatch(BUCKET_ACTIONS.FETCH, bucketPage.value.currentPage),
bucketsStore.getBuckets(bucketPage.value.currentPage, projectID),
store.dispatch('files/list', ''),
store.dispatch('files/getObjectCount'),
]);

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

@ -42,12 +42,12 @@
import { computed, onMounted, reactive, ref } from 'vue';
import { RouteConfig } from '@/router';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
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 { useBucketsStore } from '@/store/modules/bucketsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import PermissionsSelect from '@/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue';
@ -58,6 +58,7 @@ import DurationSelection from '@/components/onboardingTour/steps/cliFlow/permiss
import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
@ -235,7 +236,7 @@ onMounted(async (): Promise<void> => {
setWorker();
try {
await store.dispatch(BUCKET_ACTIONS.FETCH_ALL_BUCKET_NAMES);
await bucketsStore.getAllBucketsNames(store.getters.selectedProject.id);
areBucketNamesFetching.value = false;
} catch (error) {

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

@ -47,16 +47,16 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import SelectionIcon from '@/../static/images/accessGrants/selection.svg';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const bucketSearch = ref<string>('');
@ -65,7 +65,7 @@ const bucketSearch = ref<string>('');
*/
const bucketsList = computed((): string[] => {
const NON_EXIST_INDEX = -1;
const buckets: string[] = store.state.bucketUsageModule.allBucketNames;
const buckets: string[] = bucketsStore.state.allBucketNames;
return buckets.filter((name: string) => {
return name.indexOf(bucketSearch.value.toLowerCase()) !== NON_EXIST_INDEX;

6
web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
View File

@ -69,6 +69,7 @@ import { ProjectLimits } from '@/types/projects';
import { RouteConfig } from '@/router';
import { LocalData } from '@/utils/localData';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -79,6 +80,7 @@ const props = withDefaults(defineProps<{
loading: false,
});
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const router = useRouter();
@ -87,7 +89,7 @@ const router = useRouter();
* Indicates if user should be prompt for passphrase.
*/
const promptForPassphrase = computed((): boolean => {
return store.state.objectsModule.promptForPassphrase;
return bucketsStore.state.promptForPassphrase;
});
/**
@ -113,7 +115,7 @@ const limits = computed((): ProjectLimits => {
* Returns fetched buckets page from store.
*/
const bucketsPage = computed((): BucketPage => {
return store.state.bucketUsageModule.page;
return bucketsStore.state.page;
});
/**

10
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -156,7 +156,6 @@
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { RouteConfig } from '@/router';
import { DataStamp, Project, ProjectLimits } from '@/types/projects';
import { Dimensions, Size } from '@/utils/bytesSize';
@ -169,6 +168,7 @@ import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@ -185,6 +185,7 @@ import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
import NewProjectIcon from '@/../static/images/project/newProject.svg';
import InfoIcon from '@/../static/images/project/infoIcon.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
@ -385,7 +386,8 @@ function formattedValue(value: Size): string {
onMounted(async (): Promise<void> => {
isServerSideEncryptionBannerHidden.value = LocalData.getServerSideEncryptionBannerHidden();
if (!store.getters.selectedProject.id) {
const projectID = store.getters.selectedProject.id;
if (!projectID) {
if (appStore.state.config.allProjectsDashboard) {
await router.push(RouteConfig.AllProjectsDashboard.path);
return;
@ -406,7 +408,7 @@ onMounted(async (): Promise<void> => {
const past = new Date();
past.setDate(past.getDate() - 30);
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID);
if (hasJustLoggedIn.value) {
if (limits.value.objectCount > 0) {
appStore.updateActiveModal(MODALS.enterPassphrase);
@ -431,7 +433,7 @@ onMounted(async (): Promise<void> => {
const FIRST_PAGE = 1;
try {
await store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE);
await bucketsStore.getBuckets(FIRST_PAGE, projectID);
areBucketsFetching.value = false;
} catch (error) {

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

@ -49,7 +49,6 @@
import { computed, onMounted, ref } from 'vue';
import { RouteConfig } from '@/router';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project, ProjectsPage } from '@/types/projects';
import { LocalData } from '@/utils/localData';
@ -63,6 +62,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue';
@ -76,6 +76,7 @@ const {
const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
@ -141,12 +142,14 @@ async function onProjectSelected(project: Project): Promise<void> {
pmStore.setSearchQuery('');
try {
const projectID = store.getters.selectedProject.id;
await Promise.all([
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id),
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),
pmStore.getProjectMembers(FIRST_PAGE, projectID),
agStore.getAccessGrants(FIRST_PAGE, projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID),
]);
analytics.pageVisit(RouteConfig.EditProjectDetails.path);

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

@ -114,7 +114,7 @@ export abstract class RouteConfig {
public static ShareObject = new NavigationLink('share-object', 'Onboarding Share Object');
public static SuccessScreen = new NavigationLink('success', 'Onboarding Success Screen');
// objects child paths.
// buckets child paths.
public static BucketsManagement = new NavigationLink('management', 'Buckets Management');
public static BucketsDetails = new NavigationLink('details', 'Bucket Details');
public static UploadFile = new NavigationLink('upload/', 'Objects Upload');

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

@ -5,12 +5,9 @@ import Vue from 'vue';
import Vuex from 'vuex';
import { RouteRecord } from 'vue-router';
import { BucketsApiGql } from '@/api/buckets';
import { ProjectsApiGql } from '@/api/projects';
import { notProjectRelatedRoutes, RouteConfig, router } from '@/router';
import { BucketsState, makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule, NotificationsState } from '@/store/modules/notifications';
import { makeObjectsModule, ObjectsState } from '@/store/modules/objects';
import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects';
import { FilesState, makeFilesModule } from '@/store/modules/files';
import { NavigationLink } from '@/types/navigation';
@ -18,14 +15,11 @@ import { useAppStore } from '@/store/modules/appStore';
Vue.use(Vuex);
const bucketsApi = new BucketsApiGql();
const projectsApi = new ProjectsApiGql();
export interface ModulesState {
notificationsModule: NotificationsState;
projectsModule: ProjectsState;
objectsModule: ObjectsState;
bucketUsageModule: BucketsState;
files: FilesState;
}
@ -34,8 +28,6 @@ export const store = new Vuex.Store<ModulesState>({
modules: {
notificationsModule: makeNotificationsModule(),
projectsModule: makeProjectsModule(projectsApi),
bucketUsageModule: makeBucketsModule(bucketsApi),
objectsModule: makeObjectsModule(),
files: makeFilesModule(),
},
});

113
web/satellite/src/store/modules/buckets.ts
View File

@ -1,113 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { Bucket, BucketCursor, BucketPage, BucketsApi } from '@/types/buckets';
import { StoreModule } from '@/types/store';
export const BUCKET_ACTIONS = {
FETCH: 'setBuckets',
FETCH_ALL_BUCKET_NAMES: 'getAllBucketNames',
SET_SEARCH: 'setBucketSearch',
CLEAR: 'clearBuckets',
};
export const BUCKET_MUTATIONS = {
SET: 'setBuckets',
SET_ALL_BUCKET_NAMES: 'setAllBucketNames',
SET_SEARCH: 'setBucketSearch',
SET_PAGE: 'setBucketPage',
CLEAR: 'clearBuckets',
};
const {
FETCH,
FETCH_ALL_BUCKET_NAMES,
} = BUCKET_ACTIONS;
const {
SET,
SET_ALL_BUCKET_NAMES,
SET_PAGE,
SET_SEARCH,
CLEAR,
} = BUCKET_MUTATIONS;
const bucketPageLimit = 7;
const firstPage = 1;
export class BucketsState {
public allBucketNames: string[] = [];
public cursor: BucketCursor = { limit: bucketPageLimit, search: '', page: firstPage };
public page: BucketPage = { buckets: new Array<Bucket>(), currentPage: 1, pageCount: 1, offset: 0, limit: bucketPageLimit, search: '', totalCount: 0 };
}
interface BucketsContext {
state: BucketsState
commit: (string, ...unknown) => void
rootGetters: {
selectedProject: {
id: string
}
}
}
/**
* creates buckets module with all dependencies
*
* @param api - buckets api
*/
export function makeBucketsModule(api: BucketsApi): StoreModule<BucketsState, BucketsContext> {
return {
state: new BucketsState(),
mutations: {
[SET](state: BucketsState, page: BucketPage) {
state.page = page;
},
[SET_ALL_BUCKET_NAMES](state: BucketsState, allBucketNames: string[]) {
state.allBucketNames = allBucketNames;
},
[SET_PAGE](state: BucketsState, page: number) {
state.cursor.page = page;
},
[SET_SEARCH](state: BucketsState, search: string) {
state.cursor.search = search;
},
[CLEAR](state: BucketsState) {
state.allBucketNames = [];
state.cursor = new BucketCursor('', bucketPageLimit, firstPage);
state.page = new BucketPage([], '', bucketPageLimit, 0, 1, 1, 0);
},
},
actions: {
[FETCH]: async function({ commit, rootGetters, state }: BucketsContext, page: number): Promise<BucketPage> {
const projectID = rootGetters.selectedProject.id;
const before = new Date();
state.cursor.page = page;
commit(SET_PAGE, page);
const result: BucketPage = await api.get(projectID, before, state.cursor);
commit(SET, result);
return result;
},
[FETCH_ALL_BUCKET_NAMES]: async function({ commit, rootGetters }: BucketsContext): Promise<string[]> {
const result: string[] = await api.getAllBucketNames(rootGetters.selectedProject.id);
commit(SET_ALL_BUCKET_NAMES, result);
return result;
},
[BUCKET_ACTIONS.SET_SEARCH]: function({ commit }: BucketsContext, search: string) {
commit(SET_SEARCH, search);
},
[BUCKET_ACTIONS.CLEAR]: function({ commit }: BucketsContext) {
commit(CLEAR);
},
},
getters: {
page: (state: BucketsState): BucketPage => state.page,
cursor: (state: BucketsState): BucketCursor => state.cursor,
},
};
}

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

@ -11,7 +11,6 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import { useAppStore } from '@/store/modules/appStore';
import { MODALS } from '@/utils/constants/appStatePopUps';
const BUCKETS_PAGE_LIMIT = 7;
const FIRST_PAGE = 1;
@ -51,26 +50,18 @@ export const useBucketsStore = defineStore('buckets', () => {
const api: BucketsApi = new BucketsApiGql();
const appStore = useAppStore();
function setBucketsSearch(search: string): void {
state.cursor.search = search;
}
function clearBucketsState(): void {
state.allBucketNames = [];
state.cursor = new BucketCursor('', BUCKETS_PAGE_LIMIT, FIRST_PAGE);
state.page = new BucketPage([], '', BUCKETS_PAGE_LIMIT, 0, 1, 1, 0);
}
async function fetchBuckets(projectID: string, page: number): Promise<void> {
async function getBuckets(page: number, projectID: string): Promise<void> {
const before = new Date();
state.cursor.page = page;
state.page = await api.get(projectID, before, state.cursor);
}
async function fetchAllBucketsNames(projectID: string): Promise<void> {
async function getAllBucketsNames(projectID: string): Promise<void> {
state.allBucketNames = await api.getAllBucketNames(projectID);
}
@ -120,8 +111,8 @@ export const useBucketsStore = defineStore('buckets', () => {
const agStore = useAccessGrantsStore();
if (!state.apiKey) {
await agStore.deleteAccessGrantByNameAndProjectID(projectID, FILE_BROWSER_AG_NAME);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(projectID, FILE_BROWSER_AG_NAME);
await agStore.deleteAccessGrantByNameAndProjectID(FILE_BROWSER_AG_NAME, projectID);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(FILE_BROWSER_AG_NAME, projectID);
setApiKey(cleanAPIKey.secret);
}
@ -153,9 +144,10 @@ export const useBucketsStore = defineStore('buckets', () => {
throw new Error(grantEvent.data.error);
}
const { getProjectSalt } = useProjectsStore();
const projectsStore = useProjectsStore();
const appStore = useAppStore();
const salt = await getProjectSalt(projectID);
const salt = await projectsStore.getProjectSalt(projectID);
const satelliteNodeURL: string = appStore.state.config.satelliteNodeURL;
if (!state.passphrase) {
@ -224,7 +216,7 @@ export const useBucketsStore = defineStore('buckets', () => {
return response.KeyCount === undefined ? 0 : response.KeyCount;
}
function clearObjects(): void {
function clearS3Data(): void {
state.apiKey = '';
state.passphrase = '';
state.promptForPassphrase = true;
@ -250,23 +242,31 @@ export const useBucketsStore = defineStore('buckets', () => {
state.leaveRoute = '';
}
function checkOngoingUploads(uploadingLength: number, leaveRoute: string): boolean {
if (!uploadingLength) {
return false;
}
state.leaveRoute = leaveRoute;
appStore.updateActiveModal(MODALS.uploadCancelPopup);
return true;
function clear(): void {
state.allBucketNames = [];
state.cursor = new BucketCursor('', BUCKETS_PAGE_LIMIT, FIRST_PAGE);
state.page = new BucketPage([], '', BUCKETS_PAGE_LIMIT, 0, 1, 1, 0);
clearS3Data();
}
return {
bucketsState: state,
state,
setBucketsSearch,
clearBucketsState,
fetchBuckets,
fetchAllBucketsNames,
getBuckets,
getAllBucketsNames,
setPromptForPassphrase,
setEdgeCredentials,
setEdgeCredentialsForDelete,
setEdgeCredentialsForCreate,
setS3Client,
setPassphrase,
setApiKey,
setFileComponentBucketName,
createBucket,
createBucketWithNoPassphrase,
deleteBucket,
getObjectsCount,
clearS3Data,
clear,
};
});

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

@ -1,332 +0,0 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
import S3, { Bucket } from 'aws-sdk/clients/s3';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { FilesState } from '@/store/modules/files';
import { StoreModule } from '@/types/store';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
export const OBJECTS_ACTIONS = {
CLEAR: 'clearObjects',
SET_GATEWAY_CREDENTIALS: 'setGatewayCredentials',
SET_GATEWAY_CREDENTIALS_FOR_DELETE: 'setGatewayCredentialsForDelete',
SET_GATEWAY_CREDENTIALS_FOR_CREATE: 'setGatewayCredentialsForCreate',
SET_API_KEY: 'setApiKey',
SET_S3_CLIENT: 'setS3Client',
SET_PASSPHRASE: 'setPassphrase',
SET_FILE_COMPONENT_BUCKET_NAME: 'setFileComponentBucketName',
FETCH_BUCKETS: 'fetchBuckets',
CREATE_BUCKET: 'createBucket',
CREATE_BUCKET_WITH_NO_PASSPHRASE: 'createBucketWithNoPassphrase',
DELETE_BUCKET: 'deleteBucket',
GET_OBJECTS_COUNT: 'getObjectsCount',
CHECK_ONGOING_UPLOADS: 'checkOngoingUploads',
};
export const OBJECTS_MUTATIONS = {
SET_GATEWAY_CREDENTIALS: 'SET_GATEWAY_CREDENTIALS',
SET_GATEWAY_CREDENTIALS_FOR_DELETE: 'SET_GATEWAY_CREDENTIALS_FOR_DELETE',
SET_GATEWAY_CREDENTIALS_FOR_CREATE: 'SET_GATEWAY_CREDENTIALS_FOR_CREATE',
SET_API_KEY: 'SET_API_KEY',
CLEAR: 'CLEAR_OBJECTS',
SET_S3_CLIENT: 'SET_S3_CLIENT',
SET_S3_CLIENT_FOR_DELETE: 'SET_S3_CLIENT_FOR_DELETE',
SET_S3_CLIENT_FOR_CREATE: 'SET_S3_CLIENT_FOR_CREATE',
SET_BUCKETS: 'SET_BUCKETS',
SET_FILE_COMPONENT_BUCKET_NAME: 'SET_FILE_COMPONENT_BUCKET_NAME',
SET_PASSPHRASE: 'SET_PASSPHRASE',
SET_PROMPT_FOR_PASSPHRASE: 'SET_PROMPT_FOR_PASSPHRASE',
SET_LEAVE_ROUTE: 'SET_LEAVE_ROUTE',
};
const {
CLEAR,
SET_API_KEY,
SET_GATEWAY_CREDENTIALS,
SET_GATEWAY_CREDENTIALS_FOR_DELETE,
SET_GATEWAY_CREDENTIALS_FOR_CREATE,
SET_S3_CLIENT,
SET_S3_CLIENT_FOR_DELETE,
SET_S3_CLIENT_FOR_CREATE,
SET_BUCKETS,
SET_PASSPHRASE,
SET_PROMPT_FOR_PASSPHRASE,
SET_FILE_COMPONENT_BUCKET_NAME,
SET_LEAVE_ROUTE,
} = OBJECTS_MUTATIONS;
export class ObjectsState {
public apiKey = '';
public gatewayCredentials: EdgeCredentials = new EdgeCredentials();
public gatewayCredentialsForDelete: EdgeCredentials = new EdgeCredentials();
public gatewayCredentialsForCreate: EdgeCredentials = new EdgeCredentials();
public s3Client: S3 = new S3({
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
});
public s3ClientForDelete: S3 = new S3({
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
});
public s3ClientForCreate: S3 = new S3({
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
});
public bucketsList: Bucket[] = [];
public passphrase = '';
public promptForPassphrase = true;
public fileComponentBucketName = '';
public leaveRoute = '';
}
interface ObjectsContext {
state: ObjectsState
commit: (string, ...unknown) => void
dispatch: (string, ...unknown) => Promise<any> // eslint-disable-line @typescript-eslint/no-explicit-any
rootState: {
files: FilesState
}
rootGetters: {
worker: Worker,
selectedProject: {
id: string,
}
}
}
export const FILE_BROWSER_AG_NAME = 'Web file browser API key';
/**
* Creates objects module with all dependencies.
*/
export function makeObjectsModule(): StoreModule<ObjectsState, ObjectsContext> {
return {
state: new ObjectsState(),
mutations: {
[SET_API_KEY](state: ObjectsState, apiKey: string) {
state.apiKey = apiKey;
},
[SET_GATEWAY_CREDENTIALS](state: ObjectsState, credentials: EdgeCredentials) {
state.gatewayCredentials = credentials;
},
[SET_GATEWAY_CREDENTIALS_FOR_DELETE](state: ObjectsState, credentials: EdgeCredentials) {
state.gatewayCredentialsForDelete = credentials;
},
[SET_GATEWAY_CREDENTIALS_FOR_CREATE](state: ObjectsState, credentials: EdgeCredentials) {
state.gatewayCredentialsForCreate = credentials;
},
[SET_S3_CLIENT](state: ObjectsState) {
const s3Config = {
accessKeyId: state.gatewayCredentials.accessKeyId,
secretAccessKey: state.gatewayCredentials.secretKey,
endpoint: state.gatewayCredentials.endpoint,
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
};
state.s3Client = new S3(s3Config);
},
[SET_S3_CLIENT_FOR_DELETE](state: ObjectsState) {
const s3Config = {
accessKeyId: state.gatewayCredentialsForDelete.accessKeyId,
secretAccessKey: state.gatewayCredentialsForDelete.secretKey,
endpoint: state.gatewayCredentialsForDelete.endpoint,
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
};
state.s3ClientForDelete = new S3(s3Config);
},
[SET_S3_CLIENT_FOR_CREATE](state: ObjectsState) {
const s3Config = {
accessKeyId: state.gatewayCredentialsForCreate.accessKeyId,
secretAccessKey: state.gatewayCredentialsForCreate.secretKey,
endpoint: state.gatewayCredentialsForCreate.endpoint,
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
};
state.s3ClientForCreate = new S3(s3Config);
},
[SET_BUCKETS](state: ObjectsState, buckets: Bucket[]) {
state.bucketsList = buckets;
},
[SET_PASSPHRASE](state: ObjectsState, passphrase: string) {
state.passphrase = passphrase;
},
[SET_PROMPT_FOR_PASSPHRASE](state: ObjectsState, value: boolean) {
state.promptForPassphrase = value;
},
[SET_FILE_COMPONENT_BUCKET_NAME](state: ObjectsState, bucketName: string) {
state.fileComponentBucketName = bucketName;
},
[SET_LEAVE_ROUTE](state: ObjectsState, leaveRoute: string) {
state.leaveRoute = leaveRoute;
},
[CLEAR](state: ObjectsState) {
state.apiKey = '';
state.passphrase = '';
state.promptForPassphrase = true;
state.gatewayCredentials = new EdgeCredentials();
state.gatewayCredentialsForDelete = new EdgeCredentials();
state.gatewayCredentialsForCreate = new EdgeCredentials();
state.s3Client = new S3({
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
});
state.s3ClientForDelete = new S3({
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
});
state.s3ClientForCreate = new S3({
s3ForcePathStyle: true,
signatureVersion: 'v4',
httpOptions: { timeout: 0 },
});
state.bucketsList = [];
state.fileComponentBucketName = '';
state.leaveRoute = '';
},
},
actions: {
setApiKey: function({ commit }: ObjectsContext, apiKey: string): void {
commit(SET_API_KEY, apiKey);
},
setGatewayCredentials: function({ commit }: ObjectsContext, credentials: EdgeCredentials): void {
commit(SET_GATEWAY_CREDENTIALS, credentials);
},
setGatewayCredentialsForDelete: function({ commit }: ObjectsContext, credentials: EdgeCredentials): void {
commit(SET_GATEWAY_CREDENTIALS_FOR_DELETE, credentials);
commit(SET_S3_CLIENT_FOR_DELETE);
},
setGatewayCredentialsForCreate: function({ commit }: ObjectsContext, credentials: EdgeCredentials): void {
commit(SET_GATEWAY_CREDENTIALS_FOR_CREATE, credentials);
commit(SET_S3_CLIENT_FOR_CREATE);
},
setS3Client: async function({ commit, dispatch, state, rootGetters }: ObjectsContext): Promise<void> {
const agStore = useAccessGrantsStore();
if (!state.apiKey) {
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 = agStore.state.accessGrantsWebWorker;
if (!worker) {
throw new Error ('Worker is not set');
}
worker.onerror = (error: ErrorEvent) => {
throw new Error(error.message);
};
await worker.postMessage({
'type': 'SetPermission',
'isDownload': true,
'isUpload': true,
'isList': true,
'isDelete': true,
'notAfter': inThreeDays.toISOString(),
'buckets': [],
'apiKey': state.apiKey,
});
const grantEvent: MessageEvent = await new Promise(resolve => worker.onmessage = resolve);
if (grantEvent.data.error) {
throw new Error(grantEvent.data.error);
}
const salt = await dispatch(PROJECTS_ACTIONS.GET_SALT, rootGetters.selectedProject.id, { root: true });
const appStore = useAppStore();
const satelliteNodeURL: string = appStore.state.config.satelliteNodeURL;
if (!state.passphrase) {
throw new Error('Passphrase can\'t be empty');
}
worker.postMessage({
'type': 'GenerateAccess',
'apiKey': grantEvent.data.value,
'passphrase': state.passphrase,
'salt': salt,
'satelliteNodeURL': satelliteNodeURL,
});
const accessGrantEvent: MessageEvent = await new Promise(resolve => worker.onmessage = resolve);
if (accessGrantEvent.data.error) {
throw new Error(accessGrantEvent.data.error);
}
const accessGrant = accessGrantEvent.data.value;
const gatewayCredentials: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
commit(SET_GATEWAY_CREDENTIALS, gatewayCredentials);
commit(SET_S3_CLIENT);
},
setPassphrase: function({ commit }: ObjectsContext, passphrase: string): void {
commit(SET_PASSPHRASE, passphrase);
},
setFileComponentBucketName: function({ commit }: ObjectsContext, bucketName: string): void {
commit(SET_FILE_COMPONENT_BUCKET_NAME, bucketName);
},
fetchBuckets: async function(ctx): Promise<void> {
const result = await ctx.state.s3Client.listBuckets().promise();
ctx.commit(SET_BUCKETS, result.Buckets);
},
createBucket: async function(ctx, name: string): Promise<void> {
await ctx.state.s3Client.createBucket({
Bucket: name,
}).promise();
},
createBucketWithNoPassphrase: async function(ctx, name: string): Promise<void> {
await ctx.state.s3ClientForCreate.createBucket({
Bucket: name,
}).promise();
},
deleteBucket: async function(ctx, name: string): Promise<void> {
await ctx.state.s3ClientForDelete.deleteBucket({
Bucket: name,
}).promise();
},
getObjectsCount: async function(ctx, name: string): Promise<number> {
const response = await ctx.state.s3Client.listObjectsV2({
Bucket: name,
}).promise();
return response.KeyCount === undefined ? 0 : response.KeyCount;
},
clearObjects: function({ commit }: ObjectsContext): void {
commit(CLEAR);
},
checkOngoingUploads: function({ commit, dispatch, rootState }: ObjectsContext, leaveRoute: string): boolean {
if (!rootState.files.uploading.length) {
return false;
}
commit(SET_LEAVE_ROUTE, leaveRoute);
const appStore = useAppStore();
appStore.updateActiveModal(MODALS.uploadCancelPopup);
return true;
},
},
};
}

11
web/satellite/src/utils/constants/analyticsEventNames.ts
View File

@ -67,25 +67,15 @@ export enum AnalyticsErrorEventSource {
BILLING_COUPONS_TAB = 'Billing coupons tab',
BILLING_OVERVIEW_TAB = 'Billing overview tab',
BILLING_PAYMENT_METHODS_TAB = 'Billing payment methods tab',
BILLING_PAYMENT_METHODS = 'Billing payment methods',
BILLING_COUPON_AREA = 'Billing coupon area',
BILLING_APPLY_COUPON_CODE_INPUT = 'Billing apply coupon code input',
BILLING_PAYMENTS_HISTORY = 'Billing payments history',
BILLING_PERIODS_SELECTION = 'Billing periods selection',
BILLING_ESTIMATED_COSTS_AND_CREDITS = 'Billing estimated costs and credits',
BILLING_ADD_STRIPE_CC_FORM = 'Billing add stripe CC form',
BILLING_STRIPE_CARD_INPUT = 'Billing stripe card input',
BILLING_AREA = 'Billing area',
BILLING_STORJ_TOKEN_CONTAINER = 'Billing STORJ token container',
BILLING_CC_DIALOG = 'Billing credit card dialog',
CREATE_AG_MODAL = 'Create access grant modal',
CONFIRM_DELETE_AG_MODAL = 'Confirm delete access grant modal',
CREATE_AG_FORM = 'Create access grant form',
FILE_BROWSER_LIST_CALL = 'File browser - list API call',
FILE_BROWSER_ENTRY = 'File browser entry',
PROJECT_INFO_BAR = 'Project info bar',
CREATE_PROJECT_LEVEL_PASSPHRASE_MODAL = 'Create project level passphrase modal',
SWITCH_PROJECT_LEVEL_PASSPHRASE_MODAL = 'Switch project level passphrase modal',
UPGRADE_ACCOUNT_MODAL = 'Upgrade account modal',
ADD_PROJECT_MEMBER_MODAL = 'Add project member modal',
ADD_TOKEN_FUNDS_MODAL = 'Add token funds modal',
@ -112,7 +102,6 @@ export enum AnalyticsErrorEventSource {
ONBOARDING_NAME_STEP = 'Onboarding name step',
ONBOARDING_PERMISSIONS_STEP = 'Onboarding permissions step',
PROJECT_DASHBOARD_PAGE = 'Project dashboard page',
PROJECT_USAGE_CONTAINER = 'Project usage container',
EDIT_PROJECT_DETAILS = 'Edit project details',
PROJECTS_LIST = 'Projects list',
PROJECT_MEMBERS_HEADER = 'Project members page header',

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

@ -92,7 +92,6 @@ import { onMounted, ref } from 'vue';
import { Validator } from '@/utils/validation';
import { RouteConfig } from '@/router';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
@ -103,6 +102,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import VInput from '@/components/common/VInput.vue';
@ -117,6 +117,7 @@ const validPerms = {
'delete': true,
};
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const usersStore = useUsersStore();
@ -282,11 +283,13 @@ async function setProject(value: string): Promise<void> {
return;
}
await store.dispatch(PROJECTS_ACTIONS.SELECT, projects.value[value].id);
await store.dispatch(BUCKET_ACTIONS.FETCH_ALL_BUCKET_NAMES);
const projectID = store.getters.selectedProject.id;
selectedProjectID.value = store.getters.selectedProject.id;
buckets.value = store.state.bucketUsageModule.allBucketNames.sort();
await store.dispatch(PROJECTS_ACTIONS.SELECT, projects.value[value].id);
await bucketsStore.getAllBucketsNames(projectID);
selectedProjectID.value = projectID;
buckets.value = bucketsStore.state.allBucketNames.sort();
setBucket(selectedBucketName.value);
}

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

@ -112,8 +112,6 @@ import { User } from '@/types/users';
import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useABTestingStore } from '@/store/modules/abTestingStore';
@ -122,6 +120,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
@ -135,6 +134,7 @@ import UpgradeNotification from '@/components/notifications/UpgradeNotification.
import ProjectLimitBanner from '@/components/notifications/ProjectLimitBanner.vue';
import BrandedLoader from '@/components/common/BrandedLoader.vue';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const billingStore = useBillingStore();
@ -501,8 +501,7 @@ async function handleInactive(): Promise<void> {
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
bucketsStore.clear(),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),

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

@ -113,8 +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 { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { LocalData } from '@/utils/localData';
@ -127,6 +125,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
@ -143,6 +142,8 @@ const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const store = useStore();
const notify = useNotify();
const bucketsStore = useBucketsStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
@ -361,8 +362,7 @@ async function handleInactive(): Promise<void> {
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
bucketsStore.clear(),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),

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

@ -104,8 +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 { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AuthHttpApi } from '@/api/auth';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
@ -113,6 +111,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import VButton from '@/components/common/VButton.vue';
@ -134,6 +133,7 @@ const store = useStore();
const router = useRouter();
const notify = useNotify();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
@ -236,8 +236,7 @@ async function onLogout(): Promise<void> {
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
bucketsStore.clear(),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),

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

@ -55,8 +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 { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import {
AnalyticsErrorEventSource,
AnalyticsEvent,
@ -70,6 +68,7 @@ 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 { useBucketsStore } from '@/store/modules/bucketsStore';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -86,6 +85,7 @@ const notify = useNotify();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
@ -161,8 +161,7 @@ async function onLogout(): Promise<void> {
agStore.stopWorker(),
agStore.clear(),
store.dispatch(NOTIFICATION_ACTIONS.CLEAR),
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
bucketsStore.clear(),
appStore.clear(),
billingStore.clear(),
abTestingStore.reset(),

5
web/satellite/src/views/all-dashboard/components/ProjectItem.vue
View File

@ -55,12 +55,12 @@ import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { LocalData } from '@/utils/localData';
import { OBJECTS_MUTATIONS } from '@/store/modules/objects';
import { RouteConfig } from '@/router';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import VButton from '@/components/common/VButton.vue';
import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
@ -69,6 +69,7 @@ import GearIcon from '@/../static/images/common/gearIcon.svg';
import UsersIcon from '@/../static/images/navigation/users.svg';
import MenuIcon from '@/../static/images/allDashboard/menu.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
@ -132,7 +133,7 @@ async function selectProject() {
LocalData.setSelectedProjectId(props.project.id);
pmStore.setSearchQuery('');
store.commit(OBJECTS_MUTATIONS.CLEAR);
bucketsStore.clearS3Data();
}
/**

32
web/satellite/tests/unit/store/buckets.spec.ts → web/satellite/tests/unit/ignore/store/buckets.spec.ts
View File

@ -6,15 +6,12 @@ import { createLocalVue } from '@vue/test-utils';
import { BucketsApiGql } from '@/api/buckets';
import { ProjectsApiGql } from '@/api/projects';
import { BUCKET_ACTIONS, makeBucketsModule } from '@/store/modules/buckets';
import { makeProjectsModule } from '@/store/modules/projects';
import { Bucket, BucketCursor, BucketPage } from '@/types/buckets';
import { Project } from '@/types/projects';
const Vue = createLocalVue();
const bucketsApi = new BucketsApiGql();
const bucketsModule = makeBucketsModule(bucketsApi);
const { FETCH, SET_SEARCH, CLEAR } = BUCKET_ACTIONS;
const projectsApi = new ProjectsApiGql();
const projectsModule = makeProjectsModule(projectsApi);
@ -26,9 +23,8 @@ Vue.use(Vuex);
const store = new Vuex.Store<{
projectsModule: typeof projectsModule.state,
bucketsModule: typeof bucketsModule.state,
}>({ modules: { projectsModule, bucketsModule } });
const state = store.state.bucketsModule;
}>({ modules: { projectsModule } });
// const state = store.state.bucketsModule;
const bucket = new Bucket('test', 10, 10, 1, 1, new Date(), new Date());
const page: BucketPage = { buckets: [bucket], currentPage: 1, pageCount: 1, offset: 0, limit: 7, search: 'test', totalCount: 1 };
@ -42,33 +38,33 @@ describe('actions', () => {
Promise.resolve(page),
);
await store.dispatch(FETCH, 1);
// await store.dispatch(FETCH, 1);
expect(state.page).toEqual(page);
expect(state.cursor.page).toEqual(1);
// expect(state.page).toEqual(page);
// expect(state.cursor.page).toEqual(1);
});
it('fetch throws an error when api call fails', async () => {
jest.spyOn(bucketsApi, 'get').mockImplementation(() => { throw new Error(); });
try {
await store.dispatch(FETCH, 1);
// await store.dispatch(FETCH, 1);
} catch (error) {
expect(state.page).toEqual(page);
// expect(state.page).toEqual(page);
}
});
it('success set search buckets', () => {
store.dispatch(SET_SEARCH, 'test');
// store.dispatch(SET_SEARCH, 'test');
expect(state.cursor.search).toMatch('test');
// expect(state.cursor.search).toMatch('test');
});
it('success clear', () => {
store.dispatch(CLEAR);
// store.dispatch(CLEAR);
expect(state.cursor).toEqual(new BucketCursor('', 7, 1));
expect(state.page).toEqual(new BucketPage([], '', 7, 0, 1, 1, 0));
// expect(state.cursor).toEqual(new BucketCursor('', 7, 1));
// expect(state.page).toEqual(new BucketPage([], '', 7, 0, 1, 1, 0));
});
});
@ -80,7 +76,7 @@ describe('getters', () => {
Promise.resolve(page),
);
await store.dispatch(FETCH, 1);
// await store.dispatch(FETCH, 1);
const storePage = store.getters.page;
@ -88,7 +84,7 @@ describe('getters', () => {
});
it('cursor of buckets', () => {
store.dispatch(CLEAR);
// store.dispatch(CLEAR);
const cursor = store.getters.cursor;

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

@ -4,10 +4,7 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { BucketsMock } from '../../mock/api/buckets';
import { RouteConfig, router } from '@/router';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule } from '@/store/modules/notifications';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -16,13 +13,11 @@ import DashboardArea from '@/views/DashboardArea.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const bucketsModule = makeBucketsModule(new BucketsMock());
const notificationsModule = makeNotificationsModule();
const store = new Vuex.Store({
modules: {
notificationsModule,
bucketsModule,
},
});