Use component registry to make the body of the LinkView page customisable #6465

JeffersonBledsoe · 2024-11-04T14:12:15Z

I signed and returned the Plone Contributor Agreement, and received and accepted an invitation to join a team in the Plone GitHub organization.
I verified there aren't other open pull requests for the same change.
I followed the guidelines in Contributing to Volto.
I succesfully ran code linting checks on my changes locally.
I succesfully ran unit tests on my changes locally.
I succesfully ran acceptance tests on my changes locally.
If needed, I added new tests for my changes.
If needed, I added documentation for my changes, either in the Storybook or narrative documentation.
I included a change log entry in my commits.

If your pull request closes an open issue, include the exact text below, immediately followed by the issue number. When your pull request gets merged, then that issue will close automatically.

Closes #

…able

netlify · 2024-11-04T14:12:32Z

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	`d39c57a`
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/6749a8f8ae812f0008d6f3a2

davisagli

Seems like a good idea to me, I have one small suggestion.

packages/volto/src/components/theme/View/LinkView.jsx

davisagli · 2024-11-08T20:00:51Z

@JeffersonBledsoe unit tests are failing because the snapshots need to be updated

JeffersonBledsoe · 2024-11-29T11:43:43Z

@davisagli I tried updating the snapshots locally, but ran into this not-so-nice looking test fail for alot of components (shown at end of comment).

It seems that the changes to the test-setup-config.jsx file are causing this. Specifically, component: DefaultLinkViewBody,. If I just use a mocked component like in the comment above this line, I don't run into any issues.
I've played about with the component a bit, and it seems to be the rendering of the <UniversalLink> component within the DefaultLinkViewBody that causes it to break. Any ideas?

 FAIL  src/components/manage/Controlpanels/Rules/ConfigureRule.test.jsx (6.587 s)
  ConfigureRule
    ✕ renders rules configure interface (205 ms)

  ● ConfigureRule › renders rules configure interface

    TypeError: Cannot read properties of undefined (reading 'actions')

      644 |   connect(
      645 |     (state, props) => ({
    > 646 |       actions: state.actions.actions,
          |                              ^
      647 |       token: state.userSession.token,
      648 |       userId: state.userSession.token
      649 |         ? jwtDecode(state.userSession.token).sub

      at Function.Object.<anonymous>.exports.default.getTypes [as mapToProps] (src/components/manage/Toolbar/Toolbar.jsx:646:30)
      at mapToPropsProxy (../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/wrapMapToProps.js:59:46)
      at Function.detectFactoryAndVerify (../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/wrapMapToProps.js:68:19)
      at mapToPropsProxy (../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/wrapMapToProps.js:59:46)
      at handleFirstCall (../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/selectorFactory.js:30:18)
      at pureFinalPropsSelector (../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/selectorFactory.js:71:81)
      at selector (../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/components/connect.js:340:18)
      at mountSyncExternalStore (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:16799:20)
      at Object.useSyncExternalStore (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:17727:14)
      at useSyncExternalStore (../../node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:1676:21)
      at ConnectFunction (../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/components/connect.js:364:28)
      at renderWithHooks (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
      at updateFunctionComponent (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:19588:20)
      at updateSimpleMemoComponent (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:19425:10)
      at updateMemoComponent (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:19284:14)
      at beginWork (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:21673:16)
      at beginWork$1 (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:27426:14)
      at performUnitOfWork (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
      at workLoopSync (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
      at renderRootSync (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
      at recoverFromConcurrentError (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25850:20)
      at performSyncWorkOnRoot (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26096:20)
      at flushSyncCallbacks (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:12042:22)
      at commitRootImpl (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26959:3)
      at commitRoot (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26682:5)
      at finishConcurrentRender (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25981:9)
      at performConcurrentWorkOnRoot (../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25809:7)
      at flushActQueue (../../node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:2667:24)
      at act (../../node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:2582:11)
      at ../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/act-compat.js:46:25
      at renderRoot (../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/pure.js:180:26)
      at render (../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/pure.js:266:10)
      at Object.<anonymous> (src/components/manage/Controlpanels/Rules/ConfigureRule.test.jsx:22:33)

  console.error
    Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'actions')]
        at reportException (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
        at invokeEventListeners (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
        at invokeGuardedCallback (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
        at beginWork$1 (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
        at performUnitOfWork (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
        at workLoopSync (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
        at renderRootSync (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
        at performSyncWorkOnRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26085:20)
        at flushSyncCallbacks (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:12042:22)
        at commitRootImpl (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26959:3)
        at commitRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26682:5)
        at finishConcurrentRender (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25981:9)
        at performConcurrentWorkOnRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25809:7)
        at flushActQueue (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:2667:24)
        at act (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:2582:11)
        at /Users/user/projects/packages/volto/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/act-compat.js:46:25
        at renderRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/pure.js:180:26)
        at render (/Users/user/projects/packages/volto/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/pure.js:266:10)
        at Object.<anonymous> (/Users/user/projects/packages/volto/packages/volto/src/components/manage/Controlpanels/Rules/ConfigureRule.test.jsx:22:33)
        at Object.asyncJestTest (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
        at /Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/queueRunner.js:45:12
        at new Promise (<anonymous>)
        at mapper (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
        at /Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/queueRunner.js:75:41
        at processTicksAndRejections (node:internal/process/task_queues:95:5) TypeError: Cannot read properties of undefined (reading 'actions')
        at Function.Object.<anonymous>.exports.default.getTypes [as mapToProps] (/Users/user/projects/packages/volto/packages/volto/src/components/manage/Toolbar/Toolbar.jsx:646:30)
        at mapToPropsProxy (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/wrapMapToProps.js:59:46)
        at Function.detectFactoryAndVerify (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/wrapMapToProps.js:68:19)
        at mapToPropsProxy (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/wrapMapToProps.js:59:46)
        at handleFirstCall (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/selectorFactory.js:30:18)
        at pureFinalPropsSelector (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/connect/selectorFactory.js:71:81)
        at selector (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/components/connect.js:340:18)
        at mountSyncExternalStore (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:16799:20)
        at Object.useSyncExternalStore (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:17727:14)
        at useSyncExternalStore (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:1676:21)
        at ConnectFunction (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/react-redux/lib/components/connect.js:364:28)
        at renderWithHooks (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:16305:18)
        at updateFunctionComponent (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:19588:20)
        at updateSimpleMemoComponent (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:19425:10)
        at updateMemoComponent (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:19284:14)
        at beginWork (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:21673:16)
        at HTMLUnknownElement.callCallback (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
        at HTMLUnknownElement.callTheUserObjectsOperation (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
        at innerInvokeEventListeners (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
        at invokeEventListeners (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
        at invokeGuardedCallback (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
        at beginWork$1 (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:27451:7)
        at performUnitOfWork (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26560:12)
        at workLoopSync (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26466:5)
        at renderRootSync (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26434:7)
        at performSyncWorkOnRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26085:20)
        at flushSyncCallbacks (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:12042:22)
        at commitRootImpl (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26959:3)
        at commitRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26682:5)
        at finishConcurrentRender (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25981:9)
        at performConcurrentWorkOnRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25809:7)
        at flushActQueue (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:2667:24)
        at act (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:2582:11)
        at /Users/user/projects/packages/volto/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/act-compat.js:46:25
        at renderRoot (/Users/user/projects/packages/volto/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/pure.js:180:26)
        at render (/Users/user/projects/packages/volto/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@testing-library/react/dist/pure.js:266:10)
        at Object.<anonymous> (/Users/user/projects/packages/volto/packages/volto/src/components/manage/Controlpanels/Rules/ConfigureRule.test.jsx:22:33)
        at Object.asyncJestTest (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
        at /Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/queueRunner.js:45:12
        at new Promise (<anonymous>)
        at mapper (/Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
        at /Users/user/projects/packages/volto/node_modules/.pnpm/[email protected]/node_modules/jest-jasmine2/build/queueRunner.js:75:41
        at processTicksAndRejections (node:internal/process/task_queues:95:5)

Use component registry to make the body of the LinkView page customis…

b27c79f

…able

JeffersonBledsoe added 2 commits November 4, 2024 14:15

Changelog

5192e05

Update jest config to fix test

6a94046

JeffersonBledsoe changed the title ~~Use component registry to make the body of the LinkView page customis…~~ Use component registry to make the body of the LinkView page customisable Nov 4, 2024

davisagli approved these changes Nov 5, 2024

View reviewed changes

packages/volto/src/components/theme/View/LinkView.jsx Outdated Show resolved Hide resolved

JeffersonBledsoe added 2 commits November 8, 2024 09:56

Pass all props down to body

2821182

Merge branch 'main' into link-type-component-customisation

8ac042f

JeffersonBledsoe added the 22 status: in-progress label Nov 25, 2024

Merge branch 'main' into link-type-component-customisation

d39c57a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use component registry to make the body of the LinkView page customisable #6465

Use component registry to make the body of the LinkView page customisable #6465

JeffersonBledsoe commented Nov 4, 2024 •

edited

Loading

netlify bot commented Nov 4, 2024 •

edited

Loading

davisagli left a comment

davisagli commented Nov 8, 2024

JeffersonBledsoe commented Nov 29, 2024

Use component registry to make the body of the LinkView page customisable #6465

Are you sure you want to change the base?

Use component registry to make the body of the LinkView page customisable #6465

Conversation

JeffersonBledsoe commented Nov 4, 2024 • edited Loading

netlify bot commented Nov 4, 2024 • edited Loading

✅ Deploy Preview for plone-components canceled.

davisagli left a comment

Choose a reason for hiding this comment

davisagli commented Nov 8, 2024

JeffersonBledsoe commented Nov 29, 2024

JeffersonBledsoe commented Nov 4, 2024 •

edited

Loading

netlify bot commented Nov 4, 2024 •

edited

Loading