chore(CanvasForm): Cleanup and File sorting

[lordrip]

Context

Currently, we have a couple of missing bits after implementing the "filter by name" and "filter by category" functionality.

Changes

This commit simplifies the usage of FormTabsModes by removing both enums and relying only on its type.

It also moves the filters to the CanvasFormHeader and renames the CanvasFormTabs component to CanvasFormBody to better convey its purpose.

[codecov]

Codecov Report

Attention: Patch coverage is 97.77778% with 1 line in your changes missing coverage. Please review.

Please upload report for BASE (main@f0c7220). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
packages/ui/src/components/Form/NoFieldFound.tsx	50.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1363   +/-   ##
=======================================
  Coverage        ?   67.24%           
  Complexity      ?       25           
=======================================
  Files           ?      264           
  Lines           ?     7563           
  Branches        ?     1469           
=======================================
  Hits            ?     5086           
  Misses          ?     2474           
  Partials        ?        3           

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

[sonarcloud]

Quality Gate failed

Failed conditions
50.5% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

[shivamG640]

Although removing tabname enum and converting the tooltip functionality to object type serves the requirement, Just wanted to check if making tab enum as const was an available option?

[lordrip]

Although removing tabname enum and converting the tooltip functionality to object type serves the requirement, Just wanted to check if making tab enum as const was an available option?

Unfortunately no, const enum gets inlined in the source code. Here's a more in-depth explanation.

From the docs:

Const enums can only use constant enum expressions and unlike regular enums they are completely removed during compilation. Const enum members are inlined at use sites. This is possible since const enums cannot have computed members.

const enum Direction {
  Up,
  Down,
  Left,
  Right,
}
 
let directions = [
  Direction.Up,
  Direction.Down,
  Direction.Left,
  Direction.Right,
];

in generated code will become

"use strict";
let directions = [
    0 /* Direction.Up */,
    1 /* Direction.Down */,
    2 /* Direction.Left */,
    3 /* Direction.Right */,
];

That's why we can't iterate over a const enum, therefore were not gonna be able to use it to dynamically create new tabs.