Closes#8578
There was no case to handle a FieldMetadataType.Array and thus an error
was thrown every time the edit button was clicked on an Array type.
It has been added now with an explicit break statement.
Fixes: #8487#5027
1. Summary
The purpose of these changes is to elevate the dev/user experience when
the initial config load call fails for whatever reason by displaying a
fallback component.
2. Solution
I ended up making more changes than I initially planned. I had to update
the order of the contexts a bit because `GenericErrorFallback` is
dependent on `AppThemeProvider` for styling and `AppThemeProvider` is
dependent on `ObjectMetadataItemsProvider` for
[`useObjectMetadataItem`](ae2f193d68/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts (L22))
hook (`AppThemeProvider` -> `useColorScheme` -> `useUpdateOneRecord` ->
`useObjectMetadataItem`). I had to create a wrapper component for
`AppThemeProvider` and stylize it in a way that it looks responsive on
both mobile and desktop devices. Finally, I had to introduce the
`isErrored` flag to differentiate the loading and error states.
There are some improvements we can make later -
- Display a loading state for the initial config load
- Implement a refetch logic for the initial config loading failure
3. Recording
https://github.com/user-attachments/assets/c2f43573-8006-4118-8e18-8576099d78fdhttps://github.com/user-attachments/assets/9c5853d3-539b-4880-aa38-c416c3e13594
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
The Pull Request adds support for local HTTPS configuration and
introduces a new environment variable for the app's base URL.
- Added new environment variable REACT_APP_BASE_URL in .env.example.
- Introduced logic to utilize SSL certificates for local HTTPS in
vite.config.ts.
- Added validation to ensure SSL key and certificate paths are defined
for HTTPS.
- Included support for dynamic base URL setting based on the environment
configuration.
- Enhanced server configuration in vite.config.ts to handle HTTPS and
local development.
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
TODO:
- [ ] It should not be possible to add tasks, notes, files, etc.
Fix for https://github.com/twentyhq/twenty/issues/7172
Note for reviewer:
- With these changes, `deletedAt` is now always included in
`recordGqlFields`.
--- Edit from Charles --
In this PR:
1) As mentionned by @pau-not-paul, we are adding deletedAt to our
recordGqlFields for board and table
2) I'm removing cellReadOnly logic, it is now fully computed using
useIsFieldValueReadonly like it's done in other places, there is no need
to maintain two read only systems
3) refactoring useIsFieldValueReadonly to take all the business logics
into one place together. It's now a function of the 5 factors (isRemote,
isDeleted, objectName, fieldName, etc...). Later it's likely to get back
to a function of Pick<FieldMetadata>, Pick<ObjectMetadata>,
record.isDeleted but we are not there yet
Note: as all cells are listening to the record (for isDeleted), updating
a field will trigger a re-rendering of the row which is not an issue
right now. It will be if we introduce bulk edition. In this case we
would need to use a selector on fields on top of record store
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
### Overview
This pull request addresses issue #8612 by ensuring the "Expand to Full
Page" button does not appear on the Email and Calendar pages in the
right drawer.
### Changes Made
- Added conditions in the `RightDrawerTopBar` component to prevent the
`RightDrawerTopBarExpandButton` from rendering on:
- Email pages (`RightDrawerPages.ViewEmailThread`)
- Calendar pages (`RightDrawerPages.ViewCalendarEvent`)
- Verified that the button still renders correctly on other pages, such
as Record pages.
### Testing
Since I couldn't run the project locally, I was unable to confirm the
changes in a running environment. However, the logic has been carefully
updated to ensure the button is conditionally hidden based on the
current `rightDrawerPage` state.
### Additional Notes
Please let me know if further adjustments are needed or if there are any
issues during testing. Thank you for reviewing this PR!
---------
Co-authored-by: Weiko <corentin@twenty.com>
In this PR:
- Ensure the `setNestedValue` does a deep copy of the provided object
and doesn't mutate it directly.
- Store the form's state in a `useState` instead of relying entirely on
the backend's state. This makes the form more resilient to slow network
connections.
- Ensure the input settings are reset when selecting another function.
- The Inner component now expects the serverless functions data to be
resolved before being mounted, so I split it.
Closes https://github.com/twentyhq/twenty/issues/8523
We were not handling relations in the search resolver, which started
being an issue as we query those relations in the combinedSearch queries
(introduced here https://github.com/twentyhq/twenty/pull/8564); they
were nullified in the response payload. The response was overwriting
findManyRecords results in the cache as it contained the exact same
fields.
So we now
1. Handle relations in the search resolver
2. Stop querying relations in search queries (no use)
Something changed, which affected the Favorite folder picker checkbox
styles -- fixed it!
Cleaned up code in `CurrentWorkspaceMemberFavoritesFolders` - removed
redundant filtering since favorites are already filtered in
`usePrefetchedFavoritesData`.
Regarding issue #8569 - I am not sure what to do in this case. Since
Folders data is gated by a feature flag, we can't use it in
`CurrentWorkspaceMemberFavoritesFolders` to ensure the favorite section
renders with empty folders. Currently, the section only appears when at
least one favorite exists - may be leave this section open at all times
or fix this bug after removal of the feature flag?
---------
Co-authored-by: Nitin Koche <nitinkoche@Nitins-MacBook-Pro.local>
Co-authored-by: Charles Bochet <charles@twenty.com>
Fixes: #8552
1. Summary
It seems table cell content is missing `white-space: nowrap`, so it
breaks the content into multiple lines when there are spaces or such.
2. Solution
Set `white-space: nowrap` for the table cell container so it always
takes a single line regardless of the length of the content.
3. Recording
https://github.com/user-attachments/assets/a42a2e80-d1fc-43b1-bf87-d52bf0367a88
Here we add the option for Text inputs to be wrapped, and to select on
how many lines text should be displayed.
Fix#7552
---------
Co-authored-by: guillim <guillaume@twenty.com>
This PR is preparing states to we'll be able to handle view groups
correctly with table data.
RowIds are now stores in 2 component states, one storing ids by view
group and another storing all the rowIds.
We're doing that because some other state like focus, or select must not
be scoped by view group id.
Fixes: #8531
1. Summary
There is `onClick` event handler defined for `NavigationDrawerItem`
component, and inside the handler, if `to` is not empty, we trigger
another navigation when it's already handled by `Link` component from
`react-router-dom`
2. Solution
Removed extra navigation logic from `NavigationDrawerItem`'s `onClick`
handler
3. Screen Recording
https://github.com/user-attachments/assets/cfefdd51-1663-4d96-acd2-57783ae9877f
# Description
Closes#8169
Extract Add New button from entitiesToSelect and add it as a separate
element .
There doesn't seem to be a point in having Add New as part of a list, it
seems better off in its own component, apart from list items
## Rationale
There already is #8353 addressing the same issue, but it seems it
doesn't really remove the duplicate "Add New" in the list, leaving a
duplicate "Add New" in `SingleEntitySelect`
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
First step of https://github.com/twentyhq/twenty/issues/6868
Adds min.., max.. queries for DATETIME fields
adds min.., max.., avg.., sum.. queries for NUMBER fields
(count distinct operation and composite fields such as CURRENCY handling
will be dealt with in a future PR)
<img width="1422" alt="Capture d’écran 2024-11-06 à 15 48 46"
src="https://github.com/user-attachments/assets/4bcdece0-ad3e-4536-9720-fe4044a36719">
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Weiko <corentin@twenty.com>
fix#8204
I changed "API keys" to "API values".
Stopped inputting special characters in Select field option keys.
@lucasbordeau please check the changes and tell me if I need to do any
other changes. :)
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
This is the result of a long discussion we had here:
https://github.com/twentyhq/twenty/issues/8001.
The goal is to stop iOS from automatically zooming when the user focuses
on an input whose font size is less than 16px.
The options were:
1. Disable zoom for all devices
2. Disable zoom for devices detected as iOS devices, which doesn't
prevent users from zooming manually but fixes the auto-zoom bug
3. Set the font size of the inputs to be equal to or greater than
16px—this change would take a lot of time
To me, the second option is the best, as iOS prevents developers from
disabling zoom. They saw that it was overused and chose to restrict this
setting. Setting a `maximum-scale` doesn't prevent users from zooming,
but it fixes the initial bug we had.
My implementation can be seen as [progressive
enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement
): If we can detect that the user uses an iOS device, we'll set the
`maximum-scale` viewport property. Relying on the user agent is always
unstable, and the check might fail unpredictably. We might not disallow
auto-zoom for some iOS devices.
However, I think we can either:
- Invest some time to choose a more reliable user detection pattern if
the one I suggest is not sufficient ([we find many different checks on
the
internet](https://stackoverflow.com/questions/9038625/detect-if-device-is-ios),
I'm not sure which one is the best)
- Choose to apply the viewport setting to all devices and remove the JS
code. According to my tests, it doesn't prevent zooming on desktops.
However, it does on Android phones. I think it's not lovely to disallow
zoom, but if the team agrees that we should go this way, I won't
disagree.
I know my JavaScript code does not follow a pattern we want to spread in
the app. The synchronous script will run as soon as possible to ensure
the viewport is correctly set when the website launches. This shouldn't
be an example followed by others.
Thanks, @harshit078, for your help in thinking about the best option.
I'm tagging @lucasbordeau and @charlesBochet for a technical review.
I would appreciate if someone could test on a more recent iOS device
than mine.
Here is a demonstration of the behavior on iOS:
https://github.com/user-attachments/assets/d49fb65f-dd76-455c-9ac0-d4c002a7fe89
- Increase the dimensions of the ReactFlow nodes. This allows to ditch
scaling which made it hard to get the width of the nodes as they were
visually scaled by 1.3.
- Center the flow when the flow mounts and when the state of the right
drawer opens.
- Put the node type inside of the node so it doesn't overlap with the
arrow
- Make the edges non deletable
We'll have to make a refactor so the viewport can be animated properly:
https://github.com/twentyhq/twenty/issues/8387.
https://github.com/user-attachments/assets/69494a32-5403-4898-be75-7fc38058e263
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
FIX: #6977
Implementation:
1. Parent (Summary componenet) width is set to 100%. (dosen't grow even
if the child exceeds width)
2. span element is set to `text-overflow: ellipses` when overflown.
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
FIX#8326
I've used the `height: fit-content` property just for customSlashMenu
but I think it will work for all dropdown menu's.
I tested it for a few and works fine, but not sure for edge cases.
Let me know if the height should be changed to `fir-content`
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
- Create a new component state `contextStoreFiltersComponentState` and
refactor `contextStoreTargetedRecordsRuleComponentState`
- Refactor `computeContextStoreFilters` to use filters when no records
are selected
## Description
- This PR solves the issue #8249
- Maintained the overall padding, aligned content to left matching and
decreased Spacing between the card title and content should be smaller
## Changes
<img width="346" alt="Screenshot 2024-11-03 at 2 37 13 AM"
src="https://github.com/user-attachments/assets/91ba35bb-ff25-4001-af15-1fa10e5e1772">
---------
Co-authored-by: Thomas des Francs <tdesfrancs@gmail.com>
- Use a label to make the whole card interactive
- Disallow the Toggle component to shrink; it used to on mobile devices
A focus indicator is missing for the Toggle component. We'll have to add
one.
**TLDR**
Refactor WebhoonAnalytics Graph to a more abstract version
AnalyticsGraph (in analytics module). Thus enabling the components to be
used on different instances (ex: new endpoint, new kind of graph).
**In order to test:**
1. Set ANALYTICS_ENABLED to true
2. Set TINYBIRD_JWT_TOKEN to the ADMIN token from the workspace
twenty_analytics_playground
3. Set TINYBIRD_JWT_TOKEN to the datasource or your admin token from the
workspace twenty_analytics_playground
4. Create a Webhook in twenty and set wich events it needs to track
5. Run twenty-worker in order to make the webhooks work.
6. Do your tasks in order to populate the data
7. Enter to settings> webhook>your webhook and the statistics section
should be displayed.
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
Implemented:
* Account Connect
* Calendar sync via delta ids then requesting single events
I think I would split the messaging part into a second pr - that's a
step more complex then the calendar :)
---------
Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
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>
Simplifying the logic around multi-object pickers and search by getting
rid of the behaviour that keeped selected elements even when they did
not match the search filter (eg keeping selected record "Brian Chesky"
in dropdown even when search input is "Qonto"). This allows us to
simplify the fetch queries around the search to only do one query.
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Fixes https://github.com/twentyhq/twenty/issues/8233
Typing a search input was triggering a re-render of the whole
RecordBoardCard, resetting the search input to its initial value, an
empty string, making it impossible to actually type anything.
useRelationPicker had (legacy?) useless dependencies to recoil states
that caused the rerenders.
### Description
- This PR has as the base branch the TWNTY-5491 branch, but we also had
to include updates from the main branch, and currently, there are
conflicts in the TWNTY-5491, that cause errors on typescript in this PR,
so, we can update once the conflicts are resolved on the base branch,
but the functionality can be reviewed anyway
- We Implemented a new layout of object details settings and new, the
data is auto-saved in `Settings `tab of object detail
- There is no indication to the user that data are saved automatically
in the design, currently we are disabling the form
### Demo\
<https://www.loom.com/share/4198c0aa54b5450780a570ceee574838?sid=b4ef0a42-2d41-435f-9f5f-1b16816939f7>
### Refs
#TWNTY-5491
---------
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: Marie Stoppa <marie.stoppa@essec.edu>
Co-authored-by: Weiko <corentin@twenty.com>
Reusing the useUploadAttachment Hook
In the implementation of the feature to ensure the attachment table is
updated whenever new images are added to a RICH_TEXT field #7617 , it is
likely that the useUploadAttachment hook is reused.
The useUploadAttachment hook is responsible for handling the upload of
attachments, including images, and returning the uploaded file URL. By
reusing this hook, you can leverage its existing functionality to handle
image uploads within the RICH_TEXT field.
In this case, the modified image handling logic would utilize the
useUploadAttachment hook to upload new images added to the RICH_TEXT
content. The hook would then return the uploaded file URL, which would
be used to update the attachment table with the details of the newly
added images.
By reusing the useUploadAttachment hook, you can avoid duplicating code
and ensure consistency in the way attachments are handled throughout the
application.
Fixes#6565
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
On the kanban page, the record creation was changed a few weeks ago to
enable creation on top / bottom of the columns.
However, this introduced a glitch (missing background opacity). While
fixing it, I have refactored the component structure to:
- separate "New" button from the Empty record card
- add `inputSchema` column in serverless function. This is an array of
parameters, with their name and type
- on serverless function id update, get the `inputSchema` + store empty
settings in step
- from step settings, build the form
TODO in next PR:
- use field type to decide what kind of form should be printed
- have a strategy to handle object as input
https://github.com/user-attachments/assets/ed96f919-24b5-4baf-a051-31f76f45e575
Fixes: #7460
**Changes & Why**
Since all the settings pages lie in the Outlet of DefaultLayout, there
was no way to handle it apart from creating a separate errorFallback for
the settings route.
So, I created a settingsErrorFallback component that uses the same
styling of settings pages.
Created ErrorBoundaryWrapper that checks if its settings route then show
SettingsErrorFallback else show GenericErrorFallback.
Now, for the breadcrumb part. I found that all the settings pages use
hardcoded title. So, I created generateBreadcrumbLinks function that
will provide different title and links based on how it's respective
settings page has them.
If this approach looks fine, I will add the other remaining titles and
links to the generateBreadcrumbLinks function and move that whole
function to its separate file. And will fix linting errors.
If there is any different approach to handle it, lemme know. I'm happy
to implement it.
We have previously fixed the unselection of table records on click
outside. However, the ref was mispositioned as it selected the full
height table. In the case of low record numbers, we also want the
unselection to happen on table body click
[This PR](https://github.com/twentyhq/twenty/pull/8210) introduced a
regression, causing noteId or taskId (respectively for noteTarget or
taskTarget creation) to be overwritten with an undefined value in the
input for noteTarget or taskTarget creation.
This is because in ActivityTargetInlineCellEditMode, in addition to the
noteId and taskId we are declaring, we are looking into the object
(noteTarget or taskTarget)'s fields and prefilling the record-to-create
with a value, potentially undefined, for all of the object fields.
So when looping over noteTarget's fields, we would find the `note`
relation field, and eventually add `note: undefined` to the
record-to-create input, in addition to the non-empty and valid existing
`noteId`.
Then in sanitizeRecordInput, from the note added right above, we add an
empty noteId to the input from node, overwriting the "good" noteId.
There are several ways to fix this, I chose to update prefillRecord not
to add an empty "note" object that makes no sense in addition to the
"noteId" we already have at this stage.
It is also possible to update `sanitizeRecordInput` not to overwrite a
value from a relation (noteId from note relation) if there is already a
value in the input.
Many dropdown bugs have been fixed, more refactoring is needed.
Dropdown fixed :
- Filter select
- Sort select
- Visible field select
- Hidden field select
- Multi item picker (phones, links, emails, etc.)
- Phone country select
Fixes:
The regression is due a recent change I made to the SelectControl
component: https://github.com/twentyhq/twenty/pull/8125.
The SelectControls get applied `text-align: center` due to the styles
`react-datepicker` applies to the header component. My grid
implementation makes the label take all the available width. I could
have let it take an `auto` width, but I think it's better to set the
`text-align` property and ensure the `SelectControl` component behaves
predictably.
