Fix app design 6 (#19827)

Unify application display page and isntalled page

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx

@@ -1,13 +1,15 @@
-import { styled } from '@linaria/react';
-import { type LogicFunction } from '~/generated-metadata/graphql';
+import {
+  type LogicFunctionTableRow,
+  StyledTableRow,
+} from '@/settings/logic-functions/components/SettingsLogicFunctionsTable';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
 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 StyledIconContainer = styled.span`
@@ -21,43 +23,13 @@ const StyledIconChevronRightContainer = styled(StyledIconContainer)`
 
 export const SettingsLogicFunctionsFieldItemTableRow = ({
   logicFunction,
-  to,
 }: {
-  logicFunction: LogicFunction;
-  to: string;
+  logicFunction: LogicFunctionTableRow;
 }) => {
   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}>
+    <StyledTableRow to={logicFunction.link}>
       <TableCell
         color={themeCssVariables.font.color.primary}
         gap={themeCssVariables.spacing[2]}
@@ -74,18 +46,20 @@ export const SettingsLogicFunctionsFieldItemTableRow = ({
         whiteSpace="nowrap"
         overflow="hidden"
       >
-        <OverflowingTextWithTooltip text={computeTrigger()} />
+        <OverflowingTextWithTooltip text={logicFunction.trigger} />
       </TableCell>
       <TableCell
         align="center"
         padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`}
       >
-        <StyledIconChevronRightContainer>
-          <IconChevronRight
-            size={theme.icon.size.md}
-            stroke={theme.icon.stroke.sm}
-          />
-        </StyledIconChevronRightContainer>
+        {logicFunction.link && (
+          <StyledIconChevronRightContainer>
+            <IconChevronRight
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+            />
+          </StyledIconChevronRightContainer>
+        )}
       </TableCell>
     </StyledTableRow>
   );

packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsTable.tsx

@@ -4,14 +4,17 @@ import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { styled } from '@linaria/react';
-import { SettingsPath } from 'twenty-shared/types';
-import { getSettingsPath } from 'twenty-shared/utils';
-import { type LogicFunction } from '~/generated-metadata/graphql';
 import { useLingui } from '@lingui/react/macro';
 import React from 'react';
-import { useParams } from 'react-router-dom';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
+export type LogicFunctionTableRow = {
+  key: string;
+  name: string;
+  trigger: string;
+  link?: string;
+};
+
 export const StyledTableRow = (
   props: React.ComponentProps<typeof TableRow>,
 ) => (
@@ -29,10 +32,8 @@ const StyledTableBodyContainer = styled.div`
 export const SettingsLogicFunctionsTable = ({
   logicFunctions,
 }: {
-  logicFunctions: LogicFunction[];
+  logicFunctions: LogicFunctionTableRow[];
 }) => {
-  const { applicationId = '' } = useParams();
-
   const { t } = useLingui();
 
   if (logicFunctions.length === 0) {
@@ -48,14 +49,10 @@ export const SettingsLogicFunctionsTable = ({
       </StyledTableRow>
       <StyledTableBodyContainer>
         <TableBody>
-          {logicFunctions.map((logicFunction: LogicFunction) => (
+          {logicFunctions.map((logicFunction) => (
             <SettingsLogicFunctionsFieldItemTableRow
-              key={logicFunction.id}
+              key={logicFunction.key}
               logicFunction={logicFunction}
-              to={getSettingsPath(SettingsPath.ApplicationLogicFunctionDetail, {
-                applicationId,
-                logicFunctionId: logicFunction.id,
-              })}
             />
           ))}
         </TableBody>