diff --git a/web/satellite/src/components/accessGrants/AccessGrants.vue b/web/satellite/src/components/accessGrants/AccessGrants.vue index b8c93314f..769eccc9c 100644 --- a/web/satellite/src/components/accessGrants/AccessGrants.vue +++ b/web/satellite/src/components/accessGrants/AccessGrants.vue @@ -207,11 +207,6 @@ @resetPagination="resetPagination" /> - @@ -225,7 +220,6 @@ import ConfirmDeletePopup from '@/components/accessGrants/ConfirmDeletePopup.vue import ConfirmDeletePopup2 from '@/components/accessGrants/ConfirmDeletePopup2.vue'; import EmptyState from '@/components/accessGrants/EmptyState.vue'; import SortAccessGrantsHeader from '@/components/accessGrants/SortingHeader.vue'; -import CreateAccessModal from '@/components/accessGrants/CreateAccessModal.vue'; import SortAccessGrantsHeader2 from '@/components/accessGrants/SortingHeader2.vue'; import VButton from '@/components/common/VButton.vue'; import VList from '@/components/common/VList.vue'; @@ -268,7 +262,6 @@ declare interface ResetPagination { ConfirmDeletePopup, ConfirmDeletePopup2, VLoader, - CreateAccessModal, VHeader, }, }) @@ -278,12 +271,6 @@ export default class AccessGrants extends Vue { private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi(); - /** - * Indicates if the access modal should be shown and what the defaulted type of access should be defaulted. - */ - private showAccessModal = false; - private modalAccessType = ''; - public areGrantsFetching = true; public $refs!: { @@ -429,39 +416,41 @@ export default class AccessGrants extends Vue { * Access grant button click. */ public accessGrantClick(): void { - this.modalAccessType = 'access'; this.analytics.eventTriggered(AnalyticsEvent.CREATE_ACCESS_GRANT_CLICKED); - this.toggleAccessModal(); + this.trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); + this.$router.push({ + name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).name, + params: { accessType: 'access' }, + }); } /** * S3 Access button click.. */ public s3Click(): void { - this.modalAccessType = 's3'; this.analytics.eventTriggered(AnalyticsEvent.CREATE_S3_CREDENTIALS_CLICKED); - this.toggleAccessModal(); + this.trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); + this.$router.push({ + name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).name, + params: { accessType: 's3' }, + }); } /** * CLI Access button click. */ public cliClick(): void { - this.modalAccessType = 'api'; this.analytics.eventTriggered(AnalyticsEvent.CREATE_KEYS_FOR_CLI_CLICKED); - this.toggleAccessModal(); - } - - /** - * toggles Create Access Modal visibility. - */ - public toggleAccessModal(): void { - this.showAccessModal = !this.showAccessModal; + this.trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); + this.$router.push({ + name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).name, + params: { accessType: 'api' }, + }); } /** * Sends "trackPageVisit" event to segment and opens link. - */ + */ public trackPageVisit(link: string): void { this.analytics.pageVisit(link); } diff --git a/web/satellite/src/components/accessGrants/CreateAccessModal.vue b/web/satellite/src/components/accessGrants/CreateAccessModal.vue index e6ea870e0..1ff43a450 100644 --- a/web/satellite/src/components/accessGrants/CreateAccessModal.vue +++ b/web/satellite/src/components/accessGrants/CreateAccessModal.vue @@ -590,6 +590,7 @@ import CopyIcon from '../../../static/images/common/copy.svg'; import DownloadIcon from '../../../static/images/common/download.svg'; import CLIIcon from '@/../static/images/accessGrants/cli.svg'; import S3Icon from '@/../static/images/accessGrants/s3.svg'; +import { RouteConfig } from '@/router'; // for future use when notes is implemented // import NotesIcon from '@/../static/images/accessGrants/create-access_notes.svg'; @@ -708,7 +709,7 @@ export default class CreateAccessModal extends Vue { * Checks which type was selected and retrieves buckets on mount. */ public async mounted(): Promise { - this.checkedType = this.defaultType; + this.checkedType = this.$route.params.accessType; this.setWorker(); try { await this.$store.dispatch(BUCKET_ACTIONS.FETCH_ALL_BUCKET_NAMES); @@ -906,7 +907,7 @@ export default class CreateAccessModal extends Vue { */ public onCloseClick(): void { this.$store.dispatch(ACCESS_GRANTS_ACTIONS.CLEAR_SELECTION); - this.$emit('close-modal') + this.$router.push(RouteConfig.AccessGrants.path); } /** diff --git a/web/satellite/src/components/navigation/QuickStartLinks.vue b/web/satellite/src/components/navigation/QuickStartLinks.vue index b75f24fa9..d56b6c228 100644 --- a/web/satellite/src/components/navigation/QuickStartLinks.vue +++ b/web/satellite/src/components/navigation/QuickStartLinks.vue @@ -17,6 +17,13 @@

Start the wizard to create a new access grant.

+
+ +
+

Create S3 Gateway Credentials

+

Start the wizard to generate S3 credentials.

+
+
@@ -45,6 +52,7 @@ import { User } from "@/types/users"; import NewProjectIcon from '@/../static/images/navigation/newProject.svg'; import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg'; +import S3Icon from '@/../static/images/navigation/s3.svg'; import UploadInCLIIcon from '@/../static/images/navigation/uploadInCLI.svg'; import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg'; @@ -53,6 +61,7 @@ import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg'; components: { NewProjectIcon, CreateAGIcon, + S3Icon, UploadInCLIIcon, UploadInWebIcon, }, @@ -69,8 +78,24 @@ export default class QuickStartLinks extends Vue { public navigateToCreateAG(): void { this.analytics.eventTriggered(AnalyticsEvent.CREATE_AN_ACCESS_GRANT_CLICKED); this.closeDropdowns(); - this.analytics.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant).with(RouteConfig.NameStep).path); - this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant).path).catch(() => {return;}); + this.analytics.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); + this.$router.push({ + name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).name, + params: { accessType: 'access' }, + }).catch(() => {return;}); + } + + /** + * Redirects to Create Access Modal with "s3" access type preselected + */ + public navigateToAccessGrantS3(): void { + this.analytics.eventTriggered(AnalyticsEvent.CREATE_S3_CREDENTIALS_CLICKED); + this.closeDropdowns(); + this.analytics.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path); + this.$router.push({ + name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).name, + params: { accessType: 's3' }, + }).catch(() => {return;}); } /** diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts index 788b4671f..24e86475e 100644 --- a/web/satellite/src/router/index.ts +++ b/web/satellite/src/router/index.ts @@ -5,6 +5,7 @@ import Vue from 'vue'; import Router from 'vue-router'; import AccessGrants from '@/components/accessGrants/AccessGrants.vue'; +import CreateAccessModal from '@/components/accessGrants/CreateAccessModal.vue' import CreateAccessGrant from '@/components/accessGrants/CreateAccessGrant.vue'; import CLIStep from '@/components/accessGrants/steps/CLIStep.vue'; import CreatePassphraseStep from '@/components/accessGrants/steps/CreatePassphraseStep.vue'; @@ -106,6 +107,7 @@ export abstract class RouteConfig { public static CreditsHistory = new NavigationLink('credits-history', 'Credits History'); // access grant child paths + public static CreateAccessModal = new NavigationLink('create-access-modal', 'Create Access Modal'); public static CreateAccessGrant = new NavigationLink('create-grant', 'Create Access Grant'); public static NameStep = new NavigationLink('name', 'Name Access Grant'); public static PermissionsStep = new NavigationLink('permissions', 'Access Grant Permissions'); @@ -376,6 +378,11 @@ export const router = new Router({ name: RouteConfig.AccessGrants.name, component: AccessGrants, children: [ + { + path: RouteConfig.CreateAccessModal.path, + name: RouteConfig.CreateAccessModal.name, + component: CreateAccessModal + }, { path: RouteConfig.CreateAccessGrant.path, name: RouteConfig.CreateAccessGrant.name, diff --git a/web/satellite/static/images/navigation/s3.svg b/web/satellite/static/images/navigation/s3.svg new file mode 100644 index 000000000..6fb158960 --- /dev/null +++ b/web/satellite/static/images/navigation/s3.svg @@ -0,0 +1,7 @@ + + + + + + +