Fix active navigation tab + quick workflows fixes (#8567)

- Active navigation tab hovered in show page
- remove timeline tab + rename workflow tab
- remove {{variable}} placeholder
- fix margin
- Workflow Runs and Versions show page title

<img width="807" alt="Capture d’écran 2024-11-18 à 18 23 12"
src="https://github.com/user-attachments/assets/688dfc67-362e-4f04-b436-3ff94d7e3e4a">

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx

@@ -39,7 +39,10 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
     viewId ? `?view=${viewId}` : ''
   }`;
 
-  const isActive = currentPath === `/objects/${objectMetadataItem.namePlural}`;
+  const isActive =
+    currentPath === `/objects/${objectMetadataItem.namePlural}` ||
+    currentPath.includes(`object/${objectMetadataItem.nameSingular}/`);
+
   const shouldSubItemsBeDisplayed = isActive && objectMetadataViews.length > 1;
 
   const sortedObjectMetadataViews = [...objectMetadataViews].sort(

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerOpenedSection.tsx

@@ -14,17 +14,22 @@ export const NavigationDrawerOpenedSection = () => {
 
   const loading = useIsPrefetchLoading();
 
-  const currentObjectNamePlural = useParams().objectNamePlural;
-
   const { activeObjectMetadataItems: workspaceFavoritesObjectMetadataItems } =
     useFilteredObjectMetadataItemsForWorkspaceFavorites();
 
-  if (!currentObjectNamePlural) {
+  const {
+    objectNamePlural: currentObjectNamePlural,
+    objectNameSingular: currentObjectNameSingular,
+  } = useParams();
+
+  if (!currentObjectNamePlural && !currentObjectNameSingular) {
     return;
   }
 
   const objectMetadataItem = filteredActiveObjectMetadataItems.find(
-    (item) => item.namePlural === currentObjectNamePlural,
+    (item) =>
+      item.namePlural === currentObjectNamePlural ||
+      item.nameSingular === currentObjectNameSingular,
   );
 
   if (!objectMetadataItem) {

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx

@@ -21,7 +21,6 @@ const StyledObjectsMetaDataItemsWrapper = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.betweenSiblingsGap};
   width: 100%;
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
   flex: 1;
   overflow-y: auto;
 `;

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts

@@ -131,7 +131,7 @@ export const useRecordShowContainerTabs = (
     },
     [CoreObjectNameSingular.Workflow]: {
       workflow: {
-        title: 'Workflow',
+        title: 'Flow',
         position: 0,
         Icon: IconSettings,
         cards: [{ type: CardType.WorkflowCard }],
@@ -144,6 +144,7 @@ export const useRecordShowContainerTabs = (
           ifRelationsMissing: [],
         },
       },
+      timeline: null,
     },
     [CoreObjectNameSingular.WorkflowVersion]: {
       workflowVersion: {
@@ -160,6 +161,7 @@ export const useRecordShowContainerTabs = (
           ifRelationsMissing: [],
         },
       },
+      timeline: null,
     },
     [CoreObjectNameSingular.WorkflowRun]: {
       workflowRunOutput: {
@@ -190,6 +192,7 @@ export const useRecordShowContainerTabs = (
           ifRelationsMissing: [],
         },
       },
+      timeline: null,
     },
   };
 

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts

@@ -141,7 +141,7 @@ export const useRecordShowPagePagination = (
 
   const rankFoundInFiew = rankInView > -1;
 
-  const objectLabel = capitalize(objectMetadataItem.namePlural);
+  const objectLabel = capitalize(objectMetadataItem.labelPlural);
 
   const totalCount = Math.max(1, totalCountBefore, totalCountAfter);
 

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx

@@ -204,7 +204,7 @@ export const WorkflowEditActionFormSendEmail = ({
             <VariableTagInput
               inputId="email-input"
               label="Email"
-              placeholder="Enter receiver email (use {{variable}} for dynamic content)"
+              placeholder="Enter receiver email"
               value={field.value}
               onChange={(email) => {
                 field.onChange(email);
@@ -220,7 +220,7 @@ export const WorkflowEditActionFormSendEmail = ({
             <VariableTagInput
               inputId="email-subject-input"
               label="Subject"
-              placeholder="Enter email subject (use {{variable}} for dynamic content)"
+              placeholder="Enter email subject"
               value={field.value}
               onChange={(email) => {
                 field.onChange(email);
@@ -236,7 +236,7 @@ export const WorkflowEditActionFormSendEmail = ({
             <VariableTagInput
               inputId="email-body-input"
               label="Body"
-              placeholder="Enter email body (use {{variable}} for dynamic content)"
+              placeholder="Enter email body"
               value={field.value}
               onChange={(email) => {
                 field.onChange(email);

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx

@@ -187,7 +187,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
             key={pathKey}
             inputId={`input-${inputKey}`}
             label={inputKey}
-            placeholder="Enter value (use {{variable}} for dynamic content)"
+            placeholder="Enter value"
             value={`${inputValue || ''}`}
             onChange={(value) => handleInputChange(value, currentPath)}
           />