feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions #7383

kasperkristensen · 2024-05-21T11:28:41Z

What

Re-adds support for UI Widgets and UI Routes.
Removes UI Settings as a concept. Settings are instead added under /src/admin/routes/settings. This change was made, as there are no difference between what a route and a settings route is in the new admin, both now uses sidebar menu items for navigation, and in the new dashboard settings can now have multiple levels of nesting - /settings/provider/:id/edit etc.

Examples

// /src/admin/widgets/test.tsx
import { defineWidgetConfig } from "@medusajs/admin-shared"

const Widget = () => {
  return (
    <div>Test</div>
  )
}

export const config = defineWidgetConfig({
  zone: "product.details.before"
})

export default Widget

// /src/admin/routes/test/page.tsx
import { defineRouteConfig } from "@medusajs/admin-shared";

const TestPage = () => {
  return <div>Test Page!</div>;
};

export const config = defineRouteConfig({
    label: "Test"
})

export default TestPage;

// /src/admin/routes/settings/test/page.tsx
import { defineRouteConfig } from "@medusajs/admin-shared";

const TestSettingsPage = () => {
  return <div>Test Settings Page!</div>;
};

export const config = defineRouteConfig({
    label: "Test"
})

export default TestSettingsPage;

Note

I wanted to re-export the defineWidgetConfig and defineRouteConfig from @medusajs/medusa, but that is not possible as the medusa package leaks Node code into the admin build. For the time being the helpers can be imported from @medusajs/admin-shared.

TODO in follow up PR(s)

Add InjectionZones to all domains in /dashboard.
Pass props to widgets, such as the domain entity. I have omitted it for now, as we need to discuss the pattern we want to follow for this. Same as before, eg. we pass to the product.details.* widgets, or do we want people to fetch the data themselves, etc.
Validate admin path, to prevent serving the admin from reserved paths: /admin, /store, /auth, /.
Add better error messages to Vite plugin. Currently, if the plugin fails to parse a file, it will silently ignore it, we should alert the user so they can fix the file if it needs to be considered for extensions.
Add support for passing breadcrumbs and loaders to UI Routes.
(potentially) Add support for manually changing how routes are nested. The intend would be to allow developers to use the same patterns we do, such as rendering modals in a separate route through a Outlet. Currently, we nest routes based on their path names, but to follow our pattern developers would need to be allowed to override the nesting, an example would be to add a /create route as a child of the another route in order to render the modal on top instead of in an entirely different route.

vercel · 2024-05-21T11:28:45Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
medusa-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 23, 2024 11:33am

3 Ignored Deployments

Name	Status	Preview	Updated (UTC)
api-reference	⬜️ Ignored (Inspect)		May 23, 2024 11:33am
docs-ui	⬜️ Ignored (Inspect)	Visit Preview	May 23, 2024 11:33am
medusa-docs	⬜️ Ignored (Inspect)	Visit Preview	May 23, 2024 11:33am

changeset-bot · 2024-05-21T11:28:45Z

⚠️ No Changeset found

Latest commit: b95168f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

sradevski · 2024-05-23T09:24:48Z

packages/admin-next/admin-sdk/src/lib/serve.ts

@@ -41,6 +42,8 @@ export async function serve(options: ServeOptions) {
 res.setHeader("Vary", "Origin, Cache-Control")
 }

+ router.use(compression())


Should we pull the compression settings from the config (I see we have some there)?

I think we might want to have a separate compression config in projectConfig.admin that we could pass here, as I don't necessarily think the compressions options you want generally for your server === the compression you want for the admin dashboard. But I think we can leave that for later, the default compression options seems to work great for this use case, but we should definetly open them up to people if they want to modify it for whatever reason.

sradevski · 2024-05-23T09:26:11Z

packages/admin-next/admin-shared/package.json

@@ -5,14 +5,17 @@
 "author": "Kasper Kristensen <[email protected]>",


Maybe the timing is not the best, but I feel like we can do better with the naming. To me
admin-sdk would be closer to what admin-shared does. And the current admin-sdk can be more something like admin-builder. I am not saying we need to do it in this PR, but something to think about before officially releasing v2.

Agree that the naming can be better, and something we need to revisit, but would hold off on it to post RC, as it requires we update the packages a couple of different places.

packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx

packages/admin-next/dashboard/src/lib/extension-helpers.ts

olivermrbl · 2024-05-23T10:29:08Z

/snapshot-this

github-actions · 2024-05-23T10:36:48Z

🚀 A snapshot release has been made for this PR

Test the snapshots by updating your package.json with the newly published versions:

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

Latest commit: e01472a

adrien2p

Wonderful

packages/admin-next/admin-shared/src/extensions/virtual/utils.ts

packages/admin-next/dashboard/src/components/layout/main-layout/main-layout.tsx

packages/admin-next/dashboard/src/lib/extension-helpers.ts

adrien2p · 2024-05-23T10:50:34Z

packages/medusa/src/loaders/admin.ts


 type Options = {
 app: Express
- adminConfig: ConfigModule["admin"]
+ configModule: ConfigModule


Suggested change

configModule: ConfigModule

configModule: Pick<ConfigModule>

The idea being that you are not require to pass the entire configuration as only the admin is consumed

When we have a "plugins" concept again, we will need to read that to resolve where to look for possible admin extensions. So right now we only need the admin part later we will need more :)

oh yes thats true 😂 my bad 💪

olivermrbl · 2024-05-23T11:12:41Z

For the time being the helpers can be imported from @medusajs/admin-shared.

@kasperkristensen, this means users will have to separately install @medusajs/admin-shared in their project right? This package is not depended on by any already-installed packages as far as I can see.

If so, could I get you to include a changeset for it? I don't think we have that, so I can't test

riqwan

nice!

packages/medusa/src/loaders/admin.ts

kasperkristensen · 2024-05-23T11:28:37Z

For the time being the helpers can be imported from @medusajs/admin-shared.

@kasperkristensen, this means users will have to separately install @medusajs/admin-shared in their project right? This package is not depended on by any already-installed packages as far as I can see.

If so, could I get you to include a changeset for it? I don't think we have that, so I can't test

admin-sdk depends on it, so it will be in your node_modules. Auto import might not suggest it for you, but if you type it out it should work.

olivermrbl · 2024-05-23T11:32:27Z

admin-sdk depends on it, so it will be in your node_modules. Auto import might not suggest it for you, but if you type it out it should work.

Ah lol sorry, a versioning mismatch on my end caused my lock-file to be incorrect. Thx!

kasperkristensen · 2024-05-23T11:56:38Z

@olivermrbl are you cool with merging this now, so I can jump on adding InjectionZones back to admin

olivermrbl · 2024-05-23T11:59:05Z

Let's do it! 🚢

packages/medusa/src/loaders/admin.ts

… for UI extensions (#7383) * intial work * update lock * add routes and fix HMR of configs * cleanup * rm imports * rm debug from plugin * address feedback * address feedback

* chore(medusa): strict zod versions in workspace * feat(dashboard): add campaign create to promotion UI * wip * fix(medusa): Missing middlewares export (#7289) * fix(docblock-generator): fix how type names created from Zod objects are inferred (#7292) * feat(api-ref): show schema of a tag (#7297) * feat: Add support for sendgrid and logger notification providers (#7290) * feat: Add support for sendgrid and logger notification providers * fix: changes based on PR review * chore: add action to automatically label docs (#7284) * chore: add action to automatically label docs * removes the paths param * docs: preparations for preview (#7267) * configured base paths + added development banner * fix typelist site url * added navbar and sidebar badges * configure algolia filters * remove AI assistant * remove unused imports * change navbar text and badge * lint fixes * fix build error * add to api reference rewrites * fix build error * fix build errors in user-guide * fix feedback component * add parent title to pagination * added breadcrumbs component * remove user-guide links * resolve todos * fix details about authentication * change documentation title * lint content * chore: fix bug with form reset * chore: address reviews * chore: fix specs * chore: loads of FE fixes + BE adds * chore: add more polishes + reorg files * chore: fixes to promotions modal * chore: cleanup * chore: cleanup * chore: fix build * chore: fkix cart spec * chore: fix module tests * chore: fix moar tests * wip * chore: templates + fixes + migrate currency * chore: fix build, add validation for max_quantity * chore: allow removing campaigns * chore: fix specs * chore: scope campaigns based on currency * remove console logs * chore: add translations + update keys * chore: move over filesfrom v2 to routes * chore(dashboard): Delete old translation files (#7423) * feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions (#7383) * intial work * update lock * add routes and fix HMR of configs * cleanup * rm imports * rm debug from plugin * address feedback * address feedback * temp skip specs --------- Co-authored-by: Adrien de Peretti <[email protected]> Co-authored-by: Shahed Nasser <[email protected]> Co-authored-by: Stevche Radevski <[email protected]> Co-authored-by: Oli Juhl <[email protected]> Co-authored-by: Kasper Fabricius Kristensen <[email protected]>

intial work

253cf97

Merge branch 'develop' into feat/v2-admin-extensions

b45856b

github-actions bot added the team: medusa label May 21, 2024

vercel bot had a problem deploying to Preview – medusa-dashboard May 21, 2024 11:36 Failure

update lock

152525e

vercel bot deployed to Preview – medusa-dashboard May 21, 2024 11:47 View deployment

Merge branch 'develop' into feat/v2-admin-extensions

7cd5f16

vercel bot deployed to Preview – medusa-dashboard May 21, 2024 12:34 View deployment

add routes and fix HMR of configs

cb2a136

vercel bot had a problem deploying to Preview – medusa-dashboard May 22, 2024 19:59 Failure

Merge branch 'develop' into feat/v2-admin-extensions

d42c58e

kasperkristensen marked this pull request as ready for review May 22, 2024 19:59

kasperkristensen requested review from a team as code owners May 22, 2024 19:59

kasperkristensen requested review from sradevski, riqwan and olivermrbl May 22, 2024 19:59

vercel bot had a problem deploying to Preview – medusa-dashboard May 22, 2024 20:01 Failure

cleanup

5129878

vercel bot had a problem deploying to Preview – medusa-dashboard May 22, 2024 20:03 Failure

rm imports

48d486d

vercel bot deployed to Preview – medusa-dashboard May 22, 2024 20:05 View deployment

kasperkristensen changed the title ~~feat(dashboard,admin-sdk,admin-vite-plugin): Add support for extensions~~ feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for extensions May 22, 2024

kasperkristensen changed the title ~~feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for extensions~~ feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions May 22, 2024

rm debug from plugin

d4000f8

vercel bot deployed to Preview – medusa-dashboard May 22, 2024 20:35 View deployment

Merge branch 'develop' into feat/v2-admin-extensions

f368085

vercel bot deployed to Preview – medusa-dashboard May 23, 2024 07:28 View deployment

sradevski reviewed May 23, 2024

View reviewed changes

Merge branch 'develop' into feat/v2-admin-extensions

0ec95f0

vercel bot deployed to Preview – medusa-dashboard May 23, 2024 09:49 View deployment

address feedback

9ecc98b

vercel bot deployed to Preview – medusa-dashboard May 23, 2024 10:01 View deployment

adrien2p approved these changes May 23, 2024

View reviewed changes

riqwan approved these changes May 23, 2024

View reviewed changes

packages/medusa/src/loaders/admin.ts Show resolved Hide resolved

address feedback

b4724b8

vercel bot deployed to Preview – medusa-dashboard May 23, 2024 11:30 View deployment

Merge branch 'develop' into feat/v2-admin-extensions

b95168f

vercel bot deployed to Preview – medusa-dashboard May 23, 2024 11:33 View deployment

adrien2p approved these changes May 23, 2024

View reviewed changes

packages/medusa/src/loaders/admin.ts Show resolved Hide resolved

olivermrbl merged commit f1176a0 into develop May 23, 2024
17 checks passed

olivermrbl deleted the feat/v2-admin-extensions branch May 23, 2024 12:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions #7383

feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions #7383

kasperkristensen commented May 21, 2024 •

edited

vercel bot commented May 21, 2024 •

edited

changeset-bot bot commented May 21, 2024 •

edited

sradevski May 23, 2024

kasperkristensen May 23, 2024

sradevski May 23, 2024

kasperkristensen May 23, 2024

olivermrbl commented May 23, 2024

github-actions bot commented May 23, 2024

adrien2p left a comment

adrien2p May 23, 2024

kasperkristensen May 23, 2024

adrien2p May 23, 2024 •

edited

olivermrbl commented May 23, 2024 •

edited

riqwan left a comment

kasperkristensen commented May 23, 2024

olivermrbl commented May 23, 2024

kasperkristensen commented May 23, 2024

olivermrbl commented May 23, 2024

		@@ -5,14 +5,17 @@
		"author": "Kasper Kristensen <[email protected]>",

feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions #7383

feat(dashboard,admin-sdk,admin-shared,admin-vite-plugin): Add support for UI extensions #7383

Conversation

kasperkristensen commented May 21, 2024 • edited

vercel bot commented May 21, 2024 • edited

changeset-bot bot commented May 21, 2024 • edited

⚠️ No Changeset found

sradevski May 23, 2024

Choose a reason for hiding this comment

kasperkristensen May 23, 2024

Choose a reason for hiding this comment

sradevski May 23, 2024

Choose a reason for hiding this comment

kasperkristensen May 23, 2024

Choose a reason for hiding this comment

olivermrbl commented May 23, 2024

github-actions bot commented May 23, 2024

🚀 A snapshot release has been made for this PR

adrien2p left a comment

Choose a reason for hiding this comment

adrien2p May 23, 2024

Choose a reason for hiding this comment

kasperkristensen May 23, 2024

Choose a reason for hiding this comment

adrien2p May 23, 2024 • edited

Choose a reason for hiding this comment

olivermrbl commented May 23, 2024 • edited

riqwan left a comment

Choose a reason for hiding this comment

kasperkristensen commented May 23, 2024

olivermrbl commented May 23, 2024

kasperkristensen commented May 23, 2024

olivermrbl commented May 23, 2024

kasperkristensen commented May 21, 2024 •

edited

vercel bot commented May 21, 2024 •

edited

changeset-bot bot commented May 21, 2024 •

edited

adrien2p May 23, 2024 •

edited

olivermrbl commented May 23, 2024 •

edited