Open the menu desk

The desk’s page, its build script and a few helpers are ready-made, so this lesson can stay on Forge. Download the back-kitchen kit and unzip it into the app folder, so its folders merge with yours:

scripts/build-ui.mjs        builds the desk with esbuild
static/desk/src/            the desk’s HTML, CSS and JavaScript
src/lib/config.js           settings, limits and labels
src/lib/validate.js         checks what the desk sends, and what the sous-chef answers
src/lib/adf.js              turns text into Jira’s document format
src/lib/html.js             escapes text for Confluence pages
src/lib/llmText.js          reads the sous-chef’s answer

Open static/desk/src/main.js. It is ordinary browser JavaScript, apart from one import:

The desk sends the form with invoke('submitMenu', …) and shows what comes back. It builds every message with text nodes, never as HTML, so nothing in a menu can turn into code on the page.

Next step: next

Forge serves built files, not your source. Install the bundler the kit’s script uses:

npm install --save-dev esbuild

npm adds the devDependencies lines. Add the scripts lines yourself:

Then build the desk:

npm run build:ui

Run this before every deploy that changes the desk. Forget it, and Jira shows the old desk.

Stuck? I changed the menu desk (Level 2) · “Cannot find module @forge/…”

Next step: next

The desk needs its own resolver, separate from the recipe card’s. Create src/desk.js:

Three habits from here on:

• validateMenu checks everything the desk sends before any of it is used.
• The Jira space comes from settings(), which reads KITCHEN_PROJECT_KEY, never from the page.
• The ticket is created with asUser(), so Jira checks the head chef may create work items there, and they are its reporter.

Stuck? I changed code in src/

Next step: next

Three additions: the page, the function behind it, and where the built desk lives. Step through them:

Stuck? I changed manifest.yml · The menu desk page is blank

Next step: next

Creating work items needs a new scope. Let the inspector add it:

forge lint --fix

A new scope is a new major version, as in Level 1. Build the desk, deploy, approve, upgrade:

npm run build:ui
forge deploy --approve MAJOR_VERSION_RULE
forge install --upgrade

Stuck? Deploy stops after a permission change · I added a scope or a supplier host · I changed the menu desk (Level 2)

Next step: next

In Jira, open Apps and choose Menu desk. The first time, it asks you to allow access, as the recipe card did. Fill in the form:

Spring menu

Mai: Pad thai stays, but with less sugar in the sauce.
Ken: add tom yum soup. Can someone research a lemongrass supplier first?
Ana: green curry for the vegetarian set.
Everyone: mango sticky rice as the only dessert.

Mai, Ken, Ana

Select Send to the kitchen. After a few seconds the desk shows one new ticket for the whole menu. Open it: its reporter is you, it has the label menu-desk, and the recipe card on it looks up “Spring menu”, which is not a dish. The next lessons fix both: the button should not wait, and each dish should get its own ticket.

Stuck? The menu desk page is blank · Creating a ticket fails with “Jira answered 400” · The app asks me to “Allow access” · My menu stays “waiting” or ends “failed”

Next step: next