App feedbacks front (#19417)

## Before
<img width="777" height="284" alt="image"
src="https://github.com/user-attachments/assets/22a8c318-ed7c-4ec5-b7a8-a688098ec103"
/>


## After
<img width="897" height="329" alt="image"
src="https://github.com/user-attachments/assets/16ad78bf-a449-4f25-99f6-13c35e448f1b"
/>
This commit is contained in:
martmull
2026-04-08 06:51:17 +02:00
committed by GitHub
parent 15eb3e7edc
commit c91d642f29
4 changed files with 50 additions and 16 deletions
@@ -1,17 +1,24 @@
import { styled } from '@linaria/react';
import { type LogicFunction } from '~/generated-metadata/graphql';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { IconChevronRight } from 'twenty-ui/display';
import {
IconChevronRight,
IconCode,
OverflowingTextWithTooltip,
} from 'twenty-ui/display';
import { StyledTableRow } from '@/settings/logic-functions/components/SettingsLogicFunctionsTable';
import { useContext } from 'react';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledIconChevronRightContainer = styled.span`
const StyledIconContainer = styled.span`
align-items: center;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
`;
const StyledIconChevronRightContainer = styled(StyledIconContainer)`
color: ${themeCssVariables.font.color.tertiary};
`;
export const SettingsLogicFunctionsFieldItemTableRow = ({
logicFunction,
to,
@@ -20,23 +27,54 @@ export const SettingsLogicFunctionsFieldItemTableRow = ({
to: string;
}) => {
const { theme } = useContext(ThemeContext);
const computeTrigger = () => {
const cronTrigger = logicFunction.cronTriggerSettings;
const routeTrigger = logicFunction.httpRouteTriggerSettings;
const databaseEventTriggerSettings =
logicFunction.databaseEventTriggerSettings;
const isTool = logicFunction.isTool;
if (isTool) {
return 'Tool';
}
if (cronTrigger) {
return 'Cron';
}
if (routeTrigger) {
return 'Route';
}
if (databaseEventTriggerSettings) {
return databaseEventTriggerSettings.eventName;
}
return '';
};
return (
<StyledTableRow to={to}>
<TableCell
color={themeCssVariables.font.color.primary}
gap={themeCssVariables.spacing[2]}
>
{logicFunction.name}
<StyledIconContainer>
<IconCode size={theme.icon.size.md} />
</StyledIconContainer>
<OverflowingTextWithTooltip text={logicFunction.name} />
</TableCell>
<TableCell
color={themeCssVariables.font.color.primary}
gap={themeCssVariables.spacing[2]}
></TableCell>
<TableCell
color={themeCssVariables.font.color.secondary}
gap={themeCssVariables.spacing[2]}
align={'right'}
whiteSpace="nowrap"
overflow="hidden"
>
{logicFunction.runtime}
<OverflowingTextWithTooltip text={computeTrigger()} />
</TableCell>
<TableCell
align="center"
@@ -16,7 +16,7 @@ export const StyledTableRow = (
props: React.ComponentProps<typeof TableRow>,
) => (
<TableRow
gridTemplateColumns="164px 1fr 96px 32px"
gridTemplateColumns="300px 1fr 32px"
// oxlint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
@@ -43,8 +43,7 @@ export const SettingsLogicFunctionsTable = ({
<Table>
<StyledTableRow>
<TableHeader>{t`Name`}</TableHeader>
<TableHeader></TableHeader>
<TableHeader>{t`Runtime`}</TableHeader>
<TableHeader align={'right'}>{t`Trigger`}</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
<StyledTableBodyContainer>
@@ -127,7 +127,7 @@ export const SettingsApplicationDetailContentTab = ({
{shouldDisplayLogicFunctions && (
<Section>
<H2Title
title={t`Functions`}
title={t`Logic`}
description={t`Logic functions powering this app`}
/>
<SettingsLogicFunctionsTable logicFunctions={logicFunctions} />
@@ -79,7 +79,6 @@ export class LogicFunctionExecutorService {
workspaceId,
flatApplication,
flatApplicationVariables,
_flatLogicFunction: flatLogicFunction,
});
const driver = this.logicFunctionDriverFactory.getCurrentDriver();
@@ -179,12 +178,10 @@ export class LogicFunctionExecutorService {
private async getExecutionEnvVariables({
workspaceId,
flatApplication,
_flatLogicFunction,
flatApplicationVariables,
}: {
workspaceId: string;
flatApplication: FlatApplication;
_flatLogicFunction: FlatLogicFunction;
flatApplicationVariables: FlatApplicationVariable[];
}) {
const applicationAccessToken =