diff --git a/docs/decisions/0009-slot-naming-and-lifecycle.rst b/docs/decisions/0009-slot-naming-and-lifecycle.rst new file mode 100644 index 00000000..3735e13a --- /dev/null +++ b/docs/decisions/0009-slot-naming-and-lifecycle.rst @@ -0,0 +1,174 @@ +========================== +Slot Naming and Life Cycle +========================== + +Status +====== + +Accepted + + +Context +======= + +frontend-base introduces the concept of slots as a way to customize frontend +apps. Slots are defined in each application's codebase with React, currently +taking the form: + + + +Operators can subsequently insert widgets into this slot by referencing +"arbitrary_slot_name" in configuration as follows: + + slots: [ + { + slotId: 'arbitrary_slot_name', + ... + } + } + +However, the following concerns were identified in relation to completely +arbitrary slot names: + +1. The codebase can become progressively littered with slot names that are + unintuitively or inconsistently named, making it harder to document, + maintain, and use them + +2. There is no expectation that one should be able to infer purpose and + location from the slot name + +3. While frontend-base supports defining multiple slots with the same name in a + frontend app, as the number of slots across the codebase increases it + becomes harder and harder for developers to avoid introducing accidental + name collisions + +4. Without a versioning scheme, there's no way to modify a slot's API without + making an implicit breaking change + +This is a common problem in computer science, one that has often been addressed +by use of `reverse domain name notation`_. It can be seen everywhere, from +Android package names to Open edX's own specification for `server event +types`_. + +.. _reverse domain name notation: https://en.wikipedia.org/wiki/Reverse_domain_name_notation +.. _server event types: https://docs.openedx.org/projects/openedx-proposals/en/latest/architectural-decisions/oep-0041-arch-async-server-event-messaging.html#id5 + +This technique allows for namespace uniqueness within a self-documentated +hierarchy. For instance, take this fictitious slot name that uses said +notation: + + org.openedx.frontend.slot.header.main.v1 + +Even without further information, it's possible to tell that: + +* The slot belongs to an app in the Open edX org +* It's a frontend app +* It's a slot +* It's in the header module +* The slot probably wraps the header +* This is version 1 of the slot, which indicates changes are possible in the + future + +And last but not least: + +* There's little chance that a slot with the same name exists anywhere in the + codebase other than where the layout header is defined + +Based on this concept, this ADR aims to define rules that govern how developers +maintain plugin slots in Open edX frontend apps throughout their lifecycle. In +particular, when adding, deprecating, or removing plugin slots. + + +Decisions +========= + +1. Naming format +---------------- + +The full name of a plugin slot will be a ``string`` that follows the following +format: + + {Domain}.{Subdomain}.{Type}.{Module}.{Identifier}.{Version} + +Where: + +* *Domain* is always ``org.openedx`` +* *Subdomain* is always ``frontend`` +* *Type* is always ``slot`` +* *Module* is a camel-case string that denotes the module where the slot is + exposed, such as ``header``, ``footer``, ``learning``, ``learnerDashboard``, + or ``authoring`` +* *Identifier* is a camel-case string that identifies the slot, which must be + unique for the module that contains it +* *Version* is either empty, which denotes the slot is unsupported, the + string `unstable`, denoting a slot with a yet unstable API, or a + monotonically increasing integer prefaced by a `v` and starting with `v1`. + +For example: + +* org.openedx.frontend.slot.devProject.foobar (unsupported slot, as version is empty) +* org.openedx.frontend.slot.footer.main.unstable (unstable slot) +* org.openedx.frontend.slot.learning.navigationSidebar.v2 (this slot is on version 2) + +In practice, this is what the slot definition will look like: + + + +And this is how operators would configure it: + + slots: [ + { + slotId: 'org.openedx.frontend.slot.learning.navigationSidebar.v2', + ... + } + ] + +Note that while this ADR does not prescribe a list of modules, whenever a new +slot is introduced special care should be taken with the selection of the +module name. In particular, slots that occur in multiple modules should have +consistent names. + +2. Versioning +------------- + +For the purposes of versioning, a given slot's API contract is comprised of: + +* Its location, visual or otherwise, in the Module +* The type (but not implementation!) of the content it is expected to wrap +* The specific set of properties, options, and operations it supports + +If one of the above changes for a particular slot in such a way that existing +widgets break or present undefined behavior, *and* if it still make sense to +use the same Identifier, the version string appended to its name will be +incremented by `1`. + +Note: a given slot's default content is explicitly *not* part of its contract. +Changes to it do not result in a version bump. + +3. Deprecation process +---------------------- + +When a slot changes sufficiently to require its version to be incremented, the +developer will take care to: + +* Propose the previous version's deprecation via the official Open edX + Deprecation Process + +* Keep the definition of the previously released version of the slot in the + codebase for the duration of the deprecation process, which should include at + least one Open edX release where it co-exists with the new version + +* Implement the new version of the slot in such a way that coexists with the + previous one with no detriment to either's functionality + + +Consequences +============ + +The decisions above are intended to let users create and maintain widgets that +are stable across releases of Open edX, while also allowing slots themselves to +evolve. The naming convention itself has no significant downsides, and while +the deprecation process does add some maintenance burden, it is expected to be +offset by the additional stability provided. + + diff --git a/shell/DefaultLayout.tsx b/shell/DefaultLayout.tsx index c9ac9aed..3ab7873d 100644 --- a/shell/DefaultLayout.tsx +++ b/shell/DefaultLayout.tsx @@ -5,13 +5,13 @@ export default function DefaultLayout() { return (
- +
- +
- +
); diff --git a/shell/Shell.tsx b/shell/Shell.tsx index ad9134fe..74d88e5b 100644 --- a/shell/Shell.tsx +++ b/shell/Shell.tsx @@ -12,7 +12,7 @@ export default function Shell() { return ( - + ); } diff --git a/shell/defaultShellConfig.ts b/shell/defaultShellConfig.ts index 1e8b514e..a33619c4 100644 --- a/shell/defaultShellConfig.ts +++ b/shell/defaultShellConfig.ts @@ -6,14 +6,14 @@ import { Header } from './header'; const config: App = { slots: [ { - slotId: 'frontend.shell.header.ui', - id: 'default.header', + slotId: 'org.openedx.frontend.slot.header.main.v1', + id: 'org.openedx.frontend.widget.defaultHeader.main.v1', op: WidgetOperationTypes.APPEND, component: Header, }, { - slotId: 'frontend.shell.footer.ui', - id: 'default.footer', + slotId: 'org.openedx.frontend.slot.footer.main.v1', + id: 'org.openedx.frontend.widget.defaultFooter.main.v1', op: WidgetOperationTypes.APPEND, component: Footer, }, diff --git a/shell/dev-project/footer/footerConfig.tsx b/shell/dev-project/footer/footerConfig.tsx index 069dbc5e..f6f13f2f 100644 --- a/shell/dev-project/footer/footerConfig.tsx +++ b/shell/dev-project/footer/footerConfig.tsx @@ -6,7 +6,7 @@ import LinkMenuItem from '../../menus/LinkMenuItem'; const config: App = { slots: [ { - slotId: 'frontend.shell.footer.desktop.top.ui', + slotId: 'org.openedx.frontend.slot.footer.desktopTop.v1', id: 'footer.booyah.revealed', op: WidgetOperationTypes.APPEND, element: ( @@ -14,14 +14,14 @@ const config: App = { ) }, { - slotId: 'frontend.shell.footer.desktop.top.ui', + slotId: 'org.openedx.frontend.slot.footer.desktopTop.v1', op: LayoutOperationTypes.OPTIONS, options: { label: 'I Reveal Buttons', } }, { - slotId: 'frontend.shell.footer.desktop.top.ui', + slotId: 'org.openedx.frontend.slot.footer.desktopTop.v1', id: 'footer.booyah.revealed.linky', op: WidgetOperationTypes.APPEND, element: ( @@ -29,7 +29,7 @@ const config: App = { ) }, { - slotId: 'frontend.shell.footer.desktop.centerLinks.first.ui', + slotId: 'org.openedx.frontend.slot.footer.desktopCenterLink1.v1', id: 'footer.booyah.centerLinks.first.1', op: WidgetOperationTypes.APPEND, element: ( diff --git a/shell/dev-project/header/headerConfig.tsx b/shell/dev-project/header/headerConfig.tsx index 98ad8a89..5becdb1a 100644 --- a/shell/dev-project/header/headerConfig.tsx +++ b/shell/dev-project/header/headerConfig.tsx @@ -7,7 +7,7 @@ import CoursesLink from './CoursesLink'; const config: App = { slots: [ { - slotId: 'frontend.shell.header.primaryLinks.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1', id: 'header.learnerDashboard.link', op: WidgetOperationTypes.APPEND, element: ( @@ -19,7 +19,7 @@ const config: App = { ) }, { - slotId: 'frontend.shell.header.primaryLinks.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1', relatedId: 'header.learnerDashboard.link', op: WidgetOperationTypes.OPTIONS, options: { @@ -27,7 +27,7 @@ const config: App = { } }, { - slotId: 'frontend.shell.header.primaryLinks.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1', id: 'header.learnerDashboard.linkAfter3', op: WidgetOperationTypes.INSERT_AFTER, relatedId: 'header.learnerDashboard.link3', @@ -35,15 +35,15 @@ const config: App = { ) }, { - slotId: 'frontend.shell.header.primaryLinks.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1', id: 'header.booyah.primaryLinks.dropdown', op: WidgetOperationTypes.PREPEND, element: ( - + ) }, { - slotId: 'frontend.shell.header.primaryLinks.dropdown.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinksDropdown.v1', id: 'header.booyah.primaryLinks.dropdown.1', op: WidgetOperationTypes.APPEND, element: ( @@ -51,14 +51,14 @@ const config: App = { ) }, { - slotId: 'frontend.shell.header.primaryLinks.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1', id: 'header.learnerDashboard.link3', op: WidgetOperationTypes.APPEND, element: ( ) }, { - slotId: 'frontend.shell.header.primaryLinks.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1', id: 'header.learnerDashboard.link4', op: WidgetOperationTypes.APPEND, element: ( diff --git a/shell/dev-project/slot-showcase/SlotShowcasePage.tsx b/shell/dev-project/slot-showcase/SlotShowcasePage.tsx index 8f4562a9..66596ef8 100644 --- a/shell/dev-project/slot-showcase/SlotShowcasePage.tsx +++ b/shell/dev-project/slot-showcase/SlotShowcasePage.tsx @@ -15,46 +15,46 @@ export default function SlotShowcasePage() {

Simple slot with default layout

This slot has no opinionated layout, it just renders its children.

- +

UI Layout Operations

Slot with custom layout

This slot uses a horizontal flexbox layout from a component.

- +

This slot uses a horizontal flexbox layout from a JSX element.

- } /> + } />

Slot with override custom layout

This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.

- +

Slot with layout options

These slots use a custom layout that takes options. The first shows the default title, the second shows it set to "Bar"

- - + +

UI Widget Operations

Slot with prepended element

This slot has a prepended element (and two appended elements).

- +

Slot with inserted elements

This slot has elements inserted before and after the second element. Also note that the insert operations are declared before the related element is declared, but can still insert themselves relative to it.

- +

Slot with replaced element

This slot has an element replacing element two.

- +

Slot with removed element

This slot has removed element two (WidgetOperationTypes.REMOVE).

- +

Slot with widget with options.

Both widgets accept options. The first shows the default title, the second shows it set to "Bar"

- + ); } diff --git a/shell/dev-project/slot-showcase/index.tsx b/shell/dev-project/slot-showcase/index.tsx index 3976b334..15df4e74 100644 --- a/shell/dev-project/slot-showcase/index.tsx +++ b/shell/dev-project/slot-showcase/index.tsx @@ -38,19 +38,19 @@ const config: App = { slots: [ // Simple { - slotId: 'frontend.dev-project.slot-showcase.simple.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseSimple', id: 'slot-showcase.simple.child1', op: WidgetOperationTypes.APPEND, element: () }, { - slotId: 'frontend.dev-project.slot-showcase.simple.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseSimple', id: 'slot-showcase.simple.child2', op: WidgetOperationTypes.APPEND, element: () }, { - slotId: 'frontend.dev-project.slot-showcase.simple.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseSimple', id: 'slot-showcase.simple.child3', op: WidgetOperationTypes.APPEND, element: () @@ -58,19 +58,19 @@ const config: App = { // Custom Layout { - slotId: 'frontend.dev-project.slot-showcase.custom.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseCustom', id: 'slot-showcase.custom.child1', op: WidgetOperationTypes.APPEND, element: () }, { - slotId: 'frontend.dev-project.slot-showcase.custom.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseCustom', id: 'slot-showcase.custom.child2', op: WidgetOperationTypes.APPEND, element: () }, { - slotId: 'frontend.dev-project.slot-showcase.custom.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseCustom', id: 'slot-showcase.custom.child3', op: WidgetOperationTypes.APPEND, element: () @@ -78,69 +78,69 @@ const config: App = { // Override custom layout { - slotId: 'frontend.dev-project.slot-showcase.customConfig.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseCustomConfig', id: 'slot-showcase.customConfig.child1', op: WidgetOperationTypes.APPEND, element: () }, { - slotId: 'frontend.dev-project.slot-showcase.customConfig.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseCustomConfig', id: 'slot-showcase.customConfig.child2', op: WidgetOperationTypes.APPEND, element: () }, { - slotId: 'frontend.dev-project.slot-showcase.customConfig.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseCustomConfig', id: 'slot-showcase.customConfig.child3', op: WidgetOperationTypes.APPEND, element: () }, { - slotId: 'frontend.dev-project.slot-showcase.customConfig.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseCustomConfig', op: LayoutOperationTypes.REPLACE, element: , }, // Layout Options { - slotId: 'frontend.dev-project.slot-showcase.layoutWithOptions.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseLayoutWithOptions', op: LayoutOperationTypes.OPTIONS, options: { title: (), } }, { - slotId: 'frontend.dev-project.slot-showcase.layoutWithOptions.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseLayoutWithOptions', id: 'slot-showcase.layoutWithOptions.child1', op: WidgetOperationTypes.APPEND, element: (<Child title="Child One" />) }, { - slotId: 'frontend.dev-project.slot-showcase.layoutWithOptions.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseLayoutWithOptions', id: 'slot-showcase.layoutWithOptions.child2', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Two" />) }, { - slotId: 'frontend.dev-project.slot-showcase.layoutWithOptions.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseLayoutWithOptions', id: 'slot-showcase.layoutWithOptions.child3', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Three" />) }, { - slotId: 'frontend.dev-project.slot-showcase.layoutWithOptionsDefault.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseLayoutWithOptionsDefault', id: 'slot-showcase.layoutWithOptionsDefault.child1', op: WidgetOperationTypes.APPEND, element: (<Child title="Child One" />) }, { - slotId: 'frontend.dev-project.slot-showcase.layoutWithOptionsDefault.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseLayoutWithOptionsDefault', id: 'slot-showcase.layoutWithOptionsDefault.child2', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Two" />) }, { - slotId: 'frontend.dev-project.slot-showcase.layoutWithOptionsDefault.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseLayoutWithOptionsDefault', id: 'slot-showcase.layoutWithOptionsDefault.child3', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Three" />) @@ -150,19 +150,19 @@ const config: App = { // Prepending { - slotId: 'frontend.dev-project.slot-showcase.prepending.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcasePrepending', id: 'slot-showcase.prepending.child1', op: WidgetOperationTypes.APPEND, element: (<Child title="Child One" op="WidgetOperationTypes.APPEND" />) }, { - slotId: 'frontend.dev-project.slot-showcase.prepending.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcasePrepending', id: 'slot-showcase.prepending.child2', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Two" op="WidgetOperationTypes.APPEND" />) }, { - slotId: 'frontend.dev-project.slot-showcase.prepending.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcasePrepending', id: 'slot-showcase.prepending.child3', op: WidgetOperationTypes.PREPEND, element: (<Child title="Child Three" op="WidgetOperationTypes.PREPEND" />) @@ -170,33 +170,33 @@ const config: App = { // Inserting { - slotId: 'frontend.dev-project.slot-showcase.inserting.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseInserting', id: 'slot-showcase.inserting.child4', op: WidgetOperationTypes.INSERT_AFTER, relatedId: 'slot-showcase.inserting.child2', element: (<Child title="Child Four" op="WidgetOperationTypes.INSERT_AFTER" />) }, { - slotId: 'frontend.dev-project.slot-showcase.inserting.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseInserting', id: 'slot-showcase.inserting.child5', op: WidgetOperationTypes.INSERT_BEFORE, relatedId: 'slot-showcase.inserting.child2', element: (<Child title="Child Five" op="WidgetOperationTypes.INSERT_BEFORE" />) }, { - slotId: 'frontend.dev-project.slot-showcase.inserting.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseInserting', id: 'slot-showcase.inserting.child1', op: WidgetOperationTypes.APPEND, element: (<Child title="Child One" />) }, { - slotId: 'frontend.dev-project.slot-showcase.inserting.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseInserting', id: 'slot-showcase.inserting.child2', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Two" />) }, { - slotId: 'frontend.dev-project.slot-showcase.inserting.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseInserting', id: 'slot-showcase.inserting.child3', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Three" />) @@ -204,25 +204,25 @@ const config: App = { // Replacing { - slotId: 'frontend.dev-project.slot-showcase.replacing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseReplacing', id: 'slot-showcase.replacing.child1', op: WidgetOperationTypes.APPEND, element: (<Child title="Child One" />) }, { - slotId: 'frontend.dev-project.slot-showcase.replacing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseReplacing', id: 'slot-showcase.replacing.child2', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Two" />) }, { - slotId: 'frontend.dev-project.slot-showcase.replacing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseReplacing', id: 'slot-showcase.replacing.child3', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Three" />) }, { - slotId: 'frontend.dev-project.slot-showcase.replacing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseReplacing', id: 'slot-showcase.replacing.child4', op: WidgetOperationTypes.REPLACE, relatedId: 'slot-showcase.replacing.child2', @@ -231,44 +231,44 @@ const config: App = { // Hiding { - slotId: 'frontend.dev-project.slot-showcase.removing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseRemoving', id: 'slot-showcase.removing.child1', op: WidgetOperationTypes.APPEND, element: (<Child title="Child One" />) }, { - slotId: 'frontend.dev-project.slot-showcase.removing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseRemoving', id: 'slot-showcase.removing.child2', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Two" />) }, { - slotId: 'frontend.dev-project.slot-showcase.removing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseRemoving', id: 'slot-showcase.removing.child3', op: WidgetOperationTypes.APPEND, element: (<Child title="Child Three" />) }, { - slotId: 'frontend.dev-project.slot-showcase.removing.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseRemoving', op: WidgetOperationTypes.REMOVE, relatedId: 'slot-showcase.removing.child2', }, // Widget Options { - slotId: 'frontend.dev-project.slot-showcase.widgetOptions.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseWidgetOptions', id: 'slot-showcase.widgetOptions.child1', op: WidgetOperationTypes.APPEND, component: WidgetWithOptions, }, { - slotId: 'frontend.dev-project.slot-showcase.widgetOptions.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseWidgetOptions', id: 'slot-showcase.widgetOptions.child2', op: WidgetOperationTypes.APPEND, component: WidgetWithOptions, }, { - slotId: 'frontend.dev-project.slot-showcase.widgetOptions.ui', + slotId: 'org.openedx.frontend.slot.devProject.slotShowcaseWidgetOptions', relatedId: 'slot-showcase.widgetOptions.child2', op: WidgetOperationTypes.OPTIONS, options: { diff --git a/shell/dev-project/user/userConfig.tsx b/shell/dev-project/user/userConfig.tsx index 7bdc8997..549c5b3a 100644 --- a/shell/dev-project/user/userConfig.tsx +++ b/shell/dev-project/user/userConfig.tsx @@ -8,19 +8,19 @@ import messages from '../../Shell.messages'; const config: App = { slots: [ { - slotId: 'frontend.shell.header.anonymousMenu.ui', + slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1', id: 'user.anonymousMenu.loginButton', op: WidgetOperationTypes.APPEND, component: LoginButton, }, { - slotId: 'frontend.shell.header.anonymousMenu.ui', + slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1', id: 'user.anonymousMenu.registerButton', op: WidgetOperationTypes.APPEND, component: RegisterButton, }, { - slotId: 'frontend.shell.header.authenticatedMenu.ui', + slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1', id: 'user.authenticatedMenu.logout', op: WidgetOperationTypes.APPEND, element: ( diff --git a/shell/footer/Footer.tsx b/shell/footer/Footer.tsx index a4541900..0d5ecf9d 100644 --- a/shell/footer/Footer.tsx +++ b/shell/footer/Footer.tsx @@ -9,22 +9,22 @@ import RightLinks from './RightLinks'; export default function Footer() { return ( <footer className="d-flex flex-column align-items-stretch"> - <Slot id="frontend.shell.footer.desktop.top.ui" layout={RevealLinks} /> + <Slot id="org.openedx.frontend.slot.footer.desktopTop.v1" layout={RevealLinks} /> <div className="py-3 px-3 d-flex gap-5 justify-content-between align-items-stretch"> <div className="flex-basis-0 d-flex align-items-start"> <div className="d-flex gap-3 align-items-center"> - <Slot id="frontend.shell.footer.desktop.leftLinks.ui" layout={LeftLinks} /> + <Slot id="org.openedx.frontend.slot.footer.desktopLeftLinks.v1" layout={LeftLinks} /> </div> </div> <div className="flex-grow-1 flex-basis-0 d-flex justify-content-center"> <div className="d-flex flex-column justify-content-between gap-5"> - <Slot id="frontend.shell.footer.desktop.centerLinks.ui" layout={CenterLinks} /> - <Slot id="frontend.shell.footer.desktop.legalNotices.ui" layout={LegalNotices} /> + <Slot id="org.openedx.frontend.slot.footer.desktopCenterLinks.v1" layout={CenterLinks} /> + <Slot id="org.openedx.frontend.slot.footer.desktopLegalNotices.v1" layout={LegalNotices} /> </div> </div> <div className="flex-basis-0 d-flex justify-content-end"> <div className="d-flex flex-column justify-content-between"> - <Slot id="frontend.shell.footer.desktop.rightLinks.ui" layout={RightLinks} /> + <Slot id="org.openedx.frontend.slot.footer.desktopRightLinks.v1" layout={RightLinks} /> <PoweredBy /> </div> </div> diff --git a/shell/footer/defaultFooterConfig.tsx b/shell/footer/defaultFooterConfig.tsx index 4fca77b2..e96d4d54 100644 --- a/shell/footer/defaultFooterConfig.tsx +++ b/shell/footer/defaultFooterConfig.tsx @@ -9,58 +9,58 @@ const config: App = { slots: [ // Center links { - slotId: 'frontend.shell.footer.desktop.centerLinks.ui', - id: 'default.footer.desktop.centerLinks.first', + slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1', + id: 'org.openedx.frontend.widget.defaultFooter.desktopCenterLink1.v1', op: WidgetOperationTypes.APPEND, element: ( - <Slot id="frontend.shell.footer.desktop.centerLinks.first.ui" layout={LabeledLinkColumn} /> + <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink1.v1" layout={LabeledLinkColumn} /> ), }, { - slotId: 'frontend.shell.footer.desktop.centerLinks.ui', - id: 'default.footer.desktop.centerLinks.second', + slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1', + id: 'org.openedx.frontend.widget.defaultFooter.desktopCenterLink2.v1', op: WidgetOperationTypes.APPEND, element: ( - <Slot id="frontend.shell.footer.desktop.centerLinks.second.ui" layout={LabeledLinkColumn} /> + <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink2.v1" layout={LabeledLinkColumn} /> ), }, { - slotId: 'frontend.shell.footer.desktop.centerLinks.ui', - id: 'default.footer.desktop.centerLinks.third', + slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1', + id: 'org.openedx.frontend.widget.defaultFooter.desktopCenterLink3.v1', op: WidgetOperationTypes.APPEND, element: ( - <Slot id="frontend.shell.footer.desktop.centerLinks.third.ui" layout={LabeledLinkColumn} /> + <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink3.v1" layout={LabeledLinkColumn} /> ), }, { - slotId: 'frontend.shell.footer.desktop.centerLinks.ui', - id: 'default.footer.desktop.centerLinks.fourth', + slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1', + id: 'org.openedx.frontend.widget.defaultFooter.desktopCenterLink4.v1', op: WidgetOperationTypes.APPEND, element: ( - <Slot id="frontend.shell.footer.desktop.centerLinks.fourth.ui" layout={LabeledLinkColumn} /> + <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink4.v1" layout={LabeledLinkColumn} /> ), }, // Left Links { - slotId: 'frontend.shell.footer.desktop.leftLinks.ui', - id: 'default.footer.desktop.leftLinks.Logo', + slotId: 'org.openedx.frontend.slot.footer.desktopLeftLinks.v1', + id: 'org.openedx.frontend.widget.defaultFooter.desktopLeftLinksLogo.v1', op: WidgetOperationTypes.APPEND, element: <Logo />, }, // Right Links { - slotId: 'frontend.shell.footer.desktop.rightLinks.ui', - id: 'default.footer.desktop.rightLinks.languageMenu', + slotId: 'org.openedx.frontend.slot.footer.desktopRightLinks.v1', + id: 'org.openedx.frontend.widget.defaultFooter.desktopRightLinksLanguageMenu.v1', op: WidgetOperationTypes.APPEND, component: LanguageMenu, }, // Copyright Notice { - slotId: 'frontend.shell.footer.desktop.legalNotices.ui', - id: 'default.footer.desktop.copyrightNotice', + slotId: 'org.openedx.frontend.slot.footer.desktopLegalNotices.v1', + id: 'org.openedx.frontend.widget.defaultFooter.desktopCopyrightNotice.v1', op: WidgetOperationTypes.APPEND, element: ( <CopyrightNotice /> diff --git a/shell/header/AuthenticatedMenu.tsx b/shell/header/AuthenticatedMenu.tsx index 555e186d..9c3842dc 100644 --- a/shell/header/AuthenticatedMenu.tsx +++ b/shell/header/AuthenticatedMenu.tsx @@ -22,7 +22,7 @@ export default function AuthenticatedMenu({ className }: AuthenticatedMenuProps) return ( <DropdownButton size="sm" id="user-nav-dropdown" title={title} variant="outline-primary" className={className}> - <Slot id="frontend.shell.header.authenticatedMenu.ui" /> + <Slot id="org.openedx.frontend.slot.header.authenticatedMenu.v1" /> </DropdownButton> ); } diff --git a/shell/header/Header.tsx b/shell/header/Header.tsx index c373be76..3ec8622f 100644 --- a/shell/header/Header.tsx +++ b/shell/header/Header.tsx @@ -9,8 +9,8 @@ export default function Header() { <header className="border-bottom py-2"> <nav className="py-2"> <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a> - <Slot id="frontend.shell.header.desktop.layout.ui" /> - <Slot id="frontend.shell.header.mobile.layout.ui" /> + <Slot id="org.openedx.frontend.slot.header.desktop.v1" /> + <Slot id="org.openedx.frontend.slot.header.mobile.v1" /> </nav> </header> ); diff --git a/shell/header/anonymous-menu/AnonymousMenu.tsx b/shell/header/anonymous-menu/AnonymousMenu.tsx index 329a73fa..cd8cdb02 100644 --- a/shell/header/anonymous-menu/AnonymousMenu.tsx +++ b/shell/header/anonymous-menu/AnonymousMenu.tsx @@ -8,7 +8,7 @@ interface AnonymousMenuProps { export default function AnonymousMenu({ className }: AnonymousMenuProps) { return ( <div className={classNames('d-flex flex-nowrap align-items-center flex-shrink-0 gap-3', className)}> - <Slot id="frontend.shell.header.anonymousMenu.ui" /> + <Slot id="org.openedx.frontend.slot.header.anonymousMenu.v1" /> </div> ); } diff --git a/shell/header/defaultHeaderConfig.tsx b/shell/header/defaultHeaderConfig.tsx index 6cc2ab04..f3126b72 100644 --- a/shell/header/defaultHeaderConfig.tsx +++ b/shell/header/defaultHeaderConfig.tsx @@ -15,46 +15,46 @@ const config: App = { // Layouts { - slotId: 'frontend.shell.header.desktop.layout.ui', - id: 'default.header.desktop.layout', + slotId: 'org.openedx.frontend.slot.header.desktop.v1', + id: 'org.openedx.frontend.widget.defaultHeader.desktopLayout.v1', op: WidgetOperationTypes.APPEND, component: DesktopLayout }, { - slotId: 'frontend.shell.header.mobile.layout.ui', - id: 'default.header.mobile.layout', + slotId: 'org.openedx.frontend.slot.header.mobile.v1', + id: 'org.openedx.frontend.widget.defaultHeader.mobileLayout.v1', op: WidgetOperationTypes.APPEND, component: MobileLayout }, // Desktop { - slotId: 'frontend.shell.header.desktop.left.ui', - id: 'default.header.desktop.logo', + slotId: 'org.openedx.frontend.slot.header.desktopLeft.v1', + id: 'org.openedx.frontend.widget.defaultHeader.desktopLogo.v1', op: WidgetOperationTypes.APPEND, element: <Logo />, }, { - slotId: 'frontend.shell.header.desktop.left.ui', - id: 'default.header.desktop.courseInfo', + slotId: 'org.openedx.frontend.slot.header.desktopLeft.v1', + id: 'org.openedx.frontend.widget.defaultHeader.desktopCourseInfo.v1', op: WidgetOperationTypes.APPEND, component: CourseInfo }, { - slotId: 'frontend.shell.header.desktop.left.ui', - id: 'default.header.desktop.primaryLinks', + slotId: 'org.openedx.frontend.slot.header.desktopLeft.v1', + id: 'org.openedx.frontend.widget.defaultHeader.desktopPrimaryLinks.v1', op: WidgetOperationTypes.APPEND, component: PrimaryNavLinks }, { - slotId: 'frontend.shell.header.desktop.right.ui', - id: 'default.header.desktop.secondaryLinks', + slotId: 'org.openedx.frontend.slot.header.desktopRight.v1', + id: 'org.openedx.frontend.widget.defaultHeader.desktopSecondaryLinks.v1', op: WidgetOperationTypes.APPEND, component: SecondaryNavLinks }, { - slotId: 'frontend.shell.header.desktop.right.ui', - id: 'default.header.desktop.authenticatedMenu', + slotId: 'org.openedx.frontend.slot.header.desktopRight.v1', + id: 'org.openedx.frontend.widget.defaultHeader.desktopAuthenticatedMenu.v1', op: WidgetOperationTypes.APPEND, element: <AuthenticatedMenu />, condition: { @@ -62,8 +62,8 @@ const config: App = { } }, { - slotId: 'frontend.shell.header.desktop.right.ui', - id: 'default.header.desktop.anonymousMenu', + slotId: 'org.openedx.frontend.slot.header.desktopRight.v1', + id: 'org.openedx.frontend.widget.defaultHeader.desktopAnonymousMenu.v1', op: WidgetOperationTypes.APPEND, element: <AnonymousMenu />, condition: { @@ -73,20 +73,20 @@ const config: App = { // Mobile { - slotId: 'frontend.shell.header.mobile.center.ui', - id: 'default.header.mobile.logo', + slotId: 'org.openedx.frontend.slot.header.mobileCenter.v1', + id: 'org.openedx.frontend.widget.defaultHeader.mobileLogo.v1', op: WidgetOperationTypes.APPEND, element: <Logo />, }, { - slotId: 'frontend.shell.header.mobile.menu.ui', - id: 'default.header.mobile.menuLinks', + slotId: 'org.openedx.frontend.slot.header.mobileMenu.v1', + id: 'org.openedx.frontend.widget.defaultHeader.mobileMenuLinks.v1', op: WidgetOperationTypes.APPEND, component: MobileNavLinks }, { - slotId: 'frontend.shell.header.mobile.right.ui', - id: 'default.header.mobile.authenticatedMenu', + slotId: 'org.openedx.frontend.slot.header.mobileRight.v1', + id: 'org.openedx.frontend.widget.defaultHeader.mobileAuthenticatedMenu.v1', op: WidgetOperationTypes.APPEND, element: <AuthenticatedMenu />, condition: { @@ -94,8 +94,8 @@ const config: App = { } }, { - slotId: 'frontend.shell.header.mobile.right.ui', - id: 'default.header.mobile.anonymousMenu', + slotId: 'org.openedx.frontend.slot.header.mobileRight.v1', + id: 'org.openedx.frontend.widget.defaultHeader.mobileAnonymousMenu.v1', op: WidgetOperationTypes.APPEND, element: <AnonymousMenu />, condition: { diff --git a/shell/header/desktop/DesktopLayout.tsx b/shell/header/desktop/DesktopLayout.tsx index c3dc311d..8808c2e3 100644 --- a/shell/header/desktop/DesktopLayout.tsx +++ b/shell/header/desktop/DesktopLayout.tsx @@ -12,10 +12,10 @@ export default function DesktopLayout() { )} > <div className="d-flex flex-grow-1 align-items-center"> - <Slot id="frontend.shell.header.desktop.left.ui" /> + <Slot id="org.openedx.frontend.slot.header.desktopLeft.v1" /> </div> <div className="d-flex align-items-center"> - <Slot id="frontend.shell.header.desktop.right.ui" /> + <Slot id="org.openedx.frontend.slot.header.desktopRight.v1" /> </div> </div> ); diff --git a/shell/header/desktop/PrimaryNavLinks.tsx b/shell/header/desktop/PrimaryNavLinks.tsx index 896acd5b..745a0ef2 100644 --- a/shell/header/desktop/PrimaryNavLinks.tsx +++ b/shell/header/desktop/PrimaryNavLinks.tsx @@ -4,7 +4,7 @@ import { Slot } from '../../../runtime'; export default function PrimaryNavLinks() { return ( <Nav className="flex-nowrap align-items-center"> - <Slot id="frontend.shell.header.primaryLinks.ui" /> + <Slot id="org.openedx.frontend.slot.header.primaryLinks.v1" /> </Nav> ); } diff --git a/shell/header/desktop/SecondaryNavLinks.tsx b/shell/header/desktop/SecondaryNavLinks.tsx index e512103e..9e8d15f5 100644 --- a/shell/header/desktop/SecondaryNavLinks.tsx +++ b/shell/header/desktop/SecondaryNavLinks.tsx @@ -4,7 +4,7 @@ import { Slot } from '../../../runtime'; export default function SecondaryNavLinks() { return ( <Nav className="flex-nowrap"> - <Slot id="frontend.shell.header.secondaryLinks.ui" /> + <Slot id="org.openedx.frontend.slot.header.secondaryLinks.v1" /> </Nav> ); } diff --git a/shell/header/mobile/MobileLayout.tsx b/shell/header/mobile/MobileLayout.tsx index ef6874b9..a45e6bbf 100644 --- a/shell/header/mobile/MobileLayout.tsx +++ b/shell/header/mobile/MobileLayout.tsx @@ -26,19 +26,19 @@ export default function MobileLayout() { <Button onClick={handleMobileButtonClick} variant="outline"> <MenuIcon /> </Button> - <Slot id="frontend.shell.header.mobile.left.ui" /> + <Slot id="org.openedx.frontend.slot.header.mobileLeft.v1" /> </div> <div className="d-flex flex-grow-1 flex-basis-0 justify-content-center align-items-center"> - <Slot id="frontend.shell.header.mobile.center.ui" /> + <Slot id="org.openedx.frontend.slot.header.mobileCenter.v1" /> </div> <div className="d-flex flex-grow-1 flex-basis-0 justify-content-end align-items-center"> - <Slot id="frontend.shell.header.mobile.right.ui" /> + <Slot id="org.openedx.frontend.slot.header.mobileRight.v1" /> </div> </div> {mobileOpen && ( <FocusOn onClickOutside={() => setMobileOpen(false)} onEscapeKey={() => setMobileOpen(false)}> <Nav className="flex-column"> - <Slot id="frontend.shell.header.mobile.menuLinks.ui" /> + <Slot id="org.openedx.frontend.slot.header.mobileMenuLinks.v1" /> </Nav> </FocusOn> )} diff --git a/shell/header/mobile/MobileNavLinks.tsx b/shell/header/mobile/MobileNavLinks.tsx index 04387a73..c81b252d 100644 --- a/shell/header/mobile/MobileNavLinks.tsx +++ b/shell/header/mobile/MobileNavLinks.tsx @@ -4,7 +4,7 @@ import { Slot } from '../../../runtime'; export default function MobileNavLinks() { return ( <Nav className="flex-column"> - <Slot id="frontend.shell.header.mobile.menuLinks.ui" /> + <Slot id="org.openedx.frontend.slot.header.mobileMenuLinks.v1" /> </Nav> ); } diff --git a/test-project/src/authenticated-page/index.tsx b/test-project/src/authenticated-page/index.tsx index 11fa8a9b..f8853bd0 100644 --- a/test-project/src/authenticated-page/index.tsx +++ b/test-project/src/authenticated-page/index.tsx @@ -13,7 +13,7 @@ const config: App = { }], slots: [ { - slotId: 'frontend.shell.header.primaryLinks.ui', + slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1', id: 'authenticatedPageLink', op: WidgetOperationTypes.APPEND, element: (