houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve security settings card grouping and description overflow (#17928)

Browse Source 
# After

- Added a separtor between the two audit logs cards
- Rename the audit log card to avoid repetition
- Grouped "Invite by link" and "2 factor auth" in one group
- Changed the card component description to always be one line max with
truncation & tooltips

<img width="777" height="1278" alt="CleanShot 2026-02-13 at 17 02 36"
src="https://github.com/user-attachments/assets/685c792a-c85b-4521-8c1b-bd9adedc75d9"
/>

<img width="976" height="690"
alt="b49f2eb043b6712d013618bb0a4ef7f011cf2316e1163fbdee4c293bed036ac9"
src="https://github.com/user-attachments/assets/6e17aa11-ecdb-4f98-ba50-5cd9b9c5def6"
/>

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thomas des Francs
2026-02-18 22:33:37 +01:00
committed by GitHub
parent 42108e0611
commit 612f7c37a5
10 changed files with 76 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
+3 -2
View File
@@ -8,7 +8,6 @@ import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsO
import { ADVANCED_SETTINGS_ANIMATION_DURATION } from '@/settings/constants/AdvancedSettingsAnimationDurations';
import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
import { getDisplayFormatLabel } from '@/settings/data-model/fields/forms/date/utils/getDisplayFormatLabel';
import { getDisplayFormatSelectDescription } from '@/settings/data-model/fields/forms/date/utils/getDisplayFormatSelectDescription';
import { Select } from '@/ui/input/components/Select';
import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import styled from '@emotion/styled';
@@ -71,7 +70,9 @@ export const SettingsDataModelFieldDateForm = ({
isDateFieldCustomDisplayFormat(activeDisplayFormat);
const displayFormatSelectDescription =
getDisplayFormatSelectDescription(activeDisplayFormat);
activeDisplayFormat === FieldDateDisplayFormat.CUSTOM
? t`Enter in Unicode format`
: t`Choose the format used to display date value`;
return (
<>
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/utils/getDisplayFormatSelectDescription.tsx
-24
View File
@@ -1,24 +0,0 @@
import { FieldDateDisplayFormat } from '@/object-record/record-field/ui/types/FieldMetadata';
import { Trans } from '@lingui/react/macro';
export const getDisplayFormatSelectDescription = (
selectedDisplayFormat: FieldDateDisplayFormat,
) => {
if (selectedDisplayFormat === FieldDateDisplayFormat.CUSTOM) {
return (
<Trans>
Enter in{' '}
<a
href="https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table"
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'underline', color: 'inherit' }}
>
Unicode
</a>{' '}
format
</Trans>
);
}
return <Trans>Choose the format used to display date value</Trans>;
};
packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldRelationJunctionForm.tsx
+2 -23
View File
@@ -1,17 +1,14 @@
import { Trans, useLingui } from '@lingui/react/macro';
import { useLingui } from '@lingui/react/macro';
import { useFormContext } from 'react-hook-form';
import { useRecoilValue } from 'recoil';
import { DOCUMENTATION_PATHS } from 'twenty-shared/constants';
import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { IconLink } from 'twenty-ui/display';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
import { getDocumentationUrl } from '@/support/utils/getDocumentationUrl';
import { Select } from '@/ui/input/components/Select';
import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
import { RelationType } from '~/generated-metadata/graphql';
@@ -29,12 +26,6 @@ export const SettingsDataModelFieldRelationJunctionForm = ({
useFormContext<SettingsDataModelFieldEditFormValues>();
const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const documentationUrl = getDocumentationUrl({
locale: currentWorkspaceMember?.locale,
path: DOCUMENTATION_PATHS.USER_GUIDE_DATA_MODEL_HOW_TOS_CREATE_MANY_TO_MANY_RELATIONS,
});
const { objectMetadataItem: sourceObjectMetadataItem } =
useObjectMetadataItem({ objectNameSingular });
@@ -163,19 +154,7 @@ export const SettingsDataModelFieldRelationJunctionForm = ({
<SettingsOptionCardContentToggle
Icon={IconLink}
title={t`This is a relation to a Junction Object`}
description={
<Trans>
Build many-to-many relations.{' '}
<a
href={documentationUrl}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'underline', color: 'inherit' }}
>
Learn more
</a>
</Trans>
}
description={t`Build many-to-many relations`}
checked={isJunctionConfigEnabled}
onChange={handleJunctionToggle}
divider={isJunctionConfigEnabled}