Overview

Introduce data loading and saving while editing code components.

#3499988: Editing code components landed an editorial UI for working with code components, and with #3500034: Preview for code components and #3500017: Defining props for code components, the UI is ready to load and save data. We now have an API endpoint to do that thanks to #3500042: Auto-save code components.

Proposed resolution

  1. Load the JavaScriptComponent config entity when the editor is opened. See if there's an auto-saved version, fall back to the canonical config entity (use #3499931: HTTP API for code component config entities) if not.
  2. Store the loaded data in codeEditorSlice.
  3. When there are changes in codeEditorSlice, use the auto-save endpoint with a PATCH request.
  4. Also update global CSS using the work from #3499933: Storage for CSS shared across in-browser code components (and other use cases in the future)
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

balintbrews created an issue. See original summary.

balintbrews’s picture

nagwani’s picture

Issue tags: +sprint

balintbrews’s picture

balintbrews’s picture

Assigned: balintbrews » Unassigned
Status: Active » Needs review

balintbrews’s picture

Crediting @effulgentsia for suggesting to use default config for the asset library storing the global CSS.

larowlan’s picture

Issue summary: View changes
StatusFileSize
new414.74 KB

When I try to publish this, I get an error from the publish endpoint

'This value should not be blank'

Here's the detail


  "detail": "This value should not be blank.",
  "source": {
    "pointer": "name"
  },
  "meta": {
    "entity_type": "js_component",
    "entity_id": "garry",
    "label": "Garry",
    "autosave_key": "js_component:garry"
  }
}

Will try to fix it

larowlan’s picture

StatusFileSize
new271.53 KB

The name is indeed blank

larowlan’s picture

Creating a new component

1) Name is sent

2) Create another component

2) GET request starts but is aborted

3) PATCH request runs but sends the value of name

4) Name is now set to old value

I think the same thing is occurring with a clean state - but instead of sending the old component name, it is sending an empty value.

I think we can fix this in the 'create component' dialog, going to try that

larowlan’s picture

The issue isn't coming from the add dialog, its from the code added here.
Because we save an autosave entry before we get data from the backend, we are relying on the name from code editor slice.
This is empty if the component is new and the first component created here.
It is the name of the previously edited component if not the first one.

I think this highlights the brittleness of the 204 from the backend and we should reconsider a 307 so that the fetch always gets some data.

larowlan’s picture

Actually, ignore #13 - I was able to resolve this from the add dialog.
I'll add a test.

larowlan’s picture

Fixed #11 and #12 and added a test

There's a couple of open comments on the MR but other than that I think this is RTBC

wim leers made their first commit to this issue’s fork.

  • balintbrews committed c84110f2 on 0.x
    Issue #3506424 by balintbrews, larowlan, wim leers, effulgentsia:...
balintbrews’s picture

Assigned: Unassigned » balintbrews
Status: Needs review » Fixed
Issue tags: +Needs screenshots
balintbrews’s picture

Assigned: balintbrews » Unassigned
Issue tags: -Needs screenshots
StatusFileSize
new38.96 MB

Loading and auto-saving code components

nagwani’s picture

Issue tags: -sprint

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.