Optimize config form and binder

scm-ui/ui-forms/src/AddListEntryForm.tsx

@@ -88,6 +88,9 @@ function AddListEntryForm<FormType extends Record<string, unknown>, DefaultValue
   const submitButtonLabel = translateWithExtraPrefix("add", {
     defaultValue: defaultTranslate("list.add.label", { entity: translateWithExtraPrefix("entity") }),
   });
+  const titleLabel = translateWithExtraPrefix("title", {
+    defaultValue: defaultTranslate("list.title.label", { entity: translateWithExtraPrefix("entity") }),
+  });
 
   useEffect(() => {
     if (isSubmitSuccessful) {
@@ -102,9 +105,10 @@ function AddListEntryForm<FormType extends Record<string, unknown>, DefaultValue
   return (
     <ScmFormContextProvider {...form} t={translateWithExtraPrefix} formId={nameWithPrefix}>
       <ScmFormPathContextProvider path="">
+        <h3 className="subtitle is-5">{titleLabel}</h3>
         <form id={nameWithPrefix} onSubmit={form.handleSubmit(onSubmit)} noValidate></form>
         {typeof children === "function" ? children(form) : children}
-        <div className="level-right">
+        <div className="level-left">
           <Button
             form={nameWithPrefix}
             type="submit"

scm-ui/ui-forms/src/index.ts

@@ -36,6 +36,8 @@ import AddListEntryForm from "./AddListEntryForm";
 import { ScmNestedFormPathContextProvider } from "./FormPathContext";
 
 export { default as ConfigurationForm } from "./ConfigurationForm";
+export { default as SelectField } from "./select/SelectField";
+export { default as Select } from "./select/Select";
 export * from "./resourceHooks";
 
 export const Form = Object.assign(FormCmp, {

scm-ui/ui-forms/src/select/Select.tsx

@@ -33,15 +33,19 @@ type Props = {
   testId?: string;
 } & InputHTMLAttributes<HTMLSelectElement>;
 
+/**
+ * @beta
+ * @since 2.44.0
+ */
 const Select = React.forwardRef<HTMLSelectElement, Props>(
   ({ variant, children, className, options, testId, ...props }, ref) => (
     <div className={classNames("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)}>
       <select ref={ref} {...props} {...createAttributesForTesting(testId)} className={className}>
         {options
-          ? options.map((option) => (
-              <option {...option} key={option.value as Key}>
-                {option.label}
-                {option.children}
+          ? options.map((opt) => (
+              <option {...opt} key={opt.value as Key}>
+                {opt.label}
+                {opt.children}
               </option>
             ))
           : children}

scm-ui/ui-forms/src/select/SelectField.tsx

@@ -39,6 +39,8 @@ type Props = {
 
 /**
  * @see https://bulma.io/documentation/form/select/
+ * @beta
+ * @since 2.44.0
  */
 const SelectField = React.forwardRef<HTMLSelectElement, Props>(
   ({ label, helpText, error, className, id, ...props }, ref) => {

scm-ui/ui-forms/src/table/ControlledTable.tsx

@@ -31,6 +31,7 @@ import { prefixWithoutIndices } from "../helpers";
 import classNames from "classnames";
 import { useScmFormListContext } from "../ScmFormListContext";
 import { useTranslation } from "react-i18next";
+import { Notification } from "@scm-manager/ui-components";
 
 type RenderProps<T extends Record<string, unknown>, PATH extends Path<T>> = {
   value: PathValue<T, PATH>;
@@ -59,12 +60,9 @@ function ControlledTable<T extends Record<string, unknown>, PATH extends Path<T>
   const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
   const { fields, remove } = useScmFormListContext();
   const deleteLabel = t(`${prefixedNameWithoutIndices}.delete`) || defaultTranslate("delete.label");
+  const emptyTableLabel = t(`${prefixedNameWithoutIndices}.empty`) || defaultTranslate("empty.label");
   const actionHeaderLabel = t(`${prefixedNameWithoutIndices}.action.label`) || defaultTranslate("headers.action.label");
 
-  if (!fields.length) {
-    return null;
-  }
-
   return (
     <table className={classNames("table content is-hoverable", className)}>
       <thead>
@@ -76,6 +74,7 @@ function ControlledTable<T extends Record<string, unknown>, PATH extends Path<T>
         </tr>
       </thead>
       <tbody>
+      {fields.length === 0 ? <tr><td colSpan={1000}><Notification type="info">{emptyTableLabel}</Notification></td></tr> : null}
         {fields.map((value, index) => (
           <ScmFormPathContextProvider key={value.id} path={`${nameWithPrefix}.${index}`}>
             <tr>