Support custom object renaming

packages/twenty-front/src/generated/graphql.tsx

@@ -1013,6 +1013,7 @@ export type UpdateBillingEntity = {
 };
 
 export type UpdateObjectPayload = {
+  areLabelAndNameSync?: InputMaybe<Scalars['Boolean']>;
   description?: InputMaybe<Scalars['String']>;
   icon?: InputMaybe<Scalars['String']>;
   imageIdentifierFieldMetadataId?: InputMaybe<Scalars['String']>;
@@ -1246,6 +1247,7 @@ export type FieldFilter = {
 
 export type Object = {
   __typename?: 'object';
+  areLabelAndNameSync: Scalars['Boolean'];
   createdAt: Scalars['DateTime'];
   dataSourceId: Scalars['String'];
   description?: Maybe<Scalars['String']>;

packages/twenty-front/src/modules/object-metadata/graphql/queries.ts

@@ -24,6 +24,7 @@ export const FIND_MANY_OBJECT_METADATA_ITEMS = gql`
           updatedAt
           labelIdentifierFieldMetadataId
           imageIdentifierFieldMetadataId
+          areLabelAndNameSync
           fields(paging: { first: 1000 }, filter: $fieldFilter) {
             edges {
               node {

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

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

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

@@ -5,12 +5,21 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import { isDefined } from '~/utils/isDefined';
 
-const StyledSettingsPageContainer = styled.div<{ width?: number }>`
+const StyledSettingsPageContainer = styled.div<{
+  width?: number;
+  individualPaddingLeftForItems?: boolean;
+}>`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(8)};
   overflow: auto;
   padding: ${({ theme }) => theme.spacing(6, 8, 8)};
+  ${({ individualPaddingLeftForItems }) =>
+    individualPaddingLeftForItems && 'padding-left: 0;'}
+  & > * {
+    padding-left: ${({ theme, individualPaddingLeftForItems }) =>
+      individualPaddingLeftForItems ? theme.spacing(8) : undefined};
+  }
   width: ${({ width }) => {
     if (isDefined(width)) {
       return width + 'px';
@@ -25,10 +34,16 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
 
 export const SettingsPageContainer = ({
   children,
+  individualPaddingLeftForItems,
 }: {
   children: ReactNode;
+  individualPaddingLeftForItems?: boolean;
 }) => (
   <ScrollWrapper contextProviderName="settingsPageContainer">
-    <StyledSettingsPageContainer>{children}</StyledSettingsPageContainer>
+    <StyledSettingsPageContainer
+      individualPaddingLeftForItems={individualPaddingLeftForItems}
+    >
+      {children}
+    </StyledSettingsPageContainer>
   </ScrollWrapper>
 );

packages/twenty-front/src/modules/settings/data-model/objects/SyncObjectLabelAndNameToggle.tsx

@@ -0,0 +1,73 @@
+import { Toggle } from '@/ui/input/components/Toggle';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconRefresh, MAIN_COLORS } from 'twenty-ui';
+
+const StyledToggleContainer = styled.div`
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledIconRefreshContainer = styled.div`
+  border: 2px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: 3px;
+  margin-right: ${({ theme }) => theme.spacing(3)};
+  width: ${({ theme }) => theme.spacing(8)};
+  height: ${({ theme }) => theme.spacing(8)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledTitle = styled.h2`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: 0;
+`;
+
+const StyledDescription = styled.h3`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+type SyncObjectLabelAndNameToggleProps = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+};
+
+export const SyncObjectLabelAndNameToggle = ({
+  value,
+  onChange,
+}: SyncObjectLabelAndNameToggleProps) => {
+  const theme = useTheme();
+  return (
+    <StyledToggleContainer>
+      <StyledTitleContainer>
+        <StyledIconRefreshContainer>
+          <IconRefresh size={22.5} color={theme.font.color.tertiary} />
+        </StyledIconRefreshContainer>
+        <div>
+          <StyledTitle>Synchronize Objects Labels and API Names</StyledTitle>
+          <StyledDescription>
+            Should changing an object's label also change the API?
+          </StyledDescription>
+        </div>
+      </StyledTitleContainer>
+      <Toggle onChange={onChange} color={MAIN_COLORS.yellow} value={value} />
+    </StyledToggleContainer>
+  );
+};