web/satellite: add onboarding stepper functionality

This change adds functionality to the new onboarding stepper. It is
also made configurable by partner.

Issue: #6721

Change-Id: I7f547ca8b887eaaee97bcd4d6072626246d20f9a

web/satellite/src/components/dialogs/CreateAccessDialog.vue

@@ -262,6 +262,7 @@ const model = computed<boolean>({
 
 const emit = defineEmits<{
     'update:modelValue': [value: boolean];
+    'accessCreated': [];
 }>();
 
 const bucketsStore = useBucketsStore();
@@ -421,6 +422,7 @@ async function nextStep(): Promise<void> {
 
     const next = info.next.value;
     if (!next) {
+        emit('accessCreated');
         model.value = false;
         return;
     }
@@ -563,6 +565,23 @@ async function createEdgeCredentials(): Promise<void> {
     analyticsStore.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED);
 }
 
+/**
+ * Set the types of access to be created
+ */
+function setTypes(newTypes: AccessType[]) {
+    const createStepRef = stepInfos[CreateAccessStep.CreateNewAccess].ref;
+    const unwatch = watch(createStepRef, value => {
+        if (!value) {
+            return;
+        }
+        unwatch();
+        if (value && typeof value['setTypes'] === 'function') {
+            const setType = value['setTypes'] as (newTypes: AccessType[]) => void;
+            setType(newTypes);
+        }
+    });
+}
+
 /**
  * Executes when the dialog's inner content has been added or removed.
  * If removed, refs are reset back to their initial values.
@@ -598,6 +617,8 @@ watch(innerContent, async (comp: Component): Promise<void> => {
 
     stepInfos[step.value].ref.value?.onEnter?.();
 });
+
+defineExpose({ setTypes });
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/dialogs/CreateBucketDialog.vue

@@ -124,12 +124,17 @@ const configStore = useConfigStore();
 // Copied from here https://github.com/storj/storj/blob/f6646b0e88700b5e7113a76a8d07bf346b59185a/satellite/metainfo/validation.go#L38
 const ipRegexp = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     modelValue: boolean,
-}>();
+    openCreated: boolean,
+}>(), {
+    modelValue: false,
+    openCreated: true,
+});
 
 const emit = defineEmits<{
     (event: 'update:modelValue', value: boolean): void,
+    (event: 'created', value: string): void,
 }>();
 
 const innerContent = ref<Component | null>(null);
@@ -244,31 +249,36 @@ function onCreate(): void {
                 }
                 await bucketsStore.createBucket(bucketName.value);
                 await bucketsStore.getBuckets(1, projectID);
-                bucketsStore.setFileComponentBucketName(bucketName.value);
-
                 analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
-                await router.push(bucketURL);
+
+                if (props.openCreated) {
+                    bucketsStore.setFileComponentBucketName(bucketName.value);
+                    await router.push(bucketURL);
+                }
 
                 if (!bucketWasCreated.value) {
                     LocalData.setBucketWasCreatedStatus();
                 }
 
                 model.value = false;
-
+                emit('created', bucketName.value);
                 return;
             }
 
             if (edgeCredentialsForCreate.value.accessKeyId) {
                 await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
                 await bucketsStore.getBuckets(1, projectID);
                 analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
-                await router.push(bucketURL);
-
+                if (props.openCreated) {
+                    bucketsStore.setFileComponentBucketName(bucketName.value);
+                    await router.push(bucketURL);
+                }
                 if (!bucketWasCreated.value) {
                     LocalData.setBucketWasCreatedStatus();
                 }
 
                 model.value = false;
+                emit('created', bucketName.value);
 
                 return ;
             }
@@ -331,13 +341,17 @@ function onCreate(): void {
             await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
             await bucketsStore.getBuckets(1, projectID);
             analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
-            await router.push(bucketURL);
+            if (props.openCreated) {
+                bucketsStore.setFileComponentBucketName(bucketName.value);
+                await router.push(bucketURL);
+            }
 
             if (!bucketWasCreated.value) {
                 LocalData.setBucketWasCreatedStatus();
             }
 
             model.value = false;
+            emit('created', bucketName.value);
         } catch (error) {
             notify.notifyError(error, AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
         }

web/satellite/src/components/dialogs/ManagePassphraseDialog.vue

@@ -193,6 +193,7 @@ const model = computed<boolean>({
 
 const emit = defineEmits<{
     'update:modelValue': [value: boolean];
+    'passphraseCreated': [];
 }>();
 
 const projectsStore = useProjectsStore();
@@ -261,7 +262,7 @@ function onNextClick(): void {
         step.value = next;
         return;
     }
-
+    emit('passphraseCreated');
     model.value = false;
 }
 

web/satellite/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue

@@ -125,11 +125,14 @@ const nameRules: ValidationRule<string>[] = [
     v => !agStore.state.allAGNames.includes(v) || 'This name is already in use',
 ];
 
-defineExpose<DialogStepComponent>({
+defineExpose<DialogStepComponent | { setTypes: (newTypes: AccessType[]) => void }>({
     title: 'New Access Key',
     validate: () => {
         form.value?.validate();
         return !!form.value?.isValid;
     },
+    setTypes: (newTypes: AccessType[]) => {
+        types.value = newTypes;
+    },
 });
 </script>