web/satellite: create access grant: bucket search feature

WHAT:
search for bucket names during creating access grant flow

WHY:
make user be able to search for needed buckets. Just in case if the number of buckets is too large.

Change-Id: I73bcaa160c7a1f433d8f0f7213999e7e40543bbc

web/satellite/src/components/accessGrants/permissions/BucketsDropdown.vue

@@ -7,9 +7,17 @@
             <p class="buckets-dropdown__container__all" @click.stop="selectAllBuckets">
                 All
             </p>
+            <label class="buckets-dropdown__container__search">
+                <input
+                    class="buckets-dropdown__container__search__input"
+                    placeholder="Search buckets"
+                    type="text"
+                    v-model="bucketSearch"
+                >
+            </label>
             <div
                 class="buckets-dropdown__container__choices"
-                v-for="(name, index) in allBucketNames"
+                v-for="(name, index) in bucketsList"
                 :key="index"
             >
                 <div
@@ -27,6 +35,9 @@
                     />
                 </div>
             </div>
+            <p class="buckets-dropdown__container__no-buckets" v-if="!bucketsList.length">
+                No Buckets
+            </p>
         </div>
     </div>
 </template>
@@ -46,6 +57,8 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
     },
 })
 export default class BucketsDropdown extends Vue {
+    public bucketSearch: string = '';
+
     /**
      * Clears selection of specific buckets and closes dropdown.
      */
@@ -69,19 +82,24 @@ export default class BucketsDropdown extends Vue {
         return this.selectedBucketNames.includes(name);
     }
 
+    /**
+     * Returns stored bucket names list filtered by search string.
+     */
+    public get bucketsList(): string[] {
+        const NON_EXIST_INDEX = -1;
+        const buckets: string[] = this.$store.state.bucketUsageModule.allBucketNames;
+
+        return buckets.filter((name: string) => {
+            return name.indexOf(this.bucketSearch.toLowerCase()) !== NON_EXIST_INDEX;
+        });
+    }
+
     /**
      * Returns stored selected bucket names.
      */
     public get selectedBucketNames(): string[] {
         return this.$store.state.accessGrantsModule.selectedBucketNames;
     }
-
-    /**
-     * Returns all bucket names.
-     */
-    public get allBucketNames(): string[] {
-        return this.$store.state.bucketUsageModule.allBucketNames;
-    }
 }
 </script>
 
@@ -103,14 +121,14 @@ export default class BucketsDropdown extends Vue {
         background-color: #fff;
         border: 1px solid rgba(56, 75, 101, 0.4);
         width: 100%;
-        padding-top: 10px;
+        padding: 10px 0;
 
         &__container {
             overflow-y: scroll;
             overflow-x: hidden;
             height: auto;
             width: 100%;
-            max-height: 300px;
+            max-height: 230px;
             background-color: #fff;
             border-radius: 6px;
             font-family: 'font_regular', sans-serif;
@@ -120,6 +138,19 @@ export default class BucketsDropdown extends Vue {
             line-height: 21px;
             color: #384b65;
 
+            &__search {
+                padding: 5px 10px;
+                width: calc(100% - 20px);
+
+                &__input {
+                    font-size: 14px;
+                    line-height: 18px;
+                    border-radius: 6px;
+                    width: calc(100% - 30px);
+                    padding: 5px;
+                }
+            }
+
             &__all {
                 margin: 0;
                 cursor: pointer;
@@ -132,6 +163,19 @@ export default class BucketsDropdown extends Vue {
                 }
             }
 
+            &__no-buckets {
+                font-family: 'font_bold', sans-serif;
+                margin: 0;
+                font-size: 18px;
+                line-height: 24px;
+                cursor: default;
+                color: #000;
+                background-color: #fff;
+                width: 100%;
+                padding: 15px 0;
+                text-align: center;
+            }
+
             &__choices {
 
                 &__item__unselect-icon {

web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue

@@ -12,12 +12,12 @@
                 class="buckets-selection__toggle-container__expand-icon"
                 alt="Arrow down (expand)"
             />
-            <BucketsDropdown
-                v-show="isDropdownShown"
-                @close="closeDropdown"
-                v-click-outside="closeDropdown"
-            />
         </div>
+        <BucketsDropdown
+            v-if="isDropdownShown"
+            @close="closeDropdown"
+            v-click-outside="closeDropdown"
+        />
     </div>
 </template>
 
@@ -82,9 +82,9 @@ export default class BucketsSelection extends Vue {
         border: 1px solid rgba(56, 75, 101, 0.4);
         font-family: 'font_regular', sans-serif;
         width: 235px;
+        position: relative;
 
         &__toggle-container {
-            position: relative;
             display: flex;
             align-items: center;
             justify-content: space-between;