chore(react-components): cogs v10

[haakonflatval-cognite]

Type of change

Jira ticket 📘

https://cognitedata.atlassian.net/browse/

Description 📝

To build locally - add

  "resolutions": {
    "@mui/base": "5.0.0-beta.58"
  }

at the end of the object in react-components/package.json. This fixes a bug inherent in an earlier @mui/base beta version. I've reached out to the cogs-team to fix it https://cognitedata.slack.com/archives/C011E10CW2F/p1727771787512549.

List of biggest changes:

• Use Menu component from cogs-lab instead of the old Dropdown + Menu component combination from cogs.js. The syntax is somewhat similar, but now the Menu is the wrapping component, and the renderTrigger contains the button that opens the menu.
• Rewrite the layer handling code to use SelectPanel
• Introduce IconName as an alias to internal "known" icons. External users can add their own icon names through the IconComponentMapper, which knows which icon name corresponds to which icon. However, any actual external use of that probably lies a bit into the future.

The following is a worklog I used for venting throughout the work (not relevant anymore)

Migration to Cogs v10.

Biggest change is that Icons are now provided as separate icons, instead of one icon taking the name as input. I've chosen to solve this by having a function translating from IconName (new type) to icon component. One advantage of doing this instead of e.g. returning the icon directly from each domain object / tool, is that we remain framework-agnostic in the architecture.

Will mark as "ready" (not draft) when cogs releases a version that correctly includes the @tippy/react and core-js dependencies, so we don't have to put them in our package.json

A lot of the functionality is working fine now. Still waiting for cogs' PR.

There are some janky behavior associated with some of the older buttons. In particular SettingsButton and HelpButton (somewhat). We should have a plan for these before merging this

Also, OptionButton is not properly migrated. May not be necessary before we merge this.

Update - Behavior in HelpButton is pretty good, although button itself still shows as "toggled" even when closing menu.
SettingsButton works pretty well, still closing panel on toggling options, though
SlicerButton does not close on clicking the button again after activation.

A good variety of trouble, in other words

---

30.08.24

We're mostly good. Remaining work (as far as I've been able to test today):

• Help content does not stop expanding, ending up too wide
• Rule-based coloring not working as it should (items not reacting to click?) and does not show color palette icon
• Filter list does not show color square alongside items

Good luck, future Håkon

How has this been tested? 🔍

Test instructions ℹ️

Checklist ☑️

• I am proud of this feature.
• I have performed a self-review of my own code.
• I have added PR type (Feat, Bug, Chore, Test, Docs, Style, Refactor) to the PR title.
• I have manually tested this for different scenarios (different models, formats, devices, browsers).
• I have commented my code in hard-to-understand areas.
• I have made corresponding changes to the public documentation.
• I have added unit and visuals tests to prove that my feature works to the best of my ability.
• I have refactored the code for readability to the best of my ability.
• I have checked that my changes do not introduce regressions in the public documentation.
• I have outlined any known defects / lacking capabilities in the contents of this PR.
• I have listed any remaining work that should follow this PR in the description or jira/miro/etc.
• I have added TSDoc to any public facing changes.
• I have added "developer documentation" in any package README.md that is related / applicable to this PR.
• I have noted down and am currently tracking any technical debt introduced in this PR.
• I have thoroughly thought about the architecture of this implementation.
• I have asked peers to test this feature.

[nilscognite]

We must find a better solution for the icon

[nilscognite]

This don't scale. Assume you defined a command outside react-component, and you are stuck