Open Bonapara opened 2 months ago
Create Advanced Settings Toggle 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 (
); };
Add Toggle to Settings Pages
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
Conditionally Display Toggle
// Example conditional rendering
{isIssue6145Resolved && isIssue6146Resolved && <AdvancedSettingsToggle />}
Update State Management
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
/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
Hi, Please let me know if this issue is available. Can I can pick it up? Thanks.
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.
Ok. Thanks I will wait for the 2 issues to be completed to start working on this issue.
Here is the GitStart Ticket for this issue: https://clients.gitstart.com/twenty/5449/tickets/TWNTY-6147
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
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
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 π€
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=34851-536797&t=emUxzrvX6zNaHyLZ-4
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 ;)
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
Hi @gitstart-twenty π We should move the version to the bottom of the General Settings page. Thanks!
ok, thank you
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:
https://github.com/twentyhq/twenty/issues/6145 https://github.com/twentyhq/twenty/issues/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: