[4285] Fix direct edit when the palette is closed

[mcharfadi]

Bug: #4285

Pull request template

General purpose

What is the main goal of this pull request?

• Bug fixes
• New features
• Documentation
• Cleanup
• Tests
• Build / releng

Project management

• Has the pull request been added to the relevant project and milestone? (Only if you know that your work is part of a specific iteration such as the current one)
• Have the priority: and pr: labels been added to the pull request? (In case of doubt, start with the labels priority: low and pr: to review later)
• Have the relevant issues been added to the pull request?
• Have the relevant labels been added to the issues? (area:, difficulty:, type:)
• Have the relevant issues been added to the same project and milestone as the pull request?
• Has the CHANGELOG.adoc been updated to reference the relevant issues?
• Have the relevant API breaks been described in the CHANGELOG.adoc? (Including changes in the GraphQL API)
• In case of a change with a visual impact, are there any screenshots in the CHANGELOG.adoc? For example in doc/screenshots/2022.5.0-my-new-feature.png

Architectural decision records (ADR)

• Does the title of the commit contributing the ADR start with [doc]?
• Are the ADRs mentioned in the relevant section of the CHANGELOG.adoc?

Dependencies

• Are the new / upgraded dependencies mentioned in the relevant section of the CHANGELOG.adoc?
• Are the new dependencies justified in the CHANGELOG.adoc?

Frontend

This section is not relevant if your contribution does not come with changes to the frontend.

General purpose

• Is the code properly tested? (Plain old JavaScript tests for business code and tests based on React Testing Library for the components)

Typing

We need to improve the typing of our code, as such, we require every contribution to come with proper TypeScript typing for both changes contributing new files and those modifying existing files.
Please ensure that the following statements are true for each file created or modified (this may require you to improve code outside of your contribution).

• Variables have a proper type
• Functions’ arguments have a proper type
• Functions’ return type are specified
• Hooks are properly typed:
  • useMutation<DATA_TYPE, VARIABLE_TYPE>(…)
  • useQuery<DATA_TYPE, VARIABLE_TYPE>(…)
  • useSubscription<DATA_TYPE, VARIABLE_TYPE>(…)
  • useMachine<CONTEXT_TYPE, EVENTS_TYPE>(…)
  • useState<STATE_TYPE>(…)
• All components have a proper typing for their props
• No useless optional chaining with ?. (if the GraphQL API specifies that a field cannot be null, do not treat it has potentially null for example)
• Nullable values have a proper type (for example let diagram: Diagram | null = null;)

Backend

This section is not relevant if your contribution does not come with changes to the backend.

General purpose

• Are all the event handlers tested?
• Are the event processor tested?
• Is the business code (services) tested?
• Are diagram layout changes tested?

Architecture

• Are data structure classes properly separated from behavioral classes?
• Are all the relevant fields final?
• Is any data structure mutable? If so, please write a comment indicating why
• Are behavioral classes either stateless or side effect free?

Review

How to test this PR?

Please describe here the various use cases to test this pull request

• Has the Kiwi TCMS test suite been updated with tests for this contribution?

[sbegaudeau]

Something somewhere in this PR is breaking the behavior of the palette in multiple use cases, I can't reopen a closed palette, some behavior like the delete is only working half the time.

[sbegaudeau]

1- Why?
2- This does not work, it only works half the time so why?

Why can't I click an edge and use the key Delete to delete it?

[mcharfadi]

If you open the palette you have the focus on the searchfield input and as such we want to keep the use of the Delete key to manipulate the text in the field.
You have to close the palette to Delete the element or click a tool.

[sbegaudeau]

Why break the existing behavior that has worked for years on both desktop and web?

[sbegaudeau]

Even that does not work properly, I can successfully bypass it sometimes to restore the original behavior.

[mcharfadi]

I'm not sure it's comparable with the desktop version. Here when we open the palette we want to have the focus on the searchfield input and as such we can use direct edit only with F2 if the palette is opened.
If the palette is closed then F2 or typing can be used to start the direct edit.

Do you mean the direct-edit is starting when typing on the searchfield with the PR?

[mcharfadi]

I made several changes to the PR :

• We can use direct edit or del key if the palette is opened but the input field is not focused (F2 work event if the input field is focused)
• The palette or one of the child element should always have the focus in order to be able to use the key event handler
• When clicking the arrow in the search field, we don't loose the focus anymore
• To use the del key you must not have the focus on the input field but you can click anywhere on the palette or press tab in order to delete the element

Also note that we have an issue with the tabindex of the quicktools that use the Tool.tsx component and as such pressing tab does not produce the expected result when selecting quicktools.