feat(ui): allow clear input when field is optional

This commit is contained in:
Fu Diwei
2025-05-19 11:39:45 +08:00
parent 3098f6a82f
commit a66e1c04c9
22 changed files with 36 additions and 30 deletions

View File

@@ -59,7 +59,7 @@ const AccessFormACMECAConfig = ({ form: formInst, formName, disabled, initialVal
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_eab_kid.tooltip") }}></span>}
>
<Input autoComplete="new-password" placeholder={t("access.form.acmeca_eab_kid.placeholder")} />
<Input allowClear autoComplete="new-password" placeholder={t("access.form.acmeca_eab_kid.placeholder")} />
</Form.Item>
<Form.Item
@@ -68,7 +68,7 @@ const AccessFormACMECAConfig = ({ form: formInst, formName, disabled, initialVal
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_eab_hmac_key.tooltip") }}></span>}
>
<Input.Password autoComplete="new-password" placeholder={t("access.form.acmeca_eab_hmac_key.placeholder")} />
<Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.acmeca_eab_hmac_key.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -84,7 +84,7 @@ const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initi
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_username.tooltip") }}></span>}
>
<Input autoComplete="new-password" placeholder={t("access.form.acmehttpreq_username.placeholder")} />
<Input allowClear autoComplete="new-password" placeholder={t("access.form.acmehttpreq_username.placeholder")} />
</Form.Item>
<Form.Item
@@ -93,7 +93,7 @@ const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initi
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_password.tooltip") }}></span>}
>
<Input.Password autoComplete="new-password" placeholder={t("access.form.acmehttpreq_password.placeholder")} />
<Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.acmehttpreq_password.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -66,7 +66,7 @@ const AccessFormCloudflareConfig = ({ form: formInst, formName, disabled, initia
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudflare_zone_api_token.tooltip") }}></span>}
>
<Input.Password autoComplete="new-password" placeholder={t("access.form.cloudflare_zone_api_token.placeholder")} />
<Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.cloudflare_zone_api_token.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -65,7 +65,7 @@ const AccessFormProxmoxVEConfig = ({ form: formInst, formName, disabled, initial
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.proxmoxve_api_token_secret.tooltip") }}></span>}
>
<Input.Password autoComplete="new-password" placeholder={t("access.form.proxmoxve_api_token_secret.placeholder")} />
<Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.proxmoxve_api_token_secret.placeholder")} />
</Form.Item>
<Form.Item name="allowInsecureConnections" label={t("access.form.proxmoxve_allow_insecure_conns.label")} rules={[formRule]}>

View File

@@ -81,7 +81,7 @@ const AccessFormUCloudConfig = ({ form: formInst, formName, disabled, initialVal
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_project_id.tooltip") }}></span>}
>
<Input autoComplete="new-password" placeholder={t("access.form.ucloud_project_id.placeholder")} />
<Input allowClear autoComplete="new-password" placeholder={t("access.form.ucloud_project_id.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -66,7 +66,7 @@ const AccessFormVercelConfig = ({ form: formInst, formName, disabled, initialVal
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.vercel_team_id.tooltip") }}></span>}
>
<Input placeholder={t("access.form.vercel_team_id.placeholder")} />
<Input allowClear placeholder={t("access.form.vercel_team_id.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -67,7 +67,6 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
}
return true;
}, t("access.form.webhook_headers.errmsg.invalid")),
allowInsecureConnections: z.boolean().nullish(),
defaultDataForDeployment: z
.string()
.nullish()
@@ -96,11 +95,12 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
return false;
}
}, t("access.form.webhook_default_data.errmsg.json_invalid")),
allowInsecureConnections: z.boolean().nullish(),
});
const formRule = createSchemaFieldRule(formSchema);
const handleWebhookHeadersBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
let value = e.target.value;
const handleWebhookHeadersBlur = () => {
let value = formInst.getFieldValue("headers");
value = value.trim();
value = value.replace(/(?<!\r)\n/g, "\r\n");
formInst.setFieldValue("headers", value);
@@ -279,7 +279,13 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.webhook_headers.tooltip") }}></span>}
>
<Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.webhook_headers.placeholder")} onBlur={handleWebhookHeadersBlur} />
<CodeInput
height="auto"
minHeight="64px"
maxHeight="256px"
placeholder={t("access.form.webhook_headers.placeholder")}
onBlur={handleWebhookHeadersBlur}
/>
</Form.Item>
<Show when={!usage || usage === "deployment"}>