Allow cards and tile features to provide a schema to create the editor

[piitaya]

Proposed change

Adding easier editor support for custom cards and custom tile features. It only need a form schema to generate the editor.

Benefits:

• no need to rebuild a component
• supports all selectors

Downsides :

• no translation support for label
• no conditional form

Example (entity card)

  public static async getConfigSchema(): Promise<HaFormSchema[]> {
    return [
      { name: "entity", required: true, selector: { entity: {} } },
      {
        type: "grid",
        name: "",
        schema: [
          { name: "name", selector: { text: {} } },
          {
            name: "icon",
            selector: {
              icon: {},
            },
            context: {
              icon_entity: "entity",
            },
          },
          {
            name: "attribute",
            selector: {
              attribute: {},
            },
            context: {
              filter_entity: "entity",
            },
          },
          { name: "unit", selector: { text: {} } },
          { name: "theme", selector: { theme: {} } },
          { name: "state_color", selector: { boolean: {} } },
        ],
      },
    ];
  }

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

Suggested change

	getConfigSchema?: () => HaFormSchema[];
	getConfigSchema?: () => {schema: HaFormSchema[], computeLabel: (schema: HaFormSchema) => string};

[piitaya]

I would prefer automatic key generation like : card.{card_name}.editor.fields.{field_name}.name and let custom cards inject translations.

[bramkragten]

How would injecting translations work? The card would register a function that we call with a language param?

[piitaya]

Yes, in customCards window object.

[bramkragten]

Why not keep everything in the editor file?

return import(
      "../editor/config-elements/hui-entity-card-editor"
    );

[bramkragten]

This is missing now

[piitaya]

I restored this logic. But the most fields are optional. We should align that (or automatically add optional label if need). We can do that in another PR.

[bramkragten]

Should we name this hui-form-editor to make it more descriptive? And match getConfigForm better?

[bramkragten]

This needs dev documentation and maybe even a dev blog post?

[piitaya]

At least documentation

[Misiu]

Any updates on the docs? Sadly I couldn't find anything in https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/#graphical-card-configuration about getConfigSchema.