From 7c7441045d605185e189d5bb274fced4df5432aa Mon Sep 17 00:00:00 2001
From: Markos Gogoulos <markos@sixfeetup.com>
Date: Mon, 20 Apr 2026 08:30:59 +0300
Subject: [PATCH] wtv

---
 .../BulkActionCourseCleanupModal.scss         |  33 +++
 .../BulkActionCourseCleanupModal.tsx          | 237 ++++++++++++++++++
 2 files changed, 270 insertions(+)
 create mode 100644 frontend/src/static/js/components/BulkActionCourseCleanupModal.scss
 create mode 100644 frontend/src/static/js/components/BulkActionCourseCleanupModal.tsx

diff --git a/frontend/src/static/js/components/BulkActionCourseCleanupModal.scss b/frontend/src/static/js/components/BulkActionCourseCleanupModal.scss
new file mode 100644
index 00000000..8d1c005f
--- /dev/null
+++ b/frontend/src/static/js/components/BulkActionCourseCleanupModal.scss
@@ -0,0 +1,33 @@
+.course-cleanup-options {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.course-cleanup-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+  line-height: 1.4;
+
+  .dark_theme & {
+    color: #ccc;
+  }
+
+  input[type='checkbox'] {
+    flex-shrink: 0;
+    margin-top: 2px;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    accent-color: var(--default-theme-color, #009933);
+  }
+
+  span {
+    flex: 1;
+  }
+}
diff --git a/frontend/src/static/js/components/BulkActionCourseCleanupModal.tsx b/frontend/src/static/js/components/BulkActionCourseCleanupModal.tsx
new file mode 100644
index 00000000..217983ca
--- /dev/null
+++ b/frontend/src/static/js/components/BulkActionCourseCleanupModal.tsx
@@ -0,0 +1,237 @@
+import React, { useState, useEffect } from 'react';
+import './BulkActionCategoryModal.scss';
+import './BulkActionCourseCleanupModal.scss';
+import { translateString } from '../utils/helpers/';
+
+interface Course {
+  title: string;
+  uid: string;
+}
+
+interface BulkActionCourseCleanupModalProps {
+  isOpen: boolean;
+  selectedMediaIds: string[];
+  onCancel: () => void;
+  onSuccess: (message: string) => void;
+  onError: (message: string) => void;
+  csrfToken: string;
+}
+
+export const BulkActionCourseCleanupModal: React.FC<BulkActionCourseCleanupModalProps> = ({
+  isOpen,
+  selectedMediaIds,
+  onCancel,
+  onSuccess,
+  onError,
+  csrfToken,
+}) => {
+  const hasMediaSelected = selectedMediaIds.length > 0;
+  const [availableCourses, setAvailableCourses] = useState<Course[]>([]);
+  const [coursesToCleanup, setCoursesToCleanup] = useState<Course[]>([]);
+  const [removePermissions, setRemovePermissions] = useState(false);
+  const [removeTags, setRemoveTags] = useState(false);
+  const [applyToAll, setApplyToAll] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchCourses();
+    } else {
+      setAvailableCourses([]);
+      setCoursesToCleanup([]);
+      setRemovePermissions(false);
+      setRemoveTags(false);
+      setApplyToAll(false);
+    }
+  }, [isOpen, selectedMediaIds.join(',')]);
+
+  const fetchCourses = async () => {
+    setIsLoading(true);
+    try {
+      const contributorResponse = await fetch('/api/v1/categories/contributor?lms_courses_only=true');
+      if (!contributorResponse.ok) throw new Error('Failed to fetch courses');
+      const contributorData = await contributorResponse.json();
+      const allContributorCourses: Course[] = contributorData.results || contributorData;
+
+      if (hasMediaSelected) {
+        const membershipResponse = await fetch('/api/v1/media/user/bulk_actions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+          body: JSON.stringify({ action: 'category_membership', media_ids: selectedMediaIds }),
+        });
+        if (!membershipResponse.ok) throw new Error('Failed to fetch media categories');
+        const membershipData = await membershipResponse.json();
+        const mediaCategoryUids = new Set((membershipData.results || []).map((c: Course) => c.uid));
+        setAvailableCourses(allContributorCourses.filter((c) => mediaCategoryUids.has(c.uid)));
+      } else {
+        setAvailableCourses(allContributorCourses);
+      }
+    } catch (error) {
+      onError(translateString('Failed to load courses'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const addCourseToCleanup = (course: Course) => {
+    if (!coursesToCleanup.some((c) => c.uid === course.uid)) {
+      setCoursesToCleanup((prev) => [...prev, course]);
+      setAvailableCourses((prev) => prev.filter((c) => c.uid !== course.uid));
+    }
+  };
+
+  const removeCourseFromCleanup = (course: Course) => {
+    setCoursesToCleanup((prev) => prev.filter((c) => c.uid !== course.uid));
+    setAvailableCourses((prev) => [...prev, course]);
+  };
+
+  const handleProceed = async () => {
+    if (coursesToCleanup.length === 0) return;
+    setIsProcessing(true);
+    try {
+      const response = await fetch('/api/v1/media/user/bulk_actions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+        body: JSON.stringify({
+          action: 'course_cleanup',
+          media_ids: selectedMediaIds,
+          category_uids: coursesToCleanup.map((c) => c.uid),
+          remove_permissions: removePermissions,
+          remove_tags: removeTags,
+          apply_to_all: applyToAll,
+        }),
+      });
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.detail || 'Failed');
+      }
+      onSuccess(translateString('Course cleanup completed successfully'));
+      onCancel();
+    } catch (error: any) {
+      onError(error.message || translateString('Course cleanup failed. Please try again.'));
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="category-modal-overlay">
+      <div className="category-modal">
+        <div className="category-modal-header">
+          <div>
+            <h2>{translateString('Course Cleanup')}</h2>
+            <div className="category-modal-subtitle">
+              <span>
+                {translateString(
+                  'Cleanup irrelevant course content such as old user permissions and course tags. Add course to the right column and select what to cleanup under the Column. The cleanup can apply to the media you have selected only or to all media in the course, if that option is selected.'
+                )}
+              </span>
+            </div>
+          </div>
+          <button className="category-modal-close" onClick={onCancel}>
+            ×
+          </button>
+        </div>
+
+        <div className="category-modal-content">
+          <div className="category-panel">
+            <h3>{translateString('Courses available')}</h3>
+            {isLoading ? (
+              <div className="loading-message">{translateString('Loading courses...')}</div>
+            ) : (
+              <div className="category-list scrollable">
+                {availableCourses.length === 0 ? (
+                  <div className="empty-message">{translateString('No courses available')}</div>
+                ) : (
+                  availableCourses.map((course) => (
+                    <div
+                      key={course.uid}
+                      className="category-item clickable"
+                      onClick={() => addCourseToCleanup(course)}
+                    >
+                      <span>{course.title}</span>
+                      <button className="add-btn">+</button>
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="category-panel">
+            <h3>{translateString('Courses to cleanup')}</h3>
+            {isLoading ? (
+              <div className="loading-message">{translateString('Loading courses...')}</div>
+            ) : (
+              <>
+                <div className="category-list scrollable">
+                  {coursesToCleanup.length === 0 ? (
+                    <div className="empty-message">{translateString('No courses selected')}</div>
+                  ) : (
+                    coursesToCleanup.map((course) => (
+                      <div key={course.uid} className="category-item">
+                        <span>{course.title}</span>
+                        <button
+                          className="remove-btn"
+                          onClick={() => removeCourseFromCleanup(course)}
+                          title={translateString('Remove from list')}
+                        >
+                          ×
+                        </button>
+                      </div>
+                    ))
+                  )}
+                </div>
+
+                <div className="course-cleanup-options">
+                  <label className="course-cleanup-checkbox">
+                    <input
+                      type="checkbox"
+                      checked={removePermissions}
+                      onChange={(e) => setRemovePermissions(e.target.checked)}
+                    />
+                    <span>{translateString('Remove present course permissions for all course members')}</span>
+                  </label>
+                  <label className="course-cleanup-checkbox">
+                    <input
+                      type="checkbox"
+                      checked={removeTags}
+                      onChange={(e) => setRemoveTags(e.target.checked)}
+                    />
+                    <span>{translateString('Remove course tags')}</span>
+                  </label>
+                  {hasMediaSelected && (
+                    <label className="course-cleanup-checkbox">
+                      <input
+                        type="checkbox"
+                        checked={applyToAll}
+                        onChange={(e) => setApplyToAll(e.target.checked)}
+                      />
+                      <span>{translateString('Apply cleanup to all media shared in the course')}</span>
+                    </label>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="category-modal-footer">
+          <button className="category-btn category-btn-cancel" onClick={onCancel} disabled={isProcessing}>
+            {translateString('Cancel')}
+          </button>
+          <button
+            className="category-btn category-btn-proceed"
+            onClick={handleProceed}
+            disabled={isProcessing || coursesToCleanup.length === 0}
+          >
+            {isProcessing ? translateString('Processing...') : translateString('Proceed')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};