Improve UI in various cases and add changes in CHANGELOG.md

#29

CHANGELOG.md

+## Version 1.0.1
+
+### General
+* Improved UI when browsing a non-existing bucket or a bucket without permissions for
+* Improved UI when not browsing a bucket
+### Fixes
+* Show correct number of visible objects when searching for objects #28
+### Internal
+* Use a central repository for the buckets and current user permissions to simplify complex interactions between components #29

src/components/BucketView.vue

@@ -687,12 +687,33 @@ watch(
   <!-- Body -->
   <div class="pt-3">
     <!-- If bucket not found -->
-    <div v-if="objectState.bucketNotFoundError">
-      <p>Bucket not found</p>
+    <div v-if="objectState.bucketNotFoundError" class="text-center fs-2 mt-5">
+      <bootstrap-icon
+        icon="search"
+        class="mb-3"
+        :width="64"
+        :height="64"
+        style="color: var(--bs-secondary)"
+        fill="currentColor"
+      />
+      <p>
+        Bucket <i>{{ props.bucketName }}</i> not found
+      </p>
     </div>
     <!-- If no permission for bucket -->
-    <div v-else-if="objectState.bucketPermissionError">
-      <p>No permission for this bucket</p>
+    <div
+      v-else-if="objectState.bucketPermissionError"
+      class="text-center fs-2 mt-5"
+    >
+      <bootstrap-icon
+        icon="folder-x"
+        class="mb-3"
+        :width="64"
+        :height="64"
+        style="color: var(--bs-secondary)"
+        fill="currentColor"
+      />
+      <p>You don't have permission for this bucket</p>
     </div>
     <!-- Show content of bucket -->
     <div v-else>

src/views/object-storage/BucketsView.vue

@@ -154,6 +154,20 @@ onMounted(() => {
     </div>
     <div class="col-9">
       <router-view></router-view>
+      <div
+        v-if="router.currentRoute.value.name === 'buckets'"
+        class="text-center fs-2 mt-5"
+      >
+        <bootstrap-icon
+          icon="hand-index-thumb-fill"
+          class="mb-5"
+          :width="64"
+          :height="64"
+          style="color: var(--bs-secondary)"
+          fill="currentColor"
+        />
+        <p>Click on a bucket to browse its content</p>
+      </div>
     </div>
   </div>
 </template>