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

1518 extensibility front add an application section in settings (#15056)

Browse Source 
Protected by IS_APPLICATION_ENABLED featureFlag

Add `Application` section in settings

<img width="301" height="137" alt="image"
src="https://github.com/user-attachments/assets/ee53bdd2-36f6-45c6-8646-17b1e08abf00"
/>


A `settings/applications` route listing all installed applications

<img width="661" height="428" alt="image"
src="https://github.com/user-attachments/assets/69d534c4-4e9e-452a-a3d9-ded0223bb457"
/>

Introduce a new Tag for application managed items

<img width="885" height="759" alt="image"
src="https://github.com/user-attachments/assets/19767be5-61e5-4bd2-a51d-54ed9bfb1923"
/>



A `settings/applications/<application_id>` details setting page listing
all objects, serverlessFunctions and agents created by the application:

<img width="917" height="778" alt="image"
src="https://github.com/user-attachments/assets/7fc056a6-1d73-4242-b2eb-6f8955d8597d"
/>

A `settings/applications/<application_id>/<serverless_function_id>`

<img width="905" height="652" alt="image"
src="https://github.com/user-attachments/assets/56ca0021-26bf-42cb-9abf-34879f16050a"
/>

Add trigger tab in serverless function details (readonly for now)

<img width="899" height="724" alt="image"
src="https://github.com/user-attachments/assets/5eeefa35-f2a4-4fd8-a640-7b5c5891f226"
/>

Set object, serverless and agent setting detail pages readonly for
managed items
<img width="1075" height="859" alt="image"
src="https://github.com/user-attachments/assets/57c73d69-4980-47a2-b752-8dc5ab494530"
/>
<img width="648" height="582" alt="image"
src="https://github.com/user-attachments/assets/5ad5f3f7-3bc3-4e40-870a-4981c6492524"
/>
<img width="982" height="692" alt="image"
src="https://github.com/user-attachments/assets/7ad756c4-5d33-4a0a-9eb8-416c040362b9"
/>
<img width="1077" height="647" alt="image"
src="https://github.com/user-attachments/assets/e086b9f5-4062-4d10-82a9-4023de3cad3f"
/>
This commit is contained in:
martmull
2025-10-15 17:13:29 +02:00
committed by GitHub
parent c0ed246a03
commit b16ab1b7c9
109 changed files with 2464 additions and 1357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/ai/graphql/fragments/agentFragment.ts
+1
View File
@@ -13,6 +13,7 @@ export const AGENT_FRAGMENT = gql`
roleId
isCustom
modelConfiguration
applicationId
createdAt
updatedAt
}
packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
+38 -34
View File
@@ -5,7 +5,7 @@ import { SettingsProtectedRouteWrapper } from '@/settings/components/SettingsPro
import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
import { SettingPublicDomain } from '@/settings/domains/components/SettingPublicDomain';
import { SettingsPath } from 'twenty-shared/types';
import { PermissionFlagType } from '~/generated/graphql';
import { FeatureFlagKey, PermissionFlagType } from '~/generated/graphql';
const SettingsGraphQLPlayground = lazy(() =>
import(
@@ -105,12 +105,6 @@ const SettingsDevelopersApiKeysNew = lazy(() =>
})),
);
const SettingsServerlessFunctions = lazy(() =>
import(
'~/pages/settings/serverless-functions/SettingsServerlessFunctions'
).then((module) => ({ default: module.SettingsServerlessFunctions })),
);
const SettingsServerlessFunctionDetail = lazy(() =>
import(
'~/pages/settings/serverless-functions/SettingsServerlessFunctionDetail'
@@ -119,14 +113,6 @@ const SettingsServerlessFunctionDetail = lazy(() =>
})),
);
const SettingsServerlessFunctionsNew = lazy(() =>
import(
'~/pages/settings/serverless-functions/SettingsServerlessFunctionsNew'
).then((module) => ({
default: module.SettingsServerlessFunctionsNew,
})),
);
const SettingsWorkspace = lazy(() =>
import('~/pages/settings/SettingsWorkspace').then((module) => ({
default: module.SettingsWorkspace,
@@ -157,6 +143,22 @@ const SettingsAI = lazy(() =>
})),
);
const SettingsApplications = lazy(() =>
import('~/pages/settings/applications/SettingsApplications').then(
(module) => ({
default: module.SettingsApplications,
}),
),
);
const SettingsApplicationDetails = lazy(() =>
import('~/pages/settings/applications/SettingsApplicationDetails').then(
(module) => ({
default: module.SettingsApplicationDetails,
}),
),
);
const SettingsAgentForm = lazy(() =>
import('~/pages/settings/ai/SettingsAgentForm').then((module) => ({
default: module.SettingsAgentForm,
@@ -399,10 +401,7 @@ type SettingsRoutesProps = {
isAdminPageEnabled?: boolean;
};
export const SettingsRoutes = ({
isFunctionSettingsEnabled,
isAdminPageEnabled,
}: SettingsRoutesProps) => (
export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
<Suspense fallback={<SettingsSkeletonLoader />}>
<Routes>
<Route path={SettingsPath.ProfilePage} element={<SettingsProfile />} />
@@ -590,22 +589,27 @@ export const SettingsRoutes = ({
element={<SettingsIntegrationMCP />}
/>
</Route>
{isFunctionSettingsEnabled && (
<>
<Route
path={SettingsPath.ServerlessFunctions}
element={<SettingsServerlessFunctions />}
<Route
element={
<SettingsProtectedRouteWrapper
requiredFeatureFlag={FeatureFlagKey.IS_APPLICATION_ENABLED}
/>
<Route
path={SettingsPath.NewServerlessFunction}
element={<SettingsServerlessFunctionsNew />}
/>
<Route
path={SettingsPath.ServerlessFunctionDetail}
element={<SettingsServerlessFunctionDetail />}
/>
</>
)}
}
>
<Route
path={SettingsPath.Applications}
element={<SettingsApplications />}
/>
<Route
path={SettingsPath.ApplicationDetail}
element={<SettingsApplicationDetails />}
/>
<Route
path={SettingsPath.ApplicationServerlessFunctionDetail}
element={<SettingsServerlessFunctionDetail />}
/>
</Route>
<Route
element={
packages/twenty-front/src/modules/applications/graphql/fragments/applicationFragment.ts
+24
View File
@@ -0,0 +1,24 @@
import { gql } from '@apollo/client';
import { AGENT_FRAGMENT } from '@/ai/graphql/fragments/agentFragment';
import { SERVERLESS_FUNCTION_FRAGMENT } from '@/settings/serverless-functions/graphql/fragments/serverlessFunctionFragment';
import { OBJECT_METADATA_FRAGMENT } from '@/object-metadata/graphql/fragment';
export const APPLICATION_FRAGMENT = gql`
${AGENT_FRAGMENT}
${SERVERLESS_FUNCTION_FRAGMENT}
${OBJECT_METADATA_FRAGMENT}
fragment ApplicationFields on Application {
id
name
description
agents {
...AgentFields
}
objects {
...ObjectMetadataFields
}
serverlessFunctions {
...ServerlessFunctionFields
}
}
`;
packages/twenty-front/src/modules/applications/graphql/queries/findManyApplications.ts
+11
View File
@@ -0,0 +1,11 @@
import { gql } from '@apollo/client';
export const FIND_MANY_APPLICATIONS = gql`
query FindManyApplications {
findManyApplications {
id
name
description
}
}
`;
packages/twenty-front/src/modules/applications/graphql/queries/findOneApplication.ts
+11
View File
@@ -0,0 +1,11 @@
import { gql } from '@apollo/client';
import { APPLICATION_FRAGMENT } from '../fragments/applicationFragment';
export const FIND_ONE_APPLICATION = gql`
${APPLICATION_FRAGMENT}
query FindOneApplication($id: UUID!) {
findOneApplication(id: $id) {
...ApplicationFields
}
}
`;
packages/twenty-front/src/modules/object-metadata/graphql/fragment.ts
+106
View File
@@ -0,0 +1,106 @@
import { gql } from '@apollo/client';
export const OBJECT_METADATA_FRAGMENT = gql`
fragment ObjectMetadataFields on Object {
id
nameSingular
namePlural
labelSingular
labelPlural
description
icon
isCustom
isRemote
isActive
isSystem
isUIReadOnly
createdAt
updatedAt
labelIdentifierFieldMetadataId
imageIdentifierFieldMetadataId
applicationId
shortcut
isLabelSyncedWithName
isSearchable
duplicateCriteria
indexMetadataList {
id
createdAt
updatedAt
name
indexWhereClause
indexType
isUnique
isCustom
indexFieldMetadataList {
id
fieldMetadataId
createdAt
updatedAt
order
}
}
fieldsList {
id
type
name
label
description
icon
isCustom
isActive
isSystem
isUIReadOnly
isNullable
isUnique
createdAt
updatedAt
defaultValue
options
settings
isLabelSyncedWithName
relation {
type
sourceObjectMetadata {
id
nameSingular
namePlural
}
targetObjectMetadata {
id
nameSingular
namePlural
}
sourceFieldMetadata {
id
name
}
targetFieldMetadata {
id
name
}
}
morphRelations {
type
sourceObjectMetadata {
id
nameSingular
namePlural
}
targetObjectMetadata {
id
nameSingular
namePlural
}
sourceFieldMetadata {
id
name
}
targetFieldMetadata {
id
name
}
}
}
}
`;
packages/twenty-front/src/modules/object-metadata/graphql/queries.ts
+3 -99
View File
@@ -1,109 +1,13 @@
import { gql } from '@apollo/client';
import { OBJECT_METADATA_FRAGMENT } from '@/object-metadata/graphql/fragment';
export const FIND_MANY_OBJECT_METADATA_ITEMS = gql`
${OBJECT_METADATA_FRAGMENT}
query ObjectMetadataItems {
objects(paging: { first: 1000 }) {
edges {
node {
id
nameSingular
namePlural
labelSingular
labelPlural
description
icon
isCustom
isRemote
isActive
isSystem
isUIReadOnly
createdAt
updatedAt
labelIdentifierFieldMetadataId
imageIdentifierFieldMetadataId
shortcut
isLabelSyncedWithName
isSearchable
duplicateCriteria
indexMetadataList {
id
createdAt
updatedAt
name
indexWhereClause
indexType
isUnique
isCustom
indexFieldMetadataList {
id
fieldMetadataId
createdAt
updatedAt
order
}
}
fieldsList {
id
type
name
label
description
icon
isCustom
isActive
isSystem
isUIReadOnly
isNullable
isUnique
createdAt
updatedAt
defaultValue
options
settings
isLabelSyncedWithName
relation {
type
sourceObjectMetadata {
id
nameSingular
namePlural
}
targetObjectMetadata {
id
nameSingular
namePlural
}
sourceFieldMetadata {
id
name
}
targetFieldMetadata {
id
name
}
}
morphRelations {
type
sourceObjectMetadata {
id
nameSingular
namePlural
}
targetObjectMetadata {
id
nameSingular
namePlural
}
sourceFieldMetadata {
id
name
}
targetFieldMetadata {
id
name
}
}
}
...ObjectMetadataFields
}
}
pageInfo {
packages/twenty-front/src/modules/object-record/read-only/utils/__tests__/isObjectMetadataReadOnly.test.ts
+24
View File
@@ -64,4 +64,28 @@ describe('isObjectMetadataReadOnly', () => {
expect(result).toBe(true);
});
it('should return true if object is managed by application', () => {
const result = isObjectMetadataReadOnly({
objectMetadataItem: {
applicationId: 'applicationId',
isUIReadOnly: false,
isRemote: false,
},
});
expect(result).toBe(true);
});
it('should return false if object is custom', () => {
const result = isObjectMetadataReadOnly({
objectMetadataItem: {
applicationId: undefined,
isUIReadOnly: false,
isRemote: false,
},
});
expect(result).toBe(false);
});
});
packages/twenty-front/src/modules/object-record/read-only/utils/isObjectMetadataReadOnly.ts
+11 -5
View File
@@ -1,9 +1,13 @@
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { type ObjectPermission } from '~/generated/graphql';
import { isDefined } from 'twenty-shared/utils';
type IsObjectMetadataReadOnlyParams = {
objectPermissions: ObjectPermission;
objectMetadataItem: Pick<ObjectMetadataItem, 'isUIReadOnly' | 'isRemote'>;
objectPermissions?: ObjectPermission;
objectMetadataItem?: Pick<
ObjectMetadataItem,
'isUIReadOnly' | 'isRemote' | 'applicationId'
>;
};
export const isObjectMetadataReadOnly = ({
@@ -11,8 +15,10 @@ export const isObjectMetadataReadOnly = ({
objectMetadataItem,
}: IsObjectMetadataReadOnlyParams) => {
return (
!objectPermissions.canUpdateObjectRecords ||
objectMetadataItem.isUIReadOnly ||
objectMetadataItem.isRemote
(isDefined(objectPermissions) &&
!objectPermissions.canUpdateObjectRecords) ||
objectMetadataItem?.isUIReadOnly ||
objectMetadataItem?.isRemote ||
isDefined(objectMetadataItem?.applicationId)
);
};
packages/twenty-front/src/modules/serverless-functions/types/sources.type.ts
+1
View File
@@ -0,0 +1 @@
export type Sources = { [key: string]: string | Sources };
packages/twenty-front/src/modules/serverless-functions/utils/__tests__/computeNewSources.test.ts
+146
View File
@@ -0,0 +1,146 @@
import { computeNewSources } from '@/serverless-functions/utils/computeNewSources';
describe('computeNewSources', () => {
it('should compute new code input root 0', () => {
const previousCodeInput = {
'index.ts': 'export const toto = () => {}',
};
const filePath = 'index.ts';
const value = 'export const totoUpdated = () => {}';
const expectedResult = {
'index.ts': 'export const totoUpdated = () => {}',
};
expect(
computeNewSources({ previousCode: previousCodeInput, filePath, value }),
).toEqual(expectedResult);
});
it('should compute new code input root 0 file changed', () => {
const previousCodeInput = {
'.env': 'ENV=env',
'index.ts': 'export const toto = () => {}',
};
const filePath = '.env';
const value = 'ENV=env\nENV2=env2';
const expectedResult = {
'.env': 'ENV=env\nENV2=env2',
'index.ts': 'export const toto = () => {}',
};
expect(
computeNewSources({ previousCode: previousCodeInput, filePath, value }),
).toEqual(expectedResult);
});
it('should compute new code input root 0 with multiple files', () => {
const previousCodeInput = {
'index.ts': 'export const toto = () => {}',
'.env': 'ENV',
};
const filePath = 'index.ts';
const value = 'export const totoUpdated = () => {}';
const expectedResult = {
'index.ts': 'export const totoUpdated = () => {}',
'.env': 'ENV',
};
expect(
computeNewSources({ previousCode: previousCodeInput, filePath, value }),
).toEqual(expectedResult);
});
it('should compute new code input root 1', () => {
const previousCodeInput = {
src: { 'index.ts': 'export const toto = () => {}' },
};
const filePath = 'src/index.ts';
const value = 'export const totoUpdated = () => {}';
const expectedResult = {
src: { 'index.ts': 'export const totoUpdated = () => {}' },
};
expect(
computeNewSources({ previousCode: previousCodeInput, filePath, value }),
).toEqual(expectedResult);
});
it('should compute new code input root 1 with multiple files', () => {
const previousCodeInput = {
src: {
'index.ts': 'export const toto = () => {}',
'index2.ts': 'export const toto2 = () => {}',
},
};
const filePath = 'src/index.ts';
const value = 'export const totoUpdated = () => {}';
const expectedResult = {
src: {
'index.ts': 'export const totoUpdated = () => {}',
'index2.ts': 'export const toto2 = () => {}',
},
};
expect(
computeNewSources({ previousCode: previousCodeInput, filePath, value }),
).toEqual(expectedResult);
});
it('should compute new code input root 1 with added files', () => {
const previousCodeInput = {
src: {
'index.ts': 'export const toto = () => {}',
},
};
const filePath = 'src/index2.ts';
const value = 'export const toto2 = () => {}';
const expectedResult = {
src: {
'index.ts': 'export const toto = () => {}',
'index2.ts': 'export const toto2 = () => {}',
},
};
expect(
computeNewSources({ previousCode: previousCodeInput, filePath, value }),
).toEqual(expectedResult);
});
it('should compute new code input multiple roots', () => {
const previousCodeInput = {
'.env': 'ENV=env',
src: { 'index.ts': 'export const toto = () => {}' },
};
const filePath = 'src/index.ts';
const value = 'export const totoUpdated = () => {}';
const expectedResult = {
src: { 'index.ts': 'export const totoUpdated = () => {}' },
'.env': 'ENV=env',
};
expect(
computeNewSources({ previousCode: previousCodeInput, filePath, value }),
).toEqual(expectedResult);
});
});
packages/twenty-front/src/modules/serverless-functions/utils/__tests__/flattenSources.test.ts
+58
View File
@@ -0,0 +1,58 @@
// IA Generated
import { type Sources } from '@/serverless-functions/types/sources.type';
import { flattenSources } from '@/serverless-functions/utils/flattenSources';
describe('flattenSources', () => {
it('flattens nested sources with root files', () => {
const input: Sources = {
'.env': 'KEY=VALUE',
src: {
'index.ts': 'export const a = 1',
lib: {
'util.ts': 'export const util = () => {}',
},
},
docs: {
'README.md': '# Hello',
},
};
const result = flattenSources(input);
expect(result).toEqual([
{ path: '.env', content: 'KEY=VALUE' },
{ path: 'docs/README.md', content: '# Hello' },
{ path: 'src/index.ts', content: 'export const a = 1' },
{ path: 'src/lib/util.ts', content: 'export const util = () => {}' },
]);
});
it('handles deep nesting and preserves file contents', () => {
const input: Sources = {
a: { b: { c: { d: { 'file.ts': 'content' } } } },
};
expect(flattenSources(input)).toEqual([
{ path: 'a/b/c/d/file.ts', content: 'content' },
]);
});
it('ignores empty folders and non-string leaves', () => {
const input: Sources = {
empty: {},
weird: {
oops: 42,
} as unknown as Sources,
file: 'ok',
};
const res = flattenSources(input);
expect(res).toEqual([{ path: 'file', content: 'ok' }]);
});
it('accepts a custom basePath prefix', () => {
const input: Sources = { src: { 'index.ts': 'x' } };
const res = flattenSources(input, 'pkg');
expect(res).toEqual([{ path: 'pkg/src/index.ts', content: 'x' }]);
});
});
packages/twenty-front/src/modules/serverless-functions/utils/computeNewSources.ts
+48
View File
@@ -0,0 +1,48 @@
import { type Sources } from '@/serverless-functions/types/sources.type';
export const computeNewSources = ({
previousCode,
filePath,
value,
}: {
previousCode: Sources;
filePath: string;
value: string;
}): Sources => {
const result = { ...previousCode };
const parts = filePath.split('/').filter(Boolean);
if (parts.length === 0) {
return result;
}
if (parts.length === 1) {
result[filePath] = value;
return result;
}
const [root, ...rest] = parts;
const newFilePath = rest.join('/');
if (
typeof result?.[root] === 'string' ||
typeof previousCode[root] === 'string'
) {
throw Error('Cannot compute new code input');
}
return {
...previousCode,
[root]: {
...previousCode[root],
...computeNewSources({
previousCode: result?.[root] ?? {},
filePath: newFilePath,
value,
}),
},
};
};
packages/twenty-front/src/modules/serverless-functions/utils/flattenSources.ts
+28
View File
@@ -0,0 +1,28 @@
// IA Generated
import { type Sources } from '@/serverless-functions/types/sources.type';
type FlatSource = { path: string; content: string };
export const flattenSources = (
sources: Sources,
basePath = '',
): FlatSource[] => {
const out: FlatSource[] = [];
const join = (a: string, b: string) => (a ? `${a}/${b}` : b);
const walk = (node: Sources, prefix: string) => {
for (const [name, value] of Object.entries(node)) {
if (typeof value === 'string') {
out.push({ path: join(prefix, name), content: value });
} else if (value && typeof value === 'object') {
walk(value as Sources, join(prefix, name));
}
}
};
walk(sources, basePath);
out.sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
return out;
};
packages/twenty-front/src/modules/settings/components/SettingsDatabaseEventsForm.tsx
+112
View File
@@ -0,0 +1,112 @@
import { Select } from '@/ui/input/components/Select';
import { isDefined } from 'twenty-shared/utils';
import { IconButton, type SelectOption } from 'twenty-ui/input';
import {
IconBox,
IconNorthStar,
IconPlus,
IconTrash,
useIcons,
} from 'twenty-ui/display';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
const OBJECT_DROPDOWN_WIDTH = 340;
const ACTION_DROPDOWN_WIDTH = 140;
const OBJECT_MOBILE_WIDTH = 150;
const ACTION_MOBILE_WIDTH = 140;
const StyledFilterRow = styled.div<{ isMobile: boolean }>`
display: grid;
grid-template-columns: ${({ isMobile }) =>
isMobile
? `${OBJECT_MOBILE_WIDTH}px ${ACTION_MOBILE_WIDTH}px auto`
: `${OBJECT_DROPDOWN_WIDTH}px ${ACTION_DROPDOWN_WIDTH}px auto`};
gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)};
align-items: center;
`;
const StyledPlaceholder = styled.div`
height: ${({ theme }) => theme.spacing(8)};
width: ${({ theme }) => theme.spacing(8)};
`;
export const SettingsDatabaseEventsForm = ({
events,
updateOperation,
removeOperation,
disabled = false,
}: {
events: { object: string | null; action: string }[];
updateOperation?: (
index: number,
field: 'object' | 'action',
value: string | null,
) => void;
removeOperation?: (index: number) => void;
disabled?: boolean;
}) => {
const isMobile = useIsMobile();
const { objectMetadataItems } = useObjectMetadataItems();
const { getIcon } = useIcons();
const objectOptions: SelectOption<string>[] = [
{ label: 'All Objects', value: '*', Icon: IconNorthStar },
...objectMetadataItems.map((item) => ({
label: item.labelPlural,
value: item.nameSingular,
Icon: getIcon(item.icon),
})),
];
const actionOptions: SelectOption<string>[] = [
{ label: 'All', value: '*', Icon: IconNorthStar },
{ label: 'Created', value: 'created', Icon: IconPlus },
{ label: 'Updated', value: 'updated', Icon: IconBox },
{ label: 'Deleted', value: 'deleted', Icon: IconTrash },
];
return (
<>
{events.map((operation, index) => (
<StyledFilterRow key={index} isMobile={isMobile}>
<Select
dropdownId={`object-webhook-type-select-${index}`}
value={operation.object}
options={objectOptions}
onChange={(newValue) =>
updateOperation?.(index, 'object', newValue)
}
fullWidth
emptyOption={{ label: 'Object', value: null }}
disabled={disabled}
/>
<Select
dropdownId={`operation-webhook-type-select-${index}`}
value={operation.action}
options={actionOptions}
onChange={(newValue) =>
updateOperation?.(index, 'action', newValue)
}
fullWidth
disabled={disabled}
/>
{isDefined(operation.object) && !disabled ? (
<IconButton
Icon={IconTrash}
variant="tertiary"
size="medium"
onClick={() => removeOperation?.(index)}
/>
) : (
<StyledPlaceholder />
)}
</StyledFilterRow>
))}
</>
);
};
packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx
+27
View File
@@ -0,0 +1,27 @@
import { Tag } from 'twenty-ui/components';
import { getItemTagInfo } from '@/settings/data-model/utils/getItemTagInfo';
type SettingsItemTypeTagProps = {
item: {
isCustom?: boolean;
isRemote?: boolean;
applicationId?: string | null;
};
className?: string;
};
export const SettingsItemTypeTag = ({
className,
item: { isCustom, isRemote, applicationId },
}: SettingsItemTypeTagProps) => {
const itemTagInfo = getItemTagInfo({ isCustom, isRemote, applicationId });
return (
<Tag
className={className}
color={itemTagInfo.labelColor}
text={itemTagInfo.labelText}
weight="medium"
/>
);
};
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
+1
View File
@@ -9,6 +9,7 @@ type SettingsDataModelPreviewFormCardProps = {
className?: string;
preview: ReactNode;
form?: ReactNode;
disabled?: boolean;
};
const StyledPreviewContainer = styled(CardContent)`
packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
+3
View File
@@ -18,9 +18,11 @@ export type SettingsDataModelFieldBooleanFormValues = z.infer<
type SettingsDataModelFieldBooleanFormProps = {
existingFieldMetadataId: string;
disabled?: boolean;
};
export const SettingsDataModelFieldBooleanForm = ({
disabled,
existingFieldMetadataId,
}: SettingsDataModelFieldBooleanFormProps) => {
const { t } = useLingui();
@@ -46,6 +48,7 @@ export const SettingsDataModelFieldBooleanForm = ({
onChange={onChange}
dropdownId="object-field-default-value-select-boolean"
dropdownWidth={120}
disabled={disabled}
needIconCheck={false}
options={BOOLEAN_DATA_MODEL_SELECT_OPTIONS.map((option) => ({
...option,
packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanSettingsFormCard.tsx
+3
View File
@@ -12,11 +12,13 @@ import { type SettingsDataModelFieldEditFormValues } from '~/pages/settings/data
type SettingsDataModelFieldBooleanSettingsFormCardProps = {
existingFieldMetadataId: string;
objectNameSingular: string;
disabled?: boolean;
};
export const SettingsDataModelFieldBooleanSettingsFormCard = ({
existingFieldMetadataId,
objectNameSingular,
disabled = false,
}: SettingsDataModelFieldBooleanSettingsFormCardProps) => {
const { watch } = useFormContext<
SettingsDataModelFieldBooleanFormValues &
@@ -38,6 +40,7 @@ export const SettingsDataModelFieldBooleanSettingsFormCard = ({
}
form={
<SettingsDataModelFieldBooleanForm
disabled={disabled}
existingFieldMetadataId={existingFieldMetadataId}
/>
}
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
+6 -1
View File
@@ -76,12 +76,14 @@ type SettingsDataModelFieldIconLabelFormProps = {
fieldMetadataItem?: FieldMetadataItem;
maxLength?: number;
isCreationMode?: boolean;
readonly?: boolean;
};
export const SettingsDataModelFieldIconLabelForm = ({
isCreationMode = false,
fieldMetadataItem,
maxLength,
readonly = false,
}: SettingsDataModelFieldIconLabelFormProps) => {
const {
control,
@@ -150,6 +152,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
selectedIconKey={value ?? 'IconUsers'}
onChange={({ iconKey }) => onChange(iconKey)}
variant="primary"
disabled={readonly}
/>
)}
/>
@@ -162,7 +165,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
instanceId={labelTextInputId}
placeholder={t`Employees`}
value={value}
disabled={!isLabelEditEnabled}
disabled={!isLabelEditEnabled || readonly}
onChange={(value) => {
onChange(value);
trigger('label');
@@ -199,6 +202,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
placeholder={t`employees`}
value={value}
onChange={onChange}
readOnly={readonly}
disabled={!isNameEditEnabled}
fullWidth
maxLength={DATABASE_IDENTIFIER_MAXIMUM_LENGTH}
@@ -245,6 +249,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
title={t`Synchronize Field Label and API Name`}
description={t`Should changing a field's label also change the API name?`}
checked={value ?? true}
disabled={readonly}
advancedMode
onChange={(value) => {
onChange(value);
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIsUniqueForm.tsx
+3 -1
View File
@@ -18,12 +18,14 @@ type SettingsDataModelFieldIsUniqueFormProps = {
objectNameSingular: string;
fieldType: FieldMetadataType;
existingFieldMetadataId: string;
disabled?: boolean;
};
export const SettingsDataModelFieldIsUniqueForm = ({
fieldType,
existingFieldMetadataId,
objectNameSingular,
disabled = false,
}: SettingsDataModelFieldIsUniqueFormProps) => {
const { control } =
useFormContext<SettingsDataModelFieldIsUniqueFormValues>();
@@ -74,7 +76,7 @@ export const SettingsDataModelFieldIsUniqueForm = ({
toggleSize="small"
value={isUnique}
onChange={(value) => onChange(value)}
disabled={hasStandardUniqueIndex}
disabled={disabled || hasStandardUniqueIndex}
/>
</SettingsOptionCardContentSelect>
</>
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
+14
View File
@@ -160,6 +160,7 @@ type SettingsDataModelFieldSettingsFormCardProps = {
existingFieldMetadataId: string;
fieldType: FieldMetadataType;
objectNameSingular: string;
disabled?: boolean;
};
const previewableTypes = [
@@ -188,6 +189,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
existingFieldMetadataId,
fieldType,
objectNameSingular,
disabled = false,
}: SettingsDataModelFieldSettingsFormCardProps) => {
const { watch } = useFormContext<SettingsDataModelFieldEditFormValues>();
@@ -200,6 +202,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldBooleanSettingsFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -209,6 +212,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldCurrencySettingsFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -222,6 +226,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
existingFieldMetadataId={existingFieldMetadataId}
fieldType={fieldType}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -231,6 +236,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldRelationSettingsFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -240,6 +246,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldMorphRelationFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -249,6 +256,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldNumberSettingsFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -258,6 +266,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldTextSettingsFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -267,6 +276,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldAddressSettingsFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -276,6 +286,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldPhonesSettingsFormCard
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -289,6 +300,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
existingFieldMetadataId={existingFieldMetadataId}
fieldType={fieldType}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
);
}
@@ -318,6 +330,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
<SettingsDataModelFieldMaxValuesForm
existingFieldMetadataId={existingFieldMetadataId}
fieldType={fieldType}
disabled={disabled}
/>
<Separator />
</>
@@ -326,6 +339,7 @@ export const SettingsDataModelFieldSettingsFormCard = ({
fieldType={fieldType}
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
</>
}
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextSettingsFormCard.tsx
+1
View File
@@ -42,6 +42,7 @@ export const SettingsDataModelFieldTextSettingsFormCard = ({
fieldType={FieldMetadataType.TEXT}
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
</>
}
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateSettingsFormCard.tsx
+1
View File
@@ -55,6 +55,7 @@ export const SettingsDataModelFieldDateSettingsFormCard = ({
fieldType={fieldType}
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
</>
}
packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldMorphRelationForm.tsx
+3 -1
View File
@@ -39,10 +39,12 @@ export type SettingsDataModelFieldMorphRelationFormValues = z.infer<
type SettingsDataModelFieldMorphRelationFormProps = {
existingFieldMetadataId: string;
disabled?: boolean;
};
export const SettingsDataModelFieldMorphRelationForm = ({
existingFieldMetadataId,
disabled = false,
}: SettingsDataModelFieldMorphRelationFormProps) => {
const { t } = useLingui();
const { control } =
@@ -90,7 +92,7 @@ export const SettingsDataModelFieldMorphRelationForm = ({
label={t`Relation type`}
dropdownId="relation-type-select"
fullWidth
disabled={disableRelationEdition}
disabled={disabled || disableRelationEdition}
value={value}
options={RELATION_TYPE_OPTIONS}
onChange={onChange}
packages/twenty-front/src/modules/settings/data-model/fields/forms/morph-relation/components/SettingsDataModelFieldMorphRelationFormCard.tsx
+3
View File
@@ -18,11 +18,13 @@ import { type SettingsDataModelFieldEditFormValues } from '~/pages/settings/data
type SettingsDataModelFieldMorphRelationFormCardProps = {
existingFieldMetadataId: string;
objectNameSingular: string;
disabled?: boolean;
};
export const SettingsDataModelFieldMorphRelationFormCard = ({
existingFieldMetadataId,
objectNameSingular,
disabled = false,
}: SettingsDataModelFieldMorphRelationFormCardProps) => {
const { watch } = useFormContext<
SettingsDataModelFieldMorphRelationFormValues &
@@ -107,6 +109,7 @@ export const SettingsDataModelFieldMorphRelationFormCard = ({
form={
<SettingsDataModelFieldMorphRelationForm
existingFieldMetadataId={existingFieldMetadataId}
disabled={disabled}
/>
}
/>
packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberSettingsFormCard.tsx
+1
View File
@@ -42,6 +42,7 @@ export const SettingsDataModelFieldNumberSettingsFormCard = ({
fieldType={FieldMetadataType.NUMBER}
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
</>
}
packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesSettingsFormCard.tsx
+1
View File
@@ -58,6 +58,7 @@ export const SettingsDataModelFieldPhonesSettingsFormCard = ({
fieldType={FieldMetadataType.PHONES}
existingFieldMetadataId={existingFieldMetadataId}
objectNameSingular={objectNameSingular}
disabled={disabled}
/>
</>
}
packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
+6 -4
View File
@@ -47,6 +47,7 @@ export type SettingsDataModelFieldRelationFormValues = z.infer<
type SettingsDataModelFieldRelationFormProps = {
existingFieldMetadataId: string;
objectMetadataItem?: ObjectMetadataItem;
disabled?: boolean;
};
export const StyledContainer = styled.div`
@@ -84,6 +85,7 @@ export const RELATION_TYPE_OPTIONS = Object.entries(RELATION_TYPES).map(
export const SettingsDataModelFieldRelationForm = ({
existingFieldMetadataId,
objectMetadataItem,
disabled,
}: SettingsDataModelFieldRelationFormProps) => {
const { t } = useLingui();
const { control, watch: watchFormValue } =
@@ -129,7 +131,7 @@ export const SettingsDataModelFieldRelationForm = ({
label={t`Relation type`}
dropdownId="relation-type-select"
fullWidth
disabled={disableRelationEdition}
disabled={disabled || disableRelationEdition}
value={value}
options={RELATION_TYPE_OPTIONS}
onChange={onChange}
@@ -145,7 +147,7 @@ export const SettingsDataModelFieldRelationForm = ({
label={t`Object destination`}
dropdownId="object-destination-select"
fullWidth
disabled={disableRelationEdition}
disabled={disabled || disableRelationEdition}
value={value}
options={activeObjectMetadataItems
.filter(isObjectMetadataAvailableForRelation)
@@ -175,7 +177,7 @@ export const SettingsDataModelFieldRelationForm = ({
defaultValue={initialRelationFieldMetadataItem.icon}
render={({ field: { onChange, value } }) => (
<IconPicker
disabled={disableFieldEdition}
disabled={disabled || disableFieldEdition}
dropdownId="field-destination-icon-picker"
selectedIconKey={value ?? undefined}
onChange={({ iconKey }) => onChange(iconKey)}
@@ -190,7 +192,7 @@ export const SettingsDataModelFieldRelationForm = ({
render={({ field: { onChange, value } }) => (
<SettingsTextInput
instanceId="relation-field-label"
disabled={disableFieldEdition}
disabled={disabled || disableFieldEdition}
placeholder={t`Field name`}
value={value}
onChange={onChange}
packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
+3
View File
@@ -18,11 +18,13 @@ import { type SettingsDataModelFieldEditFormValues } from '~/pages/settings/data
type SettingsDataModelFieldRelationSettingsFormCardProps = {
existingFieldMetadataId: string;
objectNameSingular: string;
disabled?: boolean;
};
export const SettingsDataModelFieldRelationSettingsFormCard = ({
existingFieldMetadataId,
objectNameSingular,
disabled = false,
}: SettingsDataModelFieldRelationSettingsFormCardProps) => {
const { watch } = useFormContext<
SettingsDataModelFieldRelationFormValues &
@@ -95,6 +97,7 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
<SettingsDataModelFieldRelationForm
existingFieldMetadataId={existingFieldMetadataId}
objectMetadataItem={relationObjectMetadataItem}
disabled={disabled}
/>
}
/>
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
+40 -15
View File
@@ -48,6 +48,7 @@ export type SettingsDataModelFieldSelectFormValues = z.infer<
type SettingsDataModelFieldSelectFormProps = {
fieldType: FieldMetadataType.SELECT | FieldMetadataType.MULTI_SELECT;
existingFieldMetadataId: string;
disabled?: boolean;
};
const StyledContainer = styled(CardContent)`
@@ -112,6 +113,7 @@ const StyledButton = styled(LightButton)`
export const SettingsDataModelFieldSelectForm = ({
existingFieldMetadataId,
fieldType,
disabled = false,
}: SettingsDataModelFieldSelectFormProps) => {
const { initialDefaultValue, initialOptions } =
useSelectSettingsFormInitialValues({
@@ -281,7 +283,11 @@ export const SettingsDataModelFieldSelectForm = ({
</StyledOptionsLabel>
</StyledLabelContainer>
<DraggableList
onDragEnd={(result) => handleDragEnd(options, result, onChange)}
onDragEnd={(result) =>
!disabled
? handleDragEnd(options, result, onChange)
: undefined
}
draggableItems={
<>
{options.map((option, index) => (
@@ -297,6 +303,9 @@ export const SettingsDataModelFieldSelectForm = ({
option={option}
isNewRow={index === options.length - 1}
onChange={(nextOption) => {
if (disabled) {
return;
}
const nextOptions = toSpliced(
options,
index,
@@ -315,6 +324,9 @@ export const SettingsDataModelFieldSelectForm = ({
}
}}
onRemove={() => {
if (disabled) {
return;
}
const nextOptions = toSpliced(
options,
index,
@@ -326,13 +338,24 @@ export const SettingsDataModelFieldSelectForm = ({
onChange(nextOptions);
}}
isDefault={isOptionDefaultValue(option.value)}
onSetAsDefault={() =>
handleSetOptionAsDefault(option.value)
}
onRemoveAsDefault={() =>
handleRemoveOptionAsDefault(option.value)
}
onInputEnter={handleInputEnter}
onSetAsDefault={() => {
if (disabled) {
return;
}
handleSetOptionAsDefault(option.value);
}}
onRemoveAsDefault={() => {
if (disabled) {
return;
}
handleRemoveOptionAsDefault(option.value);
}}
onInputEnter={() => {
if (disabled) {
return;
}
handleInputEnter();
}}
/>
}
/>
@@ -341,13 +364,15 @@ export const SettingsDataModelFieldSelectForm = ({
}
/>
</StyledContainer>
<StyledFooter>
<StyledButton
title={t`Add option`}
Icon={IconPlus}
onClick={handleAddOption}
/>
</StyledFooter>
{!disabled && (
<StyledFooter>
<StyledButton
title={t`Add option`}
Icon={IconPlus}
onClick={handleAddOption}
/>
</StyledFooter>
)}
</>
)}
/>
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectSettingsFormCard.tsx
+3
View File
@@ -20,12 +20,14 @@ type SettingsDataModelFieldSelectSettingsFormCardProps = {
objectNameSingular: string;
fieldType: FieldMetadataType.SELECT | FieldMetadataType.MULTI_SELECT;
existingFieldMetadataId: string;
disabled?: boolean;
};
export const SettingsDataModelFieldSelectSettingsFormCard = ({
objectNameSingular,
fieldType,
existingFieldMetadataId,
disabled = false,
}: SettingsDataModelFieldSelectSettingsFormCardProps) => {
const { watch: watchFormValue } = useFormContext<
SettingsDataModelFieldSelectOrMultiSelectFormValues &
@@ -50,6 +52,7 @@ export const SettingsDataModelFieldSelectSettingsFormCard = ({
<SettingsDataModelFieldSelectForm
fieldType={fieldType}
existingFieldMetadataId={existingFieldMetadataId}
disabled={disabled}
/>
}
/>
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
+2 -5
View File
@@ -6,8 +6,6 @@ import { Link } from 'react-router-dom';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { ObjectFieldRow } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewField';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { ObjectFieldRowWithoutRelation } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation';
@@ -16,6 +14,7 @@ import { useState } from 'react';
import { SettingsPath } from 'twenty-shared/types';
import { getSettingsPath } from 'twenty-shared/utils';
import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui/display';
import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
type SettingsDataModelOverviewObjectNode = Node<ObjectMetadataItem, 'object'>;
type SettingsDataModelOverviewObjectProps =
@@ -134,9 +133,7 @@ export const SettingsDataModelOverviewObject = ({
</StyledObjectLink>
<StyledObjectInstanceCount> · {totalCount}</StyledObjectInstanceCount>
</StyledObjectName>
<SettingsDataModelObjectTypeTag
objectTypeLabel={getObjectTypeLabel(objectMetadataItem)}
></SettingsDataModelObjectTypeTag>
<SettingsItemTypeTag item={objectMetadataItem} />
</StyledHeader>
<StyledInnerCard>
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
+5 -3
View File
@@ -20,10 +20,12 @@ type SettingsObjectFieldActiveActionDropdownProps = {
onEdit: () => void;
onSetAsLabelIdentifier?: () => void;
fieldMetadataItemId: string;
readonly?: boolean;
};
export const SettingsObjectFieldActiveActionDropdown = ({
isCustomField,
readonly = false,
onDeactivate,
onEdit,
onSetAsLabelIdentifier,
@@ -62,18 +64,18 @@ export const SettingsObjectFieldActiveActionDropdown = ({
<DropdownContent widthInPixels={GenericDropdownContentWidth.Narrow}>
<DropdownMenuItemsContainer>
<MenuItem
text={isCustomField ? 'Edit' : 'View'}
text={isCustomField && !readonly ? 'Edit' : 'View'}
LeftIcon={isCustomField ? IconPencil : IconEye}
onClick={handleEdit}
/>
{isDefined(onSetAsLabelIdentifier) && (
{isDefined(onSetAsLabelIdentifier) && !readonly && (
<MenuItem
text="Set as record text"
LeftIcon={IconTextSize}
onClick={handleSetAsLabelIdentifier}
/>
)}
{isDefined(onDeactivate) && (
{isDefined(onDeactivate) && !readonly && (
<MenuItem
text="Deactivate"
LeftIcon={IconArchive}
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
+11 -7
View File
@@ -22,10 +22,12 @@ type SettingsObjectFieldInactiveActionDropdownProps = {
onEdit: () => void;
onDelete: () => void;
fieldMetadataItemId: string;
readonly?: boolean;
};
export const SettingsObjectFieldInactiveActionDropdown = ({
onActivate,
readonly = false,
fieldMetadataItemId,
onDelete,
onEdit,
@@ -66,16 +68,18 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
<DropdownContent widthInPixels={GenericDropdownContentWidth.Narrow}>
<DropdownMenuItemsContainer>
<MenuItem
text={isCustomField ? t`Edit` : t`View`}
text={isCustomField && !readonly ? t`Edit` : t`View`}
LeftIcon={isCustomField ? IconPencil : IconEye}
onClick={handleEdit}
/>
<MenuItem
text={t`Activate`}
LeftIcon={IconArchiveOff}
onClick={handleActivate}
/>
{isDeletable && (
{!readonly && (
<MenuItem
text={t`Activate`}
LeftIcon={IconArchiveOff}
onClick={handleActivate}
/>
)}
{isDeletable && !readonly && (
<MenuItem
text={t`Delete`}
accent="danger"
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+16 -1
View File
@@ -30,6 +30,7 @@ import { type SettingsObjectDetailTableItem } from '~/pages/settings/data-model/
import { RELATION_TYPES } from '../../constants/RelationTypes';
import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
type SettingsObjectFieldItemTableRowProps = {
settingsObjectDetailTableItem: SettingsObjectDetailTableItem;
@@ -65,6 +66,10 @@ export const SettingsObjectFieldItemTableRow = ({
const { fieldMetadataItem, identifierType, objectMetadataItem } =
settingsObjectDetailTableItem;
const readonly = isObjectMetadataReadOnly({
objectMetadataItem,
});
const isRemoteObjectField = objectMetadataItem.isRemote;
const variant = objectMetadataItem.isCustom ? 'identifier' : 'field-type';
@@ -118,6 +123,10 @@ export const SettingsObjectFieldItemTableRow = ({
const handleDisableField = async (
activeFieldMetadatItem: FieldMetadataItem,
) => {
if (readonly) {
return;
}
await deactivateMetadataField(
activeFieldMetadatItem.id,
objectMetadataItem.id,
@@ -146,13 +155,17 @@ export const SettingsObjectFieldItemTableRow = ({
const handleSetLabelIdentifierField = (
activeFieldMetadatItem: FieldMetadataItem,
) =>
) => {
if (readonly) {
return;
}
updateOneObjectMetadataItem({
idToUpdate: objectMetadataItem.id,
updatePayload: {
labelIdentifierFieldMetadataId: activeFieldMetadatItem.id,
},
});
};
const [, setActiveSettingsObjectFields] = useRecoilState(
settingsObjectFieldsFamilyState({
@@ -254,6 +267,7 @@ export const SettingsObjectFieldItemTableRow = ({
mode === 'view' ? (
<SettingsObjectFieldActiveActionDropdown
isCustomField={fieldMetadataItem.isCustom === true}
readonly={readonly}
fieldMetadataItemId={fieldMetadataItem.id}
onEdit={() =>
navigate(SettingsPath.ObjectFieldEdit, {
@@ -284,6 +298,7 @@ export const SettingsObjectFieldItemTableRow = ({
) : mode === 'view' ? (
<SettingsObjectFieldInactiveActionDropdown
isCustomField={fieldMetadataItem.isCustom === true}
readonly={readonly}
fieldMetadataItemId={fieldMetadataItem.id}
onEdit={() =>
navigate(SettingsPath.ObjectFieldEdit, {
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
+2 -4
View File
@@ -3,11 +3,10 @@ import styled from '@emotion/styled';
import { type ReactNode } from 'react';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { useIcons } from 'twenty-ui/display';
import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
export type SettingsObjectMetadataItemTableRowProps = {
action: ReactNode;
@@ -46,7 +45,6 @@ export const SettingsObjectMetadataItemTableRow = ({
const { getIcon } = useIcons();
const Icon = getIcon(objectMetadataItem.icon);
const objectTypeLabel = getObjectTypeLabel(objectMetadataItem);
return (
<StyledObjectTableRow key={objectMetadataItem.namePlural} to={link}>
@@ -63,7 +61,7 @@ export const SettingsObjectMetadataItemTableRow = ({
</StyledNameLabel>
</StyledNameTableCell>
<TableCell>
<SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
<SettingsItemTypeTag item={objectMetadataItem} />
</TableCell>
<TableCell align="right">
{objectMetadataItem.fields.filter((field) => !field.isSystem).length}
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsUpdateDataModelObjectAboutForm.tsx
+15 -5
View File
@@ -14,6 +14,7 @@ import { SettingsPath } from 'twenty-shared/types';
import { ZodError } from 'zod';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
type SettingsUpdateDataModelObjectAboutFormProps = {
objectMetadataItem: ObjectMetadataItem;
@@ -22,6 +23,7 @@ type SettingsUpdateDataModelObjectAboutFormProps = {
export const SettingsUpdateDataModelObjectAboutForm = ({
objectMetadataItem,
}: SettingsUpdateDataModelObjectAboutFormProps) => {
const readonly = isObjectMetadataReadOnly({ objectMetadataItem });
const navigate = useNavigateSettings();
const { enqueueErrorSnackBar } = useSnackBar();
const setUpdatedObjectNamePlural = useSetRecoilState(
@@ -54,6 +56,10 @@ export const SettingsUpdateDataModelObjectAboutForm = ({
const handleSave = async (
formValues: SettingsDataModelObjectAboutFormValues,
) => {
if (readonly) {
return;
}
if (!(Object.keys(formConfig.formState.dirtyFields).length > 0)) {
return;
}
@@ -71,10 +77,10 @@ export const SettingsUpdateDataModelObjectAboutForm = ({
description,
icon: icon ?? undefined,
isLabelSyncedWithName: formValues.isLabelSyncedWithName,
labelPlural: updatedObject.data?.updateOneObject.labelPlural,
labelSingular: updatedObject.data?.updateOneObject.labelSingular,
namePlural: updatedObject.data?.updateOneObject.namePlural,
nameSingular: updatedObject.data?.updateOneObject.nameSingular,
labelPlural: updatedObject?.data?.updateOneObject.labelPlural,
labelSingular: updatedObject?.data?.updateOneObject.labelSingular,
namePlural: updatedObject?.data?.updateOneObject.namePlural,
nameSingular: updatedObject?.data?.updateOneObject.nameSingular,
});
} else {
formConfig.reset(undefined, { keepValues: true });
@@ -91,6 +97,10 @@ export const SettingsUpdateDataModelObjectAboutForm = ({
const updateObjectMetadata = async (
formValues: SettingsDataModelObjectAboutFormValues,
) => {
if (readonly) {
return;
}
const updatePayload = { ...formValues };
if (!objectMetadataItem.isCustom) {
@@ -139,7 +149,7 @@ export const SettingsUpdateDataModelObjectAboutForm = ({
<FormProvider {...formConfig}>
<SettingsDataModelObjectAboutForm
onNewDirtyField={() => formConfig.handleSubmit(handleSave)()}
disableEdition={!objectMetadataItem.isCustom}
disableEdition={!objectMetadataItem.isCustom || readonly}
objectMetadataItem={objectMetadataItem}
/>
</FormProvider>
packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectFields.tsx
+5 -2
View File
@@ -9,6 +9,7 @@ import { H2Title, IconPlus } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { UndecoratedLink } from 'twenty-ui/navigation';
import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
const StyledDiv = styled.div`
display: flex;
@@ -21,7 +22,9 @@ type ObjectFieldsProps = {
};
export const ObjectFields = ({ objectMetadataItem }: ObjectFieldsProps) => {
const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;
const readonly = isObjectMetadataReadOnly({
objectMetadataItem,
});
const { t } = useLingui();
const objectLabelSingular = objectMetadataItem.labelSingular;
@@ -36,7 +39,7 @@ export const ObjectFields = ({ objectMetadataItem }: ObjectFieldsProps) => {
objectMetadataItem={objectMetadataItem}
mode="view"
/>
{shouldDisplayAddFieldButton && (
{!readonly && (
<StyledDiv>
<UndecoratedLink
to={getSettingsPath(SettingsPath.ObjectNewFieldSelect, {
packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
+18 -11
View File
@@ -10,6 +10,7 @@ import { H2Title, IconArchive } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
type ObjectSettingsProps = {
objectMetadataItem: ObjectMetadataItem;
@@ -27,6 +28,7 @@ const StyledFormSection = styled(Section)`
export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
const { t } = useLingui();
const readonly = isObjectMetadataReadOnly({ objectMetadataItem });
const navigate = useNavigateSettings();
const { updateOneObjectMetadataItem } = useUpdateOneObjectMetadataItem();
const handleDisable = async () => {
@@ -59,17 +61,22 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
/>
</Section>
</StyledFormSection>
<StyledFormSection>
<Section>
<H2Title title={t`Danger zone`} description={t`Deactivate object`} />
<Button
Icon={IconArchive}
title={t`Deactivate`}
size="small"
onClick={handleDisable}
/>
</Section>
</StyledFormSection>
{!readonly && (
<StyledFormSection>
<Section>
<H2Title
title={t`Danger zone`}
description={t`Deactivate object`}
/>
<Button
Icon={IconArchive}
title={t`Deactivate`}
size="small"
onClick={handleDisable}
/>
</Section>
</StyledFormSection>
)}
</StyledContentContainer>
);
};
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx
+2 -4
View File
@@ -2,13 +2,12 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import {
IconBox,
OverflowingTextWithTooltip,
useIcons,
} from 'twenty-ui/display';
import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
export type SettingsDataModelObjectPreviewProps = {
className?: string;
@@ -69,7 +68,6 @@ const SettingsDataModelObjectPreviewItem = ({
const theme = useTheme();
const { getIcon } = useIcons();
const ObjectIcon = getIcon(objectMetadataItem.icon);
const objectTypeLabel = getObjectTypeLabel(objectMetadataItem);
return (
<>
@@ -90,7 +88,7 @@ const SettingsDataModelObjectPreviewItem = ({
}
/>
</StyledObjectName>
<SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
<SettingsItemTypeTag item={objectMetadataItem} />
</StyledObjectPreview>
</>
);
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectTypeTag.tsx
-21
View File
@@ -1,21 +0,0 @@
import { type ObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { Tag } from 'twenty-ui/components';
type SettingsDataModelObjectTypeTagProps = {
objectTypeLabel: ObjectTypeLabel;
className?: string;
};
export const SettingsDataModelObjectTypeTag = ({
className,
objectTypeLabel,
}: SettingsDataModelObjectTypeTagProps) => {
return (
<Tag
className={className}
color={objectTypeLabel.labelColor}
text={objectTypeLabel.labelText}
weight="medium"
/>
);
};
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+14 -6
View File
@@ -139,7 +139,11 @@ export const SettingsDataModelObjectAboutForm = ({
render={({ field: { onChange, value } }) => (
<IconPicker
selectedIconKey={value}
disabled={disableEdition}
onChange={({ iconKey }) => {
if (disableEdition) {
return;
}
onChange(iconKey);
onNewDirtyField?.();
}}
@@ -170,9 +174,10 @@ export const SettingsDataModelObjectAboutForm = ({
}}
onBlur={() => onNewDirtyField?.()}
disabled={
objectMetadataItem &&
!objectMetadataItem?.isCustom &&
isLabelSyncedWithName
disableEdition ||
(objectMetadataItem &&
!objectMetadataItem?.isCustom &&
isLabelSyncedWithName)
}
fullWidth
maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
@@ -201,9 +206,10 @@ export const SettingsDataModelObjectAboutForm = ({
}}
onBlur={() => onNewDirtyField?.()}
disabled={
objectMetadataItem &&
!objectMetadataItem?.isCustom &&
isLabelSyncedWithName
disableEdition ||
(objectMetadataItem &&
!objectMetadataItem?.isCustom &&
isLabelSyncedWithName)
}
fullWidth
maxLength={OBJECT_NAME_MAXIMUM_LENGTH}
@@ -222,6 +228,7 @@ export const SettingsDataModelObjectAboutForm = ({
value={value ?? undefined}
onChange={(nextValue) => onChange(nextValue ?? null)}
onBlur={() => onNewDirtyField?.()}
disabled={disableEdition}
/>
)}
/>
@@ -326,6 +333,7 @@ export const SettingsDataModelObjectAboutForm = ({
description={t`Should changing an object's label also change the API?`}
checked={value ?? true}
advancedMode
disabled={disableEdition}
onChange={(value) => {
onChange(value);
const isCustomObject =
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
+3 -1
View File
@@ -16,6 +16,7 @@ import { useNavigate } from 'react-router-dom';
import { isLabelIdentifierFieldMetadataTypes } from 'twenty-shared/utils';
import { IconCircleOff, IconPlus, useIcons } from 'twenty-ui/display';
import { type SelectOption } from 'twenty-ui/input';
import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
export const settingsDataModelObjectIdentifiersFormSchema =
objectMetadataItemSchema.pick({
@@ -44,6 +45,7 @@ const StyledContainer = styled.div`
export const SettingsDataModelObjectIdentifiersForm = ({
objectMetadataItem,
}: SettingsDataModelObjectIdentifiersFormProps) => {
const readonly = isObjectMetadataReadOnly({ objectMetadataItem });
const formConfig = useForm<SettingsDataModelObjectIdentifiersFormValues>({
mode: 'onTouched',
resolver: zodResolver(settingsDataModelObjectIdentifiersFormSchema),
@@ -134,7 +136,7 @@ export const SettingsDataModelObjectIdentifiersForm = ({
options={options}
value={value}
withSearchInput={label === t`Record label`}
disabled={!objectMetadataItem.isCustom}
disabled={!objectMetadataItem.isCustom || readonly}
callToActionButton={
label === t`Record label`
? {
packages/twenty-front/src/modules/settings/data-model/utils/getItemTagInfo.ts
+51
View File
@@ -0,0 +1,51 @@
import { isDefined } from 'twenty-shared/utils';
export type ItemTagInfo =
| StandardItemTagInfo
| CustomItemTagInfo
| RemoteItemTagInfo
| ManagedItemTagInfo;
type StandardItemTagInfo = {
labelText: 'Standard';
labelColor: 'blue';
};
type CustomItemTagInfo = {
labelText: 'Custom';
labelColor: 'orange';
};
type RemoteItemTagInfo = {
labelText: 'Remote';
labelColor: 'green';
};
type ManagedItemTagInfo = {
labelText: 'Managed';
labelColor: 'sky';
};
export const getItemTagInfo = ({
isCustom,
isRemote,
applicationId,
}: {
isCustom?: boolean;
isRemote?: boolean;
applicationId?: string | null;
}): ItemTagInfo => {
if (isDefined(applicationId)) {
return { labelText: 'Managed', labelColor: 'sky' };
}
if (isCustom!!) {
return { labelText: 'Custom', labelColor: 'orange' };
}
if (isRemote!!) {
return { labelText: 'Remote', labelColor: 'green' };
}
return { labelText: 'Standard', labelColor: 'blue' };
};
packages/twenty-front/src/modules/settings/data-model/utils/getObjectTypeLabel.ts
-39
View File
@@ -1,39 +0,0 @@
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
export type ObjectTypeLabel =
| StandardObjectTypeLabel
| CustomObjectTypeLabel
| RemoteObjectTypeLabel;
type StandardObjectTypeLabel = {
labelText: 'Standard';
labelColor: 'blue';
};
type CustomObjectTypeLabel = {
labelText: 'Custom';
labelColor: 'orange';
};
type RemoteObjectTypeLabel = {
labelText: 'Remote';
labelColor: 'green';
};
export const getObjectTypeLabel = (
objectMetadataItem: Pick<ObjectMetadataItem, 'isCustom' | 'isRemote'>,
): ObjectTypeLabel =>
objectMetadataItem.isCustom
? {
labelText: 'Custom',
labelColor: 'orange',
}
: objectMetadataItem.isRemote
? {
labelText: 'Remote',
labelColor: 'green',
}
: {
labelText: 'Standard',
labelColor: 'blue',
};
packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
+8 -88
View File
@@ -1,19 +1,15 @@
import { Controller, FormProvider } from 'react-hook-form';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
import { type WebhookFormMode } from '@/settings/developers/constants/WebhookFormMode';
import { useWebhookForm } from '@/settings/developers/hooks/useWebhookForm';
import { Select } from '@/ui/input/components/Select';
import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import { TextArea } from '@/ui/input/components/TextArea';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import { Trans, useLingui } from '@lingui/react/macro';
import { SettingsPath } from 'twenty-shared/types';
import {
@@ -22,38 +18,11 @@ import {
isDefined,
isValidUrl,
} from 'twenty-shared/utils';
import {
H2Title,
IconBox,
IconNorthStar,
IconPlus,
IconTrash,
useIcons,
} from 'twenty-ui/display';
import { Button, IconButton, type SelectOption } from 'twenty-ui/input';
import { H2Title, IconTrash } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
const OBJECT_DROPDOWN_WIDTH = 340;
const ACTION_DROPDOWN_WIDTH = 140;
const OBJECT_MOBILE_WIDTH = 150;
const ACTION_MOBILE_WIDTH = 140;
const StyledFilterRow = styled.div<{ isMobile: boolean }>`
display: grid;
grid-template-columns: ${({ isMobile }) =>
isMobile
? `${OBJECT_MOBILE_WIDTH}px ${ACTION_MOBILE_WIDTH}px auto`
: `${OBJECT_DROPDOWN_WIDTH}px ${ACTION_DROPDOWN_WIDTH}px auto`};
gap: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)};
align-items: center;
`;
const StyledPlaceholder = styled.div`
height: ${({ theme }) => theme.spacing(8)};
width: ${({ theme }) => theme.spacing(8)};
`;
import { SettingsDatabaseEventsForm } from '@/settings/components/SettingsDatabaseEventsForm';
const DELETE_WEBHOOK_MODAL_ID = 'delete-webhook-modal';
@@ -68,9 +37,6 @@ export const SettingsDevelopersWebhookForm = ({
}: SettingsDevelopersWebhookFormProps) => {
const { t } = useLingui();
const navigate = useNavigateSettings();
const { objectMetadataItems } = useObjectMetadataItems();
const isMobile = useIsMobile();
const { getIcon } = useIcons();
const { openModal } = useModal();
const {
formConfig,
@@ -99,22 +65,6 @@ export const SettingsDevelopersWebhookForm = ({
return <SettingsSkeletonLoader />;
}
const objectOptions: SelectOption<string>[] = [
{ label: 'All Objects', value: '*', Icon: IconNorthStar },
...objectMetadataItems.map((item) => ({
label: item.labelPlural,
value: item.nameSingular,
Icon: getIcon(item.icon),
})),
];
const actionOptions: SelectOption<string>[] = [
{ label: 'All', value: '*', Icon: IconNorthStar },
{ label: 'Created', value: 'created', Icon: IconPlus },
{ label: 'Updated', value: 'updated', Icon: IconBox },
{ label: 'Deleted', value: 'deleted', Icon: IconTrash },
];
const descriptionTextAreaId = `${webhookId}-description`;
const targetUrlTextInputId = `${webhookId}-target-url`;
const secretTextInputId = `${webhookId}-secret`;
@@ -200,41 +150,11 @@ export const SettingsDevelopersWebhookForm = ({
name="operations"
control={formConfig.control}
render={({ field: { value } }) => (
<>
{value.map((operation, index) => (
<StyledFilterRow key={index} isMobile={isMobile}>
<Select
dropdownId={`object-webhook-type-select-${index}`}
value={operation.object}
options={objectOptions}
onChange={(newValue) =>
updateOperation(index, 'object', newValue)
}
fullWidth
emptyOption={{ label: 'Object', value: null }}
/>
<Select
dropdownId={`operation-webhook-type-select-${index}`}
value={operation.action}
options={actionOptions}
onChange={(newValue) =>
updateOperation(index, 'action', newValue)
}
fullWidth
/>
{isDefined(operation.object) ? (
<IconButton
Icon={IconTrash}
variant="tertiary"
size="medium"
onClick={() => removeOperation(index)}
/>
) : (
<StyledPlaceholder />
)}
</StyledFilterRow>
))}
</>
<SettingsDatabaseEventsForm
events={value}
updateOperation={updateOperation}
removeOperation={removeOperation}
/>
)}
/>
</Section>
packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
+13 -9
View File
@@ -17,7 +17,6 @@ import {
type IconComponent,
IconCurrencyDollar,
IconDoorEnter,
IconFunction,
IconHierarchy2,
IconKey,
IconLock,
@@ -26,6 +25,7 @@ import {
IconServer,
IconSettings,
IconSparkles,
IconPuzzle2,
IconUserCircle,
IconUsers,
IconWorld,
@@ -56,13 +56,15 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
const billing = useRecoilValue(billingState);
const { signOut } = useAuth();
const isFunctionSettingsEnabled = false;
const isBillingEnabled = billing?.isBillingEnabled ?? false;
const currentUser = useRecoilValue(currentUserState);
const isAdminEnabled =
(currentUser?.canImpersonate || currentUser?.canAccessFullAdminPanel) ??
false;
const isAIEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);
const isApplicationEnabled = useIsFeatureEnabled(
FeatureFlagKey.IS_APPLICATION_ENABLED,
);
const permissionMap = usePermissionFlagMap();
return [
@@ -152,6 +154,15 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
Icon: IconApps,
isHidden: !permissionMap[PermissionFlagType.API_KEYS_AND_WEBHOOKS],
},
{
label: t`Applications`,
path: SettingsPath.Applications,
Icon: IconPuzzle2,
isHidden:
!isApplicationEnabled ||
!permissionMap[PermissionFlagType.WORKSPACE],
isNew: true,
},
{
label: t`AI`,
path: SettingsPath.AI,
@@ -160,13 +171,6 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
!isAIEnabled || !permissionMap[PermissionFlagType.WORKSPACE],
isNew: true,
},
{
label: t`Functions`,
path: SettingsPath.ServerlessFunctions,
Icon: IconFunction,
isHidden: !isFunctionSettingsEnabled,
isAdvanced: true,
},
{
label: t`Security`,
path: SettingsPath.Security,
packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx
+1 -14
View File
@@ -1,7 +1,7 @@
import { useGetAvailablePackages } from '@/settings/serverless-functions/hooks/useGetAvailablePackages';
import { type EditorProps, type Monaco } from '@monaco-editor/react';
import dotenv from 'dotenv';
import { type editor, MarkerSeverity } from 'monaco-editor';
import { type editor } from 'monaco-editor';
import { AutoTypings } from 'monaco-editor-auto-typings';
import { useParams } from 'react-router-dom';
import { isDefined } from 'twenty-shared/utils';
@@ -20,14 +20,12 @@ type SettingsServerlessFunctionCodeEditorProps = Omit<
currentFilePath: string;
files: File[];
onChange: (value: string) => void;
setIsCodeValid: (isCodeValid: boolean) => void;
};
export const SettingsServerlessFunctionCodeEditor = ({
currentFilePath,
files,
onChange,
setIsCodeValid,
height = 450,
options = undefined,
}: SettingsServerlessFunctionCodeEditorProps) => {
@@ -106,16 +104,6 @@ export const SettingsServerlessFunctionCodeEditor = ({
}
};
const handleEditorValidation = (markers: editor.IMarker[]) => {
for (const marker of markers) {
if (marker.severity === MarkerSeverity.Error) {
setIsCodeValid?.(false);
return;
}
}
setIsCodeValid?.(true);
};
return (
isDefined(currentFile) &&
isDefined(availablePackages) && (
@@ -125,7 +113,6 @@ export const SettingsServerlessFunctionCodeEditor = ({
language={currentFile.language}
onMount={handleEditorDidMount}
onChange={onChange}
onValidate={handleEditorValidation}
options={options}
variant="with-header"
/>
packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
+4
View File
@@ -14,9 +14,11 @@ const StyledInputsContainer = styled.div`
export const SettingsServerlessFunctionNewForm = ({
formValues,
onChange,
readonly = false,
}: {
formValues: ServerlessFunctionNewFormValues;
onChange: (key: string) => (value: string) => void;
readonly?: boolean;
}) => {
const descriptionTextAreaId = `${formValues.name}-description`;
const nameTextInputId = `${formValues.name}-name`;
@@ -32,6 +34,7 @@ export const SettingsServerlessFunctionNewForm = ({
autoFocusOnMount
value={formValues.name}
onChange={onChange('name')}
readOnly={readonly}
/>
<TextArea
textAreaId={descriptionTextAreaId}
@@ -39,6 +42,7 @@ export const SettingsServerlessFunctionNewForm = ({
minRows={4}
value={formValues.description}
onChange={onChange('description')}
readOnly={readonly}
/>
</StyledInputsContainer>
</Section>
packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTable.tsx
+36 -33
View File
@@ -1,7 +1,4 @@
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsServerlessFunctionsFieldItemTableRow } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsFieldItemTableRow';
import { SettingsServerlessFunctionsTableEmpty } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty';
import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
@@ -10,6 +7,8 @@ import styled from '@emotion/styled';
import { SettingsPath } from 'twenty-shared/types';
import { getSettingsPath } from 'twenty-shared/utils';
import { type ServerlessFunction } from '~/generated-metadata/graphql';
import { useLingui } from '@lingui/react/macro';
import { useParams } from 'react-router-dom';
const StyledTableRow = styled(TableRow)`
grid-template-columns: 312px 132px 68px;
@@ -19,37 +18,41 @@ const StyledTableBody = styled(TableBody)`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
`;
export const SettingsServerlessFunctionsTable = () => {
const { serverlessFunctions } = useGetManyServerlessFunctions();
export const SettingsServerlessFunctionsTable = ({
serverlessFunctions,
}: {
serverlessFunctions: ServerlessFunction[];
}) => {
const { applicationId = '' } = useParams();
const { t } = useLingui();
if (serverlessFunctions.length === 0) {
return null;
}
return (
<>
{serverlessFunctions.length ? (
<SettingsPageContainer>
<Table>
<StyledTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Runtime</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
<StyledTableBody>
{serverlessFunctions.map(
(serverlessFunction: ServerlessFunction) => (
<SettingsServerlessFunctionsFieldItemTableRow
key={serverlessFunction.id}
serverlessFunction={serverlessFunction}
to={getSettingsPath(SettingsPath.ServerlessFunctions, {
id: serverlessFunction.id,
})}
/>
),
)}
</StyledTableBody>
</Table>
</SettingsPageContainer>
) : (
<SettingsServerlessFunctionsTableEmpty />
)}
</>
<Table>
<StyledTableRow>
<TableHeader>{t`Name`}</TableHeader>
<TableHeader>Runtime</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
<StyledTableBody>
{serverlessFunctions.map((serverlessFunction: ServerlessFunction) => (
<SettingsServerlessFunctionsFieldItemTableRow
key={serverlessFunction.id}
serverlessFunction={serverlessFunction}
to={getSettingsPath(
SettingsPath.ApplicationServerlessFunctionDetail,
{
applicationId,
serverlessFunctionId: serverlessFunction.id,
},
)}
/>
))}
</StyledTableBody>
</Table>
);
};
packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty.tsx
-43
View File
@@ -1,43 +0,0 @@
import styled from '@emotion/styled';
import { SettingsPath } from 'twenty-shared/types';
import { getSettingsPath } from 'twenty-shared/utils';
import { IconPlus } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from 'twenty-ui/layout';
const StyledEmptyFunctionsContainer = styled.div`
height: 60vh;
`;
export const SettingsServerlessFunctionsTableEmpty = () => {
return (
<StyledEmptyFunctionsContainer>
<AnimatedPlaceholderEmptyContainer
// eslint-disable-next-line react/jsx-props-no-spreading
{...EMPTY_PLACEHOLDER_TRANSITION_PROPS}
>
<AnimatedPlaceholder type="emptyFunctions" />
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Add your first Function
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
Add your first Function to get started
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<Button
Icon={IconPlus}
title="New function"
to={getSettingsPath(SettingsPath.NewServerlessFunction)}
/>
</AnimatedPlaceholderEmptyContainer>
</StyledEmptyFunctionsContainer>
);
};
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
+11 -41
View File
@@ -7,12 +7,7 @@ import { TabList } from '@/ui/layout/tab-list/components/TabList';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import styled from '@emotion/styled';
import {
H2Title,
IconGitCommit,
IconPlayerPlay,
IconRestore,
} from 'twenty-ui/display';
import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
import { Button, CoreEditorHeader } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
@@ -23,21 +18,13 @@ const StyledTabList = styled(TabList)`
export const SettingsServerlessFunctionCodeEditorTab = ({
files,
handleExecute,
handlePublish,
handleReset,
resetDisabled,
publishDisabled,
onChange,
setIsCodeValid,
isTesting = false,
}: {
files: File[];
handleExecute: () => void;
handlePublish: () => void;
handleReset: () => void;
resetDisabled: boolean;
publishDisabled: boolean;
onChange: (filePath: string, value: string) => void;
setIsCodeValid: (isCodeValid: boolean) => void;
isTesting?: boolean;
}) => {
const activeTabId = useRecoilComponentValue(
activeTabIdComponentState,
@@ -50,29 +37,10 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
accent="blue"
size="small"
Icon={IconPlayerPlay}
disabled={isTesting}
onClick={handleExecute}
/>
);
const PublishButton = (
<Button
title="Publish"
variant="secondary"
size="small"
Icon={IconGitCommit}
onClick={handlePublish}
disabled={publishDisabled}
/>
);
const ResetButton = (
<Button
title="Reset"
variant="secondary"
size="small"
Icon={IconRestore}
onClick={handleReset}
disabled={resetDisabled}
/>
);
const HeaderTabList = (
<StyledTabList
@@ -91,16 +59,18 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
title="Code your function"
description="Write your function (in typescript) below"
/>
<CoreEditorHeader
leftNodes={[HeaderTabList]}
rightNodes={[ResetButton, PublishButton, TestButton]}
/>
<CoreEditorHeader leftNodes={[HeaderTabList]} rightNodes={[TestButton]} />
{activeTabId && (
<SettingsServerlessFunctionCodeEditor
files={files}
currentFilePath={activeTabId}
onChange={(newCodeValue) => onChange(activeTabId, newCodeValue)}
setIsCodeValid={setIsCodeValid}
options={{
readOnly: true,
readOnlyMessage: {
value: 'Managed serverless functions are not editable',
},
}}
/>
)}
</Section>
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionSettingsTab.tsx
+3 -45
View File
@@ -1,70 +1,28 @@
import { SettingsServerlessFunctionNewForm } from '@/settings/serverless-functions/components/SettingsServerlessFunctionNewForm';
import { SettingsServerlessFunctionTabEnvironmentVariablesSection } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection';
import { useDeleteOneServerlessFunction } from '@/settings/serverless-functions/hooks/useDeleteOneServerlessFunction';
import { type ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { SettingsPath } from 'twenty-shared/types';
import { H2Title } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
const DELETE_FUNCTION_MODAL_ID = 'delete-function-modal';
export const SettingsServerlessFunctionSettingsTab = ({
formValues,
serverlessFunctionId,
onChange,
onCodeChange,
serverlessFunctionId,
}: {
formValues: ServerlessFunctionFormValues;
serverlessFunctionId: string;
onChange: (key: string) => (value: string) => void;
onCodeChange: (filePath: string, value: string) => void;
}) => {
const navigate = useNavigateSettings();
const { openModal } = useModal();
const { deleteOneServerlessFunction } = useDeleteOneServerlessFunction();
const deleteFunction = async () => {
await deleteOneServerlessFunction({ id: serverlessFunctionId });
navigate(SettingsPath.ServerlessFunctions);
};
return (
<>
<SettingsServerlessFunctionNewForm
formValues={formValues}
onChange={onChange}
readonly
/>
<SettingsServerlessFunctionTabEnvironmentVariablesSection
formValues={formValues}
onCodeChange={onCodeChange}
/>
<Section>
<H2Title title="Danger zone" description="Delete this function" />
<Button
accent="danger"
onClick={() => openModal(DELETE_FUNCTION_MODAL_ID)}
variant="secondary"
size="small"
title="Delete function"
/>
</Section>
<ConfirmationModal
confirmationValue={formValues.name}
confirmationPlaceholder={formValues.name}
modalId={DELETE_FUNCTION_MODAL_ID}
title="Function Deletion"
subtitle={
<>
This action cannot be undone. This will permanently delete your
function. <br /> Please type in the function name to confirm.
</>
}
onConfirmClick={deleteFunction}
confirmButtonText="Delete function"
serverlessFunctionId={serverlessFunctionId}
/>
</>
);
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx
+30 -36
View File
@@ -1,18 +1,18 @@
import { SettingsServerlessFunctionTabEnvironmentVariableTableRow } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow';
import { type ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
import dotenv from 'dotenv';
import { useMemo, useState } from 'react';
import { H2Title, IconPlus, IconSearch } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { v4 } from 'uuid';
import { serverlessFunctionEnvVarFamilyState } from '@/settings/serverless-functions/states/serverlessFunctionEnvVarFamilyState';
import { useRecoilState } from 'recoil';
const StyledSearchInput = styled(SettingsTextInput)`
padding-bottom: ${({ theme }) => theme.spacing(2)};
@@ -39,24 +39,18 @@ const StyledTableRow = styled(TableRow)`
export type EnvironmentVariable = { id: string; key: string; value: string };
export const SettingsServerlessFunctionTabEnvironmentVariablesSection = ({
formValues,
onCodeChange,
serverlessFunctionId,
}: {
formValues: ServerlessFunctionFormValues;
serverlessFunctionId: string;
onCodeChange: (filePath: string, value: string) => void;
}) => {
const environmentVariables = formValues.code?.['.env']
? dotenv.parse(formValues.code['.env'])
: {};
const environmentVariablesList = Object.entries(environmentVariables).map(
([key, value]) => ({ id: v4(), key, value }),
);
const [searchTerm, setSearchTerm] = useState('');
const [newEnvVarAdded, setNewEnvVarAdded] = useState(false);
const [envVariables, setEnvVariables] = useState<EnvironmentVariable[]>(
environmentVariablesList,
const [envVariables, setEnvVariables] = useRecoilState(
serverlessFunctionEnvVarFamilyState(serverlessFunctionId),
);
const filteredEnvVariable = useMemo(() => {
return envVariables.filter(
({ key, value }) =>
@@ -68,11 +62,28 @@ export const SettingsServerlessFunctionTabEnvironmentVariablesSection = ({
const getFormattedEnvironmentVariables = (
newEnvVariables: EnvironmentVariable[],
) => {
return newEnvVariables.reduce(
(acc, { key, value }) =>
key.length > 0 && value.length > 0 ? `${acc}\n${key}=${value}` : acc,
'',
);
return [...newEnvVariables]
.reverse()
.reduce(
(acc, { key, value }) =>
key.length > 0 && value.length > 0 ? `${key}=${value}\n${acc}` : acc,
'',
);
};
const onEnvVarChange = (newEnvVariable: EnvironmentVariable) => {
const newEnvVariables: EnvironmentVariable[] = [];
for (const envVariable of envVariables) {
if (envVariable.id === newEnvVariable.id) {
newEnvVariables.push(newEnvVariable);
} else if (envVariable.key !== newEnvVariable.key) {
newEnvVariables.push(envVariable);
}
}
setEnvVariables(newEnvVariables);
onCodeChange('.env', getFormattedEnvironmentVariables(newEnvVariables));
};
return (
@@ -101,24 +112,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariablesSection = ({
key={envVariable.id}
envVariable={envVariable}
initialEditMode={newEnvVarAdded && envVariable.value === ''}
onChange={(newEnvVariable) => {
const newEnvVariables = envVariables.reduce(
(acc, { id, key }) => {
if (id === newEnvVariable.id) {
acc.push(newEnvVariable);
} else if (key !== newEnvVariable.key) {
acc.push(envVariable);
}
return acc;
},
[] as EnvironmentVariable[],
);
setEnvVariables(newEnvVariables);
onCodeChange(
'.env',
getFormattedEnvironmentVariables(newEnvVariables),
);
}}
onChange={onEnvVarChange}
onDelete={() => {
const newEnvVariables = envVariables.filter(
({ id }) => id !== envVariable.id,
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
+4
View File
@@ -21,9 +21,11 @@ const StyledCodeEditorContainer = styled.div`
export const SettingsServerlessFunctionTestTab = ({
handleExecute,
serverlessFunctionId,
isTesting = false,
}: {
handleExecute: () => void;
serverlessFunctionId: string;
isTesting?: boolean;
}) => {
const { t } = useLingui();
const [serverlessFunctionTestData, setServerlessFunctionTestData] =
@@ -54,6 +56,7 @@ export const SettingsServerlessFunctionTestTab = ({
size="small"
Icon={IconPlayerPlay}
onClick={handleExecute}
disabled={isTesting}
/>,
]}
/>
@@ -67,6 +70,7 @@ export const SettingsServerlessFunctionTestTab = ({
</StyledCodeEditorContainer>
<ServerlessFunctionExecutionResult
serverlessFunctionTestData={serverlessFunctionTestData}
isTesting={isTesting}
/>
</StyledInputsContainer>
</Section>
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTriggersTab.tsx
+113
View File
@@ -0,0 +1,113 @@
import { H2Title, OverflowingTextWithTooltip } from 'twenty-ui/display';
import { Section } from 'twenty-ui/layout';
import { type ServerlessFunction } from '~/generated/graphql';
import { useLingui } from '@lingui/react/macro';
import { SettingsDatabaseEventsForm } from '@/settings/components/SettingsDatabaseEventsForm';
import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
import { Table } from '@/ui/layout/table/components/Table';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { Tag } from 'twenty-ui/components';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
export const StyledRouteTriggerTableRow = styled(TableRow)`
grid-template-columns: 1fr 120px 120px;
`;
const StyledTableCell = styled(TableCell)`
color: ${({ theme }) => theme.font.color.tertiary};
gap: ${({ theme }) => theme.spacing(2)};
min-width: 0;
overflow: hidden;
`;
const StyledRouteTriggerTableHeaderRow = styled(StyledRouteTriggerTableRow)`
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
export const SettingsServerlessFunctionTriggersTab = ({
serverlessFunction,
}: {
serverlessFunction: ServerlessFunction;
}) => {
const { t } = useLingui();
const databaseEventTriggers = serverlessFunction.databaseEventTriggers ?? [];
const cronTriggers = serverlessFunction.cronTriggers ?? [];
const routeTriggers = serverlessFunction.routeTriggers ?? [];
const databaseEvents = databaseEventTriggers?.map((event) => {
const [object, action]: [string, string] =
event.settings.eventName.split('.');
return { object, action };
});
return (
<>
{databaseEvents.length > 0 && (
<Section>
<H2Title
title={t`Database event`}
description={t`Select the events that should trigger the function`}
/>
<SettingsDatabaseEventsForm events={databaseEvents} disabled />
</Section>
)}
{cronTriggers.length > 0 && (
<Section>
<H2Title
title={t`Cron`}
description={t`Triggers the function at regular intervals`}
/>
{cronTriggers.map((cronTrigger, index) => (
<FormTextFieldInput
key={index}
label={t`Expression`}
placeholder="0 */1 * * *"
hint={t`Format: [Minute] [Hour] [Day of Month] [Month] [Day of Week]`}
onChange={() => {}}
readonly
defaultValue={cronTrigger.settings.pattern}
/>
))}
</Section>
)}
{routeTriggers.length > 0 && (
<Section>
<H2Title
title={t`Http`}
description={t`Triggers the function with Http request`}
/>
<Table>
<StyledRouteTriggerTableHeaderRow>
<TableHeader>{t`Path`}</TableHeader>
<TableHeader>{t`Method`}</TableHeader>
<TableHeader>{t`Auth Required`}</TableHeader>
</StyledRouteTriggerTableHeaderRow>
{routeTriggers.map((routeTrigger, index) => (
<StyledRouteTriggerTableRow key={index}>
<StyledTableCell>
<OverflowingTextWithTooltip text={routeTrigger.path} />
</StyledTableCell>
<StyledTableCell>{routeTrigger.httpMethod}</StyledTableCell>
<StyledTableCell>
<Tag
text={routeTrigger.isAuthRequired ? 'True' : 'False'}
color={routeTrigger.isAuthRequired ? 'green' : 'orange'}
weight="medium"
/>
</StyledTableCell>
</StyledRouteTriggerTableRow>
))}
</Table>
</Section>
)}
</>
);
};
packages/twenty-front/src/modules/settings/serverless-functions/graphql/fragments/serverlessFunctionFragment.ts
+20
View File
@@ -9,6 +9,26 @@ export const SERVERLESS_FUNCTION_FRAGMENT = gql`
timeoutSeconds
latestVersion
publishedVersions
cronTriggers {
id
settings
createdAt
updatedAt
}
databaseEventTriggers {
id
settings
createdAt
updatedAt
}
routeTriggers {
id
path
isAuthRequired
httpMethod
createdAt
updatedAt
}
createdAt
updatedAt
}
packages/twenty-front/src/modules/settings/serverless-functions/hooks/useGetOneServerlessFunction.ts
+2 -1
View File
@@ -11,7 +11,7 @@ export const useGetOneServerlessFunction = (
input: ServerlessFunctionIdInput,
) => {
const apolloMetadataClient = useApolloCoreClient();
const { data } = useQuery<
const { data, loading } = useQuery<
GetOneServerlessFunctionQuery,
GetOneServerlessFunctionQueryVariables
>(FIND_ONE_SERVERLESS_FUNCTION, {
@@ -22,5 +22,6 @@ export const useGetOneServerlessFunction = (
});
return {
serverlessFunction: data?.findOneServerlessFunction || null,
loading,
};
};
packages/twenty-front/src/modules/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState.ts
+65 -39
View File
@@ -4,9 +4,14 @@ import { useGetOneServerlessFunction } from '@/settings/serverless-functions/hoo
import { useGetOneServerlessFunctionSourceCode } from '@/settings/serverless-functions/hooks/useGetOneServerlessFunctionSourceCode';
import { serverlessFunctionTestDataFamilyState } from '@/workflow/workflow-steps/workflow-actions/code-action/states/serverlessFunctionTestDataFamilyState';
import { type Dispatch, type SetStateAction, useState } from 'react';
import { useRecoilState } from 'recoil';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { type FindOneServerlessFunctionSourceCodeQuery } from '~/generated-metadata/graphql';
import { SOURCE_FOLDER_NAME } from '@/serverless-functions/constants/SourceFolderName';
import { type ServerlessFunction } from '~/generated/graphql';
import { type Sources } from '@/serverless-functions/types/sources.type';
import { serverlessFunctionEnvVarFamilyState } from '@/settings/serverless-functions/states/serverlessFunctionEnvVarFamilyState';
import dotenv from 'dotenv';
import { v4 } from 'uuid';
export type ServerlessFunctionNewFormValues = {
name: string;
@@ -14,12 +19,7 @@ export type ServerlessFunctionNewFormValues = {
};
export type ServerlessFunctionFormValues = ServerlessFunctionNewFormValues & {
code: {
src: {
'index.ts': string;
} & { [key: string]: string };
'.env'?: string;
};
code: Sources;
};
type SetServerlessFunctionFormValues = Dispatch<
@@ -34,6 +34,7 @@ export const useServerlessFunctionUpdateFormState = ({
serverlessFunctionVersion?: string;
}): {
formValues: ServerlessFunctionFormValues;
serverlessFunction: ServerlessFunction | null;
setFormValues: SetServerlessFunctionFormValues;
loading: boolean;
} => {
@@ -43,44 +44,69 @@ export const useServerlessFunctionUpdateFormState = ({
code: { src: { 'index.ts': '' } },
});
const setEnvVar = useSetRecoilState(
serverlessFunctionEnvVarFamilyState(serverlessFunctionId),
);
const [serverlessFunctionTestData, setServerlessFunctionTestData] =
useRecoilState(serverlessFunctionTestDataFamilyState(serverlessFunctionId));
const { serverlessFunction } = useGetOneServerlessFunction({
id: serverlessFunctionId,
});
const { serverlessFunction, loading: serverlessFunctionLoading } =
useGetOneServerlessFunction({
id: serverlessFunctionId,
});
const { loading } = useGetOneServerlessFunctionSourceCode({
id: serverlessFunctionId,
version: serverlessFunctionVersion,
onCompleted: async (data: FindOneServerlessFunctionSourceCodeQuery) => {
const newState = {
code: data?.getServerlessFunctionSourceCode || undefined,
name: serverlessFunction?.name || '',
description: serverlessFunction?.description || '',
};
const { loading: serverlessFunctionSourceCodeLoading } =
useGetOneServerlessFunctionSourceCode({
id: serverlessFunctionId,
version: serverlessFunctionVersion,
onCompleted: async (data: FindOneServerlessFunctionSourceCodeQuery) => {
const code = data?.getServerlessFunctionSourceCode;
setFormValues((prevState) => ({
...prevState,
...newState,
}));
const newState = {
code: code || undefined,
name: serverlessFunction?.name || '',
description: serverlessFunction?.description || '',
};
if (serverlessFunctionTestData.shouldInitInput) {
const sourceCode =
data?.getServerlessFunctionSourceCode?.[SOURCE_FOLDER_NAME]?.[
INDEX_FILE_NAME
];
const functionInput = await getFunctionInputFromSourceCode(sourceCode);
setServerlessFunctionTestData((prev) => ({
...prev,
input: functionInput,
shouldInitInput: false,
setFormValues((prevState) => ({
...prevState,
...newState,
}));
}
},
});
return { formValues, setFormValues, loading };
const environmentVariables =
code?.['.env'] && typeof code?.['.env'] === 'string'
? dotenv.parse(code['.env'])
: {};
const environmentVariablesList = Object.entries(
environmentVariables,
).map(([key, value]) => ({ id: v4(), key, value }));
setEnvVar(environmentVariablesList);
if (serverlessFunctionTestData.shouldInitInput) {
const sourceCode =
data?.getServerlessFunctionSourceCode?.[SOURCE_FOLDER_NAME]?.[
INDEX_FILE_NAME
];
const functionInput =
await getFunctionInputFromSourceCode(sourceCode);
setServerlessFunctionTestData((prev) => ({
...prev,
input: functionInput,
shouldInitInput: false,
}));
}
},
});
return {
formValues,
setFormValues,
serverlessFunction,
loading: serverlessFunctionSourceCodeLoading || serverlessFunctionLoading,
};
};
packages/twenty-front/src/modules/settings/serverless-functions/states/serverlessFunctionEnvVarFamilyState.ts
+10
View File
@@ -0,0 +1,10 @@
import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
import { type EnvironmentVariable } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection';
export const serverlessFunctionEnvVarFamilyState = createFamilyState<
EnvironmentVariable[],
string
>({
key: 'serverlessFunctionEnvVarFamilyState',
defaultValue: [],
});
packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+3
View File
@@ -21,6 +21,7 @@ export type TextAreaProps = {
value?: string;
className?: string;
onBlur?: () => void;
readOnly?: boolean;
};
const StyledContainer = styled.div`
@@ -81,6 +82,7 @@ export const TextArea = ({
className,
onChange,
onBlur,
readOnly = false,
}: TextAreaProps) => {
const computedMinRows = Math.min(minRows, maxRows);
@@ -125,6 +127,7 @@ export const TextArea = ({
onBlur={handleBlur}
disabled={disabled}
className={className}
readOnly={readOnly}
/>
</StyledContainer>
);
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
+19 -11
View File
@@ -51,6 +51,7 @@ import { IconCode, IconPlayerPlay, useIcons } from 'twenty-ui/display';
import { CodeEditor } from 'twenty-ui/input';
import { useIsMobile } from 'twenty-ui/utilities';
import { useDebouncedCallback } from 'use-debounce';
import { computeNewSources } from '@/serverless-functions/utils/computeNewSources';
const CODE_EDITOR_MIN_HEIGHT = 343;
@@ -158,15 +159,16 @@ export const WorkflowEditActionServerlessFunction = ({
if (actionOptions.readonly === true) {
return;
}
setFormValues((prevState) => ({
...prevState,
code: {
...prevState.code,
[SOURCE_FOLDER_NAME]: {
[INDEX_FILE_NAME]: newCode,
},
},
}));
setFormValues((prevState) => {
return {
...prevState,
code: computeNewSources({
previousCode: prevState['code'],
filePath: `${SOURCE_FOLDER_NAME}/${INDEX_FILE_NAME}`,
value: newCode,
}),
};
});
await handleSave();
await handleUpdateFunctionInputSchema(newCode);
};
@@ -376,6 +378,12 @@ export const WorkflowEditActionServerlessFunction = ({
setIsFullScreen(false);
};
const indexFileContent =
typeof formValues.code?.[SOURCE_FOLDER_NAME] !== 'string' &&
typeof formValues.code[SOURCE_FOLDER_NAME][INDEX_FILE_NAME] === 'string'
? formValues.code[SOURCE_FOLDER_NAME][INDEX_FILE_NAME]
: '';
const fullScreenOverlay = renderFullScreenModal(
<div data-globally-prevent-click-outside="true">
<WorkflowEditActionServerlessFunctionFields
@@ -387,7 +395,7 @@ export const WorkflowEditActionServerlessFunction = ({
<StyledFullScreenCodeEditorContainer>
<CodeEditor
height="100%"
value={formValues.code?.[SOURCE_FOLDER_NAME]?.[INDEX_FILE_NAME]}
value={indexFileContent}
language="typescript"
onChange={handleCodeChange}
onMount={handleEditorDidMount}
@@ -434,7 +442,7 @@ export const WorkflowEditActionServerlessFunction = ({
readonly={actionOptions.readonly}
/>
<WorkflowServerlessFunctionCodeEditor
value={formValues.code?.[SOURCE_FOLDER_NAME]?.[INDEX_FILE_NAME]}
value={indexFileContent}
onChange={handleCodeChange}
onMount={handleEditorDidMount}
options={{
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowReadonlyActionServerlessFunction.tsx
+7 -1
View File
@@ -69,6 +69,12 @@ export const WorkflowReadonlyActionServerlessFunction = ({
return null;
}
const indexFileContent =
typeof formValues.code?.[SOURCE_FOLDER_NAME] !== 'string' &&
typeof formValues.code[SOURCE_FOLDER_NAME][INDEX_FILE_NAME] === 'string'
? formValues.code[SOURCE_FOLDER_NAME][INDEX_FILE_NAME]
: '';
return (
<>
<SidePanelHeader
@@ -86,7 +92,7 @@ export const WorkflowReadonlyActionServerlessFunction = ({
<StyledCodeEditorContainer>
<CodeEditor
height={343}
value={formValues.code?.[SOURCE_FOLDER_NAME]?.[INDEX_FILE_NAME]}
value={indexFileContent}
language="typescript"
onMount={handleEditorDidMount}
setMarkers={getWrongExportedFunctionMarkers}