From de4a8552486a63c708b8e81c4f9b63be0308ac24 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Tue, 5 Mar 2024 10:25:41 +0000
Subject: [PATCH] web/satellite: enable versioning on bucket creation

This change updates the bucket creation dialog to allow projects with
versioning UI config enabled and default versioning not enabled to
enable(or not) versioning during bucket creation.

Issue: https://github.com/storj/storj/issues/6813

Change-Id: Ic96649317a5dbe4b68884dd299fac5af08b9e7d5
---
 web/satellite/src/api/projects.ts             |  24 +++
 .../components/dialogs/CreateBucketDialog.vue | 159 ++++++++++++++----
 web/satellite/src/layouts/default/Default.vue |   5 +
 .../src/store/modules/bucketsStore.ts         |  22 ++-
 .../src/store/modules/projectsStore.ts        |  13 +-
 web/satellite/src/types/projects.ts           |  23 ++-
 6 files changed, 202 insertions(+), 44 deletions(-)

diff --git a/web/satellite/src/api/projects.ts b/web/satellite/src/api/projects.ts
index f25bc324f239..f5a2bb740462 100644
--- a/web/satellite/src/api/projects.ts
+++ b/web/satellite/src/api/projects.ts
@@ -14,6 +14,7 @@ import {
     ProjectsStorageBandwidthDaily,
     ProjectInvitationResponse,
     Emission,
+    ProjectConfig,
 } from '@/types/projects';
 import { HttpClient } from '@/utils/httpClient';
 import { Time } from '@/utils/time';
@@ -92,6 +93,29 @@ export class ProjectsHttpApi implements ProjectsApi {
         ));
     }
 
+    /**
+     * Fetch config for project.
+     *
+     * @param projectId - the project's ID
+     * @returns ProjectConfig
+     * @throws Error
+     */
+    public async getConfig(projectId: string): Promise<ProjectConfig> {
+        const response = await this.http.get(`${this.ROOT_PATH}/${projectId}/config`);
+        const result = await response.json();
+        if (response.ok) {
+            return new ProjectConfig(
+                result.versioningUIEnabled,
+            );
+        }
+
+        throw new APIError({
+            status: response.status,
+            message: result.error || 'Could not get project config',
+            requestID: response.headers.get('x-request-id'),
+        });
+    }
+
     /**
      * Update project name and description.
      *
diff --git a/web/satellite/src/components/dialogs/CreateBucketDialog.vue b/web/satellite/src/components/dialogs/CreateBucketDialog.vue
index fdc6b7cc527c..314910087533 100644
--- a/web/satellite/src/components/dialogs/CreateBucketDialog.vue
+++ b/web/satellite/src/components/dialogs/CreateBucketDialog.vue
@@ -44,39 +44,83 @@
 
             <v-divider />
 
-            <v-form v-model="formValid" class="pa-7 pb-3" @submit.prevent="onCreate">
-                <v-row>
-                    <v-col>
-                        <p>Buckets are used to store and organize your files. Enter a bucket name using lowercase characters.</p>
-                        <v-text-field
-                            id="Bucket Name"
-                            v-model="bucketName"
-                            variant="outlined"
-                            :rules="bucketNameRules"
-                            label="Bucket name"
-                            placeholder="my-bucket"
-                            hint="Allowed characters [a-z] [0-9] [-.]"
-                            :hide-details="false"
-                            required
-                            autofocus
-                            class="mt-7 mb-3"
-                            minlength="3"
-                            maxlength="63"
-                        />
-                    </v-col>
-                </v-row>
-            </v-form>
-
+            <v-window v-model="step">
+                <v-window-item :value="CreateStep.Name">
+                    <v-form v-model="formValid" class="pa-7 pb-3" @submit.prevent="createOrNext">
+                        <v-row>
+                            <v-col>
+                                <p>Buckets are used to store and organize your files. Enter a bucket name using lowercase characters.</p>
+                                <v-text-field
+                                    id="Bucket Name"
+                                    v-model="bucketName"
+                                    variant="outlined"
+                                    :rules="bucketNameRules"
+                                    label="Bucket name"
+                                    placeholder="my-bucket"
+                                    hint="Allowed characters [a-z] [0-9] [-.]"
+                                    :hide-details="false"
+                                    required
+                                    autofocus
+                                    class="mt-7 mb-3"
+                                    minlength="3"
+                                    maxlength="63"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-form>
+                </v-window-item>
+                <v-window-item :value="CreateStep.Versioning">
+                    <v-form v-model="versioningValid" class="pa-7">
+                        <v-row>
+                            <v-col>
+                                <p class="font-weight-bold mb-2">Do you want to enable versioning?</p>
+                                <p>Enabling object versioning allows you to preserve, retrieve, and restore previous versions of a file, offering protection against unintentional modifications or deletions.</p>
+                                <v-chip-group
+                                    v-model="enableVersioning"
+                                    filter
+                                    selected-class="font-weight-bold"
+                                    class="mt-2 mb-2"
+                                    mandatory
+                                >
+                                    <v-chip
+                                        variant="outlined"
+                                        filter
+                                        :value="false"
+                                    >
+                                        Disabled
+                                    </v-chip>
+                                    <v-chip
+                                        variant="outlined"
+                                        filter
+                                        :value="true"
+                                        color="primary"
+                                    >
+                                        Enabled
+                                    </v-chip>
+                                </v-chip-group>
+                                <v-alert v-if="enableVersioning" variant="tonal" color="default">
+                                    <p class="text-subtitle-2">Keep multiple versions of each file in the same bucket. Additional storage costs apply for each version.</p>
+                                </v-alert>
+                                <v-alert v-else variant="tonal" color="default">
+                                    <p class="text-subtitle-2">Uploading a file with the same name will overwrite the existing file in this bucket.</p>
+                                </v-alert>
+                            </v-col>
+                        </v-row>
+                    </v-form>
+                </v-window-item>
+            </v-window>
             <v-divider />
 
             <v-card-actions class="pa-7">
                 <v-row>
                     <v-col>
-                        <v-btn :disabled="isLoading" variant="outlined" color="default" block @click="model = false">Cancel</v-btn>
+                        <v-btn :disabled="isLoading" variant="outlined" color="default" block @click="closeOrBack">
+                            {{ step === CreateStep.Name ? 'Cancel' : 'Back' }}
+                        </v-btn>
                     </v-col>
                     <v-col>
-                        <v-btn :disabled="!formValid" :loading="isLoading" color="primary" variant="flat" block @click="onCreate">
-                            Create Bucket
+                        <v-btn :disabled="!formValid" :loading="isLoading" color="primary" variant="flat" block @click="createOrNext">
+                            {{ !allowCreateVersionedBucket || step === CreateStep.Versioning ? 'Create Bucket' : 'Next' }}
                         </v-btn>
                     </v-col>
                 </v-row>
@@ -87,19 +131,24 @@
 
 <script setup lang="ts">
 import { Component, computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
 import {
+    VAlert,
     VBtn,
     VCard,
     VCardActions,
     VCardItem,
     VCardTitle,
+    VChip,
+    VChipGroup,
     VCol,
     VDialog,
     VDivider,
     VForm,
-    VRow, VSheet,
+    VRow,
+    VSheet,
     VTextField,
+    VWindow,
+    VWindowItem,
 } from 'vuetify/components';
 
 import { useLoading } from '@/composables/useLoading';
@@ -113,6 +162,12 @@ import { LocalData } from '@/utils/localData';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { ValidationRule } from '@/types/common';
+import { Versioning } from '@/types/versioning';
+
+enum CreateStep {
+    Name = 1,
+    Versioning = 2,
+}
 
 const { isLoading, withLoading } = useLoading();
 const notify = useNotify();
@@ -131,11 +186,23 @@ const emit = defineEmits<{
     (event: 'created', value: string): void,
 }>();
 
+const step = ref(CreateStep.Name);
 const innerContent = ref<Component | null>(null);
 const formValid = ref<boolean>(false);
+const versioningValid = ref<boolean>(false);
+const enableVersioning = ref<boolean>(false);
 const bucketName = ref<string>('');
 const worker = ref<Worker | null>(null);
 
+const project = computed(() => projectsStore.state.selectedProject);
+
+/**
+ * Whether versioning has been enabled for current project.
+ */
+const allowCreateVersionedBucket = computed<boolean>(() => {
+    return projectsStore.versioningUIEnabled  && project.value.versioning !== Versioning.Enabled;
+});
+
 const bucketNameRules = computed((): ValidationRule<string>[] => {
     return [
         (value: string) => (!!value || 'Bucket name is required.'),
@@ -215,6 +282,28 @@ function setWorker(): void {
     }
 }
 
+/**
+ * Conditionally close dialog or go to previous step.
+ */
+function closeOrBack() {
+    if (step.value === CreateStep.Name) {
+        model.value = false;
+        return;
+    }
+    step.value = CreateStep.Name;
+}
+
+/**
+ * Conditionally create bucket or go to next step.
+ */
+function createOrNext() {
+    if (!allowCreateVersionedBucket.value || step.value === CreateStep.Versioning) {
+        onCreate();
+        return;
+    }
+    step.value = CreateStep.Versioning;
+}
+
 /**
  * Validates provided bucket's name and creates a bucket.
  */
@@ -228,13 +317,13 @@ function onCreate(): void {
         }
 
         try {
-            const projectID = projectsStore.state.selectedProject.id;
+            const projectID = project.value.id;
 
             if (!promptForPassphrase.value) {
                 if (!edgeCredentials.value.accessKeyId) {
                     await bucketsStore.setS3Client(projectID);
                 }
-                await bucketsStore.createBucket(bucketName.value);
+                await bucketsStore.createBucket(bucketName.value, enableVersioning.value);
                 await bucketsStore.getBuckets(1, projectID);
                 analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
 
@@ -248,7 +337,7 @@ function onCreate(): void {
             }
 
             if (edgeCredentialsForCreate.value.accessKeyId) {
-                await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
+                await bucketsStore.createBucketWithNoPassphrase(bucketName.value, enableVersioning.value);
                 await bucketsStore.getBuckets(1, projectID);
                 analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
                 if (!bucketWasCreated.value) {
@@ -258,7 +347,7 @@ function onCreate(): void {
                 model.value = false;
                 emit('created', bucketName.value);
 
-                return ;
+                return;
             }
 
             if (!apiKey.value) {
@@ -316,7 +405,7 @@ function onCreate(): void {
 
             const creds: EdgeCredentials = await agStore.getEdgeCredentials(accessGrant);
             bucketsStore.setEdgeCredentialsForCreate(creds);
-            await bucketsStore.createBucketWithNoPassphrase(bucketName.value);
+            await bucketsStore.createBucketWithNoPassphrase(bucketName.value, enableVersioning.value);
             await bucketsStore.getBuckets(1, projectID);
             analyticsStore.eventTriggered(AnalyticsEvent.BUCKET_CREATED);
 
@@ -338,7 +427,7 @@ watch(innerContent, newContent => {
 
         withLoading(async () => {
             try {
-                await bucketsStore.getAllBucketsNames(projectsStore.state.selectedProject.id);
+                await bucketsStore.getAllBucketsNames(project.value.id);
             } catch (error) {
                 notify.notifyError(error, AnalyticsErrorEventSource.CREATE_BUCKET_MODAL);
             }
@@ -347,5 +436,7 @@ watch(innerContent, newContent => {
     }
     // dialog has been closed
     bucketName.value = '';
+    step.value = CreateStep.Name;
+    enableVersioning.value = false;
 });
 </script>
diff --git a/web/satellite/src/layouts/default/Default.vue b/web/satellite/src/layouts/default/Default.vue
index 4e7d6911e75b..6ea12f2274b1 100644
--- a/web/satellite/src/layouts/default/Default.vue
+++ b/web/satellite/src/layouts/default/Default.vue
@@ -87,6 +87,11 @@ async function selectProject(urlId: string): Promise<void> {
         return;
     }
     projectsStore.selectProject(project.id);
+    try {
+        await projectsStore.getProjectConfig();
+    } catch (error) {
+        notify.notifyError(error, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
+    }
 }
 
 watch(() => route.params.id, async newId => {
diff --git a/web/satellite/src/store/modules/bucketsStore.ts b/web/satellite/src/store/modules/bucketsStore.ts
index c7d6442bcddb..1d03941f6737 100644
--- a/web/satellite/src/store/modules/bucketsStore.ts
+++ b/web/satellite/src/store/modules/bucketsStore.ts
@@ -9,6 +9,8 @@ import {
     CreateBucketCommand,
     DeleteBucketCommand,
     ListObjectsV2Command,
+    PutBucketVersioningCommand,
+    BucketVersioningStatus,
 } from '@aws-sdk/client-s3';
 import { SignatureV4 } from '@smithy/signature-v4';
 
@@ -225,16 +227,32 @@ export const useBucketsStore = defineStore('buckets', () => {
         state.enterPassphraseCallback = fn;
     }
 
-    async function createBucket(name: string): Promise<void> {
+    async function createBucket(name: string, enableBucketVersioning: boolean): Promise<void> {
         await state.s3Client.send(new CreateBucketCommand({
             Bucket: name,
         }));
+        if (enableBucketVersioning) {
+            await state.s3Client.send(new PutBucketVersioningCommand({
+                Bucket: name,
+                VersioningConfiguration: {
+                    Status: BucketVersioningStatus.Enabled,
+                },
+            }));
+        }
     }
 
-    async function createBucketWithNoPassphrase(name: string): Promise<void> {
+    async function createBucketWithNoPassphrase(name: string, enableBucketVersioning: boolean): Promise<void> {
         await state.s3ClientForCreate.send(new CreateBucketCommand({
             Bucket: name,
         }));
+        if (enableBucketVersioning) {
+            await state.s3ClientForCreate.send(new PutBucketVersioningCommand({
+                Bucket: name,
+                VersioningConfiguration: {
+                    Status: BucketVersioningStatus.Enabled,
+                },
+            }));
+        }
     }
 
     async function deleteBucket(name: string): Promise<void> {
diff --git a/web/satellite/src/store/modules/projectsStore.ts b/web/satellite/src/store/modules/projectsStore.ts
index e569df5df368..83f9f6672a0a 100644
--- a/web/satellite/src/store/modules/projectsStore.ts
+++ b/web/satellite/src/store/modules/projectsStore.ts
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 import { defineStore } from 'pinia';
-import { computed, reactive, readonly } from 'vue';
+import { computed, ComputedRef, reactive, readonly } from 'vue';
 
 import {
     DataStamp,
@@ -18,12 +18,14 @@ import {
     ProjectInvitation,
     ProjectInvitationResponse,
     Emission,
+    ProjectConfig,
 } from '@/types/projects';
 import { ProjectsHttpApi } from '@/api/projects';
 import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
 import { hexToBase64 } from '@/utils/strings';
 import { Duration, Time } from '@/utils/time';
 import { useConfigStore } from '@/store/modules/configStore';
+import { Versioning } from '@/types/versioning';
 
 const DEFAULT_PROJECT = new Project('', '', '', '', '', true, 0);
 const DEFAULT_INVITATION = new ProjectInvitation('', '', '', '', new Date());
@@ -35,6 +37,7 @@ export const DEFAULT_PROJECT_LIMITS = readonly(new ProjectLimits());
 export class ProjectsState {
     public projects: Project[] = [];
     public selectedProject: Project = DEFAULT_PROJECT;
+    public selectedProjectConfig: ProjectConfig = new ProjectConfig();
     public currentLimits: Readonly<ProjectLimits> = DEFAULT_PROJECT_LIMITS;
     public totalLimits: Readonly<ProjectLimits> = DEFAULT_PROJECT_LIMITS;
     public cursor: ProjectsCursor = new ProjectsCursor();
@@ -53,6 +56,8 @@ export const useProjectsStore = defineStore('projects', () => {
 
     const api: ProjectsApi = new ProjectsHttpApi();
 
+    const versioningUIEnabled: ComputedRef<boolean> = computed(() => state.selectedProjectConfig.versioningUIEnabled);
+
     function getUsageReportLink(startUTC: Date, endUTC: Date, projectID = ''): string {
         const since = Time.toUnixTimestamp(startUTC);
         const before = Time.toUnixTimestamp(endUTC);
@@ -187,6 +192,10 @@ export const useProjectsStore = defineStore('projects', () => {
         state.selectedProject = selected;
     }
 
+    async function getProjectConfig(): Promise<void> {
+        state.selectedProjectConfig = await api.getConfig(state.selectedProject.id);
+    }
+
     async function updateProjectName(fieldsToUpdate: ProjectFields): Promise<void> {
         const project = new ProjectFields(
             fieldsToUpdate.name,
@@ -349,12 +358,14 @@ export const useProjectsStore = defineStore('projects', () => {
 
     return {
         state,
+        versioningUIEnabled,
         getProjects,
         getOwnedProjects,
         getDailyProjectData,
         createProject,
         createDefaultProject,
         selectProject,
+        getProjectConfig,
         updateProjectName,
         updateProjectDescription,
         updateProjectStorageLimit,
diff --git a/web/satellite/src/types/projects.ts b/web/satellite/src/types/projects.ts
index 6c14d62a1e5b..085901a17053 100644
--- a/web/satellite/src/types/projects.ts
+++ b/web/satellite/src/types/projects.ts
@@ -23,6 +23,14 @@ export interface ProjectsApi {
      * @throws Error
      */
     get(): Promise<Project[]>;
+    /**
+     * Fetch config for project.
+     *
+     * @param projectId - the project's ID
+     * @returns ProjectConfig
+     * @throws Error
+     */
+    getConfig(projectId: string): Promise<ProjectConfig>;
     /**
      * Update project name and description.
      *
@@ -140,14 +148,15 @@ export class Project {
         public storageUsed: number = 0,
         public bandwidthUsed: number = 0,
     ) {}
+}
 
-    /**
-     * Returns created date as a local string.
-     */
-    public createdDate(): string {
-        const createdAt = new Date(this.createdAt);
-        return createdAt.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: 'numeric' });
-    }
+/**
+ * ProjectConfig is a type, used for project configuration.
+ */
+export class ProjectConfig {
+    public constructor(
+        public versioningUIEnabled: boolean = false,
+    ) {}
 }
 
 /**