Skip to content

Commit 39da166

Browse files
jaaydenhjaaydenh
committed
chore: remove stack component
1 parent ea8cd55 commit 39da166

File tree

2 files changed

+22
-30
lines changed

2 files changed

+22
-30
lines changed

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
22
import Button from "@mui/material/Button";
33
import { groupsByOrganization } from "api/queries/groups";
4+
import { organizationRoles } from "api/queries/roles";
45
import {
56
groupIdpSyncSettings,
67
roleIdpSyncSettings,
@@ -9,7 +10,6 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
910
import { EmptyState } from "components/EmptyState/EmptyState";
1011
import { Paywall } from "components/Paywall/Paywall";
1112
import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
12-
import { Stack } from "components/Stack/Stack";
1313
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1414
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
1515
import type { FC } from "react";
@@ -30,12 +30,13 @@ export const IdpSyncPage: FC = () => {
3030
const { organizations } = useOrganizationSettings();
3131
const organization = organizations?.find((o) => o.name === organizationName);
3232

33-
const [groupIdpSyncSettingsQuery, roleIdpSyncSettingsQuery, groupsQuery] =
33+
const [groupIdpSyncSettingsQuery, roleIdpSyncSettingsQuery, groupsQuery, rolesQuery] =
3434
useQueries({
3535
queries: [
3636
groupIdpSyncSettings(organizationName),
3737
roleIdpSyncSettings(organizationName),
3838
groupsByOrganization(organizationName),
39+
organizationRoles(organizationName),
3940
],
4041
});
4142

@@ -61,10 +62,7 @@ export const IdpSyncPage: FC = () => {
6162
<title>{pageTitle("IdP Sync")}</title>
6263
</Helmet>
6364

64-
<Stack
65-
alignItems="baseline"
66-
direction="row"
67-
justifyContent="space-between"
65+
<div className="flex items-baseline justify-between"
6866
>
6967
<SettingsHeader
7068
title="IdP Sync"
@@ -79,7 +77,7 @@ export const IdpSyncPage: FC = () => {
7977
>
8078
Setup IdP Sync
8179
</Button>
82-
</Stack>
80+
</div>
8381
<ChooseOne>
8482
<Cond condition={!isIdpSyncEnabled}>
8583
<Paywall
@@ -94,6 +92,7 @@ export const IdpSyncPage: FC = () => {
9492
roleSyncSettings={roleIdpSyncSettingsQuery.data}
9593
groups={groupsQuery.data}
9694
groupsMap={groupsMap}
95+
roles={rolesQuery.data}
9796
organization={organization}
9897
error={error}
9998
/>

‎site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import type {
1313
Group,
1414
GroupSyncSettings,
1515
Organization,
16+
Role,
1617
RoleSyncSettings,
1718
} from "api/typesGenerated";
1819
import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -26,7 +27,6 @@ import {
2627
HelpTooltipTrigger,
2728
} from "components/HelpTooltip/HelpTooltip";
2829
import { Loader } from "components/Loader/Loader";
29-
import { Stack } from "components/Stack/Stack";
3030
import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
3131
import {
3232
TableLoaderSkeleton,
@@ -45,6 +45,7 @@ interface IdpSyncPageViewProps {
4545
roleSyncSettings: RoleSyncSettings | undefined;
4646
groups: Group[] | undefined;
4747
groupsMap: Map<string, string>;
48+
roles: Role[] | undefined;
4849
organization: Organization;
4950
error?: unknown;
5051
}
@@ -54,6 +55,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
5455
roleSyncSettings,
5556
groups,
5657
groupsMap,
58+
roles,
5759
organization,
5860
error,
5961
}) => {
@@ -85,7 +87,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
8587

8688
return (
8789
<>
88-
<Stack spacing={2}>
90+
<div className="gap-4">
8991
<Tabs active={tab}>
9092
<TabsList>
9193
<TabLink to="?tab=groups" value="groups">
@@ -99,7 +101,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
99101
{tab === "groups" ? (
100102
<>
101103
<div css={styles.fields}>
102-
<Stack direction="row" alignItems="center" spacing={6}>
104+
<div className="flex items-center gap-12">
103105
<IdpField
104106
name="Sync Field"
105107
fieldText={groupSyncSettings?.field}
@@ -121,22 +123,17 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
121123
: "n/a"
122124
}
123125
/>
124-
</Stack>
126+
</div>
125127
</div>
126-
<Stack
127-
direction="row"
128-
alignItems="baseline"
129-
justifyContent="space-between"
130-
css={styles.tableInfo}
131-
>
128+
<div className="flex items-baseline justify-between mb-4">
132129
<TableRowCount count={groupMappingCount} type="groups" />
133130
<ExportPolicyButton
134131
syncSettings={groupSyncSettings}
135132
organization={organization}
136133
type="groups"
137134
/>
138-
</Stack>
139-
<Stack spacing={6}>
135+
</div>
136+
<div className="flex gap-12">
140137
<IdpMappingTable type="Group" isEmpty={groupMappingCount === 0}>
141138
{groupSyncSettings?.mapping &&
142139
Object.entries(groupSyncSettings.mapping)
@@ -168,7 +165,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
168165
</IdpMappingTable>
169166
</section>
170167
)}
171-
</Stack>
168+
</div>
172169
</>
173170
) : (
174171
<>
@@ -179,19 +176,15 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
179176
showDisabled
180177
/>
181178
</div>
182-
<Stack
183-
direction="row"
184-
alignItems="baseline"
185-
justifyContent="space-between"
186-
css={styles.tableInfo}
187-
>
179+
<div
180+
className="flex items-baseline justify-between mb-4">
188181
<TableRowCount count={roleMappingCount} type="roles" />
189182
<ExportPolicyButton
190183
syncSettings={roleSyncSettings}
191184
organization={organization}
192185
type="roles"
193186
/>
194-
</Stack>
187+
</div>
195188
<IdpMappingTable type="Role" isEmpty={roleMappingCount === 0}>
196189
{roleSyncSettings?.mapping &&
197190
Object.entries(roleSyncSettings.mapping)
@@ -206,7 +199,7 @@ export const IdpSyncPageView: FC<IdpSyncPageViewProps> = ({
206199
</IdpMappingTable>
207200
</>
208201
)}
209-
</Stack>
202+
</div>
210203
</>
211204
);
212205
};
@@ -389,7 +382,7 @@ const LegacyGroupSyncHeader: FC = () => {
389382
fontWeight: 500,
390383
}}
391384
>
392-
<Stack direction="row" alignItems="end" spacing={1}>
385+
<div className="flex items-end gap-2">
393386
<span>Legacy Group Sync Settings</span>
394387
<HelpTooltip>
395388
<HelpTooltipTrigger />
@@ -407,7 +400,7 @@ const LegacyGroupSyncHeader: FC = () => {
407400
</HelpTooltipText>
408401
</HelpTooltipContent>
409402
</HelpTooltip>
410-
</Stack>
403+
</div>
411404
</h4>
412405
);
413406
};

0 commit comments

Comments
 (0)