Skip to content

Commit b5a2af7

Browse files
kyle-ssgkyle-ssg
authored
chore: standardise settings (#5558)
1 parent 126c761 commit b5a2af7

File tree

9 files changed

+615
-678
lines changed

9 files changed

+615
-678
lines changed

‎frontend/web/components/App.js‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -127,16 +127,6 @@ const App = class extends Component {
127127
updateLastViewed()
128128
}
129129

130-
toggleDarkMode = () => {
131-
const newValue = !Utils.getFlagsmithHasFeature('dark_mode')
132-
flagsmith.setTrait('dark_mode', newValue)
133-
if (newValue) {
134-
document.body.classList.add('dark')
135-
} else {
136-
document.body.classList.remove('dark')
137-
}
138-
}
139-
140130
componentDidUpdate(prevProps) {
141131
if (prevProps.location.pathname !== this.props.location.pathname) {
142132
const newProjectId = this.getProjectId(this.props)
@@ -534,24 +524,6 @@ const App = class extends Component {
534524
<GithubStar />
535525

536526
<Headway className='cursor-pointer' />
537-
<Tooltip
538-
place='bottom'
539-
title={
540-
<div className='dark-mode mt-0'>
541-
<Switch
542-
checked={Utils.getFlagsmithHasFeature(
543-
'dark_mode',
544-
)}
545-
onChange={this.toggleDarkMode}
546-
darkMode
547-
/>
548-
</div>
549-
}
550-
>
551-
{Utils.getFlagsmithHasFeature('dark_mode')
552-
? 'Light Mode'
553-
: 'Dark Mode'}
554-
</Tooltip>
555527
</Row>
556528
</nav>
557529
</React.Fragment>

‎frontend/web/components/DarkModeSwitch.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { FC } from 'react'
2+
import Utils from 'common/utils/utils'
3+
import ConfigProvider from 'common/providers/ConfigProvider'
4+
import flagsmith from 'flagsmith'
5+
import Tooltip from './Tooltip'
6+
import Setting from './Setting'
7+
8+
type DarkModeSwitchType = {}
9+
10+
const DarkModeSwitch: FC<DarkModeSwitchType> = ({}) => {
11+
const toggleDarkMode = () => {
12+
const newValue = !Utils.getFlagsmithHasFeature('dark_mode')
13+
flagsmith.setTrait('dark_mode', newValue)
14+
if (newValue) {
15+
document.body.classList.add('dark')
16+
} else {
17+
document.body.classList.remove('dark')
18+
}
19+
}
20+
return (
21+
<Setting
22+
title='Dark Mode'
23+
description='Adjust the theme you see when using Flagsmith.'
24+
checked={Utils.getFlagsmithHasFeature('dark_mode')}
25+
onChange={toggleDarkMode}
26+
/>
27+
)
28+
}
29+
30+
export default ConfigProvider(DarkModeSwitch)

‎frontend/web/components/SettingTitle.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { FC } from 'react'
2+
import classNames from 'classnames'
3+
4+
type SettingTitleType = {
5+
danger?: boolean
6+
}
7+
8+
const SettingTitle: FC<SettingTitleType> = ({ children, danger }) => {
9+
return (
10+
<>
11+
<h5 className={classNames('mt-5 mb-0', { 'text-danger': danger })}>
12+
{children}
13+
</h5>
14+
<hr className='py-0 my-3' />
15+
</>
16+
)
17+
}
18+
19+
export default SettingTitle

‎frontend/web/components/pages/AccountSettingsPage.js‎

Lines changed: 127 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import PageTitle from 'components/PageTitle'
1818
import { withRouter } from 'react-router-dom'
1919
import InfoMessage from 'components/InfoMessage'
2020
import Setting from 'components/Setting'
21+
import AccountProvider from 'common/providers/AccountProvider'
22+
import DarkModeSwitch from 'components/DarkModeSwitch'
23+
import SettingTitle from 'components/SettingTitle'
2124

2225
class AccountSettingsPage extends Component {
2326
static displayName = 'AccountSettingsPage'
@@ -174,153 +177,149 @@ class AccountSettingsPage extends Component {
174177
Log Out
175178
</Button>
176179
}
177-
title={'Account'}
180+
title={'Account Settings'}
178181
/>
179182
<Tabs uncontrolled className='mt-0' history={this.props.history}>
180183
<TabItem tabLabel='General'>
181-
<div className='mt-4'>
182-
<h5 className='mb-5'>General Settings</h5>
184+
<div className='mt-4 col-md-8'>
185+
<SettingTitle>Account Information</SettingTitle>
183186
<JSONReference
184187
showNamesButton
185188
title={'User'}
186189
json={AccountStore.getUser()}
187190
/>
188-
<div className='col-md-6'>
189-
<form className='mb-0' onSubmit={this.save}>
190-
{!['LDAP', 'SAML'].includes(
191-
AccountStore.model.auth_type,
192-
) && (
193-
<div>
194-
<InputGroup
195-
className='mt-2'
196-
title='Email Address'
197-
data-test='firstName'
198-
inputProps={{
199-
className: 'full-width',
200-
name: 'groupName',
201-
readOnly: true,
202-
}}
203-
value={email}
204-
onChange={(e) =>
205-
this.setState({
206-
first_name: Utils.safeParseEventValue(e),
207-
})
191+
<form className='mb-0' onSubmit={this.save}>
192+
{!['LDAP', 'SAML'].includes(
193+
AccountStore.model.auth_type,
194+
) && (
195+
<div>
196+
<InputGroup
197+
className='mt-2'
198+
title='Email Address'
199+
data-test='firstName'
200+
inputProps={{
201+
className: 'full-width',
202+
name: 'groupName',
203+
readOnly: true,
204+
}}
205+
value={email}
206+
onChange={(e) =>
207+
this.setState({
208+
first_name: Utils.safeParseEventValue(e),
209+
})
210+
}
211+
type='text'
212+
name='Email Address'
213+
/>
214+
<div className='text-right'>
215+
<Button
216+
onClick={() =>
217+
openModal(
218+
'Change Email Address',
219+
<ChangeEmailAddress
220+
onComplete={() => {
221+
closeModal()
222+
AppActions.logout()
223+
}}
224+
/>,
225+
'p-0',
226+
)
208227
}
209-
type='text'
210-
name='Email Address'
211-
/>
212-
<div className='text-right mt-5'>
213-
<Button
214-
onClick={() =>
215-
openModal(
216-
'Change Email Address',
217-
<ChangeEmailAddress
218-
onComplete={() => {
219-
closeModal()
220-
AppActions.logout()
221-
}}
222-
/>,
223-
'p-0',
224-
)
225-
}
226-
id='change-email-button'
227-
data-test='change-email-button'
228-
type='button'
229-
class='input-group-addon'
230-
>
231-
Change Email Address
232-
</Button>
233-
</div>
228+
id='change-email-button'
229+
data-test='change-email-button'
230+
type='button'
231+
class='input-group-addon'
232+
>
233+
Change Email Address
234+
</Button>
234235
</div>
235-
)}
236-
<InputGroup
237-
className='mt-2 mb-4'
238-
title='First Name'
239-
data-test='firstName'
240-
inputProps={{
241-
className: 'full-width',
242-
name: 'groupName',
243-
}}
244-
value={first_name}
245-
onChange={(e) =>
246-
this.setState({
247-
first_name: Utils.safeParseEventValue(e),
248-
})
249-
}
250-
isValid={first_name && first_name.length}
251-
type='text'
252-
name='First Name*'
253-
/>
254-
<InputGroup
255-
className='mb-5'
256-
title='Last Name'
257-
data-test='lastName'
258-
inputProps={{
259-
className: 'full-width',
260-
name: 'groupName',
261-
}}
262-
value={last_name}
263-
onChange={(e) =>
264-
this.setState({
265-
last_name: Utils.safeParseEventValue(e),
266-
})
267-
}
268-
isValid={last_name && last_name.length}
269-
type='text'
270-
name='Last Name*'
271-
/>
272-
{error && <ErrorMessage>{error}</ErrorMessage>}
273-
<div className='text-right mt-2'>
274-
<Button
275-
type='submit'
276-
disabled={isSaving || !first_name || !last_name}
277-
>
278-
Save Details
279-
</Button>
280236
</div>
281-
</form>
282-
</div>
283-
<hr className='py-0 my-4' />
284-
<div className='col-md-6'>
285-
<Setting
286-
onChange={(v) => {
287-
flagsmith.setTrait('json_inspect', v).then(() => {
288-
toast('Updated')
237+
)}
238+
<InputGroup
239+
className='mt-2'
240+
title='First Name'
241+
data-test='firstName'
242+
inputProps={{
243+
className: 'full-width',
244+
name: 'groupName',
245+
}}
246+
value={first_name}
247+
onChange={(e) =>
248+
this.setState({
249+
first_name: Utils.safeParseEventValue(e),
289250
})
251+
}
252+
isValid={first_name && first_name.length}
253+
type='text'
254+
name='First Name*'
255+
/>
256+
<InputGroup
257+
className='mb-5'
258+
title='Last Name'
259+
data-test='lastName'
260+
inputProps={{
261+
className: 'full-width',
262+
name: 'groupName',
290263
}}
291-
checked={flagsmith.getTrait('json_inspect')}
292-
title={'Show JSON References'}
293-
description={`Enabling this will allow you to inspect the JSON of entities such as features within the platform.`}
264+
value={last_name}
265+
onChange={(e) =>
266+
this.setState({
267+
last_name: Utils.safeParseEventValue(e),
268+
})
269+
}
270+
isValid={last_name && last_name.length}
271+
type='text'
272+
name='Last Name*'
294273
/>
295-
</div>
296-
<hr className='py-0 my-4' />
297-
<div className='col-md-6'>
298-
<Row className='mt-4' space>
299-
<div className='col-md-7 pl-0'>
300-
<h5>Delete Account</h5>
301-
<p className='fs-small lh-sm mb-0'>
302-
Your account data will be permanently deleted.
303-
</p>
304-
</div>
274+
{error && <ErrorMessage>{error}</ErrorMessage>}
275+
<div className='text-right'>
305276
<Button
306-
id='delete-user-btn'
307-
data-test='delete-user-btn'
308-
onClick={() =>
309-
this.confirmDeleteAccount(
310-
lastUserOrganisations,
311-
id,
312-
email,
313-
auth_type,
314-
)
315-
}
316-
className='btn-with-icon btn-remove'
277+
type='submit'
278+
disabled={isSaving || !first_name || !last_name}
317279
>
318-
<Icon name='trash-2' width={20} fill='#EF4D56' />
280+
Save Details
319281
</Button>
320-
</Row>
321-
</div>
282+
</div>
283+
</form>
284+
<SettingTitle>Appearance</SettingTitle>
285+
<DarkModeSwitch />
286+
<SettingTitle>Developer</SettingTitle>
287+
<Setting
288+
onChange={(v) => {
289+
flagsmith.setTrait('json_inspect', v).then(() => {
290+
toast('Updated')
291+
})
292+
}}
293+
checked={flagsmith.getTrait('json_inspect')}
294+
title={'Show JSON References'}
295+
description={`Enabling this will allow you to inspect the JSON of entities such as features within the platform.`}
296+
/>
297+
<SettingTitle danger>Delete Account</SettingTitle>
298+
<Row className='' space>
299+
<div className='pl-0'>
300+
<p className='fs-small lh-sm mb-0'>
301+
Your account data will be permanently deleted.
302+
</p>
303+
</div>
304+
<Button
305+
id='delete-user-btn'
306+
data-test='delete-user-btn'
307+
onClick={() =>
308+
this.confirmDeleteAccount(
309+
lastUserOrganisations,
310+
id,
311+
email,
312+
auth_type,
313+
)
314+
}
315+
theme='danger'
316+
>
317+
Delete Account
318+
</Button>
319+
</Row>
322320
</div>
323321
</TabItem>
322+
324323
<TabItem tabLabel='API Keys'>
325324
<div className='mt-6'>
326325
<div className='col-md-6'>

0 commit comments

Comments
 (0)