Skip to content

Commit 6eee135

Browse files
LauraBeatrisLauraBeatris
committed
Declare attribute mapping tables in each module
1 parent 7dbd9dc commit 6eee135

5 files changed

Lines changed: 423 additions & 344 deletions

File tree

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlCustomConfigureSteps.tsx‎

Lines changed: 97 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
import React, { type JSX } from 'react';
22

3-
import { Col, descriptors, Heading, localizationKeys, Text } from '@/customizables';
3+
import {
4+
Badge,
5+
Col,
6+
descriptors,
7+
Flex,
8+
Heading,
9+
localizationKeys,
10+
Table,
11+
Tbody,
12+
Td,
13+
Text,
14+
Th,
15+
Thead,
16+
Tr,
17+
} from '@/customizables';
418
import { ClipboardInput } from '@/elements/ClipboardInput';
519
import { useCardState } from '@/elements/contexts';
620
import { Form } from '@/elements/Form';
@@ -11,7 +25,6 @@ import { useConfigureSSO } from '../../../ConfigureSSOContext';
1125
import { Step } from '../../../elements/Step';
1226
import { useWizard, Wizard } from '../../../elements/Wizard';
1327
import { InnerStepCounter } from '../../../elements/Wizard/InnerStepCounter';
14-
import { AttributeMappingTable, type AttributeMappingTableConfig } from './shared/AttributeMappingTable';
1528
import {
1629
applySamlSubmitError,
1730
buildSamlConfigurationPayload,
@@ -151,49 +164,89 @@ const SamlCustomCreateAppStep = (): JSX.Element => {
151164
);
152165
};
153166

154-
const CUSTOM_ATTRIBUTE_MAPPING: AttributeMappingTableConfig = {
155-
columns: {
156-
first: localizationKeys(
157-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.columns.userProfile',
158-
),
159-
second: localizationKeys(
160-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.columns.attributeName',
161-
),
162-
},
163-
rows: [
164-
{
165-
id: 'email',
166-
isRequired: true,
167-
first: localizationKeys(
168-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.email.userProfile',
169-
),
170-
second: localizationKeys(
171-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.email.attributeName',
172-
),
173-
},
174-
{
175-
id: 'firstName',
176-
isRequired: false,
177-
first: localizationKeys(
178-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.firstName.userProfile',
179-
),
180-
second: localizationKeys(
181-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.firstName.attributeName',
182-
),
183-
},
184-
{
185-
id: 'lastName',
186-
isRequired: false,
187-
first: localizationKeys(
188-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.lastName.userProfile',
189-
),
190-
second: localizationKeys(
191-
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.lastName.attributeName',
192-
),
193-
},
194-
],
167+
type CustomAttributeRow = {
168+
id: 'email' | 'firstName' | 'lastName';
169+
isRequired: boolean;
195170
};
196171

172+
const CUSTOM_ATTRIBUTE_ROWS: ReadonlyArray<CustomAttributeRow> = [
173+
{ id: 'email', isRequired: true },
174+
{ id: 'firstName', isRequired: false },
175+
{ id: 'lastName', isRequired: false },
176+
];
177+
178+
const CustomAttributeMappingTable = (): JSX.Element => (
179+
<Table
180+
elementDescriptor={descriptors.configureSSOAttributeMappingTable}
181+
sx={theme => ({
182+
'tr > th:first-of-type': { paddingInlineStart: theme.space.$4 },
183+
})}
184+
>
185+
<Thead>
186+
<Tr>
187+
<Th>
188+
<Text
189+
sx={theme => ({ fontSize: theme.fontSizes.$xs })}
190+
localizationKey={localizationKeys(
191+
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.columns.userProfile',
192+
)}
193+
/>
194+
</Th>
195+
<Th>
196+
<Text
197+
sx={theme => ({ fontSize: theme.fontSizes.$xs })}
198+
localizationKey={localizationKeys(
199+
'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.columns.attributeName',
200+
)}
201+
/>
202+
</Th>
203+
</Tr>
204+
</Thead>
205+
<Tbody>
206+
{CUSTOM_ATTRIBUTE_ROWS.map(row => (
207+
<Tr key={row.id}>
208+
<Td>
209+
<Flex
210+
as='span'
211+
align='center'
212+
sx={theme => ({ gap: theme.space.$2 })}
213+
>
214+
<Text
215+
as='span'
216+
colorScheme='secondary'
217+
localizationKey={localizationKeys(
218+
`configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.${row.id}.userProfile`,
219+
)}
220+
/>
221+
<Badge
222+
elementDescriptor={descriptors.configureSSOAttributeMappingBadge}
223+
elementId={descriptors.configureSSOAttributeMappingBadge.setId(
224+
row.isRequired ? 'required' : 'optional',
225+
)}
226+
colorScheme={row.isRequired ? 'warning' : 'primary'}
227+
localizationKey={localizationKeys(
228+
row.isRequired
229+
? 'configureSSO.configureStep.attributeMappingTable.badges.required'
230+
: 'configureSSO.configureStep.attributeMappingTable.badges.optional',
231+
)}
232+
/>
233+
</Flex>
234+
</Td>
235+
<Td>
236+
<Text
237+
as='span'
238+
sx={{ fontFamily: 'monospace' }}
239+
localizationKey={localizationKeys(
240+
`configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.${row.id}.attributeName`,
241+
)}
242+
/>
243+
</Td>
244+
</Tr>
245+
))}
246+
</Tbody>
247+
</Table>
248+
);
249+
197250
const SamlCustomAttributeMappingStep = (): JSX.Element => {
198251
const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
199252

@@ -207,7 +260,7 @@ const SamlCustomAttributeMappingStep = (): JSX.Element => {
207260
localizationKey={localizationKeys('configureSSO.configureStep.samlCustom.attributeMappingStep.paragraph')}
208261
/>
209262

210-
<AttributeMappingTable config={CUSTOM_ATTRIBUTE_MAPPING} />
263+
<CustomAttributeMappingTable />
211264
</Step.Section>
212265
</Step.Body>
213266

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlGoogleConfigureSteps.tsx‎

Lines changed: 83 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { type JSX } from 'react';
22

3-
import { Col, descriptors, Heading, Text } from '@/customizables';
3+
import { Badge, Col, descriptors, Flex, Heading, Table, Tbody, Td, Text, Th, Thead, Tr } from '@/customizables';
44
import { ClipboardInput } from '@/elements/ClipboardInput';
55
import { useCardState } from '@/elements/contexts';
66
import { Form } from '@/elements/Form';
@@ -12,7 +12,6 @@ import { useConfigureSSO } from '../../../ConfigureSSOContext';
1212
import { Step } from '../../../elements/Step';
1313
import { useWizard, Wizard } from '../../../elements/Wizard';
1414
import { InnerStepCounter } from '../../../elements/Wizard/InnerStepCounter';
15-
import { AttributeMappingTable, type AttributeMappingTableConfig } from './shared/AttributeMappingTable';
1615
import {
1716
applySamlSubmitError,
1817
buildSamlConfigurationPayload,
@@ -474,49 +473,89 @@ const SamlGoogleServiceProviderStep = (): JSX.Element => {
474473
);
475474
};
476475

477-
const GOOGLE_ATTRIBUTE_MAPPING: AttributeMappingTableConfig = {
478-
columns: {
479-
first: localizationKeys(
480-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.columns.googleAttribute',
481-
),
482-
second: localizationKeys(
483-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.columns.appAttribute',
484-
),
485-
},
486-
rows: [
487-
{
488-
id: 'email',
489-
isRequired: true,
490-
first: localizationKeys(
491-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.email.googleAttribute',
492-
),
493-
second: localizationKeys(
494-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.email.appAttribute',
495-
),
496-
},
497-
{
498-
id: 'firstName',
499-
isRequired: false,
500-
first: localizationKeys(
501-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.firstName.googleAttribute',
502-
),
503-
second: localizationKeys(
504-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.firstName.appAttribute',
505-
),
506-
},
507-
{
508-
id: 'lastName',
509-
isRequired: false,
510-
first: localizationKeys(
511-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.lastName.googleAttribute',
512-
),
513-
second: localizationKeys(
514-
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.lastName.appAttribute',
515-
),
516-
},
517-
],
476+
type GoogleAttributeRow = {
477+
id: 'email' | 'firstName' | 'lastName';
478+
isRequired: boolean;
518479
};
519480

481+
const GOOGLE_ATTRIBUTE_ROWS: ReadonlyArray<GoogleAttributeRow> = [
482+
{ id: 'email', isRequired: true },
483+
{ id: 'firstName', isRequired: false },
484+
{ id: 'lastName', isRequired: false },
485+
];
486+
487+
const GoogleAttributeMappingTable = (): JSX.Element => (
488+
<Table
489+
elementDescriptor={descriptors.configureSSOAttributeMappingTable}
490+
sx={theme => ({
491+
'tr > th:first-of-type': { paddingInlineStart: theme.space.$4 },
492+
})}
493+
>
494+
<Thead>
495+
<Tr>
496+
<Th>
497+
<Text
498+
sx={theme => ({ fontSize: theme.fontSizes.$xs })}
499+
localizationKey={localizationKeys(
500+
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.columns.googleAttribute',
501+
)}
502+
/>
503+
</Th>
504+
<Th>
505+
<Text
506+
sx={theme => ({ fontSize: theme.fontSizes.$xs })}
507+
localizationKey={localizationKeys(
508+
'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.columns.appAttribute',
509+
)}
510+
/>
511+
</Th>
512+
</Tr>
513+
</Thead>
514+
<Tbody>
515+
{GOOGLE_ATTRIBUTE_ROWS.map(row => (
516+
<Tr key={row.id}>
517+
<Td>
518+
<Flex
519+
as='span'
520+
align='center'
521+
sx={theme => ({ gap: theme.space.$2 })}
522+
>
523+
<Text
524+
as='span'
525+
colorScheme='secondary'
526+
localizationKey={localizationKeys(
527+
`configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.${row.id}.googleAttribute`,
528+
)}
529+
/>
530+
<Badge
531+
elementDescriptor={descriptors.configureSSOAttributeMappingBadge}
532+
elementId={descriptors.configureSSOAttributeMappingBadge.setId(
533+
row.isRequired ? 'required' : 'optional',
534+
)}
535+
colorScheme={row.isRequired ? 'warning' : 'primary'}
536+
localizationKey={localizationKeys(
537+
row.isRequired
538+
? 'configureSSO.configureStep.attributeMappingTable.badges.required'
539+
: 'configureSSO.configureStep.attributeMappingTable.badges.optional',
540+
)}
541+
/>
542+
</Flex>
543+
</Td>
544+
<Td>
545+
<Text
546+
as='span'
547+
sx={{ fontFamily: 'monospace' }}
548+
localizationKey={localizationKeys(
549+
`configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.${row.id}.appAttribute`,
550+
)}
551+
/>
552+
</Td>
553+
</Tr>
554+
))}
555+
</Tbody>
556+
</Table>
557+
);
558+
520559
const SamlGoogleAttributeMappingStep = (): JSX.Element => {
521560
const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
522561

@@ -554,7 +593,7 @@ const SamlGoogleAttributeMappingStep = (): JSX.Element => {
554593
/>
555594
</Col>
556595

557-
<AttributeMappingTable config={GOOGLE_ATTRIBUTE_MAPPING} />
596+
<GoogleAttributeMappingTable />
558597
</Step.Section>
559598
</Step.Body>
560599

0 commit comments

Comments
 (0)