admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix workflow placeholders and icons (#11222)

Browse Source 
- allow all form fields that may need a placeholder to set it
- update main icons on versions and runs
This commit is contained in:
Thomas Trompette
2025-03-27 17:01:33 +01:00
committed by GitHub
parent 4eefa45164
commit 439ccb0a52
16 changed files with 67 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
View File

@ -48,6 +48,7 @@ type FormFieldInputProps = {
onChange: (value: JsonValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
placeholder?: string;
};
export const FormFieldInput = ({
@ -56,15 +57,16 @@ export const FormFieldInput = ({
onChange,
VariablePicker,
readonly,
placeholder,
}: FormFieldInputProps) => {
return isFieldNumber(field) ? (
<FormNumberFieldInput
label={field.label}
defaultValue={defaultValue as string | number | undefined}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
placeholder={placeholder}
/>
) : isFieldBoolean(field) ? (
<FormBooleanFieldInput
@ -79,9 +81,9 @@ export const FormFieldInput = ({
label={field.label}
defaultValue={defaultValue as string | undefined}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
placeholder={placeholder}
/>
) : isFieldSelect(field) ? (
<FormSelectFieldInput
@ -92,7 +94,7 @@ export const FormFieldInput = ({
options={field.metadata.options}
clearLabel={field.label}
readonly={readonly}
placeholder={field.label}
placeholder={placeholder}
/>
) : isFieldFullName(field) ? (
<FormFullNameFieldInput
@ -141,6 +143,7 @@ export const FormFieldInput = ({
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
placeholder={placeholder}
/>
) : isFieldDateTime(field) ? (
<FormDateTimeFieldInput
@ -158,25 +161,25 @@ export const FormFieldInput = ({
VariablePicker={VariablePicker}
options={field.metadata.options}
readonly={readonly}
placeholder={field.label}
placeholder={placeholder}
/>
) : isFieldRawJson(field) ? (
<FormRawJsonFieldInput
label={field.label}
defaultValue={defaultValue as string | undefined}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
placeholder={placeholder}
/>
) : isFieldUuid(field) ? (
<FormUuidFieldInput
label={field.label}
defaultValue={defaultValue as string | null | undefined}
onChange={onChange}
placeholder={field.label}
VariablePicker={VariablePicker}
readonly={readonly}
placeholder={placeholder}
/>
) : isFieldCurrency(field) ? (
<FormCurrencyFieldInput

3
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateFieldInput.tsx
View File

@ -7,6 +7,7 @@ type FormDateFieldInputProps = {
onChange: (value: string | null) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
placeholder?: string;
};
export const FormDateFieldInput = ({
@ -15,6 +16,7 @@ export const FormDateFieldInput = ({
onChange,
VariablePicker,
readonly,
placeholder,
}: FormDateFieldInputProps) => {
return (
<FormDateTimeFieldInput
@ -24,6 +26,7 @@ export const FormDateFieldInput = ({
onChange={onChange}
VariablePicker={VariablePicker}
readonly={readonly}
placeholder={placeholder}
/>
);
};

10
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
View File

@ -29,8 +29,8 @@ import {
useRef,
useState,
} from 'react';
import { Nullable, TEXT_INPUT_STYLE } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { Nullable, TEXT_INPUT_STYLE } from 'twenty-ui';
const StyledInputContainer = styled(FormFieldInputInputContainer)`
display: grid;
@ -77,9 +77,9 @@ type DraftValue =
type FormDateTimeFieldInputProps = {
dateOnly?: boolean;
label?: string;
placeholder?: string;
defaultValue: string | undefined;
onChange: (value: string | null) => void;
placeholder?: string;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
@ -91,6 +91,7 @@ export const FormDateTimeFieldInput = ({
onChange,
VariablePicker,
readonly,
placeholder,
}: FormDateTimeFieldInputProps) => {
const { timeZone } = useContext(UserContext);
@ -149,7 +150,8 @@ export const FormDateTimeFieldInput = ({
const displayDatePicker =
draftValue.type === 'static' && draftValue.mode === 'edit';
const placeholder = dateOnly ? 'mm/dd/yyyy' : 'mm/dd/yyyy hh:mm';
const placeholderToDisplay =
placeholder ?? (dateOnly ? 'mm/dd/yyyy' : 'mm/dd/yyyy hh:mm');
useListenClickOutside({
refs: [datePickerWrapperRef],
@ -340,7 +342,7 @@ export const FormDateTimeFieldInput = ({
<>
<StyledDateInput
type="text"
placeholder={placeholder}
placeholder={placeholderToDisplay}
value={inputDateTime}
onFocus={handleInputFocus}
onChange={handleInputChange}

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormLinksFieldInput.tsx
View File

@ -12,6 +12,7 @@ type FormLinksFieldInputProps = {
onChange: (value: FieldLinksValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
placeholder?: string;
};
export const FormLinksFieldInput = ({
@ -20,6 +21,7 @@ export const FormLinksFieldInput = ({
onChange,
readonly,
VariablePicker,
placeholder,
}: FormLinksFieldInputProps) => {
const handleChange =
(field: keyof FieldLinksDraftValue) => (updatedLinksPart: string) => {
@ -40,7 +42,7 @@ export const FormLinksFieldInput = ({
label="Primary Link Label"
defaultValue={defaultValue?.primaryLinkLabel}
onChange={handleChange('primaryLinkLabel')}
placeholder={'Primary Link Label'}
placeholder={placeholder ?? 'Primary Link Label'}
readonly={readonly}
VariablePicker={VariablePicker}
/>
@ -48,7 +50,7 @@ export const FormLinksFieldInput = ({
label="Primary Link URL"
defaultValue={defaultValue?.primaryLinkUrl}
onChange={handleChange('primaryLinkUrl')}
placeholder={'Primary Link URL'}
placeholder={placeholder ?? 'Primary Link URL'}
readonly={readonly}
VariablePicker={VariablePicker}
/>

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx
View File

@ -10,11 +10,11 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import styled from '@emotion/styled';
import { useId, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import {
canBeCastAsNumberOrNull,
castAsNumberOrNull,
} from '~/utils/cast-as-number-or-null';
import { isDefined } from 'twenty-shared/utils';
const StyledInput = styled(TextInput)`
padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
@ -23,13 +23,13 @@ const StyledInput = styled(TextInput)`
type FormNumberFieldInputProps = {
label?: string;
error?: string;
placeholder: string;
defaultValue: number | string | undefined;
onChange: (value: number | null | string) => void;
onBlur?: () => void;
VariablePicker?: VariablePickerComponent;
hint?: string;
readonly?: boolean;
placeholder?: string;
};
export const FormNumberFieldInput = ({
@ -115,7 +115,7 @@ export const FormNumberFieldInput = ({
{draftValue.type === 'static' ? (
<StyledInput
inputId={inputId}
placeholder={placeholder}
placeholder={placeholder ?? 'Enter a number'}
value={draftValue.value}
copyButton={false}
hotkeyScope="record-create"

6
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx
View File

@ -6,16 +6,16 @@ import { useTextVariableEditor } from '@/object-record/record-field/form-types/h
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { useId } from 'react';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { isDefined } from 'twenty-shared/utils';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
type FormRawJsonFieldInputProps = {
label?: string;
defaultValue: string | null | undefined;
placeholder: string;
onChange: (value: string | null) => void;
readonly?: boolean;
VariablePicker?: VariablePickerComponent;
placeholder?: string;
};
export const FormRawJsonFieldInput = ({
@ -29,7 +29,7 @@ export const FormRawJsonFieldInput = ({
const inputId = useId();
const editor = useTextVariableEditor({
placeholder,
placeholder: placeholder ?? 'Enter a JSON object',
multiline: true,
readonly,
defaultValue: defaultValue ?? undefined,

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
View File

@ -16,11 +16,11 @@ type FormTextFieldInputProps = {
error?: string;
hint?: string;
defaultValue: string | undefined;
placeholder: string;
onChange: (value: string) => void;
onBlur?: () => void;
multiline?: boolean;
readonly?: boolean;
placeholder?: string;
VariablePicker?: VariablePickerComponent;
};
@ -39,7 +39,7 @@ export const FormTextFieldInput = ({
const inputId = useId();
const editor = useTextVariableEditor({
placeholder,
placeholder: placeholder ?? 'Enter text',
multiline,
readonly,
defaultValue,

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx
View File

@ -17,10 +17,10 @@ const StyledInput = styled(TextInput)`
type FormUuidFieldInputProps = {
label?: string;
defaultValue: string | null | undefined;
placeholder: string;
onChange: (value: string | null) => void;
readonly?: boolean;
VariablePicker?: VariablePickerComponent;
placeholder?: string;
};
export const FormUuidFieldInput = ({
@ -100,7 +100,7 @@ export const FormUuidFieldInput = ({
{draftValue.type === 'static' ? (
<StyledInput
inputId={inputId}
placeholder={placeholder}
placeholder={placeholder ?? 'Enter a UUID'}
value={draftValue.value}
copyButton={false}
hotkeyScope="record-create"

10
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
View File

@ -18,9 +18,10 @@ import { useEffect, useState } from 'react';
import { IconChevronDown, IconPlus, IconTrash, useIcons } from 'twenty-ui';
import { useDebouncedCallback } from 'use-debounce';
import { v4 } from 'uuid';
import { isNonEmptyString } from '@sniptt/guards';
import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
export type WorkflowEditActionFormBuilderProps = {
action: WorkflowFormAction;
@ -185,7 +186,12 @@ export const WorkflowEditActionFormBuilder = ({
}}
>
<StyledFieldContainer>
<StyledPlaceholder>{field.placeholder}</StyledPlaceholder>
<StyledPlaceholder>
{isDefined(field.placeholder) &&
isNonEmptyString(field.placeholder)
? field.placeholder
: getDefaultFormFieldSettings(field.type).placeholder}
</StyledPlaceholder>
{!isFieldSelected(field.id) && (
<IconChevronDown
size={theme.icon.size.md}

5
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller.tsx
View File

@ -10,6 +10,7 @@ import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/Workflo
import { useUpdateWorkflowRunStep } from '@/workflow/workflow-steps/hooks/useUpdateWorkflowRunStep';
import { useSubmitFormStep } from '@/workflow/workflow-steps/workflow-actions/form-action/hooks/useSubmitFormStep';
import { WorkflowFormActionField } from '@/workflow/workflow-steps/workflow-actions/form-action/types/WorkflowFormActionField';
import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
import { useTheme } from '@emotion/react';
import { useEffect, useState } from 'react';
@ -129,6 +130,10 @@ export const WorkflowEditActionFormFiller = ({
}}
defaultValue={field.value ?? ''}
readonly={actionOptions.readonly}
placeholder={
field.placeholder ??
getDefaultFormFieldSettings(field.type).placeholder
}
/>
))}
</WorkflowStepBody>

15
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsNumber.tsx
View File

@ -1,8 +1,9 @@
import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
import { FieldMetadataType } from 'twenty-shared/types';
type WorkflowFormFieldSettingsNumberProps = {
label?: string;
@ -29,8 +30,10 @@ export const WorkflowFormFieldSettingsNumber = ({
onChange={(newLabel: string | null) => {
onChange('label', newLabel);
}}
defaultValue={label ?? t`Number`}
placeholder={t`Text`}
defaultValue={label}
placeholder={
getDefaultFormFieldSettings(FieldMetadataType.NUMBER).label
}
/>
</FormFieldInputContainer>
<FormFieldInputContainer>
@ -39,8 +42,10 @@ export const WorkflowFormFieldSettingsNumber = ({
onChange={(newPlaceholder: string | null) => {
onChange('placeholder', newPlaceholder);
}}
defaultValue={placeholder ?? '1000'}
placeholder={'1000'}
defaultValue={placeholder}
placeholder={
getDefaultFormFieldSettings(FieldMetadataType.NUMBER).placeholder
}
/>
</FormFieldInputContainer>
</StyledContainer>

10
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowFormFieldSettingsText.tsx
View File

@ -1,7 +1,9 @@
import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
import styled from '@emotion/styled';
import { FieldMetadataType } from 'twenty-shared/types';
type WorkflowFormFieldSettingsTextProps = {
label?: string;
@ -29,7 +31,9 @@ export const WorkflowFormFieldSettingsText = ({
onChange('label', newLabel);
}}
defaultValue={label}
placeholder={'Text'}
placeholder={
getDefaultFormFieldSettings(FieldMetadataType.TEXT).label
}
/>
</FormFieldInputContainer>
<FormFieldInputContainer>
@ -39,7 +43,9 @@ export const WorkflowFormFieldSettingsText = ({
onChange('placeholder', newPlaceholder);
}}
defaultValue={placeholder}
placeholder={'Enter your text'}
placeholder={
getDefaultFormFieldSettings(FieldMetadataType.TEXT).placeholder
}
/>
</FormFieldInputContainer>
</StyledContainer>

2
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFiller.stories.tsx
View File

@ -94,7 +94,7 @@ export const ReadonlyMode: Story = {
const textField = await canvas.findByText('Text Field');
expect(textField).toBeVisible();
const numberInput = await canvas.findByPlaceholderText('Number Field');
const numberInput = await canvas.findByPlaceholderText('Enter number');
expect(numberInput).toBeDisabled();
const submitButton = await canvas.queryByText('Submit');

3
packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
View File

@ -24,7 +24,7 @@ export const RecordShowPage = () => {
objectRecordId: string;
}>();
const { objectNameSingular, objectRecordId, headerIcon } = useRecordShowPage(
const { objectNameSingular, objectRecordId } = useRecordShowPage(
parameters.objectNameSingular ?? '',
parameters.objectRecordId ?? '',
);
@ -55,7 +55,6 @@ export const RecordShowPage = () => {
<RecordShowPageHeader
objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId}
headerIcon={headerIcon}
>
<RecordShowActionMenu />
</RecordShowPageHeader>

1
packages/twenty-front/src/pages/object-record/RecordShowPageHeader.tsx
View File

@ -13,7 +13,6 @@ export const RecordShowPageHeader = ({
}: {
objectNameSingular: string;
objectRecordId: string;
headerIcon: React.ComponentType;
children?: React.ReactNode;
}) => {
const { viewName, navigateToIndexView, objectMetadataItem } =

4
packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-object-icons.ts
View File

@ -36,7 +36,7 @@ export const STANDARD_OBJECT_ICONS = {
webhook: 'IconRobot',
workflow: 'IconSettingsAutomation',
workflowEventListener: 'IconSettingsAutomation',
workflowRun: 'IconSettingsAutomation',
workflowVersion: 'IconSettingsAutomation',
workflowRun: 'IconHistoryToggle',
workflowVersion: 'IconVersions',
workspaceMember: 'IconUserCircle',
};