Create a new Studio Component named RecommendedNextAction

[Jondyr]

Description

• Added new component to @studio/components RecommendedNextAction
• Provides props to
  • Edit labels on buttons, title- and description texts.
  • Hide save button and events for save and skip button.
• Added a new Storyboard entry with docs and example use case
• Context StudioRecommendedNextActionContext to track recommendation suggestions

StudioRecommendedNextActionTest1.mp4

Changes to existing code:

• Moved function to validate a new task ID to a new hook for reuse. ( EditTaskId.tsx -> useValidateBpmnTaskId.tsx)

Related Issue(s)

• Create a new Studio Component named RecommendedNextAction #12633
• Implement a forced intermediate skippable step for changing layoutsetname when adding task #12632

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

Documentation

• User documentation is updated with a separate linked PR in altinn-studio-docs. (if applicable)
• Storybook documentation/entry added

[codecov]

Codecov Report

Attention: Patch coverage is 97.50000% with 3 lines in your changes missing coverage. Please review.

Project coverage is 93.74%. Comparing base (17d5672) to head (66d8e41).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...RecommendedActions/RecommendedActionChangeName.tsx	92.59%	1 Missing and 1 partial ⚠️
...packages/process-editor/src/hooks/useBpmnEditor.ts	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #13296      +/-   ##
==========================================
+ Coverage   93.73%   93.74%   +0.01%     
==========================================
  Files        1438     1446       +8     
  Lines       19937    20029      +92     
  Branches     2420     2428       +8     
==========================================
+ Hits        18688    18777      +89     
- Misses       1002     1004       +2     
- Partials      247      248       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[framitdavid]

Great work! Just a few small comments on some of the tests. 😊

[framitdavid]

👏

[ErlingHauan]

Testing

Nice feature and implementation 👏

@Annikenkbrathen: Nitpicking, but I noticed that the font sizing is different between the normal view and RecommendedNextAction. It's not crucial by any means, but it would maybe look a little bit more cohesive if the sizing was the same?

@Jondyr: It is not possible to save the new ID by pressing enter. If it is not a quick fix, maybe it can be a separate issue.

But overall, it looks and feels like a solid component 😄

Spiller.inn.2024-08-21.092443.mp4

[Annikenkbrathen]

Testing

Nice feature and implementation 👏

@Annikenkbrathen: Nitpicking, but I noticed that the font sizing is different between the normal view and RecommendedNextAction. It's not crucial by any means, but it would maybe look a little bit more cohesive if the sizing was the same?

Agreed, well observed. I still think the texts here are one size too large. Are you using small? It should be 15px. And the header should be x-small, 21px.

Is there a reason you moved away from the background color under the component?

I also notice that this field no longer takes up the full width. Is this part of the same issue, or does it belong elsewhere

[Jondyr]

@ErlingHauan:

@Jondyr: It is not possible to save the new ID by pressing enter. If it is not a quick fix, maybe it can be a separate issue.

This is now implemented. 👍

@Annikenkbrathen:

Agreed, well observed. I still think the texts here are one size too large. Are you using small? It should be 15px. And the header should be x-small, 21px.

This was a misunderstanding on my part, the paragraph is set to small now. The header is x-small already and should be 21px (for some reason it's actually 20.96 px).

Is there a reason you moved away from the background color under the component?

I am confused how this happened, but this was not intended and most likely happened when i commited the code changes for the changes discussed here. This is now fixed.

I also notice that this field no longer takes up the full width. Is this part of the same issue, or does it belong elsewhere

Good catch, this issue was introduced when refactoring the component and a css class was lost. This is now fixed as well.

[ErlingHauan]

Very nice @Jondyr!

One thing I noticed in the code is the use of fireEvent in some of the tests. Can you replace them with userEvent? I think it technically does not matter which one we use, but we are using userEvent elsewhere in the code base, and should be consistent with it 😊

[Jondyr]

I noticed the header for the whole panel in the Figma sketch is 24px, while on master/staging it's 18px. That might contribute to the feeling that the rest of the fonts are the wrong size? 🤔 I can possibly change this to match the figma sketch size, if preferred? @Annikenkbrathen

Figma:

Staging:

Also the text looks slightly off-centered compared to the icon on staging to me, maybe this can be solved at the same time. Unless this is part of another task?

[Jondyr]

Very nice @Jondyr!

One thing I noticed in the code is the use of fireEvent in some of the tests. Can you replace them with userEvent? I think it technically does not matter which one we use, but we are using userEvent elsewhere in the code base, and should be consistent with it 😊
@ErlingHauan

I agree, userEvent is what i would have preferred to use. But it seems userEvent does not support forms, as i got not implemented errors when i changed the save button to type='submit'. I did not look into this too much, so i can investigate a bit more after daily.

Update:
When changing for example the calls onSave when save button is clicked to this:

- fireEvent.submit(screen.getByRole('button', { name: 'Save' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Save' }));

jsdom throws this error:

    Error: Not implemented: HTMLFormElement.prototype.requestSubmit

      at module.exports (../node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
      at HTMLFormElementImpl.requestSubmit (../node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:113:5)
      at HTMLFormElementImpl._doRequestSubmit (../node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:79:10)
      at HTMLButtonElementImpl._activationBehavior (../node_modules/jsdom/lib/jsdom/living/nodes/HTMLButtonElement-impl.js:
23:14)
      at HTMLButtonElementImpl._dispatch (../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:252:26)
      at HTMLButtonElementImpl.dispatchEvent (../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
      at HTMLButtonElement.dispatchEvent (../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at ../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:44:43
      at ../node_modules/@testing-library/react/dist/pure.js:131:16
      at ../node_modules/@testing-library/react/dist/act-compat.js:71:24
      at act (../node_modules/react/cjs/react.development.js:2199:20)
      at ../node_modules/@testing-library/react/dist/act-compat.js:70:25
      at Object.eventWrapper (../node_modules/@testing-library/react/dist/pure.js:130:28)
      at Object.wrapEvent (../node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:5:26)
      at Object.dispatchEvent (../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:44:20)
      at Object.dispatchUIEvent (../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:21:24)
      at Mouse.up (../node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:100:20)
      at PointerHost.release (../node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:83:20)
      at pointerAction (../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:58:39)
      at Object.pointer (../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:31:5)
      at Object.asyncWrapper (../node_modules/@testing-library/react/dist/pure.js:111:22)
      at Object.<anonymous> (libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.
test.tsx:45:5) {
        type: 'not implemented'
      }

There are lots of suggested solutions in the jsdom github issue 1937. (Not linking it to avoid polluting cross reference list in their issue)
But i think just using fireEvent is a lot neater than those i've seen.