From b4dd7e0ddb6df393087d79569a6b7b0fa8d5b09b Mon Sep 17 00:00:00 2001 From: Farhaan Bukhsh Date: Tue, 30 Sep 2025 18:09:03 +0530 Subject: [PATCH] feat: Moves search button into a slot Signed-off-by: Farhaan Bukhsh --- src/plugin-slots/README.md | 3 + .../StudioHeaderSearchButtonSlot/README.md | 89 ++++++++++++++++++ ...udio_header_search_button_before_after.png | Bin 0 -> 13981 bytes .../studio_header_search_button_replace.png | Bin 0 -> 10797 bytes .../StudioHeaderSearchButtonSlot/index.jsx | 34 +++++++ src/studio-header/HeaderBody.tsx | 22 +---- 6 files changed, 131 insertions(+), 17 deletions(-) create mode 100644 src/plugin-slots/StudioHeaderSearchButtonSlot/README.md create mode 100644 src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_before_after.png create mode 100644 src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_replace.png create mode 100644 src/plugin-slots/StudioHeaderSearchButtonSlot/index.jsx diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index 21e158f68..c693e3684 100644 --- a/src/plugin-slots/README.md +++ b/src/plugin-slots/README.md @@ -24,3 +24,6 @@ * [`org.openedx.frontend.layout.header_mobile_main_menu.v1`](./MobileMainMenuSlot/) * [`org.openedx.frontend.layout.header_mobile_user_menu.v1`](./MobileUserMenuSlot/) * [`org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`](./MobileUserMenuToggleSlot/) + +### Studio Header +* [`org.openedx.frontend.layout.studio_header_search_button_slot.v1`](./StudioHeaderSearchButtonSlot/) diff --git a/src/plugin-slots/StudioHeaderSearchButtonSlot/README.md b/src/plugin-slots/StudioHeaderSearchButtonSlot/README.md new file mode 100644 index 000000000..9b81b3c31 --- /dev/null +++ b/src/plugin-slots/StudioHeaderSearchButtonSlot/README.md @@ -0,0 +1,89 @@ +# Studio Header Search Button Slot + +### Slot ID: `org.openedx.frontend.layout.studio_header_search_button_slot.v1` + +## Description + +This slot is used to replace/modify/hide the search button in the studio header. + +## Examples + +### Replace search with custom component + +The following `env.config.jsx` will replace the search button entirely (in this case with a custom emoji icon): + +![Search button being replaced](./images/studio_header_search_button_replace.png) + +```jsx +import { + DIRECT_PLUGIN, + PLUGIN_OPERATIONS, +} from "@openedx/frontend-plugin-framework"; + +const config = { + pluginSlots: { + "org.openedx.frontend.layout.studio_header_search_button_slot.v1": { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: "custom_notification_tray", + type: DIRECT_PLUGIN, + RenderWidget: () => 🔔, + }, + }, + ], + }, + }, +}; + +export default config; +``` + +### Add custom component before and after search button + +The following `env.config.jsx` will insert emoji after and before the search button + +![Add custom component before and after search button](./images/studio_header_search_button_before_after.png) + +```jsx +import { + DIRECT_PLUGIN, + PLUGIN_OPERATIONS, +} from "@openedx/frontend-plugin-framework"; + +const config = { + pluginSlots: { + "org.openedx.frontend.layout.studio_header_search_button_slot.v1": { + keepDefault: true, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + priority: 10, + id: 'custom_notification_tray_before', + type: DIRECT_PLUGIN, + RenderWidget: () => 🔔, + }, + }, + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + priority: 90, + id: 'custom_notification_tray_after', + type: DIRECT_PLUGIN, + RenderWidget: () => 🔕, + }, + }, + ], + }, +}; + +export default config; +``` + +## API + +- **Slot ID:** `org.openedx.frontend.layout.studio_header_search_button_slot.v1` +- **Component:** Uses the [PluginSlot](https://github.com/openedx/frontend-plugin-framework#pluginslot) from the Open edX Frontend Plugin Framework for plugin injection. diff --git a/src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_before_after.png b/src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_before_after.png new file mode 100644 index 0000000000000000000000000000000000000000..29735c79b2538ee32ca89cfab681da48aa5c86c8 GIT binary patch literal 13981 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 { + const intl = useIntl(); + return ( + + {searchButtonAction && ( + + )} + + ); +}; + +StudioHeaderSearchButtonSlot.propTypes = { + searchButtonAction: PropTypes.func, +}; + +export default StudioHeaderSearchButtonSlot; diff --git a/src/studio-header/HeaderBody.tsx b/src/studio-header/HeaderBody.tsx index d27615971..4037240ac 100644 --- a/src/studio-header/HeaderBody.tsx +++ b/src/studio-header/HeaderBody.tsx @@ -1,22 +1,19 @@ import React, { type ReactNode, type ComponentProps } from 'react'; -import { useIntl } from '@edx/frontend-platform/i18n'; import classNames from 'classnames'; import { ActionRow, Button, Container, - Icon, - IconButton, Nav, Row, } from '@openedx/paragon'; -import { Close, MenuIcon, Search } from '@openedx/paragon/icons'; +import { Close, MenuIcon } from '@openedx/paragon/icons'; import CourseLockUp from './CourseLockUp'; import UserMenu from './UserMenu'; import BrandNav from './BrandNav'; import NavDropdownMenu from './NavDropdownMenu'; -import messages from './messages'; +import StudioHeaderSearchButtonSlot from '../plugin-slots/StudioHeaderSearchButtonSlot'; export interface HeaderBodyProps { studioBaseUrl: string; @@ -65,7 +62,6 @@ const HeaderBody = ({ searchButtonAction, containerProps = {}, }: HeaderBodyProps) => { - const intl = useIntl(); const renderBrandNav = ( )} - {searchButtonAction && ( - - )} +