Connect client & server, with zero changes to client (UI): rough working endpoints that mimic the UI's mocks

Created on 20 June 2024, 6 months ago
Updated 5 July 2024, 6 months ago

Problem/Motivation

modules/contrib/experience_builder/ui/src/mocks/handlers.ts contains:

import { delay, http, HttpResponse } from "msw";
import components from "./fixtures/components.json"
import layoutDefault from "./fixtures/layout-default.json"
import mockPreviewDocument from "./preview";

const DEFAULT_DELAY = 200;

const handlers = [
  http.get('/api/components', async () => {
    await delay(DEFAULT_DELAY);
    return HttpResponse.json(components)
  }),
  http.get('/api/layout/:id', async () => {
    await delay(DEFAULT_DELAY);
    return HttpResponse.json(layoutDefault)
  }),
  http.post<{}, { layout: any; model: any }>('/api/preview', async ({ request }) => {
    await delay(DEFAULT_DELAY);
    const {layout, model} = await request.json()
    return HttpResponse.json({html: mockPreviewDocument(layout, model)});
  }),
];

export default handlers;

This exists since 📌 Consider swapping miragejs for msw Needs review (and https://git.drupalcode.org/project/experience_builder/-/commit/dacd3b69f... etc before it).

In order for these to stop using hardcoded markup in those JS fixtures, we need to actually implement these routes on the server side.

Steps to reproduce

Proposed resolution

It doesn't matter that these routes/URLs will change. What matters is that the client is starting to actually talk to the server.

So, implement:

  1. /api/layout/:id. Hardcoding to only /api/layout/1 is fine for now. The default layout should be empty.
  2. /api/preview. This should match the markup that the mock logic at createHtmlFromLayoutData() currently generates.

It doesn't matter if this is hacky code or non-final mark-up. It will change anyway.

(Tricky: /api/components and /api/component/… are automatically remapped to /xb-components and /xb-component/… in ui/src/services/components.ts — cleaning that up is out of scope here.)

Remaining tasks

User interface changes

The UI starts being powered by the server side.

API changes

N/A

Data model changes

None.

📌 Task
Status

Fixed

Component

Page builder

Created by

🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024