feat: Add custom behaviors to workflow (#2520)

Resolves #2151
Follows #2505

## Changes

- Allows users to set custom behaviors in workflow editor.
- Allows one or more behaviors, as simple URL or Git URL to be added
- Calls validation endpoint to check if URL is valid.

---------

Co-authored-by: emma <[email protected]>

Author: SuaYoo

frontend/src/components/ui/config-details.ts

@@ -178,6 +178,16 @@ export class ConfigDetails extends BtrixElement {
               .filter((v) => v)
               .join(", ") || none,
           )}
+          ${this.renderSetting(
+            labelFor.customBehaviors,
+            seedsConfig?.customBehaviors.length
+              ? html`
+                  <btrix-custom-behaviors-table
+                    .customBehaviors=${seedsConfig.customBehaviors}
+                  ></btrix-custom-behaviors-table>
+                `
+              : none,
+          )}
           ${this.renderSetting(
             labelFor.pageLoadTimeoutSeconds,
             renderTimeLimit(

frontend/src/components/ui/copy-field.ts

@@ -35,6 +35,9 @@ export class CopyField extends TailwindElement {
   @property({ type: Boolean })
   hoist = false;
 
+  @property({ type: Boolean })
+  border = true;
+
   @property({ type: Boolean })
   monostyle = true;
 
@@ -65,7 +68,7 @@ export class CopyField extends TailwindElement {
       <div
         role="group"
         class=${clsx(
-          tw`rounded border`,
+          this.border && tw`rounded border`,
           this.filled ? tw`bg-slate-50` : tw`border-neutral-150`,
           this.monostyle && tw`font-monostyle`,
         )}

frontend/src/components/ui/url-input.ts

@@ -1,4 +1,3 @@
-// import type { SlInputEvent } from "@shoelace-style/shoelace";
 import { msg } from "@lit/localize";
 import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";
 import { customElement, property } from "lit/decorators.js";
@@ -20,45 +19,41 @@ export function validURL(url: string) {
  * @attr {String} name
  * @attr {String} label
  * @attr {String} value
+ * @attr {Boolean} required
  */
 @customElement("btrix-url-input")
-export class Component extends SlInput {
+export class UrlInput extends SlInput {
   @property({ type: Number, reflect: true })
   minlength = 4;
 
   @property({ type: String, reflect: true })
   placeholder = "https://example.com";
 
-  connectedCallback(): void {
-    this.inputmode = "url";
+  constructor() {
+    super();
 
-    super.connectedCallback();
+    this.inputmode = "url";
 
     this.addEventListener("sl-input", this.onInput);
-    this.addEventListener("sl-blur", this.onBlur);
+    this.addEventListener("sl-change", this.onChange);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
 
     this.removeEventListener("sl-input", this.onInput);
-    this.removeEventListener("sl-blur", this.onBlur);
+    this.removeEventListener("sl-change", this.onChange);
   }
 
-  private readonly onInput = async () => {
-    console.log("input 1");
-    await this.updateComplete;
-
+  private readonly onInput = () => {
     if (!this.checkValidity() && validURL(this.value)) {
       this.setCustomValidity("");
       this.helpText = "";
     }
   };
 
-  private readonly onBlur = async () => {
-    await this.updateComplete;
-
-    const value = this.value;
+  private readonly onChange = () => {
+    const value = this.value.trim();
 
     if (value && !validURL(value)) {
       const text = msg("Please enter a valid URL.");

frontend/src/controllers/api.ts

@@ -170,6 +170,7 @@ export class APIController implements ReactiveController {
       message: errorMessage,
       status: resp.status,
       details: errorDetails,
+      errorCode: errorDetail,
     });
   }