web/satellite/vuetify-poc: another round of small improvements

break text of download notification (e.g. when you download from preview)
hide right/left buttons in object preview if there are not next/previous items
add counter property to project name in "project create". Set max length so that user cannot type additional characters

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

Change-Id: Icff95427a5c73c2fb5bb014ff09150283cc49e83

web/satellite/src/utils/plugins/notificator.ts

@@ -21,13 +21,13 @@ export class Notificator {
 
         if (error instanceof APIError) {
             let template = `
-            <p class="message-title">${error.message}</p>
+                <p class="message-title">${error.message}</p>
-        `;
+            `;
             if (error.requestID) {
                 template = `
-            ${template}
+                    ${template}
-            <p class="message-footer">Request ID: ${error.requestID}</p>
+                    <p class="message-footer text-caption">Request ID: ${error.requestID}</p>
-        `;
+                `;
             }
             notificationsStore.notifyError({ message: '', source }, template);
             return;

web/satellite/vuetify-poc/src/components/BrowserRowActions.vue

@@ -148,11 +148,18 @@ const isDeleting = computed((): boolean => {
 });
 
 async function onDownloadClick(): Promise<void> {
+    if (isDownloading.value) {
+        return;
+    }
+
     isDownloading.value = true;
-    await obStore.download(props.file).catch((err: Error) => {
+    try {
-        err.message = `Error downloading file. ${err.message}`;
+        await obStore.download(props.file);
-        notify.notifyError(err, AnalyticsErrorEventSource.FILE_BROWSER_ENTRY);
+        notify.success('', `<p>Keep this download link private.<br>If you want to share, use the Share option.</p>`);
-    });
+    } catch (error) {
+        error.message = `Error downloading file. ${error.message}`;
+        notify.notifyError(error, AnalyticsErrorEventSource.FILE_BROWSER_ENTRY);
+    }
     isDownloading.value = false;
 }
 

web/satellite/vuetify-poc/src/components/dialogs/CreateProjectDialog.vue

@@ -45,6 +45,7 @@
                                 :rules="nameRules"
                                 label="Project Name"
                                 :counter="MAX_NAME_LENGTH"
+                                :maxlength="MAX_NAME_LENGTH"
                                 persistent-counter
                                 :hide-details="false"
                                 autofocus
@@ -68,6 +69,7 @@
                                 :hide-details="false"
                                 label="Project Description (Optional)"
                                 :counter="MAX_DESCRIPTION_LENGTH"
+                                :maxlength="MAX_DESCRIPTION_LENGTH"
                                 persistent-counter
                             />
                         </v-col>

web/satellite/vuetify-poc/src/components/dialogs/FilePreviewDialog.vue

@@ -7,6 +7,7 @@
             <v-carousel v-model="constCarouselIndex" hide-delimiters show-arrows="hover" height="100vh">
                 <template #prev>
                     <v-btn
+                        v-if="files.length > 1"
                         color="default"
                         class="rounded-circle"
                         icon
@@ -17,6 +18,7 @@
                 </template>
                 <template #next>
                     <v-btn
+                        v-if="files.length > 1"
                         color="default"
                         class="rounded-circle"
                         icon
@@ -195,12 +197,14 @@ async function download(): Promise<void> {
     if (isDownloading.value) {
         return;
     }
+
     isDownloading.value = true;
     try {
         await obStore.download(currentFile.value);
-        notify.success('Keep this download link private. If you want to share, use the Share option.');
+        notify.success('', `<p>Keep this download link private.<br>If you want to share, use the Share option.</p>`);
     } catch (error) {
-        notify.error('Can not download your file', AnalyticsErrorEventSource.OBJECT_DETAILS_MODAL);
+        error.message = `Error downloading file. ${error.message}`;
+        notify.notifyError(error, AnalyticsErrorEventSource.OBJECT_DETAILS_MODAL);
     }
     isDownloading.value = false;
 }

web/satellite/vuetify-poc/src/layouts/default/Notifications.vue

@@ -15,7 +15,7 @@
             closable
             variant="elevated"
             :title="title(item.type)"
-            :text="item.message"
+            :text="item.messageNode ? '' : item.message"
             :type="getType(item.type)"
             rounded="lg"
             class="my-2"
@@ -23,7 +23,12 @@
             @mouseover="() => onMouseOver(item.id)"
             @mouseleave="() => onMouseLeave(item.id)"
             @click:close="() => onCloseClick(item.id)"
-        />
+        >
+            <template #default>
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <div v-if="item.messageNode" v-html="item.messageNode" />
+            </template>
+        </v-alert>
     </v-snackbar>
 </template>