fix: Input fields to have expected behaviour in case of empty / only whitespaces string (#6736)
# ISSUE - Closes #6734 - Closes #6633 - Closes #6733 - Closes #6816 # Description - [x] Don't allow Empty (whitespaces) Objects to Create, all the keyboard shortcuts are also handled for this. https://github.com/user-attachments/assets/1c9add4e-f13f-458b-8f76-63bd868413a2 https://github.com/user-attachments/assets/e72b6ee3-74e4-4517-a230-3eb10db80dc7 Note: we do have one other issue with FullName field #6740 Inorder to test use **shift**. - [x] Api Keys Input Name Field -> New and Detail View Name field shouldn't be empty or string with whitespaces, we won't able to have whitespaces in both. **Try Entering just spaces** https://github.com/user-attachments/assets/b521b49f-648c-4585-9d15-8ff4faed3c3a - [x] Similar to above, Empty webhook endpoint url under **/settings/developers/webhooks/new** won't be created. **Try Entering just spaces** - [x] New Functions or Updating Functions will not able to have whitespaces, empty string as Name. **Try Entering just spaces** https://github.com/user-attachments/assets/09fcf394-c6d9-4080-8efd-462b054a22d0 - [x] under **settings/workspace-members** changes will lead and solve that user won't be able to enter Invite by email as just whitespaces + button is now getting disabled when there is no correct email. **Try Entering just spaces** https://github.com/user-attachments/assets/b352edfa-113b-4645-80fd-db6f120ab5db - [x] Text Input Field, will not allow to start entering with whitespaces and won't take just whitespaces as value spaces between words will work. https://github.com/user-attachments/assets/8c1a0812-45be-4ed2-bd3d-bb4f92147976 - [x] Similarly Number works as per above including shortcuts. https://github.com/user-attachments/assets/9f69cc87-5c3c-43ee-93c4-fa887bc0d7ee - [x] Similarly FullName field works as per above including shortcuts https://github.com/user-attachments/assets/7bb006b2-abf7-44cd-a214-7a2fc68df169 - [x] Pasting fullName is been Improved. - Case 1 (Two Words): If there are exactly two words, return them as is. - Case 2 (More than Two Words): If there are more than two words, return the first two words only. - Case 3 (One Word): If there is only one word, return it as the first name, with an empty string as the last name. - WhiteSpaces have been handled. ``` console.log(splitFullName("John Doe")); // ["John", "Doe"] console.log(splitFullName(" ")); // ["", ""] console.log(splitFullName("John")); // ["John", ""] console.log(splitFullName(" John Doe ")); // ["John", "Doe"] console.log(splitFullName("John Michael Andrew Doe")); // ["John", "Michael"] ``` --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Nabhag Motivaras
@ -87,125 +87,116 @@ export const SettingsDevelopersWebhooksDetail = () => {
|
||||
navigate(developerPath);
|
||||
};
|
||||
|
||||
if (!webhookData?.targetUrl) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{webhookData?.targetUrl && (
|
||||
<SubMenuTopBarContainer
|
||||
Icon={IconCode}
|
||||
title={webhookData.targetUrl}
|
||||
links={[
|
||||
{
|
||||
children: 'Workspace',
|
||||
href: getSettingsPagePath(SettingsPath.Workspace),
|
||||
},
|
||||
{
|
||||
children: 'Developers',
|
||||
href: developerPath,
|
||||
},
|
||||
{ children: 'Webhook' },
|
||||
]}
|
||||
actionButton={
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!isDirty}
|
||||
onCancel={() => {
|
||||
navigate(developerPath);
|
||||
<SubMenuTopBarContainer
|
||||
Icon={IconCode}
|
||||
title={webhookData.targetUrl}
|
||||
links={[
|
||||
{
|
||||
children: 'Workspace',
|
||||
href: getSettingsPagePath(SettingsPath.Workspace),
|
||||
},
|
||||
{
|
||||
children: 'Developers',
|
||||
href: developerPath,
|
||||
},
|
||||
{ children: 'Webhook' },
|
||||
]}
|
||||
actionButton={
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!isDirty}
|
||||
onCancel={() => {
|
||||
navigate(developerPath);
|
||||
}}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<SettingsPageContainer>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Endpoint URL"
|
||||
description="We will send POST requests to this endpoint for every new event"
|
||||
/>
|
||||
<TextInput
|
||||
placeholder="URL"
|
||||
value={webhookData.targetUrl}
|
||||
disabled
|
||||
fullWidth
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title title="Description" description="An optional description" />
|
||||
<TextArea
|
||||
placeholder="Write a description"
|
||||
minRows={4}
|
||||
value={description}
|
||||
onChange={(description) => {
|
||||
setDescription(description);
|
||||
setIsDirty(true);
|
||||
}}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Filters"
|
||||
description="Select the event you wish to send to this endpoint"
|
||||
/>
|
||||
<StyledFilterRow>
|
||||
<Select
|
||||
fullWidth
|
||||
dropdownId="object-webhook-type-select"
|
||||
value={operationObjectSingularName}
|
||||
onChange={(objectSingularName) => {
|
||||
setIsDirty(true);
|
||||
setOperationObjectSingularName(objectSingularName);
|
||||
}}
|
||||
onSave={handleSave}
|
||||
options={fieldTypeOptions}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<SettingsPageContainer>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Endpoint URL"
|
||||
description="We will send POST requests to this endpoint for every new event"
|
||||
/>
|
||||
<TextInput
|
||||
placeholder="URL"
|
||||
value={webhookData.targetUrl}
|
||||
disabled
|
||||
fullWidth
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Description"
|
||||
description="An optional description"
|
||||
/>
|
||||
<TextArea
|
||||
placeholder="Write a description"
|
||||
minRows={4}
|
||||
value={description}
|
||||
onChange={(description) => {
|
||||
setDescription(description);
|
||||
setIsDirty(true);
|
||||
}}
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Filters"
|
||||
description="Select the event you wish to send to this endpoint"
|
||||
/>
|
||||
<StyledFilterRow>
|
||||
<Select
|
||||
fullWidth
|
||||
dropdownId="object-webhook-type-select"
|
||||
value={operationObjectSingularName}
|
||||
onChange={(objectSingularName) => {
|
||||
setIsDirty(true);
|
||||
setOperationObjectSingularName(objectSingularName);
|
||||
}}
|
||||
options={fieldTypeOptions}
|
||||
/>
|
||||
<Select
|
||||
fullWidth
|
||||
dropdownId="operation-webhook-type-select"
|
||||
value={operationAction}
|
||||
onChange={(operationAction) => {
|
||||
setIsDirty(true);
|
||||
setOperationAction(operationAction);
|
||||
}}
|
||||
options={[
|
||||
{ value: '*', label: 'All Actions' },
|
||||
{ value: 'create', label: 'Create' },
|
||||
{ value: 'update', label: 'Update' },
|
||||
{ value: 'delete', label: 'Delete' },
|
||||
]}
|
||||
/>
|
||||
</StyledFilterRow>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Danger zone"
|
||||
description="Delete this integration"
|
||||
/>
|
||||
<Button
|
||||
accent="danger"
|
||||
variant="secondary"
|
||||
title="Delete"
|
||||
Icon={IconTrash}
|
||||
onClick={() => setIsDeleteWebhookModalOpen(true)}
|
||||
/>
|
||||
<ConfirmationModal
|
||||
confirmationPlaceholder="yes"
|
||||
confirmationValue="yes"
|
||||
isOpen={isDeleteWebhookModalOpen}
|
||||
setIsOpen={setIsDeleteWebhookModalOpen}
|
||||
title="Delete webhook"
|
||||
subtitle={
|
||||
<>
|
||||
Please type "yes" to confirm you want to delete this
|
||||
webhook.
|
||||
</>
|
||||
}
|
||||
onConfirmClick={deleteWebhook}
|
||||
deleteButtonText="Delete webhook"
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
)}
|
||||
</>
|
||||
<Select
|
||||
fullWidth
|
||||
dropdownId="operation-webhook-type-select"
|
||||
value={operationAction}
|
||||
onChange={(operationAction) => {
|
||||
setIsDirty(true);
|
||||
setOperationAction(operationAction);
|
||||
}}
|
||||
options={[
|
||||
{ value: '*', label: 'All Actions' },
|
||||
{ value: 'create', label: 'Create' },
|
||||
{ value: 'update', label: 'Update' },
|
||||
{ value: 'delete', label: 'Delete' },
|
||||
]}
|
||||
/>
|
||||
</StyledFilterRow>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title title="Danger zone" description="Delete this integration" />
|
||||
<Button
|
||||
accent="danger"
|
||||
variant="secondary"
|
||||
title="Delete"
|
||||
Icon={IconTrash}
|
||||
onClick={() => setIsDeleteWebhookModalOpen(true)}
|
||||
/>
|
||||
<ConfirmationModal
|
||||
confirmationPlaceholder="yes"
|
||||
confirmationValue="yes"
|
||||
isOpen={isDeleteWebhookModalOpen}
|
||||
setIsOpen={setIsDeleteWebhookModalOpen}
|
||||
title="Delete webhook"
|
||||
subtitle={
|
||||
<>Please type "yes" to confirm you want to delete this webhook.</>
|
||||
}
|
||||
onConfirmClick={deleteWebhook}
|
||||
deleteButtonText="Delete webhook"
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { H2Title, IconCode } from 'twenty-ui';
|
||||
import { H2Title, IconCode, isDefined } from 'twenty-ui';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
@ -45,7 +45,22 @@ export const SettingsDevelopersWebhooksNew = () => {
|
||||
};
|
||||
|
||||
const canSave =
|
||||
!!formValues.targetUrl && isTargetUrlValid && createOneWebhook;
|
||||
!!formValues.targetUrl && isTargetUrlValid && isDefined(createOneWebhook);
|
||||
|
||||
// TODO: refactor use useScopedHotkeys
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter' && canSave) {
|
||||
handleSave();
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (value: string) => {
|
||||
setFormValues((prevState) => ({
|
||||
...prevState,
|
||||
targetUrl: value,
|
||||
}));
|
||||
handleValidate(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<SubMenuTopBarContainer
|
||||
@ -82,18 +97,8 @@ export const SettingsDevelopersWebhooksNew = () => {
|
||||
placeholder="URL"
|
||||
value={formValues.targetUrl}
|
||||
error={!isTargetUrlValid ? 'Please enter a valid URL' : undefined}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSave();
|
||||
}
|
||||
}}
|
||||
onChange={(value) => {
|
||||
setFormValues((prevState) => ({
|
||||
...prevState,
|
||||
targetUrl: value,
|
||||
}));
|
||||
handleValidate(value);
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
</Section>
|
||||
|
||||
Reference in New Issue
Block a user