all

frontend/src/static/js/components/BulkActionPermissionModal.scss

@@ -54,7 +54,7 @@
 .permission-modal-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding: 20px 24px;
   border-bottom: 1px solid #e0e0e0;
 
@@ -102,6 +102,19 @@
   }
 }
 
+.permission-modal-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+  font-size: 13px;
+  color: #777;
+
+  .dark_theme & {
+    color: #aaa;
+  }
+}
+
 .permission-modal-content {
   display: flex;
   gap: 24px;

frontend/src/static/js/components/BulkActionPermissionModal.tsx

@@ -226,7 +226,20 @@ export const BulkActionPermissionModal: React.FC<BulkActionPermissionModalProps>
     <div className="permission-modal-overlay">
       <div className="permission-modal">
         <div className="permission-modal-header">
-          <h2>{translateString('Manage')} {permissionLabel}</h2>
+          <div>
+            <h2>{translateString('Share with')} {permissionLabel}</h2>
+            {permissionType === 'editor' && (
+              <div className="permission-modal-subtitle">
+                <span>{translateString('Give users editor permissions to your media by adding them to the below list.')}</span>
+                <span
+                  className="info-tooltip"
+                  title={translateString("Users can edit your media via: My Media > Shared with Me > particular media > Edit...")}
+                >
+                  i
+                </span>
+              </div>
+            )}
+          </div>
           <button className="permission-modal-close" onClick={onCancel}>
             ×
           </button>
@@ -284,6 +297,11 @@ export const BulkActionPermissionModal: React.FC<BulkActionPermissionModalProps>
                   ?
                 </span>
               )}
+              {permissionType === 'editor' && (
+                <span className="info-tooltip" title={translateString('Remove users from the list to remove editor permissions')}>
+                  i
+                </span>
+              )}
             </h3>
             <div className="search-box">
               <input

frontend/src/static/js/components/BulkActionsDropdown.tsx

@@ -1,29 +1,59 @@
 import React from 'react';
 import './BulkActionsDropdown.scss';
 import { translateString } from '../utils/helpers/';
-import { inEmbeddedApp } from '../utils/helpers/embeddedApp';
 
 interface BulkActionsDropdownProps {
   selectedCount: number;
   onActionSelect: (action: string) => void;
 }
 
-const BULK_ACTIONS = [
-  { value: 'add-remove-coviewers', label: inEmbeddedApp() ? translateString('Share with Co-Viewers') : translateString('Add / Remove Co-Viewers'), enabled: true },
-  { value: 'add-remove-coeditors', label: inEmbeddedApp() ? translateString('Share with Co-Editors') : translateString('Add / Remove Co-Editors'), enabled: true },
-  { value: 'add-remove-coowners', label: inEmbeddedApp() ? translateString('Share with Co-Owners') : translateString('Add / Remove Co-Owners'), enabled: true },
-  { value: 'add-remove-playlist', label: translateString('Add to / Remove from Playlist'), enabled: true },
-  { value: 'add-remove-category', label: inEmbeddedApp() ? translateString('Share with Course Members') : translateString('Add to / Remove from Category'), enabled: true },
-  { value: 'add-remove-tags', label: translateString('Add / Remove Tags'), enabled: true },
-  { value: 'enable-comments', label: translateString('Enable Comments'), enabled: true },
-  { value: 'disable-comments', label: translateString('Disable Comments'), enabled: true },
-  { value: 'delete-comments', label: translateString('Delete Comments'), enabled: true },
-  { value: 'enable-download', label: translateString('Enable Download'), enabled: true },
-  { value: 'disable-download', label: translateString('Disable Download'), enabled: true },
-  { value: 'publish-state', label: translateString('Publish State'), enabled: true },
-  { value: 'change-owner', label: translateString('Change Owner'), enabled: true },
-  { value: 'copy-media', label: translateString('Copy Media'), enabled: true },
-  { value: 'delete-media', label: translateString('Delete Media'), enabled: true },
+interface BulkAction {
+  value: string;
+  label: string;
+  enabled: boolean;
+}
+
+interface BulkActionGroup {
+  label: string;
+  actions: BulkAction[];
+}
+
+const BULK_ACTION_GROUPS: BulkActionGroup[] = [
+  {
+    label: translateString('Sharing'),
+    actions: [
+      { value: 'add-remove-coviewers', label: translateString('Share with Co-Viewers'), enabled: true },
+      { value: 'add-remove-coeditors', label: translateString('Share with Co-Editors'), enabled: true },
+      { value: 'add-remove-coowners', label: translateString('Share with Co-Owners'), enabled: true },
+      { value: 'add-remove-category', label: translateString('Share with Course Members'), enabled: true },
+    ],
+  },
+  {
+    label: translateString('Organization'),
+    actions: [
+      { value: 'add-remove-playlist', label: translateString('Add to / Remove from Playlist'), enabled: true },
+      { value: 'add-remove-tags', label: translateString('Add / Remove Tags'), enabled: true },
+    ],
+  },
+  {
+    label: translateString('Settings'),
+    actions: [
+      { value: 'enable-comments', label: translateString('Enable Comments'), enabled: true },
+      { value: 'disable-comments', label: translateString('Disable Comments'), enabled: true },
+      { value: 'delete-comments', label: translateString('Delete Comments'), enabled: true },
+      { value: 'enable-download', label: translateString('Enable Download'), enabled: true },
+      { value: 'disable-download', label: translateString('Disable Download'), enabled: true },
+    ],
+  },
+  {
+    label: translateString('Management'),
+    actions: [
+      { value: 'publish-state', label: translateString('Publish State'), enabled: true },
+      { value: 'change-owner', label: translateString('Change Owner'), enabled: true },
+      { value: 'copy-media', label: translateString('Copy Media'), enabled: true },
+      { value: 'delete-media', label: translateString('Delete Media'), enabled: true },
+    ],
+  },
 ];
 
 export const BulkActionsDropdown: React.FC<BulkActionsDropdownProps> = ({ selectedCount, onActionSelect }) => {
@@ -60,10 +90,14 @@ export const BulkActionsDropdown: React.FC<BulkActionsDropdownProps> = ({ select
         <option value="" disabled>
           {displayText}
         </option>
-        {BULK_ACTIONS.map((action) => (
-          <option key={action.value} value={action.value} disabled={noSelection || !action.enabled}>
-            {action.label}
-          </option>
+        {BULK_ACTION_GROUPS.map((group) => (
+          <optgroup key={group.label} label={group.label}>
+            {group.actions.map((action) => (
+              <option key={action.value} value={action.value} disabled={noSelection || !action.enabled}>
+                {action.label}
+              </option>
+            ))}
+          </optgroup>
         ))}
       </select>
     </div>