Logic function refactorization (#17861)

As title

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

@@ -1,4 +1,4 @@
-import { useGetAvailablePackages } from '@/settings/logic-functions/hooks/useGetAvailablePackages';
+import { useGetAvailablePackages } from '@/logic-functions/hooks/useGetAvailablePackages';
 import { type EditorProps, type Monaco } from '@monaco-editor/react';
 import { type editor } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';

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

@@ -1,4 +1,4 @@
-import { type LogicFunctionNewFormValues } from '@/settings/logic-functions/hooks/useLogicFunctionUpdateFormState';
+import { type LogicFunctionNewFormValues } from '@/logic-functions/hooks/useLogicFunctionUpdateFormState';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { TextArea } from '@/ui/input/components/TextArea';
 import styled from '@emotion/styled';

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

@@ -21,13 +21,11 @@ export const SettingsLogicFunctionCodeEditorTab = ({
   handleExecute,
   onChange,
   isTesting = false,
-  isManaged = false,
 }: {
   files: File[];
   handleExecute: () => void;
   onChange: (filePath: string, value: string) => void;
   isTesting?: boolean;
-  isManaged?: boolean;
 }) => {
   const activeTabId = useRecoilComponentValue(
     activeTabIdComponentState,
@@ -68,16 +66,6 @@ export const SettingsLogicFunctionCodeEditorTab = ({
           onChange={(newCodeValue: string) =>
             onChange(activeTabId, newCodeValue)
           }
-          options={
-            isManaged
-              ? {
-                  readOnly: true,
-                  readOnlyMessage: {
-                    value: t`Managed logic functions are not editable`,
-                  },
-                }
-              : undefined
-          }
         />
       )}
     </Section>

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

@@ -1,6 +1,6 @@
 import { SettingsLogicFunctionNewForm } from '@/settings/logic-functions/components/SettingsLogicFunctionNewForm';
 import { SettingsLogicFunctionTabEnvironmentVariablesSection } from '@/settings/logic-functions/components/SettingsLogicFunctionTabEnvironmentVariablesSection';
-import { type LogicFunctionFormValues } from '@/settings/logic-functions/hooks/useLogicFunctionUpdateFormState';
+import { type LogicFunctionFormValues } from '@/logic-functions/hooks/useLogicFunctionUpdateFormState';
 
 export const SettingsLogicFunctionSettingsTab = ({
   formValues,

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

@@ -5,21 +5,24 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title, OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
+import { isDefined } from 'twenty-shared/utils';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { Tag } from 'twenty-ui/components';
 import { type LogicFunction } from '~/generated-metadata/graphql';
 
 export const StyledRouteTriggerTableRow = styled(TableRow)`
   grid-template-columns: 1fr 120px 120px;
 `;
 
-// TODO: @Charles put back with new sources
-// const StyledTableCell = styled(TableCell)`
-//   color: ${({ theme }) => theme.font.color.tertiary};
-//   gap: ${({ theme }) => theme.spacing(2)};
-//   min-width: 0;
-//   overflow: hidden;
-// `;
+const StyledTableCell = styled(TableCell)`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  gap: ${({ theme }) => theme.spacing(2)};
+  min-width: 0;
+  overflow: hidden;
+`;
 
 const StyledRouteTriggerTableHeaderRow = styled(StyledRouteTriggerTableRow)`
   margin-bottom: ${({ theme }) => theme.spacing(2)};
@@ -36,22 +39,31 @@ const StyledEmptyState = styled.div`
 `;
 
 export const SettingsLogicFunctionTriggersTab = ({
-  logicFunction: _logicFunction,
+  logicFunction,
 }: {
   logicFunction: LogicFunction;
 }) => {
   const { t } = useLingui();
 
-  const cronTriggers: [] = [];
+  const cronTrigger = logicFunction.cronTriggerSettings;
 
-  const routeTriggers: [] = [];
+  const routeTrigger = logicFunction.httpRouteTriggerSettings;
 
-  const databaseEvents: [] = [];
+  const databaseEventTriggerSettings =
+    logicFunction.databaseEventTriggerSettings;
 
-  const hasNoTriggers =
-    databaseEvents.length === 0 &&
-    cronTriggers.length === 0 &&
-    routeTriggers.length === 0;
+  let databaseEventTrigger = undefined;
+
+  if (isDefined(databaseEventTriggerSettings)) {
+    const [object, action]: [string, string] =
+      databaseEventTriggerSettings.eventName.split('.');
+    databaseEventTrigger = {
+      object,
+      action,
+      updatedFields: databaseEventTriggerSettings.updatedFields,
+    };
+  }
+  const hasNoTriggers = !cronTrigger && !routeTrigger && !databaseEventTrigger;
 
   if (hasNoTriggers) {
     return (
@@ -69,37 +81,37 @@ export const SettingsLogicFunctionTriggersTab = ({
 
   return (
     <>
-      {databaseEvents.length > 0 && (
+      {isDefined(databaseEventTrigger) && (
         <Section>
           <H2Title
             title={t`Database event`}
             description={t`Select the events that should trigger the function`}
           />
-          <SettingsDatabaseEventsForm events={databaseEvents} disabled />
+          <SettingsDatabaseEventsForm
+            events={[databaseEventTrigger]}
+            disabled
+          />
         </Section>
       )}
 
-      {cronTriggers.length > 0 && (
+      {isDefined(cronTrigger) && (
         <Section>
           <H2Title
             title={t`Cron`}
             description={t`Triggers the function at regular intervals`}
           />
-          {cronTriggers.map((cronTrigger, index) => (
-            <FormTextFieldInput
-              key={index}
-              label={t`Expression`}
-              placeholder="0 */1 * * *"
-              hint={t`Format: [Minute] [Hour] [Day of Month] [Month] [Day of Week]`}
-              onChange={() => {}}
-              readonly
-              defaultValue={cronTrigger}
-            />
-          ))}
+          <FormTextFieldInput
+            label={t`Expression`}
+            placeholder="0 */1 * * *"
+            hint={t`Format: [Minute] [Hour] [Day of Month] [Month] [Day of Week]`}
+            onChange={() => {}}
+            readonly
+            defaultValue={cronTrigger.pattern}
+          />
         </Section>
       )}
 
-      {routeTriggers.length > 0 && (
+      {isDefined(routeTrigger) && (
         <Section>
           <H2Title
             title={t`Http`}
@@ -111,24 +123,21 @@ export const SettingsLogicFunctionTriggersTab = ({
               <TableHeader>{t`Method`}</TableHeader>
               <TableHeader>{t`Auth Required`}</TableHeader>
             </StyledRouteTriggerTableHeaderRow>
-            {routeTriggers.map((_, _index) => (
-              <></>
-              // <StyledRouteTriggerTableRow key={index}>
-              //   <StyledTableCell>
-              //     <OverflowingTextWithTooltip
-              //       text={`${REACT_APP_SERVER_BASE_URL}/s${routeTrigger.path}`}
-              //     />
-              //   </StyledTableCell>
-              //   <StyledTableCell>{routeTrigger.httpMethod}</StyledTableCell>
-              //   <StyledTableCell>
-              //     <Tag
-              //       text={routeTrigger.isAuthRequired ? t`True` : t`False`}
-              //       color={routeTrigger.isAuthRequired ? 'green' : 'orange'}
-              //       weight="medium"
-              //     />
-              //   </StyledTableCell>
-              // </StyledRouteTriggerTableRow>
-            ))}
+            <StyledRouteTriggerTableRow>
+              <StyledTableCell>
+                <OverflowingTextWithTooltip
+                  text={`${REACT_APP_SERVER_BASE_URL}/s${routeTrigger.path}`}
+                />
+              </StyledTableCell>
+              <StyledTableCell>{routeTrigger.httpMethod}</StyledTableCell>
+              <StyledTableCell>
+                <Tag
+                  text={routeTrigger.isAuthRequired ? t`True` : t`False`}
+                  color={routeTrigger.isAuthRequired ? 'green' : 'orange'}
+                  weight="medium"
+                />
+              </StyledTableCell>
+            </StyledRouteTriggerTableRow>
           </Table>
         </Section>
       )}