feat: Add slot for whole application

xitij2000 · farhaanbukhsh · commit 1eb47c7431d8 · 2025-04-13T16:35:21.000+05:30
Adds a slot wrapping the entire application.
diff --git a/src/index.jsx b/src/index.jsx
@@ -2,6 +2,7 @@ import {
   APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig, getPath,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
+import { AuthoringAppSlot } from 'CourseAuthoring/plugin-slots/AuthoringAppSlot';
 import React, { StrictMode, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
@@ -97,12 +98,14 @@ const App = () => {
 
   return (
     <AppProvider store={initializeStore()} wrapWithRouter={false}>
-      <ToastProvider>
-        <QueryClientProvider client={queryClient}>
-          <Head />
-          <RouterProvider router={router} />
-        </QueryClientProvider>
-      </ToastProvider>
+      <AuthoringAppSlot>
+        <ToastProvider>
+          <QueryClientProvider client={queryClient}>
+            <Head />
+            <RouterProvider router={router} />
+          </QueryClientProvider>
+        </ToastProvider>
+      </AuthoringAppSlot>
     </AppProvider>
   );
 };
diff --git a/src/plugin-slots/AuthoringAppSlot/README.md b/src/plugin-slots/AuthoringAppSlot/README.md
@@ -0,0 +1,44 @@
+# AuthoringAppSlot
+
+### Slot ID: `authoring_app_slot`
+
+### Plugin Props:
+
+NONE
+
+## Description
+
+The slot wraps the entire application. It can be used to add content before or
+after the application (such as cookie banners) or to wrap the entire
+application in a component. One possible use case of that is to wrap the entire
+application in a context manager that would allow communication between
+different slots injected on the page.
+
+## Example
+
+![Screenshot of the entire app surrounded by border](./images/app_wrapped_in_border.png)
+
+The following example configuration wraps the entire app in a dashed border as
+shown above.
+
+```js
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    authoring_app_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Wrap,
+          widgetId: 'default_contents',
+          wrapper: ({ component }) => (
+            <div style={{ border: 'thick dashed red' }}>{component}</div>
+          ),
+        },
+      ],
+    },
+  }
+};
+export default config;
+```
diff --git a/src/plugin-slots/AuthoringAppSlot/images/app_wrapped_in_border.png b/src/plugin-slots/AuthoringAppSlot/images/app_wrapped_in_border.png
diff --git a/src/plugin-slots/AuthoringAppSlot/index.tsx b/src/plugin-slots/AuthoringAppSlot/index.tsx
@@ -0,0 +1,11 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+export const AuthoringAppSlot = ({ children }:AuthoringAppSlotProps) => (
+  <PluginSlot id="authoring_app_slot">
+    {children}
+  </PluginSlot>
+);
+
+interface AuthoringAppSlotProps {
+  children: React.ReactNode;
+}
