Migrate ABViewForm

[benthongtiang]

Moved the form system to a more modern structure and fixed several display and data bugs.

1. Moved to Plugin System

• Moved all Form files (Buttons, Textboxes, dropdowns, etc.) into a new "Plugin" folder.
• Separated the code into Core (logic) and Components (the UI you see).

2. Visual & UI Fixes

• Tree Fields: Fixed the Tree view in forms to look exactly like the old version.
• JSON Fields: Fixed the issue where it showed [object Object]. Now it shows readable text.
• Grid Editing: You can now click and edit JSON data directly in the data grid.
• Text Formatting: Fixed long text and JSON to keep their line breaks and spacing in the Detail view.

3. Bug Fixes

• Data Protection: Fixed a bug where data in the Grid would disappear after opening a Detail view.
• Tree Data: Improved how the system reads Tree values so they don't get lost when you edit a record.
• Broken Code: Fixed several "undefined variable" errors found during code testing (linting).

4. Code Cleanup

• Removed old, unused code.
• Simplified how different parts of the form talk to each other to make the system faster.

Relate PR.
CruGlobal/appbuilder_class_core#339
CruGlobal/plugin_ABDesigner#357

[github-actions]

Please add one release label:
major (for breaking changes), minor (for new features), patch (for bug fixes) or skip-release (to skip the auto release process).

[johnny-hausman]

You are definitely tackling a big project and you are off to a good start.

OK, So I have a thought about how we might make this a little less verbose.

What if we do two things:

1. make each of our Form items manage their own Core version. For example we let ABViewFormButton internally prepare it's ABViewFormButtonCore value.

2. we make a FormAPI value, that packages the necessary objects that all our related form items need.

If we do that, then we could simplify some of this setup to be like:

First, create a "barrel" file:
view_form/FormComponents.js:

export { default as FNAbviewformButton } from "./FNAbviewformButton.js";
export { default as FNAbviewformCheckbox } from "./FNAbviewformCheckbox.js";
export { default as FNAbviewformConnect } from "./FNAbviewformConnect.js";
export { default as FNAbviewformCustom } from "./FNAbviewformCustom.js";
export { default as FNAbviewformDatepicker } from "./FNAbviewformDatepicker.js";
export { default as FNAbviewformItem } from "./FNAbviewformItem.js";
export { default as FNAbviewformJson } from "./FNAbviewformJson.js";
export { default as FNAbviewformNumber } from "./FNAbviewformNumber.js";
export { default as FNAbviewformReadonly } from "./FNAbviewformReadonly.js";
export { default as FNAbviewformSelectMultiple } from "./FNAbviewformSelectMultiple.js";
export { default as FNAbviewformSelectSingle } from "./FNAbviewformSelectSingle.js";
export { default as FNAbviewformTree } from "./FNAbviewformTree.js";
export { default as FNAbviewformTextbox } from "./FNAbviewformTextbox.js";
export { default as FNAbviewformURL } from "./FNAbviewformURL.js";

Then your view_form/ABviewform.js would have:

let FormAPI = {
	ABViewComponentPlugin,
    ABViewFormItemComponent,
	ABViewPropertyAddPage,
	ABViewPropertyEditPage,
	ABFieldImage,
	FocusableTemplate,
}


import * as fObjs from "./FormComponents.js";
let views = Object.values(fObjs).map((FNv) => FNv(FormAPI));

views.forEach((v) => {
  v.getPluginKey = () => v.common().key;
  v.getPluginType = () => "view";
});

This could reduce some of the code in the main file and make things easier to read/follow.

[github-actions]

Lighthouse Performance Report

Metrics

📄Full Report
Note: Above values are an average of 3 reports, only the last report was uploaded.

[Hiro-Nakamura]

Wow! That was a lot of files.

Here are a few things to review:

[johnny-hausman]

these changes look good.

What about the Pending Comments?

[johnny-hausman]

OK, I know this is how the original code was, but now that they are in the same file, it is easy to see that we are just reduplicating work in both of these, .fromValues() methods.

Update these to be ?? instead of || and remove the redundant checks down below.

[johnny-hausman]

redundant checks

[johnny-hausman]

you should probably uncomment this AB here so you can reference it below.

[johnny-hausman]

uncomment that /* AB */ above and it will be accessible here.

[johnny-hausman]

we should add a:

delete this.__throttleRefreshWarning;

here as well.