feat(admin,admin-ui,medusa): Add Medusa Admin plugin

[kasperkristensen]

What

@medusajs/medusa

• Adds a new step to the plugin dependency injection lifecycle - setup.
  • Adding code inside a directory named /setup in your plugin allows you to run function before any loaders are run and API endpoints are injected. For the admin plugin this is necessary to build the admin project before we inject the API endpoint, otherwise, we would be exposing an outdated admin build. This can also have usages in other plugins, and an example would be the need to fetch an external config before running loaders, etc.

@medusajs/admin-ui

• Migrates the latest develop branch from https://github.com/medusajs/admin to a core package.
• Exposes a slim API to programmatically rebuild the project.

@medusajs/admin

• Plugin responsible for exposing the admin dashboard on the server.
• Accepts the following options:
  • serve?: boolean: Decides whether to statically serve the dashboard on the server. The default is true.
  • outDir?: string: If provided the admin UI will be built to the path specified relative to the current working directory. The default is undefined.
  • path?: string: Allows the user to choose which path they want to expose the dashboard on. Cannot be one of the reserved paths: ["admin", "store"], or be suffixed or prefixed with a /. The default is "app"
  • backend?: string: If the user wishes to build the UI with the intent of hosting it separately from the server they should provide the URL for their server here. During the build, the URL will be injected and used for initializing medusa-react, and the axios client used for medusaRequest. The default is undefined.

How to test locally
The easiest way to test the plugin is by using yarn link, this requires that you upgrade your version of yarn in your local Medusa server repository if you haven't already.

cd my-medusa-server
yarn set version berry
yarn

After upgrading and re-installing your dependencies, you can create the necessary links:

yarn link ../path/to/local/core/repo/packages/admin
yarn link ../path/to/local/core/repo/packages/admin-ui

Note that you may also need to link your local versions of @medusajs/medusa, medusa-fulfillment-manual, and medusa-payment-manual.

In your medusa-config.js we can now add the options for the admin plugin:

// This is the place to include plugins. See API documentation for a thorough guide on plugins.
const plugins = [
  `medusa-fulfillment-manual`,
  `medusa-payment-manual`,
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: STRIPE_API_KEY,
      webhook_secret: STRIPE_WEBHOOK_SECRET,
    },
  },
  {
    resolve: "@medusajs/admin",
    /** @type {import('@medusajs/admin').PluginOptions} */
    options: {
      path: "app",
    },
  },
];

The type import is optional but recommended for inline documentation on the different options.

You are ready to test the plugin. The first time you run yarn start the plugin will automatically build the admin project and expose it on the path that you defined in the options. Any changes to the options will be picked up and trigger a rebuild on subsequent start-ups. If you want to trigger a rebuild yourself you can use the CLI command medusa-admin build or add it as a script to your package.json.

"build:admin": "medusa-admin build",

Note
By agreement with Oli, I have disabled unit tests in medusa-react and admin-ui for the time being. The tests currently fail in our CI, due to an issue with multiple versions of react-dom not being resolved correctly when tests are run in CI. The fix to this is to update the version of react and react-dom used for testing in medusa-react. This will however require updating every test in the project, as we will need to update a test dependency, that has a slightly different API then what we currently use. To not increase the scope of this PR, the tests have therefore been disabled. I'll follow up with a separate PR to fix the tests.

Resolves CORE-757

[changeset-bot]

🦋 Changeset detected

Latest commit: 4256175

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@medusajs/admin-ui	Patch
@medusajs/medusa	Patch
@medusajs/admin	Patch
@medusajs/inventory	Patch

Not sure what this means? Click here to learn what changesets are.

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

[olivermrbl]

@kasperkristensen I can't seem to get the setup working. Attaching the error below. Am I missing a step?

[kasperkristensen]

@olivermrbl don't think that is related to the admin plugin. Looks to be an issue with this line of code:

medusa/packages/medusa-cli/src/index.js

Line 6 in 84b6fe1

import semver from "semver"

where we import semver in medusa-cli, but it's not part of the dependencies of the package (we should fix this but not related to this PR). Did you perhaps also yarn link medusa-cli, since the error is thrown from a Yarn Plug'n'Play file?

[olivermrbl]

This is outstanding work @kasperkristensen 🎆

I played around with it locally, and it works like a charm.

Would like to have a couple more reviewers (read environments) test it out 💪

[olivermrbl]

Also, please include a changeset 👍

[riqwan]

🔥 work! Looks amazing!

[kasperkristensen]

/snapshot-this

[github-actions]

🚀 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/admin@1.0.0-snapshot-20230302151115

yarn add @medusajs/admin-ui@0.0.1-snapshot-20230302151115

yarn add @medusajs/inventory@2.0.0-snapshot-20230302151115

yarn add @medusajs/medusa@1.8.0-snapshot-20230302151115

yarn add medusa-core-utils@1.1.40-snapshot-20230302151115

yarn add medusa-dev-cli@0.0.31-snapshot-20230302151115

yarn add medusa-file-minio@1.1.6-snapshot-20230302151115

yarn add medusa-file-s3@1.1.12-snapshot-20230302151115

yarn add medusa-file-spaces@1.3.6-snapshot-20230302151115

yarn add medusa-fulfillment-manual@1.1.37-snapshot-20230302151115

yarn add medusa-fulfillment-webshipper@1.3.8-snapshot-20230302151115

yarn add medusa-interfaces@1.3.7-snapshot-20230302151115

yarn add @medusajs/medusa-js@2.0.0-snapshot-20230302151115

yarn add medusa-payment-adyen@1.1.44-snapshot-20230302151115

yarn add medusa-payment-klarna@1.3.9-snapshot-20230302151115

yarn add medusa-payment-manual@1.0.23-snapshot-20230302151115

yarn add medusa-payment-paypal@1.3.0-snapshot-20230302151115

yarn add medusa-payment-stripe@2.0.0-snapshot-20230302151115

yarn add medusa-plugin-algolia@0.2.10-snapshot-20230302151115

yarn add medusa-plugin-brightpearl@1.3.7-snapshot-20230302151115

yarn add medusa-plugin-contentful@1.2.8-snapshot-20230302151115

yarn add medusa-plugin-discount-generator@1.1.25-snapshot-20230302151115

yarn add medusa-plugin-economic@1.1.43-snapshot-20230302151115

yarn add medusa-plugin-ip-lookup@1.2.6-snapshot-20230302151115

yarn add medusa-plugin-mailchimp@1.1.47-snapshot-20230302151115

yarn add medusa-plugin-meilisearch@1.0.5-snapshot-20230302151115

yarn add medusa-plugin-restock-notification@3.0.0-snapshot-20230302151115

yarn add medusa-plugin-segment@1.3.5-snapshot-20230302151115

yarn add medusa-plugin-sendgrid@1.3.8-snapshot-20230302151115

yarn add medusa-plugin-slack-notification@1.3.9-snapshot-20230302151115

yarn add medusa-plugin-twilio-sms@1.2.8-snapshot-20230302151115

yarn add medusa-plugin-wishlist@1.1.42-snapshot-20230302151115

yarn add medusa-react@5.0.0-snapshot-20230302151115

yarn add medusa-source-shopify@1.2.8-snapshot-20230302151115

yarn add medusa-test-utils@1.1.39-snapshot-20230302151115

yarn add @medusajs/medusa-oas-cli@0.1.1-snapshot-20230302151115

yarn add @medusajs/openapi-typescript-codegen@0.1.1-snapshot-20230302151115

yarn add @medusajs/stock-location@2.0.0-snapshot-20230302151115

Latest commit: 2507af6

[pKorsholm]

LGTM! 😍