web/satellite: add S3 credential creation to quickstart dropdown

updated the CreateAccessModal to support direct deep linking
added a new option in the quickstart dropdown that navigates to the
S3 CreateAccessModal and updated the quickstart Create Access Grant
action to use the new modal

Fixes https://github.com/storj/storj/issues/4961

Change-Id: I49388ebbfcfee74ae481c2f5b7afb7e6168190b5

web/satellite/src/components/accessGrants/AccessGrants.vue

@@ -207,11 +207,6 @@
                 @resetPagination="resetPagination"
             />
         </div>
-        <CreateAccessModal
-            v-if="showAccessModal"
-            :default-type="modalAccessType"
-            @close-modal="toggleAccessModal"
-        />
         <router-view />
     </div>
 </template>
@@ -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();
+        this.trackPageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path);
-    }
+        this.$router.push({
-
+            name: RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).name,
-    /**
+            params: { accessType: 'api' },
-     * toggles Create Access Modal visibility.
+        });
-     */
-    public toggleAccessModal(): void {
-        this.showAccessModal = !this.showAccessModal;
     }
 
     /**
      * Sends "trackPageVisit" event to segment and opens link.
-     */ 
+     */
     public trackPageVisit(link: string): void {
         this.analytics.pageVisit(link);
     }

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<void> {
-        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);
     }
 
     /**

web/satellite/src/components/navigation/QuickStartLinks.vue

@@ -17,6 +17,13 @@
                 <p class="dropdown-item__text__label">Start the wizard to create a new access grant.</p>
             </div>
         </div>
+        <div class="dropdown-item" aria-roledescription="create-s3-credentials-route" @click.stop="navigateToAccessGrantS3">
+            <S3Icon class="dropdown-item__icon" />
+            <div class="dropdown-item__text">
+                <h2 class="dropdown-item__text__title">Create S3 Gateway Credentials</h2>
+                <p class="dropdown-item__text__label">Start the wizard to generate S3 credentials.</p>
+            </div>
+        </div>
         <div class="dropdown-item" aria-roledescription="objects-route" @click.stop="navigateToBuckets">
             <UploadInWebIcon class="dropdown-item__icon" />
             <div class="dropdown-item__text">
@@ -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.analytics.pageVisit(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessModal).path);
-        this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant).path).catch(() => {return;});
+        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;});
     }
 
     /**

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,

web/satellite/static/images/navigation/s3.svg

@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4423 0H23.3463C28.8835 0 31.0805 0.613723 33.2353 1.76617C35.3902 2.91861 37.0814 4.60977 38.2338 6.76466L38.3214 6.93055C39.4029 9.00672 39.9846 11.2 40 16.4423V23.3463C40 28.8835 39.3863 31.0805 38.2338 33.2353C37.0814 35.3902 35.3902 37.0814 33.2353 38.2338L33.0694 38.3214C30.9933 39.4029 28.8 39.9846 23.5577 40H16.6537C11.1165 40 8.91954 39.3863 6.76466 38.2338C4.60977 37.0814 2.91861 35.3902 1.76617 33.2353L1.67858 33.0694C0.597074 30.9933 0.0154219 28.8 0 23.5577V16.6537C0 11.1165 0.613723 8.91954 1.76617 6.76466C2.91861 4.60977 4.60977 2.91861 6.76466 1.76617L6.93055 1.67858C9.00672 0.597074 11.2 0.0154219 16.4423 0Z" fill="#EBEEF1"/>
+    <ellipse cx="20.2297" cy="19.8043" rx="12.7703" ry="12.7763" fill="#0149FF"/>
+    <ellipse cx="10.7432" cy="30.431" rx="4.74324" ry="4.74549" fill="#FF458B"/>
+    <ellipse cx="30.8512" cy="7.14967" rx="2.14865" ry="2.14967" fill="#FFC600"/>
+    <path d="M18.2118 18.265C18.1892 18.0168 18.0888 17.8239 17.9106 17.6863C17.7347 17.5464 17.4831 17.4765 17.156 17.4765C16.9394 17.4765 16.7589 17.5047 16.6145 17.5611C16.4702 17.6175 16.3619 17.6953 16.2897 17.7946C16.2175 17.8916 16.1803 18.0033 16.178 18.1296C16.1735 18.2334 16.1938 18.3247 16.2389 18.4037C16.2863 18.4827 16.354 18.5526 16.442 18.6135C16.5322 18.6722 16.6405 18.7241 16.7668 18.7692C16.8932 18.8143 17.0353 18.8538 17.1932 18.8876L17.7888 19.023C18.1317 19.0974 18.434 19.1967 18.6957 19.3208C18.9597 19.4449 19.1808 19.5926 19.359 19.7641C19.5395 19.9355 19.676 20.1329 19.7685 20.3563C19.8609 20.5796 19.9083 20.83 19.9106 21.1075C19.9083 21.5452 19.7978 21.9208 19.5789 22.2344C19.3601 22.548 19.0454 22.7883 18.6348 22.9552C18.2265 23.1222 17.7335 23.2056 17.156 23.2056C16.5762 23.2056 16.0708 23.1188 15.6399 22.9451C15.209 22.7713 14.874 22.5074 14.6349 22.1532C14.3957 21.799 14.2728 21.3512 14.266 20.8097H15.8701C15.8836 21.0331 15.9434 21.2192 16.0494 21.3681C16.1554 21.517 16.301 21.6298 16.4859 21.7065C16.6732 21.7832 16.8898 21.8216 17.1357 21.8216C17.3613 21.8216 17.553 21.7911 17.711 21.7302C17.8711 21.6693 17.9941 21.5847 18.0798 21.4764C18.1656 21.3681 18.2095 21.244 18.2118 21.1042C18.2095 20.9733 18.1689 20.8616 18.09 20.7691C18.011 20.6744 17.8892 20.5932 17.7245 20.5255C17.5621 20.4555 17.3545 20.3912 17.1018 20.3326L16.3777 20.1634C15.7776 20.0258 15.3049 19.8036 14.9598 19.4967C14.6146 19.1877 14.4431 18.7703 14.4454 18.2447C14.4431 17.816 14.5582 17.4404 14.7906 17.1178C15.0229 16.7952 15.3444 16.5436 15.755 16.3631C16.1656 16.1827 16.6337 16.0924 17.1594 16.0924C17.6963 16.0924 18.1622 16.1838 18.557 16.3665C18.954 16.547 19.262 16.8008 19.4808 17.1279C19.6996 17.455 19.8113 17.8341 19.8158 18.265H18.2118ZM23.3792 23.2124C22.8513 23.2124 22.3832 23.1222 21.9748 22.9417C21.5688 22.7589 21.2484 22.5074 21.0138 22.187C20.7791 21.8667 20.6596 21.4978 20.6551 21.0805H22.3403C22.3471 21.2316 22.3956 21.3658 22.4858 21.4832C22.5761 21.5982 22.699 21.6885 22.8547 21.7539C23.0103 21.8193 23.1874 21.852 23.386 21.852C23.5845 21.852 23.7593 21.8171 23.9105 21.7471C24.0639 21.6749 24.1835 21.5768 24.2692 21.4527C24.3549 21.3264 24.3967 21.182 24.3944 21.0196C24.3967 20.8571 24.3504 20.7127 24.2557 20.5864C24.1609 20.4601 24.0267 20.3619 23.853 20.292C23.6815 20.222 23.4785 20.1871 23.2438 20.1871H22.5704V18.9959H23.2438C23.4491 18.9959 23.6296 18.9621 23.7853 18.8944C23.9432 18.8267 24.0662 18.7319 24.1541 18.6101C24.2421 18.486 24.285 18.3439 24.2827 18.1837C24.285 18.0281 24.2478 17.8916 24.1711 17.7743C24.0966 17.6547 23.9917 17.5622 23.8564 17.4968C23.7232 17.4314 23.5687 17.3986 23.3927 17.3986C23.2077 17.3986 23.0397 17.4314 22.8885 17.4968C22.7396 17.5622 22.6212 17.6547 22.5332 17.7743C22.4452 17.8938 22.399 18.0326 22.3945 18.1905H20.7938C20.7983 17.7777 20.9134 17.4144 21.139 17.1009C21.3646 16.785 21.6714 16.538 22.0594 16.3597C22.4497 16.1815 22.8942 16.0924 23.3927 16.0924C23.8891 16.0924 24.3256 16.1793 24.7024 16.353C25.0791 16.5267 25.3724 16.7636 25.5822 17.0636C25.792 17.3614 25.8969 17.6987 25.8969 18.0754C25.8992 18.4657 25.7717 18.7872 25.5145 19.0399C25.2596 19.2926 24.9313 19.4482 24.5298 19.5069V19.561C25.0667 19.6242 25.4717 19.7979 25.7446 20.0822C26.0199 20.3664 26.1564 20.7218 26.1541 21.1481C26.1541 21.5497 26.0357 21.9062 25.7988 22.2175C25.5642 22.5266 25.237 22.7702 24.8174 22.9484C24.4001 23.1244 23.9206 23.2124 23.3792 23.2124Z" fill="white"/>
+</svg>