Skip to content

Commit d6491ef

Browse files
joshbalfourjoshbalfour
authored
feat: org type display chip next to org name (#11625)
* eslint & ts fixes * add org to user-content test
1 parent 546d175 commit d6491ef

File tree

4 files changed

+275
-62
lines changed

4 files changed

+275
-62
lines changed

‎packages/rc-service/src/components/users/__tests__/__snapshots__/user-content.test.tsx.snap‎

Lines changed: 222 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,122 @@ exports[`UserContent Should match snapshot 1`] = `
99
class="mocked-styled-93 el-snack-holder"
1010
/>
1111
<div
12-
class="el-intent-primary el-is-active el-pn-is-full-width el-pn-is-inline el-persistent-notification"
13-
role="status"
12+
class="sc-gEvEer fQSvkU"
1413
>
1514
<div
16-
class="el-pn-icon"
17-
data-testid="close-icon"
15+
class="mocked-styled-115 el-table"
16+
data-has-call-to-action="false"
17+
data-has-expandable-action="false"
18+
data-num-columns-excl-action-col="5"
19+
role="table"
1820
>
19-
<span
20-
class="el-icon-new el-icon"
21-
style="font-size: 1.25rem;"
21+
<div
22+
class="mocked-styled-101 el-table-headers-row"
23+
role="row"
2224
>
23-
<svg
24-
fill="none"
25-
height="1em"
26-
role="img"
27-
style="font-size: 1.25rem;"
28-
title="Icon image with name info"
29-
viewBox="0 0 24 24"
30-
width="1em"
31-
xmlns="http://www.w3.org/2000/svg"
25+
<div
26+
aria-label="Organisation"
27+
class="mocked-styled-102 el-table-header"
28+
role="columnheader"
3229
>
33-
<path
34-
d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m1.143 15.714h-2.286v-6h2.286zm-1.143-8a1.714 1.714 0 1 1 0-3.428 1.714 1.714 0 0 1 0 3.428"
35-
fill="currentColor"
36-
/>
37-
</svg>
38-
</span>
39-
</div>
40-
<div
41-
aria-live="polite"
42-
class="el-pn-content"
43-
>
44-
User not part of any organisations.
30+
Organisation
31+
</div>
32+
<div
33+
aria-label="Organisation Claims"
34+
class="mocked-styled-102 el-table-header"
35+
role="columnheader"
36+
>
37+
Organisation Claims
38+
</div>
39+
<div
40+
aria-label="User Claims"
41+
class="mocked-styled-102 el-table-header"
42+
role="columnheader"
43+
>
44+
User Claims
45+
</div>
46+
<div
47+
aria-label="Office Groups"
48+
class="mocked-styled-102 el-table-header"
49+
role="columnheader"
50+
>
51+
Office Groups
52+
</div>
53+
</div>
54+
<div
55+
class="mocked-styled-110 el-table-row-container"
56+
role="row"
57+
>
58+
<div
59+
class="mocked-styled-103 el-table-row"
60+
>
61+
<div
62+
class="el-table-cell-has-dark-text el-table-cell"
63+
role="cell"
64+
>
65+
<div
66+
class="mocked-styled-111 el-table-cell-content"
67+
>
68+
<div
69+
style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"
70+
>
71+
<span>
72+
an org
73+
</span>
74+
<mock-styled.span
75+
classname="sc-eqUAAy cqznCV"
76+
type="customer"
77+
>
78+
customer
79+
</mock-styled.span>
80+
<mock-styled.span
81+
classname="sc-eqUAAy gNlkwv"
82+
type="developer"
83+
>
84+
developer
85+
</mock-styled.span>
86+
</div>
87+
</div>
88+
</div>
89+
<div
90+
class="el-table-cell-has-dark-text el-table-cell"
91+
role="cell"
92+
>
93+
<div
94+
class="mocked-styled-111 el-table-cell-content"
95+
>
96+
None
97+
</div>
98+
</div>
99+
<div
100+
class="el-table-cell-has-dark-text el-table-cell"
101+
role="cell"
102+
>
103+
<div
104+
class="mocked-styled-111 el-table-cell-content"
105+
>
106+
None
107+
</div>
108+
</div>
109+
<div
110+
class="el-table-cell-has-dark-text el-table-cell"
111+
role="cell"
112+
>
113+
<div
114+
class="mocked-styled-111 el-table-cell-content"
115+
>
116+
<button
117+
class="el-intent-neutral el-button"
118+
>
119+
<div
120+
class="mocked-styled-0 el-button-loader"
121+
/>
122+
Check
123+
</button>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
45128
</div>
46129
</div>
47130
</div>
@@ -51,39 +134,122 @@ exports[`UserContent Should match snapshot 1`] = `
51134
class="mocked-styled-93 el-snack-holder"
52135
/>
53136
<div
54-
class="el-intent-primary el-is-active el-pn-is-full-width el-pn-is-inline el-persistent-notification"
55-
role="status"
137+
class="sc-gEvEer fQSvkU"
56138
>
57139
<div
58-
class="el-pn-icon"
59-
data-testid="close-icon"
140+
class="mocked-styled-115 el-table"
141+
data-has-call-to-action="false"
142+
data-has-expandable-action="false"
143+
data-num-columns-excl-action-col="5"
144+
role="table"
60145
>
61-
<span
62-
class="el-icon-new el-icon"
63-
style="font-size: 1.25rem;"
146+
<div
147+
class="mocked-styled-101 el-table-headers-row"
148+
role="row"
64149
>
65-
<svg
66-
fill="none"
67-
height="1em"
68-
role="img"
69-
style="font-size: 1.25rem;"
70-
title="Icon image with name info"
71-
viewBox="0 0 24 24"
72-
width="1em"
73-
xmlns="http://www.w3.org/2000/svg"
150+
<div
151+
aria-label="Organisation"
152+
class="mocked-styled-102 el-table-header"
153+
role="columnheader"
74154
>
75-
<path
76-
d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m1.143 15.714h-2.286v-6h2.286zm-1.143-8a1.714 1.714 0 1 1 0-3.428 1.714 1.714 0 0 1 0 3.428"
77-
fill="currentColor"
78-
/>
79-
</svg>
80-
</span>
81-
</div>
82-
<div
83-
aria-live="polite"
84-
class="el-pn-content"
85-
>
86-
User not part of any organisations.
155+
Organisation
156+
</div>
157+
<div
158+
aria-label="Organisation Claims"
159+
class="mocked-styled-102 el-table-header"
160+
role="columnheader"
161+
>
162+
Organisation Claims
163+
</div>
164+
<div
165+
aria-label="User Claims"
166+
class="mocked-styled-102 el-table-header"
167+
role="columnheader"
168+
>
169+
User Claims
170+
</div>
171+
<div
172+
aria-label="Office Groups"
173+
class="mocked-styled-102 el-table-header"
174+
role="columnheader"
175+
>
176+
Office Groups
177+
</div>
178+
</div>
179+
<div
180+
class="mocked-styled-110 el-table-row-container"
181+
role="row"
182+
>
183+
<div
184+
class="mocked-styled-103 el-table-row"
185+
>
186+
<div
187+
class="el-table-cell-has-dark-text el-table-cell"
188+
role="cell"
189+
>
190+
<div
191+
class="mocked-styled-111 el-table-cell-content"
192+
>
193+
<div
194+
style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;"
195+
>
196+
<span>
197+
an org
198+
</span>
199+
<mock-styled.span
200+
classname="sc-eqUAAy cqznCV"
201+
type="customer"
202+
>
203+
customer
204+
</mock-styled.span>
205+
<mock-styled.span
206+
classname="sc-eqUAAy gNlkwv"
207+
type="developer"
208+
>
209+
developer
210+
</mock-styled.span>
211+
</div>
212+
</div>
213+
</div>
214+
<div
215+
class="el-table-cell-has-dark-text el-table-cell"
216+
role="cell"
217+
>
218+
<div
219+
class="mocked-styled-111 el-table-cell-content"
220+
>
221+
None
222+
</div>
223+
</div>
224+
<div
225+
class="el-table-cell-has-dark-text el-table-cell"
226+
role="cell"
227+
>
228+
<div
229+
class="mocked-styled-111 el-table-cell-content"
230+
>
231+
None
232+
</div>
233+
</div>
234+
<div
235+
class="el-table-cell-has-dark-text el-table-cell"
236+
role="cell"
237+
>
238+
<div
239+
class="mocked-styled-111 el-table-cell-content"
240+
>
241+
<button
242+
class="el-intent-neutral el-button"
243+
>
244+
<div
245+
class="mocked-styled-0 el-button-loader"
246+
/>
247+
Check
248+
</button>
249+
</div>
250+
</div>
251+
</div>
252+
</div>
87253
</div>
88254
</div>
89255
</div>,

‎packages/rc-service/src/components/users/__tests__/user-content.test.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,16 @@ describe('UserContent', () => {
1111
...(mockUserModelPagedResult._embedded ? mockUserModelPagedResult._embedded[0] : {}),
1212
}}
1313
userGroups={{ _embedded: [] }}
14-
orgs={{ _embedded: [] }}
14+
orgs={{
15+
_embedded: [
16+
{
17+
id: 'd2lsbG1jdmF5QGljbG91ZC5jb20',
18+
name: 'an org',
19+
// @ts-expect-error
20+
types: ['customer', 'developer'],
21+
},
22+
],
23+
}}
1524
refreshUsers={() => {}}
1625
/>,
1726
)

‎packages/rc-service/src/components/users/user-content.tsx‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import React, { FC, forwardRef, useRef } from 'react'
2-
import { Loader, PersistentNotification, Table } from '@reapit/elements'
1+
import React, { FC } from 'react'
2+
import { PersistentNotification, Table } from '@reapit/elements'
33
import { DisplayChip } from './__styles__'
4-
import { GetActionNames, getActions, useReapitGet } from '@reapit/use-reapit-data'
54
import { reapitConnectBrowserSession } from '../../core/connect-session'
6-
import { GroupModelPagedResult, OrganisationModelPagedResult, UserModel } from '@reapit/foundations-ts-definitions'
5+
import {
6+
GroupModelPagedResult,
7+
OrganisationModel,
8+
OrganisationModelPagedResult,
9+
UserModel,
10+
} from '@reapit/foundations-ts-definitions'
711
import { useReapitConnect } from '@reapit/connect-session'
812
import { getIsAdmin } from '../../utils/is-admin'
913
import { EditUserGroupsModal } from './edit-user-groups-modal'
@@ -19,6 +23,21 @@ const Container = styled.div`
1923
}
2024
`
2125

26+
const OrgTypeChip = styled(DisplayChip)`
27+
background: ${({ type }) => {
28+
return type === 'customer' ? 'var(--color-blue-light)' : 'black'
29+
}};
30+
color: ${({ type }) => {
31+
return type === 'customer' ? 'white' : 'lightgreen'
32+
}};
33+
font-weight: ${({ type }) => {
34+
return type === 'customer' ? 'inherit' : 'bold'
35+
}};
36+
font-family: ${({ type }) => {
37+
return type === 'customer' ? 'inherit' : "'Courier New', Courier, monospace"
38+
}};
39+
`
40+
2241
export interface UserContentProps {
2342
user: UserModel
2443
userGroups: GroupModelPagedResult | null
@@ -43,9 +62,27 @@ export const UserContent: FC<UserContentProps> = ({ user, refreshUsers, orgs, us
4362
<Table
4463
numberColumns={6}
4564
rows={user.organisationIds?.map((orgId) => {
65+
const org: (OrganisationModel & { types?: string[] }) | undefined = orgs?._embedded?.find(
66+
(org) => org.id === orgId,
67+
)
68+
4669
return {
4770
cells: [
48-
{ label: 'Organisation', value: orgs?._embedded?.find((org) => org.id === orgId)?.name || orgId },
71+
{
72+
label: 'Organisation',
73+
children: (
74+
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
75+
<span>{org?.name || orgId}</span>
76+
{org?.types
77+
?.filter((type) => type !== 'organisation')
78+
.map((type) => (
79+
<OrgTypeChip key={type} type={type}>
80+
{type}
81+
</OrgTypeChip>
82+
))}
83+
</div>
84+
),
85+
},
4986
{
5087
label: 'Organisation Claims',
5188
value:

‎packages/rc-service/src/tests/__stubs__/users.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const mockUserModelPagedResult: UserModelPagedResult = {
1616
mfaEnabled: true,
1717
groups: ['OrganisationAdmin', 'ReapitUser', 'MarketplaceAdmin'],
1818
products: [],
19+
organisationIds: ['d2lsbG1jdmF5QGljbG91ZC5jb20'],
1920
},
2021
],
2122
pageNumber: 1,

0 commit comments

Comments
 (0)