Closes#7906
Modified the two children(`TextInputV2` and `CountrySelect`) in the
`StyledHalfRowContainer` component to always be equal in size and divide
the available space equally.
The `StyledIconChevronDown` component has a `flex-shrink: 0` to prevent
it from completely disappearing. The same applies for the
`selectedOption.Icon`.
A `p` tag had to be added to the label to correctly handle the text
overflow.
---------
Co-authored-by: Devessier <baptiste@devessier.fr>
## What it does
### Backend
- [x] Add a mutation to create OIDC and SAML configuration
- [x] Add a mutation to delete an SSO config
- [x] Add a feature flag to toggle SSO
- [x] Add a mutation to activate/deactivate an SSO config
- [x] Add a mutation to delete an SSO config
- [x] Add strategy to use OIDC or SAML
- [ ] Improve error management
### Frontend
- [x] Add section "security" in settings
- [x] Add page to list SSO configurations
- [x] Add page and forms to create OIDC or SAML configuration
- [x] Add field to "connect with SSO" in the signin/signup process
- [x] Trigger auth when a user switch to a workspace with SSO enable
- [x] Add an option on the security page to activate/deactivate the
global invitation link
- [ ] Add new Icons for SSO Identity Providers (okta, Auth0, Azure,
Microsoft)
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
In this PR:
- Use a real `<input type="checkbox" />` element in the `<Toggle />`
component
- Create an `accessibility` module in the `twenty-ui` package
- Export the `VISIBILITY_HIDDEN` CSS object to hide visually any element
- Export a `<VisibilityHidden />` component from the `twenty-ui` package
to add visually hidden textual information easily
- Export a `<VisibilityHiddenInput />` component to create custom form
control components easily
- Use a `<label>` element for the "Advanced:" text; it will naturally
toggle the advanced settings
Fixes#7756
---------
Co-authored-by: Devessier <baptiste@devessier.fr>
This PR:
- Uses `<label>` HTML elements when possible to represent labels
- Uses the new `useId()` React hook to get an identifier to link the
label with its input; it's more suitable than generating a UUID at every
render
Fixes#7281
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
- update `send-email.workflow-action.ts` so it send email via the google
sdk
- remove useless `workflow-action.email.ts`
- add `send` authorization to google api scopes
- update the front workflow email step form to provide a
`connectedAccountId` from the available connected accounts
- update the permissions of connected accounts: ask users to reconnect
when selecting missing send permission
> [!Note]
> - This PR solves the issue #7321
> - Added a minor fix in color background of toggle
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
- Add the SAVE_EMAIL action. This action requires more setting
parameters than the Serverless Function action.
- Changed the way we computed the workflow diagram. It now preserves
some properties, like the `selected` property. That's necessary to not
close the right drawer when the workflow back-end data change.
- Added the possibility to set a label to a TextArea. This uses a
`<label>` HTML element and the `useId()` hook to create an id linking
the label with the input.
Solves issue #5917.
This PR is now ready for the first review!
Filters do not fully work yet, there's a problem applying multiple
filters like the following:
```
{
and: [
{
[correspondingField.name]: {
gte: start.toISOString(),
} as DateFilter,
},
{
[correspondingField.name]: {
lte: end.toISOString(),
} as DateFilter,
},
],
}
```
I'll do my best to dig into it tonight!
---------
Co-authored-by: Félix Malfait <felix@twenty.com>
## Description
### Changes Made
- **Icon Size and Style**: Resized the icon**.
- **Icon Update**: Changed to **photo-up**.
- **Background Color**: Set to **transparent light**.
- **Hover Background Color**: Set to **transparent medium**.
- **Border**: Set to **Border/medium**.
- **Icon Color on Hover**: Set to **light** and **tertiary**.
## Preview of the changes made -
https://github.com/user-attachments/assets/72219531-7ffe-47b5-bae9-216764df68ee
In this PR:
- revert de-optimization of icons bundle for storybook. This was forcing
the browser to load ~3k files while running stories
- adding lazy loading on Settings route to improve developer experience
(some files will be loaded later)
- fix FE tests: unit, modules stories, pages stories
---------
Co-authored-by: Charles Bochet <charles@twenty.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>
- Remove raw queries and replace them by using `twentyORM`
- Refactor into services and utils
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Implement date formatting per workspace member settings
We'll need another round to maybe initialize all workspaces on the
default settings.
For now the default behavior is to take system settings if nothing is
found in DB.
---------
Co-authored-by: Weiko <corentin@twenty.com>
- Removed enabled props from useScopedHotkeys becayse it doesn't work
- Moved enter useScopedHotkeys in a handler that we drill down to the
text inputs on the settings form
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Fixes#6032.
Pg has a char limit on identifiers (= table, columns, enum names) of 63
bytes.
Let's limit the metadata names that will be converted to identifiers
(objects names, fields names, relation names, enum values) to 63 chars.
For the sake of simplicity in the FE we will limit the input length of
labels.
---------
Co-authored-by: Charles Bochet <charles@twenty.com>
Added:
- An "Ask AI" command to the command menu.
- A simple GraphQL resolver that converts the user's question into a
relevant SQL query using an LLM, runs the query, and returns the result.
<img width="428" alt="Screenshot 2024-06-09 at 20 53 09"
src="https://github.com/twentyhq/twenty/assets/171685816/57127f37-d4a6-498d-b253-733ffa0d209f">
No security concerns have been addressed, this is only a
proof-of-concept and not intended to be enabled in production.
All changes are behind a feature flag called `IS_ASK_AI_ENABLED`.
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
In this PR, I'm simplifying storybook setup:
1) Remove build --test configuration that prevent autodocs. We are not
using autodocs at all (the dev experience is not good enough), so I have
completely disabled it.
2) Clarify `serve` vs `test` vs `serve-and-test` configurations
After this PR:
- you can serve storybook in two modes: `npx nx run
twenty-front:storybook:serve:dev` and `npx nx run
twenty-front:storybook:serve:static`
- you can run tests agains an already served storybook (this is useful
in dev so you don't have to rebuild everytime to run tests): `npx nx run
twenty-front:storybook:test`
- you can conbine both: `npx nx run
twenty-front:storybook:serve-and-test:static`
Timezone with a negative offset weren't working good with date pickers.
I split the logic for display and parsing between date only and
datetime.
Date time is sending and displaying using timezone, and date only is
sending and displaying by forcing the date to take its UTC day and month
and 00:00:00 time.
This way its consistent across all timezones.
# Context
Currently, the Twenty platform incorporates "positions" for rows on the
backend, which are functional within the Kanban view. However, this
advantageous feature has yet to be leveraged within list views.
# Feature Proposal
## Implement Row-Reordering via Drag-and-Drop on Frontend (#4846)
- This PR addresses the implementation of row reordering via
Drag-and-Drop on frontend. The objective is to enrich the list view
functionality by introducing a grip that dynamically appears upon
hovering over the left space preceding the checkbox container. This grip
empowers users to effortlessly reposition rows within the list.
#### Proposal Highlights:
- **Enhanced User Interaction**: Introduce a draggable grip to
facilitate intuitive row reordering, enhancing user experience and
productivity.
- **Preservation of Design Aesthetics**: By excluding the grip from the
first row and maintaining the left gap, we uphold design integrity while
providing enhanced functionality.
- **Consistency with Existing Features**: Align with existing
drag-and-drop functionalities within the platform, such as Favorites
re-ordering or Fields re-ordering in table options, ensuring a seamless
user experience.
## Implementation Strategy
### Grip Implementation:
- Add an extra column to the table (header + body) to accommodate the
grip cell, which displays the IconListViewGrip when its container is
hovered over.
- Ensure the preceding left-space is maintained by setting the
corresponding width for this column and removing padding from the table
container (while maintaining padding in other page elements and the
Kanban view for coherence).
### Row Drag and Drop:
- Implement row drag-and-drop functionality using draggableList and
draggableItem, based on the existing logic in the KanbanView for row
repositioning.
- Create a draggableTableBody and apply it to the current
RecordTableBody (including modal open triggering - if dragging while
sorting exists).
- Apply the draggableItem logic to RecordTableRow.
### Sorting Modal Implementation:
- Reuse the ConfirmationModel for the removeSortingModal.
- Create a new state to address the modal.
- Implement sorting removal logic in the corresponding modal file.
## Outcome
- The left-side margin is preserved.
- The grip appears upon hovering.
- Dragging a row gives it and maintains an aesthetic appearance.
- Dropping a row updates its position, and the table gets a new
configuration.
- If sorting is present, dropping a row activates a modal. Clicking on
the "Remove Sorting" button will deactivate any sorting (clicking on
"Cancel" will close the modal), and the table will revert to its default
configuration by position, allowing manual row reordering. Row
repositioning will not occur if sorting is not removed.
- The record table maintains its overall consistency.
- There are no conflicts with DragSelect functionality.
https://github.com/twentyhq/twenty/assets/92337535/73de96cc-4aac-41a9-b4ec-2b8d1c928d04
---------
Co-authored-by: Vasco Paisana <vasco.paisana@tecnico.ulisboa.pt>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
