Settings Advanced Mode

[Bonapara]

Desired Behavior

We want to introduce a new Advanced Settings toggle allowing users to view advanced (often technical) settings. The goal is to reduce interface clutter.

The toggle should always be at the settings page bottom left. We want the following issues addressed before displaying it:

#6145
#6146

Component

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=11519-270312&t=H5hfHOgNoulsToAq-11

Settings Navbar

Add a new Developers section that would have two sub-pages:

• API & Webhooks
• Functions

[greptile-apps]

Implementation Steps

1. Create Advanced Settings Toggle Component

   • Create a new component AdvancedSettingsToggle.tsx in the components directory.

   import React from 'react';
   import styled from '@emotion/styled';
   import { Toggle } from 'twenty-ui';
   
   const Container = styled.div`
     position: fixed;
     bottom: 16px;
     left: 16px;
   `;
   
   export const AdvancedSettingsToggle = () => {
     const [isAdvanced, setIsAdvanced] = React.useState(false);
   
     const handleToggle = () => {
       setIsAdvanced(!isAdvanced);
     };
   
     return (
       <Container>
         <Toggle checked={isAdvanced} onChange={handleToggle} label="Advanced Settings" />
       </Container>
     );
   };

2. Add Toggle to Settings Pages

   • Import and add the AdvancedSettingsToggle component to the following settings pages:
     • SettingsWorkspace.tsx
     • SettingsProfile.tsx
     • SettingsDevelopers.tsx
     • SettingsObjectDetail.tsx
     • SettingsObjectNewFieldStep1.tsx
     • SettingsObjects.tsx

   import { AdvancedSettingsToggle } from '@/settings/components/AdvancedSettingsToggle';
   
   // Add <AdvancedSettingsToggle /> at the bottom of the return statement in each component

3. Conditionally Display Toggle

   • Ensure the toggle is conditionally displayed based on the resolution of issues Avanced Settings: Custom API names for Object and Fields #6145 and Avanced Settings: Custom API names for Select & Multi-Select Keys #6146.

   // Example conditional rendering
   {isIssue6145Resolved && isIssue6146Resolved && <AdvancedSettingsToggle />}

4. Update State Management

   • Ensure the state of the toggle is managed and can be accessed globally if needed.

Relevant Files

• src/pages/settings/SettingsWorkspace.tsx
• src/pages/settings/SettingsProfile.tsx
• src/pages/settings/developers/SettingsDevelopers.tsx
• src/pages/settings/data-model/SettingsObjectDetail.tsx
• src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
• src/pages/settings/data-model/SettingsObjects.tsx

References

/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
/packages/twenty-front/src/pages/settings

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[prevar]

Hi, Please let me know if this issue is available. Can I can pick it up? Thanks.

[Bonapara]

Hi @prevar, this issue is available, but it should be toggled under a feature flag while we wait for the two mentioned issues to be completed.

[prevar]

Ok. Thanks I will wait for the 2 issues to be completed to start working on this issue.

[FelixMalfait]

Store this in localstorage (

twenty/packages/twenty-front/src/utils/recoil-effects.ts

Line 7 in 9683a19

export const localStorageEffect =

)

[gitstart-app]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6147

[ijreilly]

Let's kickstart this issue together when it is ready to be taken. I think we can start with the FE only behind a feature flag, that would cover

1. the Advanced component feature here in the left bar
2. the front-end only for the first advanced feature we will have: Avanced Settings: Custom API names for Object and Fields #6145

that includes making the toggle work (show/hide "Api name" upon toggle, with an animation perhaps?)

@gitstart-twenty fyi for when you will start working on it. @Bonapara fyi

[gitstart-twenty]

Hello @ijreilly
so, we would need to implement the toggle and use this API Name input to test the implementation of the feature, but just to show the feature working, right?

I imagine that in this case, we would just need to get the field name and display it on a disabled input, is that correct?
do we need to add any other part of the other issue?

Also, we could not find the designs in Figma, I think the link is broken, it redirects to this page:

Hey @Bonapara
could you provide the links for the toggle and for the feature mentioned above? Also, would be very nice if you could give us access to the dev mode on the Figma 🤝

[Bonapara]

Toggle

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=34851-536797&t=emUxzrvX6zNaHyLZ-4

Navbar

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=34845-235253&t=emUxzrvX6zNaHyLZ-4

Please get in touch with me on Discord for Dev mode access ;)

[gitstart-twenty]

Hello again @Bonapara 👋
Currently we have this GitHub version component in the same place where the toggle would be implemented, we would like to confirm if we should remove the component or keep this along the toggle

[Bonapara]

Hi @gitstart-twenty 👋 We should move the version to the bottom of the General Settings page. Thanks!

[gitstart-twenty]

ok, thank you