corrected buggy modal from uploader.vue

Author: kart-u

contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import ThumbnailGenerator from '../thumbnails/ThumbnailGenerator';
 import { factory } from '../../../store';
 
-function makeWrapper(filePath) {
+async function makeWrapper(filePath) {
   const store = factory();
   const handleFiles = jest.fn(() => true);
 
@@ -22,30 +22,33 @@ function makeWrapper(filePath) {
   const generateVideoThumbnail = jest.spyOn(wrapper.vm, 'generateVideoThumbnail');
   generateVideoThumbnail.mockImplementation(() => Promise.resolve());
 
-  return [wrapper, { fileExists, generateVideoThumbnail, handleFiles }];
+  const handleGenerated = jest.spyOn(wrapper.vm, 'handleGenerated');
+  handleGenerated.mockImplementation(() => {});
+
+  return [wrapper, { fileExists, generateVideoThumbnail, handleFiles, handleGenerated }];
 }
 
 describe('thumbnailGenerator', () => {
   let wrapper, mocks;
 
   it.each(
     ['test.mp4', 'test.webm', 'test.mp3'],
-    'correct generation code should be called',
-    fileName => {
-      [wrapper, mocks] = makeWrapper(fileName);
-      wrapper.vm.generate();
+    'correct generation code should be called for %s',
+    async fileName => {
+      [wrapper, mocks] = await makeWrapper(fileName);
+      await wrapper.vm.generate();
       expect(mocks.generateVideoThumbnail).toHaveBeenCalled();
     },
   );
 
-  it('error alert should show if the file path is an unrecognized type', () => {
-    [wrapper, mocks] = makeWrapper('test.wut');
-    wrapper.vm.generate();
+  it('error alert should show if the file path is an unrecognized type', async () => {
+    [wrapper, mocks] = await makeWrapper('test.wut');
+    await wrapper.vm.generate();
     expect(wrapper.vm.showErrorAlert).toBe(true);
   });
 
   it('handleGenerated should not call handleFiles if cancelled', async () => {
-    [wrapper, mocks] = makeWrapper('test.wut');
+    [wrapper, mocks] = await makeWrapper('test.wut');
     await wrapper.setData({ cancelled: true });
     wrapper.vm.handleGenerated('');
     expect(mocks.handleFiles).not.toHaveBeenCalled();

contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue

@@ -1,11 +1,14 @@
 <template>
 
   <div>
-    <Alert
-      v-model="showErrorAlert"
-      :header="$tr('thumbnailGenerationFailedHeader')"
-      :text="$tr('thumbnailGenerationFailedText')"
-    />
+    <KModal
+      v-if="showErrorAlert"
+      :title="$tr('thumbnailGenerationFailedHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="showErrorAlert = false"
+    >
+      <p>{{ $tr('thumbnailGenerationFailedText') }}</p>
+    </KModal>
     <slot :generate="generate"></slot>
   </div>
 
@@ -22,7 +25,6 @@
   import epubJS from 'epubjs';
   import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js';
   import client from 'shared/client';
-  import Alert from 'shared/views/Alert';
   import { ASPECT_RATIO, THUMBNAIL_WIDTH } from 'shared/constants';
   // Based off of solution here: https://github.com/mozilla/pdf.js/issues/7612#issuecomment-576807171
   const pdfJSLib = require('pdfjs-dist');
@@ -32,9 +34,7 @@
 
   export default {
     name: 'ThumbnailGenerator',
-    components: {
-      Alert,
-    },
+    components: {},
     props: {
       filePath: {
         type: String,
@@ -241,6 +241,7 @@
       thumbnailGenerationFailedHeader: 'Unable to generate thumbnail',
       thumbnailGenerationFailedText: 'There was a problem generating a thumbnail',
       generatedDefaultFilename: 'Generated thumbnail',
+      closeButtonLabel: 'OK',
     },
   };
 

contentcuration/contentcuration/frontend/shared/views/Alert.vue

@@ -22,38 +22,57 @@
       data-test="upload-dialog"
       @change="handleFiles($event.target.files)"
     >
-    <Alert
-      v-model="showUnsupportedFilesAlert"
-      :header="$tr('unsupportedFilesHeader')"
-      :text="unsupportedFilesText"
-    />
-    <Alert
-      v-model="showTooLargeFilesAlert"
-      :header="$tr('tooLargeFilesHeader')"
-      :text="
-        $tr('maxFileSizeText', {
-          count: tooLargeFiles.length,
-          size: formatFileSize(maxFileSize),
-        })
+    <KModal
+      v-if="showUnsupportedFilesAlert"
+      :title="$tr('unsupportedFilesHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="
+        showUnsupportedFilesAlert = false;
+        resetFileInput();
       "
-    />
-    <Alert
-      v-model="showStorageExceededAlert"
-      :header="$tr('noStorageHeader')"
-      text=""
     >
-      <template #default>
-        <div class="storage-alert">
-          <p>{{ $tr('uploadSize', { size: formatFileSize(totalUploadSize) }) }}</p>
-          <p>
-            {{ $tr('remainingStorage', { size: formatFileSize(availableSpace) }) }}
-          </p>
-          <div class="storage-usage">
-            <FileStorage />
-          </div>
+      <p>{{ unsupportedFilesText }}</p>
+    </KModal>
+    <KModal
+      v-if="showTooLargeFilesAlert"
+      :title="$tr('tooLargeFilesHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="
+        showTooLargeFilesAlert = false;
+        resetFileInput();
+      "
+    >
+      <p>
+        {{
+          $tr('maxFileSizeText', {
+            count: tooLargeFiles.length,
+            size: formatFileSize(maxFileSize),
+          })
+        }}
+      </p>
+    </KModal>
+    <KModal
+      v-if="showStorageExceededAlert"
+      :title="$tr('noStorageHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="
+        showStorageExceededAlert = false;
+        resetFileInput();
+      "
+    >
+      <div class="storage-alert">
+        <p>{{ $tr('uploadSize', { size: formatFileSize(totalUploadSize) }) }}</p>
+        <p>
+          {{ $tr('remainingStorage', { size: formatFileSize(availableSpace) }) }}
+        </p>
+        <div
+          class="storage-usage"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          <FileStorage />
         </div>
-      </template>
-    </Alert>
+      </div>
+    </KModal>
   </div>
 
 </template>
@@ -67,19 +86,16 @@
   import uniq from 'lodash/uniq';
   import flatMap from 'lodash/flatMap';
   import isFunction from 'lodash/isFunction';
-
   import { validateFile } from '../../vuex/file/validation';
   import FileStorage from './FileStorage';
   import FileDropzone from './FileDropzone';
   import { MAX_FILE_SIZE } from 'shared/constants';
   import { fileSizeMixin } from 'shared/mixins';
-  import Alert from 'shared/views/Alert';
   import { FormatPresetsList } from 'shared/leUtils/FormatPresets';
 
   export default {
     name: 'Uploader',
     components: {
-      Alert,
       FileStorage,
       FileDropzone,
     },
@@ -248,6 +264,9 @@
           return fileUploads.filter(Boolean);
         });
       },
+      resetFileInput() {
+        this.$refs.fileUpload.value = '';
+      },
     },
     $trs: {
       unsupportedFilesHeader: 'Unsupported files',
@@ -260,6 +279,7 @@
       tooLargeFilesHeader: 'Max file size exceeded',
       maxFileSizeText:
         '{count, plural,\n =1 {# file will not be uploaded.}\n other {# files will not be uploaded.}} File size must be under {size}',
+      closeButtonLabel: 'OK',
     },
   };
 
@@ -275,7 +295,6 @@
   .storage-usage {
     margin-top: -5px;
     font-size: 10pt;
-    color: gray;
   }
 
 </style>