[SM-628] Add trim validator to SM dialogs (#4993)

* Add trim validator to SM dialogs

* Swap to creating a generic component

* Swap to BitValidators.trimValidator

* Fix storybook

* update validator to auto trim whitespace

* update storybook copy

* fix copy

* update trim validator to run on submit

* add validator to project name in secret dialog; update secret name validation to on submit

---------

Co-authored-by: William Martin <contact@willmartian.com>

libs/components/src/form-field/bit-validators/index.ts

@@ -1 +1,2 @@
 export { forbiddenCharacters } from "./forbidden-characters.validator";
+export { trimValidator } from "./trim.validator";

libs/components/src/form-field/bit-validators/trim.validator.spec.ts

@@ -0,0 +1,61 @@
+import { FormControl } from "@angular/forms";
+
+import { trimValidator as validate } from "./trim.validator";
+
+describe("trimValidator", () => {
+  it("should not error when input is null", () => {
+    const input = createControl(null);
+    const errors = validate(input);
+
+    expect(errors).toBe(null);
+  });
+
+  it("should not error when input is an empty string", () => {
+    const input = createControl("");
+    const errors = validate(input);
+
+    expect(errors).toBe(null);
+  });
+
+  it("should not error when input has no whitespace", () => {
+    const input = createControl("test value");
+    const errors = validate(input);
+
+    expect(errors).toBe(null);
+  });
+
+  it("should remove beginning whitespace", () => {
+    const input = createControl(" test value");
+    const errors = validate(input);
+
+    expect(errors).toBe(null);
+    expect(input.value).toBe("test value");
+  });
+
+  it("should remove trailing whitespace", () => {
+    const input = createControl("test value ");
+    const errors = validate(input);
+
+    expect(errors).toBe(null);
+    expect(input.value).toBe("test value");
+  });
+
+  it("should remove beginning and trailing whitespace", () => {
+    const input = createControl(" test value ");
+    const errors = validate(input);
+
+    expect(errors).toBe(null);
+    expect(input.value).toBe("test value");
+  });
+
+  it("should error when input is just whitespace", () => {
+    const input = createControl(" ");
+    const errors = validate(input);
+
+    expect(errors).toEqual({ trim: { message: "input is only whitespace" } });
+  });
+});
+
+function createControl(input: string) {
+  return new FormControl(input);
+}

libs/components/src/form-field/bit-validators/trim.validator.ts

@@ -0,0 +1,27 @@
+import { AbstractControl, FormControl, ValidatorFn } from "@angular/forms";
+
+/**
+ * Automatically trims FormControl value. Errors if value only contains whitespace.
+ *
+ * Should be used with `updateOn: "submit"`
+ */
+export const trimValidator: ValidatorFn = (control: AbstractControl<string>) => {
+  if (!(control instanceof FormControl)) {
+    throw new Error("trimValidator only supports validating FormControls");
+  }
+  const value = control.value;
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+  if (!value.trim().length) {
+    return {
+      trim: {
+        message: "input is only whitespace",
+      },
+    };
+  }
+  if (value !== value.trim()) {
+    control.setValue(value.trim());
+  }
+  return null;
+};