From a281adddd5ccf235aaba0d6a741737a1108ab455 Mon Sep 17 00:00:00 2001
From: Vitalii Shpital <takur12345@gmail.com>
Date: Mon, 25 Oct 2021 14:41:53 +0300
Subject: [PATCH] web/satellite: auto-create first demo bucket for the user

Create first bucket ('demo-bucket') for the user if they have no buckets.
Fixed bucket name validation to include '.' and '-'.

Change-Id: I21ddad63f214b6482ebaad95474ff0b6cf16254f
---
 .../src/components/objects/BucketsView.vue    | 27 ++++++++++++++++---
 web/satellite/src/store/modules/objects.ts    |  8 ++++++
 web/satellite/src/utils/validation.ts         |  2 +-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/web/satellite/src/components/objects/BucketsView.vue b/web/satellite/src/components/objects/BucketsView.vue
index 296537018..b4c4a4d8a 100644
--- a/web/satellite/src/components/objects/BucketsView.vue
+++ b/web/satellite/src/components/objects/BucketsView.vue
@@ -70,7 +70,7 @@ import BucketIcon from '@/../static/images/objects/bucket.svg';
 
 import { RouteConfig } from '@/router';
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
-import { OBJECTS_ACTIONS } from '@/store/modules/objects';
+import { DEMO_BUCKET_NAME, OBJECTS_ACTIONS } from '@/store/modules/objects';
 import { AccessGrant, GatewayCredentials } from '@/types/accessGrants';
 import { MetaUtils } from '@/utils/meta';
 import { Validator } from '@/utils/validation';
@@ -116,7 +116,7 @@ export default class BucketsView extends Vue {
             await this.setAccess();
             await this.fetchBuckets();
 
-            if (!this.bucketsList.length) this.showCreateBucketPopup();
+            if (!this.bucketsList.length) await this.createDemoBucket();
         } catch (error) {
             await this.$notify.error(`Failed to setup Buckets view. ${error.message}`);
         }
@@ -202,7 +202,6 @@ export default class BucketsView extends Vue {
 
         try {
             await this.$store.dispatch(OBJECTS_ACTIONS.CREATE_BUCKET, this.createBucketName);
-            await this.$store.dispatch(OBJECTS_ACTIONS.FETCH_BUCKETS);
         } catch (error) {
             const BUCKET_ALREADY_EXISTS_ERROR = 'BucketAlreadyExists';
 
@@ -224,6 +223,28 @@ export default class BucketsView extends Vue {
         this.openBucket(bucket);
     }
 
+    /**
+     * Creates first ever demo bucket for user.
+     */
+    public async createDemoBucket(): Promise<void> {
+        if (this.isRequestProcessing) return;
+
+        this.isRequestProcessing = true;
+
+        try {
+            await this.$store.dispatch(OBJECTS_ACTIONS.CREATE_DEMO_BUCKET);
+        } catch (error) {
+            await this.$notify.error(error.message);
+            this.isRequestProcessing = false;
+
+            return;
+        }
+
+        this.isRequestProcessing = false;
+
+        this.openBucket(DEMO_BUCKET_NAME);
+    }
+
     /**
      * Holds delete bucket click logic.
      */
diff --git a/web/satellite/src/store/modules/objects.ts b/web/satellite/src/store/modules/objects.ts
index a63528980..c16b63d66 100644
--- a/web/satellite/src/store/modules/objects.ts
+++ b/web/satellite/src/store/modules/objects.ts
@@ -17,6 +17,7 @@ export const OBJECTS_ACTIONS = {
     SET_FILE_COMPONENT_BUCKET_NAME: 'setFileComponentBucketName',
     FETCH_BUCKETS: 'fetchBuckets',
     CREATE_BUCKET: 'createBucket',
+    CREATE_DEMO_BUCKET: 'createDemoBucket',
     DELETE_BUCKET: 'deleteBucket',
     CHECK_ONGOING_UPLOADS: 'checkOngoingUploads',
 };
@@ -33,6 +34,8 @@ export const OBJECTS_MUTATIONS = {
     SET_LEAVE_ROUTE: 'setLeaveRoute',
 };
 
+export const DEMO_BUCKET_NAME = 'demo-bucket';
+
 const {
     CLEAR,
     SET_API_KEY,
@@ -154,6 +157,11 @@ export function makeObjectsModule(): StoreModule<ObjectsState, ObjectsContext> {
                     Bucket: name,
                 }).promise();
             },
+            createDemoBucket: async function(ctx): Promise<void> {
+                await ctx.state.s3Client.createBucket({
+                    Bucket: DEMO_BUCKET_NAME,
+                }).promise();
+            },
             deleteBucket: async function(ctx, name: string): Promise<void> {
                 await ctx.state.s3Client.deleteBucket({
                     Bucket: name,
diff --git a/web/satellite/src/utils/validation.ts b/web/satellite/src/utils/validation.ts
index 2391891e3..76e5f2cfb 100644
--- a/web/satellite/src/utils/validation.ts
+++ b/web/satellite/src/utils/validation.ts
@@ -26,7 +26,7 @@ export class Validator {
      * Checks string to satisfy bucket name rules.
      */
     public static bucketName(value: string): boolean {
-        const rgx = /^[a-z0-9]+$/;
+        const rgx = /^[a-z0-9.-]+$/;
 
         return rgx.test(value);
     }