Migrate Workbench to React completely

[sharadsw]

Currently, some parts of the Workbench are written in React while some parts still use Backbone.js/jQuery. The workbench also uses the handsontable library to view/interact with spreadsheet data, which needs to refactored to its React version.
Additionally, some parts of the Workbench use TypeScript classes which may be converted to React hooks if needed.

Relevant files that potentially need to be migrated/refactored:

• WorkBench/WbView.tsx: Entrypoint for the WorkBench which handles most interactions. Needs migration.
• WorkBench/WbActions.tsx: Vanilla TS class. Can potentially be converted to a hook
• WorkBench/WbUtils.tsx: Needs migration. Uses Backbone.js
• WorkBench/WbValidation.tsx: Vanilla TS class. Can potentially be converted to a hook
• WorkBench/CellMeta.tsx: Vanilla TS class. Can potentially be converted to a hook
• WorkBench/DisambiguationLogic.tsx: Vanilla TS class. Can potentially be converted to a hook
• WorkBench/handsontable.ts: Contains several functions to set configuration of handsontable. Might need some minor refactoring based on changes in other files.
• WorkBench/Template.tsx: Has multiple components that render a part of Workbench. Generates static template for the WbView (Backbone) using React.
• WorkBench/DataSetMeta.tsx: Contains one Backbone.js View DataSetNameView
• WorkBench/hooks.ts: Might need some minor refactoring based on changes in other files.

[melton-jason]

See also (#2622) Rewrite wbView.js and wbUtils.js to React and TypeScript

[maxpatiiuk]

I would say this issue is a duplicate of #2622
@sharadsw could you merge one of them into the other?
no worries - we discover duplicate issues all the time.
here is how we merge duplicates generally:

• pick the issue that has more useful information as the base

• remove the duplicate issue from all milestones and projects

• add res:duplicate label to the duplicate and use "Close as not planned" button to close it (rather than "Close as completed")

• if the duplicate issue has useful information, repost it in the main issue. if you weren't the one who opened the issue, then when reposting mention who originally wrote the content you are reposing to give propper credit 😊 (and blame 😁, ...joking)

  something like this:

  From @username:

  duplicate
  issue
  content
  here

[maxpatiiuk]

Relevant files that potentially need to be migrated/refactored:

also you did a great analysis of what each of these files is doing - described it better and more succinctly than I could!

[sharadsw]

Thank you Max. Closed the older issue.

From @maxpatiiuk

#2622
These are the last files that are responsible for UI, yet don't use React.

That would allow to get rid of the legacy dialog wrapper, react-router wrappers, reduce the number of bugs (thanks to typescript) and make the design more modular (will make making changes easier)

FYI: handsontable has excellent react integration - https://handsontable.com/docs/react-data-grid/installation/ As part of the rewrite:

• Consider reenabling live validation
• [a11y] Improve WB Accessibility #1097

[maxpatiiuk]

FYI: two bugs that are/may be fixed in the newer handsontable version:
#1925
#1540
If so, we can remove the workaround from the source code