fixup! feat: Add slots for video and file upload components and alerts

Author: xitij2000

src/plugin-slots/CourseFilesSlot/README.md

@@ -0,0 +1,39 @@
+# Course Files Slot
+
+### Slot ID: `files_upload_page_table_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the course file table UI.
+
+## Example
+
+### Wrapped with a div with dashed border
+![Red Border around Files UI](./screenshot_files_border_wrap.png)
+
+The following `env.config.jsx` will wrap the files component with a div that has a large red dashed redborder.
+
+```js
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    files_upload_page_table_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Wrap,
+          widgetId: 'default_contents',
+          wrapper: ({component}) =>  (
+            <div style={{border:'thick dashed red'}}>
+            {component}
+            </div>
+          )
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseFilesSlot/screenshot_files_border_wrap.png

@@ -0,0 +1,43 @@
+# Course Outline Page Alerts Slot
+
+### Slot ID: `course_outline_page_alerts_slot`
+
+## Description
+
+This slot is used to add alerts to the course outline page.
+
+## Example
+
+### Additional Alert
+![Additional Alerts in Outline Page](./screenshot_outline_alert_added.png)
+
+The following `env.config.jsx` will wrap the files component with a div that has a large red dashed redborder.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Alert } from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    course_outline_page_alerts_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'test-alert',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <Alert variant="warning">
+                This is a test alert
+              </Alert>
+            )
+          }
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseOutlinePageAlertsSlot/README.md

@@ -0,0 +1,39 @@
+# Course Video Upload Page Slot
+
+### Slot ID: `videos_upload_page_table_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the course video upload page UI.
+
+## Example
+
+### Wrapped with a div with dashed border
+![Red Border around Videos UI](./screenshot_videos_border_wrap.png)
+
+The following `env.config.jsx` will wrap the files component with a div that has a large red dashed redborder.
+
+```js
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    videos_upload_page_table_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Wrap,
+          widgetId: 'default_contents',
+          wrapper: ({component}) =>  (
+            <div style={{border:'thick dashed red'}}>
+            {component}
+            </div>
+          )
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseOutlinePageAlertsSlot/screenshot_outline_alert_added.png

@@ -0,0 +1,46 @@
+# File and Videos Page Alerts Slot
+
+### Slot ID: `edit_file_error_alerts_slot`
+
+## Description
+
+This slot is used to add alerts to the course file edit page.
+
+## Example
+
+### Additional Alert on Files Page
+![🍞 in breadcrumbs slot](./screenshot_files_alert_added.png)
+
+### Additional Alert on Videos Page
+![🍞 in breadcrumbs slot](./screenshot_videos_alert_added.png)
+
+The following `env.config.jsx` will wrap the files component with a div that has a large red dashed redborder.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Alert } from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    edit_file_error_alerts_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'test-alert',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <Alert variant="warning">
+                This is a test alert
+              </Alert>
+            )
+          }
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```