feat: replace StudioFooter with StudioFooterSlot (#1729)

Author: Anas12091101

package-lock.json

@@ -60,6 +60,7 @@
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
     "@openedx/frontend-build": "^14.3.3",
+    "@openedx/frontend-slot-footer": "^1.2.0",
     "@openedx/frontend-plugin-framework": "^1.6.0",
     "@openedx/paragon": "^22.16.0",
     "@redux-devtools/extension": "^3.3.0",

package.json

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
   useLocation,
 } from 'react-router-dom';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
 import Header from './header';
 import { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
 import { useModel } from './generic/model-store';
@@ -66,7 +66,7 @@ const CourseAuthoringPage = ({ courseId, children }) => {
         )
         )}
       {children}
-      {!inProgress && !isEditor && <StudioFooter />}
+      {!inProgress && !isEditor && <StudioFooterSlot />}
     </div>
   );
 };

src/CourseAuthoringPage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
 import { Container } from '@openedx/paragon';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
 
 import Header from '../header';
 import messages from './messages';
@@ -29,7 +29,7 @@ const AccessibilityPage = ({
         <AccessibilityBody {...{ email, communityAccessibilityLink }} />
         <AccessibilityForm accessibilityEmail={email} />
       </Container>
-      <StudioFooter />
+      <StudioFooterSlot />
     </>
   );
 };

src/accessibility-page/AccessibilityPage.jsx

@@ -7,7 +7,8 @@ import {
   ActionRow,
   Button,
 } from '@openedx/paragon';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
+
 import { useNavigate, useParams } from 'react-router-dom';
 
 import Header from '../header';
@@ -88,7 +89,7 @@ const CourseRerun = () => {
           isQueryPending={savingStatus === RequestStatus.PENDING}
         />
       </div>
-      <StudioFooter />
+      <StudioFooterSlot />
     </>
   );
 };

src/course-rerun/index.jsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import classNames from 'classnames';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -286,7 +286,7 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
             <LibraryContent contentType={activeKey} />
           </SearchContextProvider>
         </Container>
-        {!componentPickerMode && <StudioFooter containerProps={{ size: undefined }} />}
+        {!componentPickerMode && <StudioFooterSlot containerProps={{ size: undefined }} />}
       </div>
       {!!sidebarComponentInfo?.type && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">

src/library-authoring/LibraryAuthoringPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -220,7 +220,7 @@ const LibraryCollectionPage = () => {
             <LibraryCollectionComponents />
           </SearchContextProvider>
         </Container>
-        {!componentPickerMode && <StudioFooter containerProps={{ size: undefined }} />}
+        {!componentPickerMode && <StudioFooterSlot containerProps={{ size: undefined }} />}
       </div>
       {!!sidebarComponentInfo?.type && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -1,4 +1,4 @@
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Container,
@@ -162,7 +162,7 @@ const CreateLibrary = () => {
         </Formik>
         {isError && (<AlertError error={error} />)}
       </Container>
-      <StudioFooter />
+      <StudioFooterSlot />
     </>
   );
 };

src/library-authoring/create-library/CreateLibrary.tsx

@@ -9,3 +9,6 @@
 ## Course Unit page
 
 * [`course_unit_header_actions_slot`](./CourseUnitHeaderActionsSlot/)
+
+## Footer Slot
+* [`studio_footer_slot`](./StudioFooterSlot/)

src/plugin-slots/README.md

@@ -0,0 +1,50 @@
+# Studio Footer Slot
+
+### Slot ID: `studio_footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the footer.
+
+The implementation of the `StudioFooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of Default Studio Footer](./images/default_studio_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    studio_footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/StudioFooterSlot/README.md

@@ -9,7 +9,7 @@ import {
 } from '@openedx/paragon';
 import { Add as AddIcon, Error } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
 import { getConfig } from '@edx/frontend-platform';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -188,7 +188,7 @@ const StudioHome = () => {
           isQueryPending={anyQueryIsPending}
         />
       </div>
-      <StudioFooter />
+      <StudioFooterSlot />
     </>
   );
 };

src/plugin-slots/StudioFooterSlot/images/custom_footer.png

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { StudioFooter } from '@edx/frontend-component-footer';
+import { StudioFooterSlot } from '@openedx/frontend-slot-footer';
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { Toast } from '@openedx/paragon';
 
@@ -28,7 +28,7 @@ export const TaxonomyLayout = () => {
           />
         )}
         <Outlet />
-        <StudioFooter />
+        <StudioFooterSlot />
         {toastMessage && (
           <Toast
             show