Skip to content

Commit 6b42506

Browse files
code-ashercode-asher
committed
Destruct props
1 parent b86684d commit 6b42506

File tree

1 file changed

+52
-48
lines changed

1 file changed

+52
-48
lines changed

‎site/src/pages/ManagementSettingsPage/SidebarView.tsx

Lines changed: 52 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,25 @@ interface SidebarProps {
3030
/**
3131
* A combined deployment settings and organization menu.
3232
*/
33-
export const SidebarView: FC<SidebarProps> = (props) => {
33+
export const SidebarView: FC<SidebarProps> = ({
34+
activeSettings,
35+
activeOrganizationName,
36+
organizations,
37+
permissions,
38+
}) => {
3439
// TODO: Do something nice to scroll to the active org.
3540
return (
3641
<BaseSidebar>
3742
<header css={styles.sidebarHeader}>Deployment</header>
3843
<DeploymentSettingsNavigation
39-
active={!props.activeOrganizationName && props.activeSettings}
40-
permissions={props.permissions}
44+
active={!activeOrganizationName && activeSettings}
45+
permissions={permissions}
46+
/>
47+
<OrganizationsSettingsNavigation
48+
activeOrganizationName={activeOrganizationName}
49+
organizations={organizations}
50+
permissions={permissions}
4151
/>
42-
<OrganizationsSettingsNavigation {...props} />
4352
</BaseSidebar>
4453
);
4554
};
@@ -58,15 +67,16 @@ interface DeploymentSettingsNavigationProps {
5867
* Menu items are shown based on the permissions. If organizations can be
5968
* viewed, groups are skipped since they will show under each org instead.
6069
*/
61-
const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = (
62-
props,
63-
) => {
70+
const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
71+
active,
72+
permissions,
73+
}) => {
6474
return (
6575
<div css={{ paddingBottom: 12 }}>
6676
<SidebarNavItem
67-
active={props.active}
77+
active={active}
6878
href={
69-
props.permissions.viewDeploymentValues
79+
permissions.viewDeploymentValues
7080
? "/deployment/general"
7181
: "/deployment/workspace-proxies"
7282
}
@@ -77,23 +87,23 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = (
7787
>
7888
Deployment
7989
</SidebarNavItem>
80-
{props.active && (
90+
{active && (
8191
<Stack spacing={0.5} css={{ marginBottom: 8, marginTop: 8 }}>
82-
{props.permissions.viewDeploymentValues && (
92+
{permissions.viewDeploymentValues && (
8393
<SidebarNavSubItem href="general">General</SidebarNavSubItem>
8494
)}
85-
{props.permissions.viewAllLicenses && (
95+
{permissions.viewAllLicenses && (
8696
<SidebarNavSubItem href="licenses">Licenses</SidebarNavSubItem>
8797
)}
88-
{props.permissions.editDeploymentValues && (
98+
{permissions.editDeploymentValues && (
8999
<SidebarNavSubItem href="appearance">Appearance</SidebarNavSubItem>
90100
)}
91-
{props.permissions.viewDeploymentValues && (
101+
{permissions.viewDeploymentValues && (
92102
<SidebarNavSubItem href="userauth">
93103
User Authentication
94104
</SidebarNavSubItem>
95105
)}
96-
{props.permissions.viewDeploymentValues && (
106+
{permissions.viewDeploymentValues && (
97107
<SidebarNavSubItem href="external-auth">
98108
External Authentication
99109
</SidebarNavSubItem>
@@ -102,27 +112,27 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = (
102112
<SidebarNavSubItem href="oauth2-provider/ap>
103113
OAuth2 Applications
104114
</SidebarNavSubItem>*/}
105-
{props.permissions.viewDeploymentValues && (
115+
{permissions.viewDeploymentValues && (
106116
<SidebarNavSubItem href="network">Network</SidebarNavSubItem>
107117
)}
108118
{/* All users can view workspace regions. */}
109119
<SidebarNavSubItem href="workspace-proxies">
110120
Workspace Proxies
111121
</SidebarNavSubItem>
112-
{props.permissions.viewDeploymentValues && (
122+
{permissions.viewDeploymentValues && (
113123
<SidebarNavSubItem href="security">Security</SidebarNavSubItem>
114124
)}
115-
{props.permissions.viewDeploymentValues && (
125+
{permissions.viewDeploymentValues && (
116126
<SidebarNavSubItem href="observability">
117127
Observability
118128
</SidebarNavSubItem>
119129
)}
120-
{props.permissions.viewAllUsers && (
130+
{permissions.viewAllUsers && (
121131
<SidebarNavSubItem href={linkToUsers.slice(1)}>
122132
Users
123133
</SidebarNavSubItem>
124134
)}
125-
{props.permissions.viewAnyAuditLog && (
135+
{permissions.viewAnyAuditLog && (
126136
<SidebarNavSubItem href={linkToAuditing.slice(1)}>
127137
Auditing
128138
</SidebarNavSubItem>
@@ -156,23 +166,20 @@ interface OrganizationsSettingsNavigationProps {
156166
*/
157167
const OrganizationsSettingsNavigation: FC<
158168
OrganizationsSettingsNavigationProps
159-
> = (props) => {
169+
> = ({ activeOrganizationName, organizations, permissions }) => {
160170
// Wait for organizations and their permissions to load in.
161-
if (!props.organizations) {
171+
if (!organizations) {
162172
return <Loader />;
163173
}
164174

165-
if (
166-
props.organizations.length <= 0 &&
167-
!props.permissions.createOrganization
168-
) {
175+
if (organizations.length <= 0 && !permissions.createOrganization) {
169176
return null;
170177
}
171178

172179
return (
173180
<>
174181
<header css={styles.sidebarHeader}>Organizations</header>
175-
{props.permissions.createOrganization && (
182+
{permissions.createOrganization && (
176183
<SidebarNavItem
177184
active="auto"
178185
href="/organizations/new"
@@ -181,11 +188,11 @@ const OrganizationsSettingsNavigation: FC<
181188
New organization
182189
</SidebarNavItem>
183190
)}
184-
{props.organizations.map((org) => (
191+
{organizations.map((org) => (
185192
<OrganizationSettingsNavigation
186193
key={org.id}
187194
organization={org}
188-
active={org.name === props.activeOrganizationName}
195+
active={org.name === activeOrganizationName}
189196
/>
190197
))}
191198
</>
@@ -208,55 +215,52 @@ interface OrganizationSettingsNavigationProps {
208215
*/
209216
const OrganizationSettingsNavigation: FC<
210217
OrganizationSettingsNavigationProps
211-
> = (props) => {
218+
> = ({ active, organization }) => {
212219
return (
213220
<>
214221
<SidebarNavItem
215-
active={props.active}
216-
href={urlForSubpage(props.organization.name)}
222+
active={active}
223+
href={urlForSubpage(organization.name)}
217224
icon={
218225
<UserAvatar
219-
key={props.organization.id}
226+
key={organization.id}
220227
size="sm"
221-
username={props.organization.display_name}
222-
avatarURL={props.organization.icon}
228+
username={organization.display_name}
229+
avatarURL={organization.icon}
223230
/>
224231
}
225232
>
226-
{props.organization.display_name}
233+
{organization.display_name}
227234
</SidebarNavItem>
228-
{props.active && (
235+
{active && (
229236
<Stack spacing={0.5} css={{ marginBottom: 8, marginTop: 8 }}>
230-
{props.organization.permissions.editOrganization && (
231-
<SidebarNavSubItem
232-
end
233-
href={urlForSubpage(props.organization.name)}
234-
>
237+
{organization.permissions.editOrganization && (
238+
<SidebarNavSubItem end href={urlForSubpage(organization.name)}>
235239
Organization settings
236240
</SidebarNavSubItem>
237241
)}
238-
{props.organization.permissions.editMembers && (
242+
{organization.permissions.editMembers && (
239243
<SidebarNavSubItem
240-
href={urlForSubpage(props.organization.name, "members")}
244+
href={urlForSubpage(organization.name, "members")}
241245
>
242246
Members
243247
</SidebarNavSubItem>
244248
)}
245-
{props.organization.permissions.editGroups && (
249+
{organization.permissions.editGroups && (
246250
<SidebarNavSubItem
247-
href={urlForSubpage(props.organization.name, "groups")}
251+
href={urlForSubpage(organization.name, "groups")}
248252
>
249253
Groups
250254
</SidebarNavSubItem>
251255
)}
252256
{/* For now redirect to the site-wide audit page with the organization
253257
pre-filled into the filter. Based on user feedback we might want
254258
to serve a copy of the audit page or even delete this link. */}
255-
{props.organization.permissions.auditOrganization && (
259+
{organization.permissions.auditOrganization && (
256260
<SidebarNavSubItem
257261
href={`/deployment${withFilter(
258262
linkToAuditing,
259-
`organization:${props.organization.name}`,
263+
`organization:${organization.name}`,
260264
)}`}
261265
>
262266
Auditing

0 commit comments

Comments
 (0)