8726 workflow add a test button in workflow code step (#9016)

- add test button to workflow code step
- add test tab to workflow code step


https://github.com/user-attachments/assets/e180a827-7321-49a2-8026-88490c557da2



![image](https://github.com/user-attachments/assets/cacbd756-de3f-4141-a84c-8e1853f6556b)

![image](https://github.com/user-attachments/assets/ee170d81-8a22-4178-bd6d-11a0e8c73365)

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -1,15 +1,14 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
-import { useRecoilValue } from 'recoil';
 import { IconComponent } from 'twenty-ui';
 
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect';
 import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
 import { Tab } from './Tab';
+import { useEffect } from 'react';
 
 export type SingleTabProps = {
   title: string;
@@ -30,13 +29,17 @@ type TabListProps = {
   behaveAsLinks?: boolean;
 };
 
-const StyledContainer = styled.div`
-  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+const StyledTabsContainer = styled.div`
   box-sizing: border-box;
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
   height: 40px;
   user-select: none;
+  margin-bottom: -1px;
+`;
+
+const StyledContainer = styled.div`
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
 `;
 
 export const TabList = ({
@@ -50,11 +53,9 @@ export const TabList = ({
 
   const initialActiveTabId = visibleTabs[0]?.id || '';
 
-  const { activeTabIdState, setActiveTabId } = useTabList(tabListInstanceId);
+  const { activeTabId, setActiveTabId } = useTabList(tabListInstanceId);
 
-  const activeTabId = useRecoilValue(activeTabIdState);
-
-  React.useEffect(() => {
+  useEffect(() => {
     setActiveTabId(initialActiveTabId);
   }, [initialActiveTabId, setActiveTabId]);
 
@@ -63,13 +64,13 @@ export const TabList = ({
   }
 
   return (
-    <TabListScope tabListScopeId={tabListInstanceId}>
-      <TabListFromUrlOptionalEffect
-        componentInstanceId={tabListInstanceId}
-        tabListIds={tabs.map((tab) => tab.id)}
-      />
-      <ScrollWrapper enableYScroll={false} contextProviderName="tabList">
-        <StyledContainer className={className}>
+    <StyledContainer className={className}>
+      <TabListScope tabListScopeId={tabListInstanceId}>
+        <TabListFromUrlOptionalEffect
+          componentInstanceId={tabListInstanceId}
+          tabListIds={tabs.map((tab) => tab.id)}
+        />
+        <StyledTabsContainer>
           {visibleTabs.map((tab) => (
             <Tab
               id={tab.id}
@@ -88,8 +89,8 @@ export const TabList = ({
               }}
             />
           ))}
-        </StyledContainer>
-      </ScrollWrapper>
-    </TabListScope>
+        </StyledTabsContainer>
+      </TabListScope>
+    </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/layout/tab/components/TabListFromUrlOptionalEffect.tsx

@@ -1,7 +1,6 @@
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 
 type TabListFromUrlOptionalEffectProps = {
   componentInstanceId: string;
@@ -13,11 +12,9 @@ export const TabListFromUrlOptionalEffect = ({
   tabListIds,
 }: TabListFromUrlOptionalEffectProps) => {
   const location = useLocation();
-  const { activeTabIdState } = useTabList(componentInstanceId);
-  const { setActiveTabId } = useTabList(componentInstanceId);
+  const { activeTabId, setActiveTabId } = useTabList(componentInstanceId);
 
   const hash = location.hash.replace('#', '');
-  const activeTabId = useRecoilValue(activeTabIdState);
 
   useEffect(() => {
     if (hash === activeTabId) {

packages/twenty-front/src/modules/ui/layout/tab/hooks/__tests__/useTabList.test.tsx

@@ -1,6 +1,6 @@
 import { act } from 'react-dom/test-utils';
 import { renderHook } from '@testing-library/react';
-import { RecoilRoot, useRecoilValue } from 'recoil';
+import { RecoilRoot } from 'recoil';
 
 import { useTabList } from '../useTabList';
 
@@ -8,9 +8,7 @@ describe('useTabList', () => {
   it('Should update the activeTabId state', async () => {
     const { result } = renderHook(
       () => {
-        const { activeTabIdState, setActiveTabId } =
-          useTabList('TEST_TAB_LIST_ID');
-        const activeTabId = useRecoilValue(activeTabIdState);
+        const { activeTabId, setActiveTabId } = useTabList('TEST_TAB_LIST_ID');
 
         return {
           activeTabId,

packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts

@@ -1,4 +1,4 @@
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
 
@@ -7,10 +7,10 @@ export const useTabList = (tabListId?: string) => {
     tabListScopeId: tabListId,
   });
 
-  const setActiveTabId = useSetRecoilState(activeTabIdState);
+  const [activeTabId, setActiveTabId] = useRecoilState(activeTabIdState);
 
   return {
-    activeTabIdState,
+    activeTabId,
     setActiveTabId,
   };
 };