Add ability to trim the value from <Input> (#3333)

- If set (default = false) then the input will be trimmed of whitespace
  before validation and before submit

- Use trim on all input's that use the systemName validator

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -175,6 +175,7 @@ export class AddQuotaDialog extends React.Component<Props> {
               <Input
                 required autoFocus
                 placeholder="ResourceQuota name"
+                trim
                 validators={systemName}
                 value={this.quotaName} onChange={v => this.quotaName = v.toLowerCase()}
                 className="box grow"

src/renderer/components/+config-secrets/add-secret-dialog.tsx

@@ -223,6 +223,7 @@ export class AddSecretDialog extends React.Component<Props> {
               <Input
                 autoFocus required
                 placeholder="Name"
+                trim
                 validators={systemName}
                 value={name} onChange={v => this.name = v}
               />

src/renderer/components/+namespaces/add-namespace-dialog.tsx

@@ -100,6 +100,7 @@ export class AddNamespaceDialog extends React.Component<Props> {
               required autoFocus
               iconLeft="layers"
               placeholder="Namespace"
+              trim
               validators={systemName}
               value={namespace} onChange={v => this.namespace = v.toLowerCase()}
             />

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -177,6 +177,7 @@ export class AddHelmRepoDialog extends React.Component<Props> {
               <Input
                 autoFocus required
                 placeholder="Helm repo name"
+                trim
                 validators={systemName}
                 value={this.helmRepo.name} onChange={v => this.helmRepo.name = v}
               />

src/renderer/components/+user-management/+service-accounts/create-dialog.tsx

@@ -88,8 +88,10 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
           <WizardStep nextLabel="Create" next={this.createAccount}>
             <SubTitle title="Account Name" />
             <Input
-              autoFocus required
+              autoFocus
+              required
               placeholder="Enter a name"
+              trim
               validators={systemName}
               value={name} onChange={v => this.name = v.toLowerCase()}
             />

src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx

@@ -123,6 +123,7 @@ export class CronJobTriggerDialog extends Component<Props> {
           <Input
             required autoFocus
             placeholder={this.jobName}
+            trim
             validators={[systemName, maxLength]}
             maxLength={63}
             value={this.jobName} onChange={v => this.jobName = v.toLowerCase()}

src/renderer/components/input/input.tsx

@@ -41,11 +41,13 @@ export type { InputValidator };
 type InputElement = HTMLInputElement | HTMLTextAreaElement;
 type InputElementProps = InputHTMLAttributes<InputElement> & TextareaHTMLAttributes<InputElement> & DOMAttributes<InputElement>;
 
-export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSubmit"> & {
+export type InputProps = Omit<InputElementProps, "onChange" | "onSubmit"> & {
   theme?: "round-black" | "round";
   className?: string;
-  value?: T;
+  value?: string;
-  autoSelectOnFocus?: boolean
+  trim?: boolean;
+  autoSelectOnFocus?: boolean;
+  defaultValue?: string;
   multiLine?: boolean; // use text-area as input field
   maxRows?: number; // when multiLine={true} define max rows size
   dirty?: boolean; // show validation errors even if the field wasn't touched yet
@@ -55,8 +57,8 @@ export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSub
   iconRight?: string | React.ReactNode;
   contentRight?: string | React.ReactNode; // Any component of string goes after iconRight
   validators?: InputValidator | InputValidator[];
-  onChange?(value: T, evt: React.ChangeEvent<InputElement>): void;
+  onChange?(value: string, evt: React.ChangeEvent<InputElement>): void;
-  onSubmit?(value: T, evt: React.KeyboardEvent<InputElement>): void;
+  onSubmit?(value: string, evt: React.KeyboardEvent<InputElement>): void;
 };
 
 interface State {
@@ -73,6 +75,7 @@ const defaultProps: Partial<InputProps> = {
   maxRows: 10000,
   showValidationLine: true,
   validators: [],
+  defaultValue: "",
 };
 
 export class Input extends React.Component<InputProps, State> {
@@ -102,12 +105,10 @@ export class Input extends React.Component<InputProps, State> {
   }
 
   getValue(): string {
-    const { value, defaultValue = "" } = this.props;
+    const { trim, value, defaultValue } = this.props;
+    const rawValue = value ?? this.input?.value ?? defaultValue;
 
-    if (value !== undefined) return value; // controlled input
+    return trim ? rawValue.trim() : rawValue;
-    if (this.input) return this.input.value; // uncontrolled input
-
-    return defaultValue as string;
   }
 
   focus() {
@@ -138,7 +139,8 @@ export class Input extends React.Component<InputProps, State> {
 
   private validationId: string;
 
-  async validate(value = this.getValue()) {
+  async validate() {
+    const value = this.getValue();
     let validationId = (this.validationId = ""); // reset every time for async validators
     const asyncValidators: Promise<any>[] = [];
     const errors: React.ReactNode[] = [];