This PR fixes a bug that prevented to do the matching of an imported CSV
file that contains a SELECT type column.
Fixes https://github.com/twentyhq/twenty/issues/11220
## Stacking context improvement
During the development it was clear that we lacked a reliable way to
understand our own z indices for components like modal, portaled
dropdown, overlay background, etc.
So in this PR we introduce a new enum RootStackingContextZIndices, this
enum allows to keep track of our root stacking context component
z-index, and because it is an enum, it prevents any conflict.
See
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context
for reference.
## Component cleaning
Components have been reorganized in a SubMatchingSelectRow component
The Dropdown component has been used to replace the SelectInput
component which doesn't fit this use case because we are not in a cell,
we just need a simple standalone dropdown, though it would be
interesting to extract the UI part of the SelectInput, to share it here,
the benefit is not obvious since we already have good shared components
like Tag and Dropdown to implement this specific use case.
---------
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.
## TODO
- [x] Manual migrate twenty-website twenty-ui imports
## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them
### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app
Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
Refactor query runner to improve the import method for upserts, we now
take into account any unique field and prevent any conflict upfront.
Previously, we would only update if an `id` was passed.
https://github.com/user-attachments/assets/8087b864-ba42-4b6e-abf2-b9ea66e6c467
This is only a first step, there are other things to fix on the frontend
for this to work.
Mostly renaming objects to avoid conflicts (it was painful because names
were too generic so you could cmd+replace easily)
Also refactoring `useBuildAvailableFieldsForImport`
Fixes#9245 - CSV import column selection dropdown was missing
background styles, making it difficult to read the options.
## Changes
- Add styled component for DropdownMenu with background color
- Include border and box shadow styles
## Screenshots
## Testing
- [x] Verify column selection dropdown has proper background color
- [x] Confirm dropdown options are clearly visible
- [x] Check that dropdown appears above other elements correctly
This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7536](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7536).
---
### Description
Migrate all menu items components to twenty ui and update imports.
```typescript
MenuItem
MenuItemAvata
MenuItemCommand
MenuItemCommandHotKeys
MenuItemDraggable
MenuItemMultiSelect
MenuItemMultiSelectAvatar
MenuItemMultiSelectTag
MenuItemNavigate
MenuItemSelect
MenuItemSelectAvatar
MenuItemSelectColor
MenuItemSelectTag
MenuItemSuggestion
MenuItemToggle
```
\
Also migrate all other dependent components and utilities like
`Checkbox` & `Toggle`\
\
Fixestwentyhq/private-issues#82
---------
Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
### Description:
- we move all logic about the unmatchedOptions to a new component called
UnmatchColumn, because as it will be a full line in the table, it was
better to update where the component will be rendered
- In the latest changes to keep the columns when we change the step to
step 3 and go back to step 2, we added a fallback state
initialComputedColumnsState that saves the columns and only reverts the
updates when we go back to step 1 or close by clicking the X button
### Refs:
#6135
```
It was necessary to add references and floating styles to the generic component to fix the bug when the last option was open and the dropdown was being hidden in the next row of the spreadsheet table. We fixed the same problem that occurs in the companies table as well
```
we used this approach mentioned on this documentation to be able to use
the hook without calling it on each component, we are calling only once,
on the shared component
<https://floating-ui.com/docs/useFloating#elements>\
before:
now:
###
Demo: <https://jam.dev/c/e0e0b921-7551-4a94-ac1c-8a50c53fdb0c>
Fixes#6135
NOTES: the enter key are not working on main branch too
---------
Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Hi @Bonapara,
Issue #6385
I encountered an issue with the Modal component where its width was
fixed at 400px. While the container housing the Modal adjusted its size
based on the screen width, the Modal itself remained at 400px regardless
of the screen size.
I have implemented a change to address this problem. Could you please
review the changes and let me know your thoughts?
Thank you!
https://github.com/user-attachments/assets/8358aacb-d6c3-440e-895e-7abc4f8a3534
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Adding support for all Composite Fields while using the "import"
functionality. This includes:
- Currency
- Address
Edit :
- Refactored a lot of types in the spreadsheet import module
- Renamed a lot of functions, hooks and types that were not
self-explanatory enough
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This is a small PR to improve the design of our CSV import.
I noticed the back button that was implemented in a recent PR #5625 was
broken and would need to be fixed (e.g. try to come back to the very
first upload step from the sheet selection step). cc @shashankvish0010
if you want to give a stab at fixing your PR that'd be amazing, thanks!
Users now can make a back transition from the current step state.
- Added a `BackButton` component to `spreadsheet-import` in order to use
it within the step state components.
- Used the prebuilt `prevStep` from `useStepBar` and passed it as a prop
to the `Uploadflow` to get the previous state as activestep.
- Added a `previousState` to set the previous state with the required
key data.
- Added a `handleOnBack` function in `Uploadflow` to set the correct
state and call the `prevStep` function to make the transition.
- Added a callback function `onBack` and passed it as props to each step
state component.
fixes: #5564https://github.com/twentyhq/twenty/assets/140178357/be7e1a0a-0fb8-41f2-a207-dfc3208ca6f0
---------
Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
Some parts of the Frontend used theme constants exported from
`modules/ui` while other parts used theme constants exported from
`twenty-ui`.
This PR centralizes theme constants by removing them from `modules/ui`
completely.
Lucas Bordeau
