web/satellite: delete bucket popup reworked

WHAT
added bucket name validation to delete bucket popup
removed bucket name auto-fill

WHY
better user experience

Change-Id: I5ba98050575a174ac22e5c32877cb2354cedb63f

web/satellite/src/components/common/HeaderedInput.vue

@@ -5,7 +5,7 @@
     <div class="input-container">
         <div v-if="!isOptional" class="label-container">
             <div class="label-container__main">
-                <ErrorIcon v-if="error"/>
+                <ErrorIcon class="label-container__error-icon" v-if="error"/>
                 <h3 v-if="!error" class="label-container__main__label">{{label}}</h3>
                 <h3 v-if="!error" class="label-container__main__label add-label">{{additionalLabel}}</h3>
                 <h3 class="label-container__main__error" v-if="error">{{error}}</h3>
@@ -100,6 +100,11 @@ export default class HeaderedInput extends HeaderlessInput {
         align-items: center;
         margin-bottom: 10px;
 
+        &__error-icon {
+            min-height: 20px;
+            min-width: 20px;
+        }
+
         &__main {
             display: flex;
             justify-content: flex-start;

web/satellite/src/components/objects/BucketsView.vue

@@ -43,7 +43,6 @@
             button-label="Create Bucket"
             :error-message="errorMessage"
             :is-loading="isRequestProcessing"
-            :is-create-bucket="true"
         />
         <ObjectsPopup
             v-if="isDeletePopupVisible"
@@ -53,7 +52,6 @@
             title="Are you sure?"
             sub-title="Deleting this bucket will delete all metadata related to this bucket."
             button-label="Confirm Delete Bucket"
-            :default-input-value="deleteBucketName"
             :error-message="errorMessage"
             :is-loading="isRequestProcessing"
         />
@@ -198,23 +196,7 @@ export default class BucketsView extends Vue {
     public async onCreateBucketClick(): Promise<void> {
         if (this.isRequestProcessing) return;
 
-        if (this.createBucketName.length < 3 || this.createBucketName.length > 63) {
-            this.errorMessage = 'Name must be not less than 3 and not more than 63 characters length';
-
-            return;
-        }
-
-        if (!Validator.bucketName(this.createBucketName)) {
-            this.errorMessage = 'Name must include only lowercase latin characters';
-
-            return;
-        }
-
-        if (!Validator.oneWordString(this.createBucketName)) {
-            this.errorMessage = 'Name must be 1-word string';
-
-            return;
-        }
+        if (!this.isBucketNameValid(this.createBucketName)) return;
 
         this.isRequestProcessing = true;
 
@@ -241,9 +223,7 @@ export default class BucketsView extends Vue {
     public async onDeleteBucketClick(): Promise<void> {
         if (this.isRequestProcessing) return;
 
-        if (!this.deleteBucketName) {
-            this.errorMessage = 'Bucket name can\'t be empty';
-        }
+        if (!this.isBucketNameValid(this.deleteBucketName)) return;
 
         this.isRequestProcessing = true;
 
@@ -349,6 +329,28 @@ export default class BucketsView extends Vue {
     private get passphrase(): string {
         return this.$store.state.objectsModule.passphrase;
     }
+
+    /**
+     * Returns validation status of a bucket name.
+     */
+    private isBucketNameValid(name: string): boolean {
+        switch (true) {
+            case name.length < 3 || name.length > 63:
+                this.errorMessage = 'Name must be not less than 3 and not more than 63 characters length';
+
+                return false;
+            case !Validator.bucketName(name):
+                this.errorMessage = 'Name must include only lowercase latin characters';
+
+                return false;
+            case !Validator.oneWordString(name):
+                this.errorMessage = 'Name must be 1-word string';
+
+                return false;
+            default:
+                return true;
+        }
+    }
 }
 </script>
 

web/satellite/src/components/objects/ObjectsPopup.vue

@@ -6,7 +6,7 @@
         <div class="objects-popup__container">
             <h1 class="objects-popup__container__title">{{title}}</h1>
             <p class="objects-popup__container__sub-title">{{subTitle}}</p>
-            <div v-if="isCreateBucket" class="objects-popup__container__info">
+            <div class="objects-popup__container__info">
                 <WarningIcon/>
                 <p class="objects-popup__container__info__msg">Only lowercase alphanumeric characters are allowed.</p>
             </div>
@@ -15,7 +15,6 @@
                 label="Bucket Name"
                 placeholder="Enter bucket name"
                 @setData="onChangeName"
-                :init-value="defaultInputValue"
                 :error="errorMessage"
                 :is-loading="isLoading"
             />
@@ -58,15 +57,11 @@ export default class ObjectsPopup extends Vue {
     @Prop({ default: ''})
     public readonly subTitle: string;
     @Prop({ default: ''})
-    public readonly defaultInputValue: string;
-    @Prop({ default: ''})
     public readonly buttonLabel: string;
     @Prop({ default: ''})
     public readonly errorMessage: string;
     @Prop({ default: false})
     public readonly isLoading: boolean;
-    @Prop({ default: false})
-    public readonly isCreateBucket: boolean;
 
     /**
      * Sets bucket name from input.
@@ -132,7 +127,7 @@ export default class ObjectsPopup extends Vue {
                 padding: 23px 14px;
                 background: #f5f6fa;
                 border: 1px solid #a9b5c1;
-                margin-top: 20px;
+                margin: 20px 0;
                 border-radius: 9px;
 
                 &__msg {

web/satellite/tests/unit/common/__snapshots__/HeaderedInput.spec.ts.snap

@@ -21,7 +21,7 @@ exports[`HeaderedInput.vue renders correctly with input error 1`] = `
 <div class="input-container">
   <div class="label-container">
     <div class="label-container__main">
-      <erroricon-stub></erroricon-stub>
+      <erroricon-stub class="label-container__error-icon"></erroricon-stub>
       <!---->
       <!---->
       <h3 class="label-container__main__error">testError</h3>