mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Set failed node's output as red (#11358)

Browse Source 
| Error | Success |
|--------|--------|
| ![CleanShot 2025-04-02 at 18 18
45@2x](https://github.com/user-attachments/assets/6674d4d2-344a-4e16-9608-a70cde07a376)
| ![CleanShot 2025-04-02 at 18 20
23@2x](https://github.com/user-attachments/assets/55b5a467-528f-4f07-9166-40ed14943ee2)
|

Closes https://github.com/twentyhq/core-team-issues/issues/716
This commit is contained in:
Baptiste Devessier
2025-04-03 08:58:56 +02:00
committed by GitHub
parent 183dc40916
commit bea75b9532
12 changed files with 119 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx
View File

@ -1,13 +1,30 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconComponent } from '@ui/display';
import { JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
const StyledLabelContainer = styled.span<{ isHighlighted?: boolean }>`
const StyledLabelContainer = styled.span<{
highlighting?: JsonNodeHighlighting;
}>`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.lighter};
border-color: ${({ theme }) => theme.border.color.medium};
color: ${({ theme, isHighlighted }) =>
isHighlighted ? theme.color.blue : theme.font.color.primary};
background-color: ${({ theme, highlighting }) =>
highlighting === 'blue'
? theme.adaptiveColors.blue1
: highlighting === 'red'
? theme.background.danger
: theme.background.transparent.lighter};
border-color: ${({ theme, highlighting }) =>
highlighting === 'blue'
? theme.adaptiveColors.blue2
: highlighting === 'red'
? theme.border.color.danger
: theme.border.color.medium};
color: ${({ theme, highlighting }) =>
highlighting === 'blue'
? theme.color.blue
: highlighting === 'red'
? theme.font.color.danger
: theme.font.color.primary};
border-radius: ${({ theme }) => theme.border.radius.sm};
border-style: solid;
border-width: 1px;
@ -25,19 +42,25 @@ const StyledLabelContainer = styled.span<{ isHighlighted?: boolean }>`
export const JsonNodeLabel = ({
label,
Icon,
isHighlighted,
highlighting,
}: {
label: string;
Icon: IconComponent;
isHighlighted?: boolean;
highlighting?: JsonNodeHighlighting | undefined;
}) => {
const theme = useTheme();
return (
<StyledLabelContainer isHighlighted={isHighlighted}>
<StyledLabelContainer highlighting={highlighting}>
<Icon
size={theme.icon.size.md}
color={isHighlighted ? theme.color.blue : theme.font.color.tertiary}
color={
highlighting === 'blue'
? theme.color.blue
: highlighting === 'red'
? theme.font.color.danger
: theme.font.color.tertiary
}
/>
<span>{label}</span>

19
packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
View File

@ -1,16 +1,23 @@
import styled from '@emotion/styled';
import { JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
const StyledText = styled.span<{ isHighlighted?: boolean }>`
color: ${({ theme, isHighlighted }) =>
isHighlighted ? theme.adaptiveColors.blue4 : theme.font.color.tertiary};
const StyledText = styled.span<{
highlighting: JsonNodeHighlighting | undefined;
}>`
color: ${({ theme, highlighting }) =>
highlighting === 'blue'
? theme.adaptiveColors.blue4
: highlighting === 'red'
? theme.font.color.danger
: theme.font.color.tertiary};
`;
export const JsonNodeValue = ({
valueAsString,
isHighlighted,
highlighting,
}: {
valueAsString: string;
isHighlighted?: boolean;
highlighting?: JsonNodeHighlighting | undefined;
}) => {
return <StyledText isHighlighted={isHighlighted}>{valueAsString}</StyledText>;
return <StyledText highlighting={highlighting}>{valueAsString}</StyledText>;
};