3bfdc2c83f0ab79dc6c7e5edd4389fa0d74bc3c9
5 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Charles Bochet
|
3bfdc2c83f |
chore(twenty-front): migrate command-menu, workflow, page-layout and UI modules from Emotion to Linaria (PR 4-6/10) (#18342)
## Summary
Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:
| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |
### Migration patterns applied
- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop
### After this PR
- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values
|
||
|
Charles Bochet
|
d81f006979 |
Rename Jotai state hooks and utilities to consistent Atom-based naming (#18209)
## Summary Rename all Jotai-based state management hooks and utilities to a consistent naming convention that: 1. Removes legacy Recoil naming (`useRecoilXxxV2`, `createXxxV2`) 2. Always includes `Atom` in the name to distinguish from jotai native hooks 3. Follows a consistent ordering: `Atom` → `Component` → `Family` → `Type` (`State`/`Selector`) 4. Includes the type qualifier (`State` or `Selector`) in all value-reading hooks to avoid naming conflicts with jotai's native `useAtomValue` ## Naming Convention **Hooks**: `use[Set]Atom[Component][Family][State|Selector][Value|State|CallbackState]` **Utils**: `createAtom[Component][Family][State|Selector]` ## Changes ### Hooks renamed (definition files + all usages across ~1,500 files): | Old Name (Recoil) | Intermediate (Atom) | Final Name | |---|---|---| | `useRecoilValueV2` | `useAtomValue` | **`useAtomStateValue`** | | `useRecoilStateV2` | `useAtomState` | `useAtomState` | | `useSetRecoilStateV2` | `useSetAtomState` | `useSetAtomState` | | `useFamilyRecoilValueV2` | `useFamilyAtomValue` | **`useAtomFamilyStateValue`** | | `useSetFamilyRecoilStateV2` | `useSetFamilyAtomState` | **`useSetAtomFamilyState`** | | `useFamilySelectorValueV2` | `useFamilySelectorValue` | **`useAtomFamilySelectorValue`** | | `useFamilySelectorStateV2` | `useFamilySelectorState` | **`useAtomFamilySelectorState`** | | `useRecoilComponentValueV2` | `useAtomComponentValue` | **`useAtomComponentStateValue`** | | `useRecoilComponentStateV2` | `useAtomComponentState` | `useAtomComponentState` | | `useSetRecoilComponentStateV2` | `useSetAtomComponentState` | `useSetAtomComponentState` | | `useRecoilComponentFamilyValueV2` | `useAtomComponentFamilyValue` | **`useAtomComponentFamilyStateValue`** | | `useRecoilComponentFamilyStateV2` | `useAtomComponentFamilyState` | `useAtomComponentFamilyState` | | `useSetRecoilComponentFamilyStateV2` | `useSetAtomComponentFamilyState` | `useSetAtomComponentFamilyState` | | `useRecoilComponentSelectorValueV2` | `useAtomComponentSelectorValue` | `useAtomComponentSelectorValue` | | `useRecoilComponentFamilySelectorValueV2` | `useAtomComponentFamilySelectorValue` | `useAtomComponentFamilySelectorValue` | | `useRecoilComponentStateCallbackStateV2` | `useAtomComponentStateCallbackState` | `useAtomComponentStateCallbackState` | | `useRecoilComponentSelectorCallbackStateV2` | `useAtomComponentSelectorCallbackState` | `useAtomComponentSelectorCallbackState` | | `useRecoilComponentFamilyStateCallbackStateV2` | `useAtomComponentFamilyStateCallbackState` | `useAtomComponentFamilyStateCallbackState` | | `useRecoilComponentFamilySelectorCallbackStateV2` | `useAtomComponentFamilySelectorCallbackState` | `useAtomComponentFamilySelectorCallbackState` | ### Utilities renamed: | Old Name (Recoil) | Final Name | |---|---| | `createStateV2` | **`createAtomState`** | | `createFamilyStateV2` | **`createAtomFamilyState`** | | `createSelectorV2` | **`createAtomSelector`** | | `createFamilySelectorV2` | **`createAtomFamilySelector`** | | `createWritableSelectorV2` | **`createAtomWritableSelector`** | | `createWritableFamilySelectorV2` | **`createAtomWritableFamilySelector`** | | `createComponentStateV2` | **`createAtomComponentState`** | | `createComponentFamilyStateV2` | **`createAtomComponentFamilyState`** | | `createComponentSelectorV2` | **`createAtomComponentSelector`** | | `createComponentFamilySelectorV2` | **`createAtomComponentFamilySelector`** | ## Details - All definition files renamed to match new convention - All import paths and usages updated across the entire `twenty-front` package - Jotai's native `useAtomValue` is aliased as `useJotaiAtomValue` in the wrapper hook to avoid collision - Legacy Recoil files in `state/utils/` and `component-state/utils/` left untouched (separate naming scope) - Typecheck passes cleanly |
||
|
Charles Bochet
|
b51eb6471f |
Jotai 12 (#18160)
Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|
Baptiste Devessier
|
fb2c9e12bc |
Fix a bunch of bugs on Record Page Layouts (#17342)
## Display task target and note target relations https://github.com/user-attachments/assets/b291cc38-33b9-45b8-b685-e5890824176e ## Drop summary card in right drawer ### Before <img width="1362" height="2160" alt="CleanShot 2026-01-22 at 14 27 09@2x" src="https://github.com/user-attachments/assets/79f45d8f-976b-4999-8f62-5cb4b87b3ef6" /> ### After <img width="1362" height="2160" alt="CleanShot 2026-01-22 at 14 26 43@2x" src="https://github.com/user-attachments/assets/fb67ddbb-0585-48bd-8ef6-c0139bba4062" /> ## Add a tooltip to the see all action https://github.com/user-attachments/assets/ab05cfab-8a6c-4caf-bfe9-698c8b7904e6 ## Rename the Fields tab to Home ### Before <img width="544" height="354" alt="CleanShot 2026-01-22 at 14 28 26@2x" src="https://github.com/user-attachments/assets/62f7faa2-3a18-40af-8cdf-3fb9f7c7708c" /> ### After <img width="544" height="354" alt="CleanShot 2026-01-22 at 14 28 06@2x" src="https://github.com/user-attachments/assets/76c21ec9-3723-4933-b34f-88b6403cbad5" /> |
||
|
Copilot
|
72e89d5c6b |
Add "See all" widget action for ONE_TO_MANY relation fields (#17192)
FIELD widgets displaying ONE_TO_MANY relations now show a "See all" action button (arrow-up-right icon) that navigates to the record index with filtered relations. ### Demo https://github.com/user-attachments/assets/fd632553-70e3-4757-8f26-80aa8d2ce0d2 ### Changes - **`WidgetAction` type**: Added `'see-all'` to `WidgetActionId` - **`useWidgetActions` hook**: Returns `'see-all'` action for ONE_TO_MANY relation fields (position 0, before edit) - **`WidgetActionFieldSeeAll` component**: Renders the navigation button with: - `IconArrowUpRight` icon - Link computed using same logic as `RecordDetailRelationSection` - Hover visibility behavior matching existing edit button - **`WidgetActionRenderer`**: Added case for `'see-all'` action - **Storybook**: Added `OneToManyRelationFieldWidgetWithSeeAllButton` story verifying button visibility and well-formed link ### Link computation Uses the same filter URL pattern as `RecordDetailRelationSection`: ```typescript const filterQueryParams = { filter: { [relationFieldMetadataItem.name]: { [ViewFilterOperand.IS]: { selectedRecordIds: [targetRecord.id], }, }, }, viewId: indexViewId, }; const filterLinkHref = getAppPath( AppPath.RecordIndexPage, { objectNamePlural: relationObjectMetadataItem.namePlural }, filterQueryParams, ); ``` The "see-all" action is shown regardless of field read-only status since it's a navigation action, not an edit action. <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>[RPL] Display "See all" widget action for FIELD widget displaying relations</issue_title> > <issue_description>The "See all" widget action is the button you can see in the top right corner in the following screen. We should redirect the user to the record index showing the filtered relations. > > <img width="1334" height="712" alt="Image" src="https://github.com/user-attachments/assets/c8aca25e-2136-43b3-8896-abd161a5693e" /> > > Example of interaction today in production: > > https://github.com/user-attachments/assets/3730301c-d04b-4195-b2fb-a51f8efee08a > > ## Technical details > > See `useWidgetActions` and `WidgetActionRenderer`. Use the `arrow-up-right` icon. > > See how link is computed here: https://github.com/twentyhq/twenty/blob/3cf7803ee1ae545add02f0c628a933618ce736d5/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/relation/components/RecordDetailRelationSection.tsx#L193-L204. Reuse the same link. > > ## Acceptance criteria > > - The action should be displayed in addition to other actions that might be rendered today > - The action must only be displayed for ONE_TO_MANY relations > - Ensure you write at least one story to ensure the button is correctly displayed; the button should a well formed link</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes twentyhq/core-team-issues#2064 <!-- START COPILOT CODING AGENT TIPS --> --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Devessier <29370468+Devessier@users.noreply.github.com> Co-authored-by: Devessier <baptiste@devessier.fr> |