Implement object fields and settings new layout #7979

gitstart-app · 2024-10-22T23:43:59Z

Description

This PR has as the base branch the TWNTY-5491 branch, but we also had to include updates from the main branch, and currently, there are conflicts in the TWNTY-5491, that cause errors on typescript in this PR, so, we can update once the conflicts are resolved on the base branch, but the functionality can be reviewed anyway
We Implemented a new layout of object details settings and new, the data is auto-saved in Settings tab of object detail
There is no indication to the user that data are saved automatically in the design, currently we are disabling the form

Demo\

https://www.loom.com/share/4198c0aa54b5450780a570ceee574838?sid=b4ef0a42-2d41-435f-9f5f-1b16816939f7

Refs

#TWNTY-5491

greptile-apps

PR Summary

This pull request implements a new layout for object details settings, focusing on custom object renaming and synchronization between labels and API names. Here are the key changes:

Added a new 'shouldSyncLabelAndName' field to object metadata, enabling label and API name synchronization
Implemented auto-saving functionality in the 'Settings' tab of object details
Created new components for object fields, indexes, and settings tabs
Introduced a SyncObjectLabelAndNameToggle component for managing label and API name synchronization
Updated validation schemas to support new fields and synchronization logic
Removed the old SettingsObjectEdit component and related stories

The changes align with the requirements outlined in issue #5491, providing more flexibility in object renaming and API name management.

_{30 file(s) reviewed, 20 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-10-22T23:49:42Z

...ages/twenty-front/src/modules/object-metadata/validation-schemas/objectMetadataItemSchema.ts

@@ -26,4 +26,5 @@ export const objectMetadataItemSchema = z.object({
  namePlural: camelCaseStringSchema,
  nameSingular: camelCaseStringSchema,
  updatedAt: z.string().datetime(),
+  shouldSyncLabelAndName: z.boolean(),
 }) satisfies z.ZodType<ObjectMetadataItem>;


style: consider adding a default value for shouldSyncLabelAndName

Suggested change

}) satisfies z.ZodType<ObjectMetadataItem>;

shouldSyncLabelAndName: z.boolean().default(false),

greptile-apps · 2024-10-22T23:51:28Z

packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx

+const StyledSettingsPageContainer = styled.div<{
+  width?: number;
+  removeLeftPadding?: boolean;
+}>`


style: Consider using a more descriptive name for the removeLeftPadding prop, such as noLeftPadding or leftPaddingDisabled

Suggested change

const StyledSettingsPageContainer = styled.div<{

width?: number;

removeLeftPadding?: boolean;

}>`

const StyledSettingsPageContainer = styled.div<{

width?: number;

noLeftPadding?: boolean;

}>`

greptile-apps · 2024-10-22T23:51:28Z

packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx

+  & {
+    ${({ removeLeftPadding }) => removeLeftPadding && `padding-left: 0;`}
+  }


style: Using & selector here is unnecessary. Consider removing it for cleaner CSS

Suggested change

& {

${({ removeLeftPadding }) => removeLeftPadding && `padding-left: 0;`}

}

${({ removeLeftPadding }) => removeLeftPadding && `padding-left: 0;`}

greptile-apps · 2024-10-22T23:51:57Z

...twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectFields.tsx

+export const ObjectFields = ({ objectMetadataItem }: ObjectFieldsProps) => {
+  const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;


style: Consider adding a comment explaining the isRemote property and its implications

Suggested change

export const ObjectFields = ({ objectMetadataItem }: ObjectFieldsProps) => {

const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;

// The isRemote property indicates whether the object is remote or local. If it is remote, the add field button should not be displayed.

greptile-apps · 2024-10-22T23:51:58Z

...twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectFields.tsx

+        <SettingsObjectFieldTable
+          objectMetadataItem={objectMetadataItem}
+          mode="view"
+        />


logic: Ensure SettingsObjectFieldTable component is updated to handle auto-saving functionality

Suggested change

<SettingsObjectFieldTable

objectMetadataItem={objectMetadataItem}

mode="view"

/>

// Ensure that the SettingsObjectFieldTable component is updated to handle auto-saving functionality.

greptile-apps · 2024-10-22T23:56:45Z

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx

+  const [updatedObjectSlug, setUpdatedObjectSlug] = useRecoilState(
+    updatedObjectSlugState,
+  );


style: Consider using a more descriptive name for this state, such as 'updatedObjectSlugState'

Suggested change

const [updatedObjectSlug, setUpdatedObjectSlug] = useRecoilState(

updatedObjectSlugState,

);

const [currentUpdatedObjectSlug, setCurrentUpdatedObjectSlug] = useRecoilState(

updatedObjectSlugState,

);

greptile-apps · 2024-10-22T23:56:46Z

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx

+        activeObjectMetadataItem ||
+        (updatedActiveObjectMetadataItem as ObjectMetadataItem)


style: Type assertion might be unnecessary if types are properly inferred

Suggested change

activeObjectMetadataItem ||

(updatedActiveObjectMetadataItem as ObjectMetadataItem)

// Remove type assertion if types are properly inferred

activeObjectMetadataItem || updatedActiveObjectMetadataItem

greptile-apps · 2024-10-22T23:57:17Z

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx

  const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
-
  const isUniqueIndexesEnabled = useIsFeatureEnabled(
    'IS_UNIQUE_INDEXES_ENABLED',
  );


style: Consider memoizing this value to prevent unnecessary re-renders

Suggested change

const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);

const isUniqueIndexesEnabled = useIsFeatureEnabled(

'IS_UNIQUE_INDEXES_ENABLED',

);

const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);

const isUniqueIndexesEnabled = useRecoilValue(useIsFeatureEnabled('IS_UNIQUE_INDEXES_ENABLED'));

greptile-apps · 2024-10-22T23:57:18Z

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx

+  const renderActiveTabContent = () => {
+    switch (activeTabId) {
+      case 'fields':
+        return <ObjectFields objectMetadataItem={objectMetadataItem} />;
+      case 'settings':
+        return <ObjectSettings objectMetadataItem={objectMetadataItem} />;
+      case 'indexes':
+        return <ObjectIndexes objectMetadataItem={objectMetadataItem} />;
+      default:
+        return <></>;
+    }
+  };


style: Consider extracting this switch statement into a separate function or using a mapping object for better maintainability

Suggested change

const renderActiveTabContent = () => {

switch (activeTabId) {

case 'fields':

return <ObjectFields objectMetadataItem={objectMetadataItem} />;

case 'settings':

return <ObjectSettings objectMetadataItem={objectMetadataItem} />;

case 'indexes':

return <ObjectIndexes objectMetadataItem={objectMetadataItem} />;

default:

return <></>;

}

};

const renderActiveTabContent = () => {

const tabContentMap = {

fields: <ObjectFields objectMetadataItem={objectMetadataItem} />,

settings: <ObjectSettings objectMetadataItem={objectMetadataItem} />,

indexes: <ObjectIndexes objectMetadataItem={objectMetadataItem} />,

};

return tabContentMap[activeTabId] || <></>;

};

greptile-apps · 2024-10-22T23:57:38Z

packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx

logic: Entire file has been removed. Ensure the object editing functionality has been properly relocated or replaced elsewhere.

ijreilly · 2024-10-23T07:59:01Z

Hi @gitstart-twenty thanks for your work, we will wait for https://github.com/twentyhq/twenty/pull/7504/files to be merged before resuming the work here!

gitstart-twenty · 2024-10-23T10:53:50Z

ok, thank you @ijreilly

…-layout

Weiko

LGTM!
Btw, does not seem to be related to your change but the sort on the "isUnique" (the key icon in the table header) is broken

Weiko · 2024-10-29T16:16:59Z

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx

+        },
+      ]}
+      actionButton={
+        activeTabId === 'fields' && (


Suggested change

activeTabId === 'fields' && (

activeTabId === FIELDS_TAB_ID && (

Bonapara · 2024-10-29T16:57:31Z

Fixes

Layout

Margins should match those on other pages. The spacing between the title and the tab switcher should be 32px.

CleanShot.2024-10-29.at.17.39.29.mp4

Card design

Current

Desired

Border radius are more round
Background is Secondary
Height is smaller (there is to much space between the card title and sub-title)
Make sure this is a component

Advanced mode mark

Spacing should be 8px with content (-23px?)

Title header

Change the description margin-top to 8px (instead of 12px)

Fields Helper

Current

Desired

URL

Store the tab in the URL with an # e.g. http://localhost:3001/settings/objects/rockets#settings

…-layout

Fixing ![image](https://github.com/user-attachments/assets/794968c2-1d13-49f2-9367-e93285a7d10f) Note - this page design be updated in the next release (#7979)

…-layout

Bonapara · 2024-11-05T09:41:31Z

One last thing 

The title padding-top is 24px instead of 32px (like other pages)

And I have no more advanced mode yellow border:

I have a small unexpected horizontal scroll:

CleanShot.2024-11-05.at.10.48.35.mp4

Make description margin-top 4px instead of 8px:

@ijreilly

…-layout

github-actions · 2024-11-07T13:51:53Z

	Fails
🚫	`node` failed.

Log

�[31mError: �[39m SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
�[90m    at parseJSONFromBytes (node:internal/deps/undici/undici:5584:19)�[39m
�[90m    at successSteps (node:internal/deps/undici/undici:5555:27)�[39m
�[90m    at fullyReadBody (node:internal/deps/undici/undici:1665:9)�[39m
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)�[39m
�[90m    at async specConsumeBody (node:internal/deps/undici/undici:5564:7)�[39m
danger-results://tmp/danger-results-9baf61b9.json

Generated by 🚫 dangerJS against 4d828c0

Follow-up of #7979 Navigation between settings and fields tabs is now reflected in URL. <img width="1106" alt="Capture d’écran 2024-11-07 à 18 38 57" src="https://github.com/user-attachments/assets/24b153ef-9e68-4aa2-8e3a-6bf70834c5ad"> --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: Weiko <[email protected]> Co-authored-by: Charles Bochet <[email protected]>

gitstart-twenty requested a review from ijreilly October 22, 2024 23:56

gitstart-twenty changed the base branch from main to TWNTY-5491 October 22, 2024 23:57

gitstart-twenty changed the base branch from TWNTY-5491 to main October 22, 2024 23:57

gitstart-twenty added the -PR: awaiting review label Oct 22, 2024

greptile-apps bot reviewed Oct 22, 2024

View reviewed changes

Implement object fields and settings new layout

6ba2970

gitstart-app bot force-pushed the TWNTY-5491-new-layout branch from c2e1667 to 6ba2970 Compare October 25, 2024 20:06

gitstart-twenty and others added 10 commits October 25, 2024 14:20

update if block to fix eslint error

5628299

Merge branch 'main' of github.com:twentyhq/twenty into TWNTY-5491-new…

d7f7232

…-layout

Fix form saving

4d9644a

Fix renaming applied to other workspaces

3fb0300

Refactor

3216337

disable toggle for standard object

0e93fa4

fix object metadata renaming

29e04cd

Merge branch 'main' of github.com:twentyhq/twenty into TWNTY-5491-new…

8d81b38

…-layout

Fix after merge and add workspaceId as arg

ef14dc0

fix missing workspaceId

039c4ed

Weiko approved these changes Oct 29, 2024

View reviewed changes

some design fixes

a5eb182

FelixMalfait added -PR: awaiting author and removed -PR: awaiting review labels Oct 31, 2024

ijreilly added 4 commits November 4, 2024 18:21

fix activeTabId

3c034a7

Merge branch 'main' of github.com:twentyhq/twenty into TWNTY-5491-new…

ffc32c1

…-layout

other design fixes

c53cf5b

wip - stories fix

c2f334c

ijreilly mentioned this pull request Nov 4, 2024

Fix gap in object edition page #8310

Merged

ijreilly added 3 commits November 4, 2024 21:27

write new storybook test

60e7d6e

Merge branch 'main' of github.com:twentyhq/twenty into TWNTY-5491-new…

8bdfd35

…-layout

Fix design after merging main

ec78125

ijreilly mentioned this pull request Nov 5, 2024

Data settings new layout - anchor navigation #8334

Merged

ijreilly added 7 commits November 5, 2024 14:43

more design fixes

25f3e01

Merge branch 'main' of github.com:twentyhq/twenty into TWNTY-5491-new…

2848550

…-layout

fix yellow bar has same length as form

6f4b8e0

Improve form behaviour at save

1ebb561

Fix tooltip

ad12b83

Fix form save

f20da13

fix advanced settings container

4d828c0

ijreilly merged commit 7bab65b into main Nov 7, 2024
19 checks passed

ijreilly deleted the TWNTY-5491-new-layout branch November 7, 2024 13:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement object fields and settings new layout #7979

Implement object fields and settings new layout #7979

gitstart-app bot commented Oct 22, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

greptile-apps bot Oct 22, 2024

ijreilly commented Oct 23, 2024

gitstart-twenty commented Oct 23, 2024

Weiko left a comment •

edited

Loading

Weiko Oct 29, 2024

Bonapara commented Oct 29, 2024

Bonapara commented Nov 5, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024

	}) satisfies z.ZodType<ObjectMetadataItem>;
	shouldSyncLabelAndName: z.boolean().default(false),

		export const ObjectFields = ({ objectMetadataItem }: ObjectFieldsProps) => {
		const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;

	export const ObjectFields = ({ objectMetadataItem }: ObjectFieldsProps) => {
	const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;
	// The isRemote property indicates whether the object is remote or local. If it is remote, the add field button should not be displayed.

		activeObjectMetadataItem \|\|
		(updatedActiveObjectMetadataItem as ObjectMetadataItem)

	activeTabId === 'fields' && (
	activeTabId === FIELDS_TAB_ID && (

Implement object fields and settings new layout #7979

Implement object fields and settings new layout #7979

Conversation

gitstart-app bot commented Oct 22, 2024 • edited Loading

Description

Demo\

Refs

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 22, 2024

Choose a reason for hiding this comment

ijreilly commented Oct 23, 2024

gitstart-twenty commented Oct 23, 2024

Weiko left a comment • edited Loading

Choose a reason for hiding this comment

Weiko Oct 29, 2024

Choose a reason for hiding this comment

Bonapara commented Oct 29, 2024

Fixes

Layout

Card design

Current

Desired

Advanced mode mark

Title header

Fields Helper

Current

Desired

URL

Bonapara commented Nov 5, 2024 • edited Loading

github-actions bot commented Nov 7, 2024

Log

gitstart-app bot commented Oct 22, 2024 •

edited

Loading

Weiko left a comment •

edited

Loading

Bonapara commented Nov 5, 2024 •

edited

Loading