Skip to content

Commit d6ba465

Browse files
ocielliottcocielliottc
committed
Check array length against explicit value to avoid displaying a zero on load and fixed a "key" warning.
1 parent 36175c6 commit d6ba465

File tree

2 files changed

+75
-71
lines changed

2 files changed

+75
-71
lines changed

‎web-ui/src/pages/SettingsPage.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,6 @@ const SettingsPage = () => {
6161
}
6262
}, [state, csrf]);
6363

64-
// For specific settings, add a handleFunction to the settings object.
65-
// Format should be handleSetting and then add it to the handlers object
66-
// with the setting name as the key.
6764
const handleLogoUrl = file => {
6865
if (csrf) {
6966
// TODO: Need to upload the file to a storage bucket...
@@ -200,17 +197,20 @@ const SettingsPage = () => {
200197
} else {
201198
categories[info.category] = true;
202199
return (
203-
<>
204-
<Typography data-testid={info.category}
205-
variant="h4"
206-
sx={{textDecoration: 'underline'}}
207-
display="inline">{titleCase(info.category)}</Typography>
208-
<Component key={index} {...info} />
209-
</>
200+
<div key={index}>
201+
<Typography data-testid={info.category}
202+
variant="h4"
203+
sx={{textDecoration: 'underline'}}
204+
display="inline">{titleCase(info.category)}
205+
</Typography>
206+
<Component {...info} />
207+
</div>
210208
);
211209
}
212210
})}
213-
{settingsControls && settingsControls.length &&
211+
{// Check length against an explicit value. If length is zero, it will
212+
// be displayed instead of evaluated to false.
213+
settingsControls && settingsControls.length > 0 &&
214214
selectHasAdministerSettingsPermission(state) &&
215215
<div className="buttons">
216216
<Button

‎web-ui/src/pages/__snapshots__/SettingsPage.test.jsx.snap‎

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -13,77 +13,81 @@ exports[`SettingsPage > renders correctly 1`] = `
1313
<div
1414
class="settings-page"
1515
>
16-
<h4
17-
class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
18-
data-testid="INTEGRATIONS"
19-
>
20-
Integrations
21-
</h4>
22-
<div
23-
class="settings-type"
24-
>
25-
<label
26-
for="another-setting"
16+
<div>
17+
<h4
18+
class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
19+
data-testid="INTEGRATIONS"
2720
>
28-
<h5
29-
class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
30-
>
31-
Another Setting
32-
</h5>
33-
</label>
34-
<p>
35-
The description
36-
</p>
37-
<span
38-
class="MuiSwitch-root MuiSwitch-sizeMedium settings-control css-julti5-MuiSwitch-root"
21+
Integrations
22+
</h4>
23+
<div
24+
class="settings-type"
3925
>
26+
<label
27+
for="another-setting"
28+
>
29+
<h5
30+
class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
31+
>
32+
Another Setting
33+
</h5>
34+
</label>
35+
<p>
36+
The description
37+
</p>
4038
<span
41-
class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
39+
class="MuiSwitch-root MuiSwitch-sizeMedium settings-control css-julti5-MuiSwitch-root"
4240
>
43-
<input
44-
class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
45-
id="another-setting"
46-
type="checkbox"
47-
/>
4841
<span
49-
class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
42+
class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-byenzh-MuiButtonBase-root-MuiSwitch-switchBase"
43+
>
44+
<input
45+
class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
46+
id="another-setting"
47+
type="checkbox"
48+
/>
49+
<span
50+
class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
51+
/>
52+
</span>
53+
<span
54+
class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
5055
/>
5156
</span>
52-
<span
53-
class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
54-
/>
55-
</span>
57+
</div>
5658
</div>
57-
<h4
58-
class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
59-
data-testid="THEME"
60-
>
61-
Theme
62-
</h4>
63-
<div
64-
class="settings-type"
65-
>
66-
<label
67-
for="other-setting"
59+
<div>
60+
<h4
61+
class="MuiTypography-root MuiTypography-h4 css-13d5t77-MuiTypography-root"
62+
data-testid="THEME"
6863
>
69-
<h5
70-
class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
71-
>
72-
Other Setting
73-
</h5>
74-
</label>
75-
<p>
76-
The description
77-
</p>
64+
Theme
65+
</h4>
7866
<div
79-
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary settings-control css-bz5ng3-MuiInputBase-root-MuiInput-root"
67+
class="settings-type"
8068
>
81-
<input
82-
class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
83-
id="other-setting"
84-
type="number"
85-
value="42"
86-
/>
69+
<label
70+
for="other-setting"
71+
>
72+
<h5
73+
class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom css-h93ljk-MuiTypography-root"
74+
>
75+
Other Setting
76+
</h5>
77+
</label>
78+
<p>
79+
The description
80+
</p>
81+
<div
82+
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary settings-control css-bz5ng3-MuiInputBase-root-MuiInput-root"
83+
>
84+
<input
85+
class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
86+
id="other-setting"
87+
type="number"
88+
value="42"
89+
/>
90+
</div>
8791
</div>
8892
</div>
8993
<div

0 commit comments

Comments
 (0)