From 988716b4f475d2dbd767b8f289ea2819f154b096 Mon Sep 17 00:00:00 2001
From: kart-u <pandeykartik715@gmail.com>
Date: Wed, 29 Oct 2025 19:21:16 +0000
Subject: [PATCH 1/8] Uploader.vue refactored with KModal

---
 .../frontend/shared/views/files/Uploader.vue  | 75 +++++++++++--------
 1 file changed, 43 insertions(+), 32 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index 42882b4f0f..01716e0702 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -22,38 +22,48 @@
       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),
-        })
-      "
-    />
-    <Alert
-      v-model="showStorageExceededAlert"
-      :header="$tr('noStorageHeader')"
-      text=""
+    <KModal
+      v-if="showUnsupportedFilesAlert"
+      :title="$tr('unsupportedFilesHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="showUnsupportedFilesAlert = false"
+      @cancel="showUnsupportedFilesAlert = false"
     >
-      <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"
+      @cancel="showTooLargeFilesAlert = false"
+    >
+      <p>
+        {{
+          $tr('maxFileSizeText', {
+            count: tooLargeFiles.length,
+            size: formatFileSize(maxFileSize),
+          })
+        }}
+      </p>
+    </KModal>
+    <KModal
+      v-if="showStorageExceededAlert"
+      :title="$tr('noStorageHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="showStorageExceededAlert = false"
+      @cancel="showStorageExceededAlert = false"
+    >
+      <div class="storage-alert">
+        <p>{{ $tr('uploadSize', { size: formatFileSize(totalUploadSize) }) }}</p>
+        <p>
+          {{ $tr('remainingStorage', { size: formatFileSize(availableSpace) }) }}
+        </p>
+        <div class="storage-usage">
+          <FileStorage />
         </div>
-      </template>
-    </Alert>
+      </div>
+    </KModal>
   </div>
 
 </template>
@@ -73,13 +83,13 @@
   import FileDropzone from './FileDropzone';
   import { MAX_FILE_SIZE } from 'shared/constants';
   import { fileSizeMixin } from 'shared/mixins';
-  import Alert from 'shared/views/Alert';
+  import KModal from 'kolibri-design-system/lib/KModal';
   import { FormatPresetsList } from 'shared/leUtils/FormatPresets';
 
   export default {
     name: 'Uploader',
     components: {
-      Alert,
+      KModal,
       FileStorage,
       FileDropzone,
     },
@@ -260,6 +270,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',
     },
   };
 

From 0d63476aaad787a6a28a60d10415e6cceec8cc58 Mon Sep 17 00:00:00 2001
From: kart-u <pandeykartik715@gmail.com>
Date: Wed, 29 Oct 2025 19:34:33 +0000
Subject: [PATCH 2/8] refactor thumbnailgenerator with KModal

---
 .../files/thumbnails/ThumbnailGenerator.vue   | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
index c43bc6920f..22231b3ea4 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
@@ -1,11 +1,15 @@
 <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"
+      @cancel="showErrorAlert = false"
+    >
+      <p>{{ $tr('thumbnailGenerationFailedText') }}</p>
+    </KModal>
     <slot :generate="generate"></slot>
   </div>
 
@@ -21,8 +25,8 @@
   import max from 'lodash/max';
   import epubJS from 'epubjs';
   import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js';
+  import KModal from 'kolibri-design-system/lib/KModal';
   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');
@@ -33,7 +37,7 @@
   export default {
     name: 'ThumbnailGenerator',
     components: {
-      Alert,
+      KModal,
     },
     props: {
       filePath: {
@@ -241,6 +245,7 @@
       thumbnailGenerationFailedHeader: 'Unable to generate thumbnail',
       thumbnailGenerationFailedText: 'There was a problem generating a thumbnail',
       generatedDefaultFilename: 'Generated thumbnail',
+      closeButtonLabel: 'OK',
     },
   };
 

From 70d705c96eb56c69669247666dcc4c4def931495 Mon Sep 17 00:00:00 2001
From: kart-u <pandeykartik715@gmail.com>
Date: Thu, 30 Oct 2025 20:02:37 +0000
Subject: [PATCH 3/8] refactored-to-KModal-deleted-Alert

---
 .../frontend/shared/views/Alert.vue           | 111 ------------------
 .../frontend/shared/views/files/Uploader.vue  |   2 +-
 2 files changed, 1 insertion(+), 112 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/Alert.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/Alert.vue b/contentcuration/contentcuration/frontend/shared/views/Alert.vue
deleted file mode 100644
index 0c09df0f40..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/Alert.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-
-  <MessageDialog
-    v-model="open"
-    :header="header"
-    :text="text"
-  >
-    <slot></slot>
-    <VCheckbox
-      v-if="messageId"
-      v-model="dontShowAgain"
-      color="primary"
-      :label="$tr('dontShowAgain')"
-    />
-    <template #buttons="{ close }">
-      <VSpacer />
-      <VBtn
-        depressed
-        color="primary"
-        data-test="ok"
-        @click="close"
-      >
-        {{ $tr('closeButtonLabel') }}
-      </VBtn>
-    </template>
-  </MessageDialog>
-
-</template>
-
-
-<script>
-
-  import MessageDialog from './MessageDialog';
-
-  export default {
-    name: 'Alert',
-    components: {
-      MessageDialog,
-    },
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-      header: {
-        type: String,
-        required: true,
-      },
-      text: {
-        type: String,
-        required: true,
-      },
-      messageId: {
-        type: String,
-        required: false,
-        default: null,
-      },
-    },
-    computed: {
-      open: {
-        get() {
-          return Boolean(!this.dontShowAgain && this.value);
-        },
-        set(open) {
-          this.$emit('input', open);
-        },
-      },
-      dontShowAgain: {
-        get() {
-          return this.messageId
-            ? Boolean(localStorage[`dont_show_messages_${this.messageId}`])
-            : false;
-        },
-        set(value) {
-          if (value) {
-            localStorage[`dont_show_messages_${this.messageId}`] = true;
-          } else {
-            delete localStorage[`dont_show_messages_${this.messageId}`];
-          }
-        },
-      },
-    },
-    methods: {
-      /**
-       * @public
-       */
-      prompt() {
-        this.open = true;
-      },
-    },
-    $trs: {
-      closeButtonLabel: 'OK',
-      dontShowAgain: "Don't show this message again",
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  ::v-deep label {
-    margin: 0;
-    font-weight: normal;
-  }
-
-  .v-input--checkbox {
-    margin-bottom: -25px;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index 01716e0702..1671eebc69 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -59,7 +59,7 @@
         <p>
           {{ $tr('remainingStorage', { size: formatFileSize(availableSpace) }) }}
         </p>
-        <div class="storage-usage">
+        <div class="storage-usage" :style="{ color: $themeTokens.annotation }">
           <FileStorage />
         </div>
       </div>

From 852666629e9a06a42895db4e172edcf488bc0ddc Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Fri, 31 Oct 2025 17:09:25 +0000
Subject: [PATCH 4/8] [pre-commit.ci lite] apply automatic fixes

---
 .../frontend/shared/views/files/Uploader.vue               | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index 1671eebc69..f321421bcc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -59,7 +59,10 @@
         <p>
           {{ $tr('remainingStorage', { size: formatFileSize(availableSpace) }) }}
         </p>
-        <div class="storage-usage" :style="{ color: $themeTokens.annotation }">
+        <div
+          class="storage-usage"
+          :style="{ color: $themeTokens.annotation }"
+        >
           <FileStorage />
         </div>
       </div>
@@ -78,12 +81,12 @@
   import flatMap from 'lodash/flatMap';
   import isFunction from 'lodash/isFunction';
 
+  import KModal from 'kolibri-design-system/lib/KModal';
   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 KModal from 'kolibri-design-system/lib/KModal';
   import { FormatPresetsList } from 'shared/leUtils/FormatPresets';
 
   export default {

From 6d24d93c99aa11c678617ab732b9ba935e78972f Mon Sep 17 00:00:00 2001
From: kart-u <pandeykartik715@gmail.com>
Date: Fri, 31 Oct 2025 18:35:28 +0000
Subject: [PATCH 5/8] corrected based on review

---
 .../files/thumbnails/ThumbnailGenerator.vue   |  2 -
 .../shared/views/__tests__/alert.spec.js      | 38 -------------------
 .../frontend/shared/views/files/Uploader.vue  | 10 ++---
 3 files changed, 4 insertions(+), 46 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/alert.spec.js

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
index 22231b3ea4..7257ab9cf4 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
@@ -6,7 +6,6 @@
       :title="$tr('thumbnailGenerationFailedHeader')"
       :submitText="$tr('closeButtonLabel')"
       @submit="showErrorAlert = false"
-      @cancel="showErrorAlert = false"
     >
       <p>{{ $tr('thumbnailGenerationFailedText') }}</p>
     </KModal>
@@ -25,7 +24,6 @@
   import max from 'lodash/max';
   import epubJS from 'epubjs';
   import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js';
-  import KModal from 'kolibri-design-system/lib/KModal';
   import client from 'shared/client';
   import { ASPECT_RATIO, THUMBNAIL_WIDTH } from 'shared/constants';
   // Based off of solution here: https://github.com/mozilla/pdf.js/issues/7612#issuecomment-576807171
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/alert.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/alert.spec.js
deleted file mode 100644
index 24887aaf5c..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/alert.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Alert from '../Alert.vue';
-
-function makeWrapper() {
-  return mount(Alert, {
-    attachTo: document.body,
-    propsData: {
-      header: '',
-      text: '',
-      messageId: 'testmessageid',
-      value: true,
-    },
-  });
-}
-
-describe('alert', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = makeWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    delete localStorage['dont_show_messages_testmessageid'];
-  });
-
-  it('clicking OK button should dismiss alert', () => {
-    wrapper.find('[data-test="ok"]').trigger('click');
-    expect(wrapper.emitted('input')[0][0]).toBe(false);
-  });
-
-  it("should not prompt if don't show again is submitted", () => {
-    localStorage['dont_show_messages_testmessageid'] = true;
-    wrapper = makeWrapper();
-    expect(wrapper.vm.open).toBe(false);
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index 1671eebc69..c40f59d2a3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -27,7 +27,6 @@
       :title="$tr('unsupportedFilesHeader')"
       :submitText="$tr('closeButtonLabel')"
       @submit="showUnsupportedFilesAlert = false"
-      @cancel="showUnsupportedFilesAlert = false"
     >
       <p>{{ unsupportedFilesText }}</p>
     </KModal>
@@ -36,7 +35,6 @@
       :title="$tr('tooLargeFilesHeader')"
       :submitText="$tr('closeButtonLabel')"
       @submit="showTooLargeFilesAlert = false"
-      @cancel="showTooLargeFilesAlert = false"
     >
       <p>
         {{
@@ -52,14 +50,16 @@
       :title="$tr('noStorageHeader')"
       :submitText="$tr('closeButtonLabel')"
       @submit="showStorageExceededAlert = false"
-      @cancel="showStorageExceededAlert = false"
     >
       <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 }">
+        <div
+          class="storage-usage"
+          :style="{ color: $themeTokens.annotation }"
+        >
           <FileStorage />
         </div>
       </div>
@@ -83,7 +83,6 @@
   import FileDropzone from './FileDropzone';
   import { MAX_FILE_SIZE } from 'shared/constants';
   import { fileSizeMixin } from 'shared/mixins';
-  import KModal from 'kolibri-design-system/lib/KModal';
   import { FormatPresetsList } from 'shared/leUtils/FormatPresets';
 
   export default {
@@ -286,7 +285,6 @@
   .storage-usage {
     margin-top: -5px;
     font-size: 10pt;
-    color: gray;
   }
 
 </style>

From 81ce8ebdec8a09b6b08258876d92f3665c9a9b8d Mon Sep 17 00:00:00 2001
From: kart-u <pandeykartik715@gmail.com>
Date: Fri, 31 Oct 2025 19:00:51 +0000
Subject: [PATCH 6/8] corrected based on review_2

---
 .../contentcuration/frontend/shared/views/files/Uploader.vue    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index a11a6f71d2..1e3355ce95 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -77,8 +77,6 @@
   import uniq from 'lodash/uniq';
   import flatMap from 'lodash/flatMap';
   import isFunction from 'lodash/isFunction';
-
-  import KModal from 'kolibri-design-system/lib/KModal';
   import { validateFile } from '../../vuex/file/validation';
   import FileStorage from './FileStorage';
   import FileDropzone from './FileDropzone';

From 6643dbaad59b9a08fa7252a8a505ffe4ac94fd68 Mon Sep 17 00:00:00 2001
From: kart-u <pandeykartik715@gmail.com>
Date: Mon, 3 Nov 2025 18:39:44 +0000
Subject: [PATCH 7/8] ci-cd-corrections

---
 .../channelEdit/views/files/thumbnails/ThumbnailGenerator.vue | 4 +---
 .../contentcuration/frontend/shared/views/files/Uploader.vue  | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
index 7257ab9cf4..ba9354ea76 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
@@ -34,9 +34,7 @@
 
   export default {
     name: 'ThumbnailGenerator',
-    components: {
-      KModal,
-    },
+    components: {},
     props: {
       filePath: {
         type: String,
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index 1e3355ce95..1a3acb3abc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -87,7 +87,6 @@
   export default {
     name: 'Uploader',
     components: {
-      KModal,
       FileStorage,
       FileDropzone,
     },

From 3c11a728e8ca9105c4df34ed8fb0b4a7c41c4046 Mon Sep 17 00:00:00 2001
From: kart-u <pandeykartik715@gmail.com>
Date: Wed, 5 Nov 2025 21:01:38 +0000
Subject: [PATCH 8/8] corrected test

---
 .../__tests__/thumbnailGenerator.spec.js      | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js
index fef6d48296..d1cb615a48 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js
+++ b/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,7 +22,10 @@ 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', () => {
@@ -30,22 +33,22 @@ describe('thumbnailGenerator', () => {
 
   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();