diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx index 55f9a29ea..e286ff6f2 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx @@ -3,12 +3,13 @@ import { extractRawVariableNamePart } from '@/workflow/workflow-variables/utils/ import { searchVariableThroughOutputSchema } from '@/workflow/workflow-variables/utils/searchVariableThroughOutputSchema'; import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useLingui } from '@lingui/react/macro'; import { isDefined } from 'twenty-shared'; -import { IconX } from 'twenty-ui'; +import { IconAlertTriangle, IconX } from 'twenty-ui'; -const StyledChip = styled.div<{ deletable: boolean }>` - background-color: ${({ theme }) => theme.accent.quaternary}; - border: 1px solid ${({ theme }) => theme.accent.tertiary}; +const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>` + background-color: ${({ theme, danger }) => + danger ? theme.background.danger : theme.accent.quaternary}; border-radius: 4px; height: 20px; box-sizing: border-box; @@ -31,12 +32,13 @@ const StyledChip = styled.div<{ deletable: boolean }>` `} `; -const StyledLabel = styled.span` - color: ${({ theme }) => theme.color.blue}; +const StyledLabel = styled.span<{ danger: boolean }>` + color: ${({ theme, danger }) => + danger ? theme.color.red : theme.color.blue}; line-height: 140%; `; -const StyledDelete = styled.button` +const StyledDelete = styled.button<{ danger: boolean }>` box-sizing: border-box; height: 20px; width: 20px; @@ -50,12 +52,14 @@ const StyledDelete = styled.button` margin: 0; background: none; border: none; - color: ${({ theme }) => theme.color.blue}; + color: ${({ theme, danger }) => + danger ? theme.color.red : theme.color.blue}; border-top-right-radius: ${({ theme }) => theme.border.radius.sm}; border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm}; &:hover { - background-color: ${({ theme }) => theme.accent.secondary}; + background-color: ${({ theme, danger }) => + danger ? theme.color.red20 : theme.accent.secondary}; } `; @@ -71,6 +75,7 @@ export const VariableChip = ({ isFullRecord = false, }: VariableChipProps) => { const theme = useTheme(); + const { t } = useLingui(); const { getStepsOutputSchema } = useStepsOutputSchema({}); const stepId = extractRawVariableNamePart({ rawVariableName, @@ -90,19 +95,29 @@ export const VariableChip = ({ isFullRecord, }); - const label = isDefined(variableLabel) - ? variableLabel - : extractRawVariableNamePart({ - rawVariableName, - part: 'selectedField', - }); + const isVariableNotFound = !isDefined(variableLabel); + const label = isVariableNotFound ? t`Not Found` : variableLabel; + const title = isVariableNotFound ? t`Variable not found` : variablePathLabel; return ( - - {label} + + {!isDefined(variableLabel) && ( + + )} + + {label} + {onRemove ? ( - + ) : null} diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormAddressFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormAddressFieldInput.stories.tsx index 46c46aba2..944af1885 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormAddressFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormAddressFieldInput.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormAddressFieldInput } from '../FormAddressFieldInput'; @@ -9,7 +10,7 @@ const meta: Meta = { component: FormAddressFieldInput, args: {}, argTypes: {}, - decorators: [WorkflowStepDecorator], + decorators: [WorkflowStepDecorator, I18nFrontDecorator], }; export default meta; @@ -57,11 +58,11 @@ export const WithVariables: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const street1Variable = await canvas.findByText('street1'); - const street2Variable = await canvas.findByText('street2'); - const cityVariable = await canvas.findByText('city'); - const stateVariable = await canvas.findByText('state'); - const postcodeVariable = await canvas.findByText('postcode'); + const street1Variable = await canvas.findByText('Street 1'); + const street2Variable = await canvas.findByText('Street 2'); + const cityVariable = await canvas.findByText('My City'); + const stateVariable = await canvas.findByText('My State'); + const postcodeVariable = await canvas.findByText('My Postcode'); expect(street1Variable).toBeVisible(); expect(street2Variable).toBeVisible(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx index 597172c10..f0f1f3e80 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormCurrencyFieldInput.stories.tsx @@ -2,6 +2,7 @@ import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode'; import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata'; import { Meta, StoryObj } from '@storybook/react'; import { expect, within } from '@storybook/test'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormCurrencyFieldInput } from '../FormCurrencyFieldInput'; @@ -11,7 +12,7 @@ const meta: Meta = { component: FormCurrencyFieldInput, args: {}, argTypes: {}, - decorators: [WorkflowStepDecorator], + decorators: [WorkflowStepDecorator, I18nFrontDecorator], }; export default meta; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx index dab2e8f4c..d4e432bcc 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormEmailsFieldInput.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormEmailsFieldInput } from '../FormEmailsFieldInput'; @@ -9,7 +10,7 @@ const meta: Meta = { component: FormEmailsFieldInput, args: {}, argTypes: {}, - decorators: [WorkflowStepDecorator], + decorators: [WorkflowStepDecorator, I18nFrontDecorator], }; export default meta; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormFullNameFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormFullNameFieldInput.stories.tsx index bf1861a83..f32025834 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormFullNameFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormFullNameFieldInput.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormFullNameFieldInput } from '../FormFullNameFieldInput'; @@ -9,7 +10,7 @@ const meta: Meta = { component: FormFullNameFieldInput, args: {}, argTypes: {}, - decorators: [WorkflowStepDecorator], + decorators: [WorkflowStepDecorator, I18nFrontDecorator], }; export default meta; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormLinksFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormLinksFieldInput.stories.tsx index ab7998757..156c5df35 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormLinksFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormLinksFieldInput.stories.tsx @@ -1,6 +1,7 @@ import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { fn, userEvent, within } from '@storybook/test'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { FormLinksFieldInput } from '../FormLinksFieldInput'; @@ -9,7 +10,7 @@ const meta: Meta = { component: FormLinksFieldInput, args: {}, argTypes: {}, - decorators: [WorkflowStepDecorator], + decorators: [WorkflowStepDecorator, I18nFrontDecorator], }; export default meta; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormMultiSelectFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormMultiSelectFieldInput.stories.tsx index 8c3b378bb..1c9ade8b4 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormMultiSelectFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormMultiSelectFieldInput.stories.tsx @@ -1,6 +1,7 @@ import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { fn, userEvent, within } from '@storybook/test'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormMultiSelectFieldInput } from '../FormMultiSelectFieldInput'; @@ -10,7 +11,7 @@ const meta: Meta = { component: FormMultiSelectFieldInput, args: {}, argTypes: {}, - decorators: [WorkflowStepDecorator], + decorators: [WorkflowStepDecorator, I18nFrontDecorator], }; export default meta; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx index 4dea5a36d..10220e4a6 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx @@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, waitFor, within } from '@storybook/test'; import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator'; import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow'; import { FormPhoneFieldInput } from '../FormPhoneFieldInput'; @@ -11,7 +12,7 @@ const meta: Meta = { component: FormPhoneFieldInput, args: {}, argTypes: {}, - decorators: [WorkflowStepDecorator], + decorators: [WorkflowStepDecorator, I18nFrontDecorator], }; export default meta; @@ -139,7 +140,7 @@ export const SelectingVariables: Story = { return (