feat: enable editing of media slug, show categories on manage media

frontend/src/static/js/components/management-table/ManageItemList-filters.scss

@@ -66,7 +66,7 @@
     }
 
     @media (min-width: 1024px) {
-      width: 20%;
+      width: 10%;
 
       &:nth-child(3n + 1),
       &:nth-child(3n + 2),

frontend/src/static/js/components/management-table/ManageMediaFilters.jsx

@@ -5,6 +5,11 @@ import { FilterOptions } from '../_shared';
 
 import './ManageItemList-filters.scss';
 
+// Get categories from window if available
+const categories = window.CATEGORIES ? 
+  [{ id: 'all', title: 'All' }].concat(window.CATEGORIES.map(cat => ({ id: cat, title: cat }))) : 
+  [{ id: 'all', title: 'All' }];
+
 const filters = {
   state: [
     { id: 'all', title: 'All' },
@@ -46,6 +51,7 @@ export function ManageMediaFilters(props) {
   const [encodingStatus, setEncodingStatus] = useState('all');
   const [isFeatured, setIsFeatured] = useState('all');
   const [isReviewed, setIsReviewed] = useState('all');
+  const [category, setCategory] = useState('all');
 
   const containerRef = useRef(null);
   const innerContainerRef = useRef(null);
@@ -63,6 +69,7 @@ export function ManageMediaFilters(props) {
       encoding_status: encodingStatus,
       featured: isFeatured,
       is_reviewed: isReviewed,
+      category: category,
     };
 
     switch (ev.currentTarget.getAttribute('filter')) {
@@ -91,6 +98,11 @@ export function ManageMediaFilters(props) {
         props.onFiltersUpdate(args);
         setIsReviewed(args.is_reviewed);
         break;
+      case 'category':
+        args.category = ev.currentTarget.getAttribute('value');
+        props.onFiltersUpdate(args);
+        setCategory(args.category);
+        break;
     }
   }
 
@@ -151,6 +163,13 @@ export function ManageMediaFilters(props) {
             <FilterOptions id={'featured'} options={filters.featured} selected={isFeatured} onSelect={onFilterSelect} />
           </div>
         </div>
+
+        <div className="mi-filter">
+          <div className="mi-filter-title">CATEGORY</div>
+          <div className="mi-filter-options">
+            <FilterOptions id={'category'} options={categories} selected={category} onSelect={onFilterSelect} />
+          </div>
+        </div>
       </div>
     </div>
   );