Skip to content

Commit 62fa0e2

Browse files
bexsoftbexsoft
authored
Updated Entities results panel styles (#2753)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 4f5b1b0 commit 62fa0e2

File tree

2 files changed

+312
-178
lines changed

2 files changed

+312
-178
lines changed

‎portal-ui/src/screens/Console/IDP/LDAP/LDAPEntitiesQuery.tsx

Lines changed: 147 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,15 @@ import {
2727
InputBox,
2828
Loader,
2929
RemoveIcon,
30+
SearchIcon,
3031
SectionTitle,
31-
UptimeIcon,
32+
TimeIcon,
3233
} from "mds";
3334
import PolicySelectors from "../../Policies/PolicySelectors";
3435
import { useSelector } from "react-redux";
3536
import { LDAPEntitiesResponse } from "./types";
3637
import { DateTime } from "luxon";
38+
import LDAPResultsBlock from "./LDAPResultsBlock";
3739

3840
const LDAPEntitiesQuery = () => {
3941
const dispatch = useAppDispatch();
@@ -107,99 +109,135 @@ const LDAPEntitiesQuery = () => {
107109
};
108110

109111
return (
110-
<Box sx={{ marginTop: 15, paddingTop: 0 }} withBorders>
112+
<Box sx={{ marginTop: 15, paddingTop: 0 }}>
111113
<Grid container sx={{ marginTop: 5 }}>
112114
<Grid item sm={12} md={6} lg={5} sx={{ padding: 10, paddingTop: 0 }}>
113-
<SectionTitle separator>Query Filters</SectionTitle>
115+
<SectionTitle>Query Filters</SectionTitle>
114116

115-
<Box sx={{ padding: "0 10px" }}>
116-
<h4>Users</h4>
117-
<Box
118-
sx={{
119-
overflowY: "auto",
120-
minHeight: 220,
121-
maxHeight: 250,
122-
"& > div > div": {
123-
width: "100%",
124-
},
125-
}}
126-
>
127-
{users.map((userDat, index) => {
128-
return (
129-
<InputBox
130-
id={`search-user-${index}`}
131-
key={`search-user-${index}`}
132-
value={userDat}
133-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
134-
const usersElements = [...users];
135-
usersElements[index] = e.target.value;
136-
setUsers(usersElements);
137-
}}
138-
overlayIcon={
139-
users.length === index + 1 ? <AddIcon /> : <RemoveIcon />
140-
}
141-
overlayAction={() => {
142-
alterUsersList(users.length === index + 1, index);
143-
}}
144-
/>
145-
);
146-
})}
117+
<Box
118+
sx={{
119+
padding: "0 10px",
120+
display: "flex",
121+
flexDirection: "column",
122+
gap: 40,
123+
}}
124+
>
125+
<Box sx={{ padding: "10px 26px" }} withBorders>
126+
<Box sx={{ display: "flex" }}>
127+
<h4 style={{ margin: 0, marginBottom: 10, fontSize: 14 }}>
128+
Users
129+
</h4>
130+
</Box>
131+
<Box
132+
sx={{
133+
overflowY: "auto",
134+
minHeight: 50,
135+
maxHeight: 250,
136+
"& > div > div": {
137+
width: "100%",
138+
},
139+
}}
140+
>
141+
{users.map((userDat, index) => {
142+
return (
143+
<InputBox
144+
id={`search-user-${index}`}
145+
key={`search-user-${index}`}
146+
value={userDat}
147+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
148+
const usersElements = [...users];
149+
usersElements[index] = e.target.value;
150+
setUsers(usersElements);
151+
}}
152+
overlayIcon={
153+
users.length === index + 1 ? (
154+
<AddIcon />
155+
) : (
156+
<RemoveIcon />
157+
)
158+
}
159+
overlayAction={() => {
160+
alterUsersList(users.length === index + 1, index);
161+
}}
162+
/>
163+
);
164+
})}
165+
</Box>
147166
</Box>
148-
149-
<h4>Groups</h4>
150-
<Box
151-
sx={{
152-
overflowY: "auto",
153-
minHeight: 220,
154-
maxHeight: 250,
155-
"& > div > div": {
156-
width: "100%",
157-
},
158-
}}
159-
>
160-
{groups.map((groupDat, index) => {
161-
return (
162-
<InputBox
163-
id={`search-group-${index}`}
164-
key={`search-group-${index}`}
165-
value={groupDat}
166-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
167-
const groupsElements = [...groups];
168-
groupsElements[index] = e.target.value;
169-
setGroups(groupsElements);
170-
}}
171-
overlayIcon={
172-
groups.length === index + 1 ? <AddIcon /> : <RemoveIcon />
173-
}
174-
overlayAction={() => {
175-
alterGroupsList(groups.length === index + 1, index);
176-
}}
177-
/>
178-
);
179-
})}
167+
<Box sx={{ padding: "10px 26px" }} withBorders>
168+
<h4 style={{ margin: 0, marginBottom: 10, fontSize: 14 }}>
169+
Groups
170+
</h4>
171+
<Box
172+
sx={{
173+
overflowY: "auto",
174+
minHeight: 50,
175+
maxHeight: "calc(100vh - 340px)",
176+
"& > div > div": {
177+
width: "100%",
178+
},
179+
}}
180+
>
181+
{groups.map((groupDat, index) => {
182+
return (
183+
<InputBox
184+
id={`search-group-${index}`}
185+
key={`search-group-${index}`}
186+
value={groupDat}
187+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
188+
const groupsElements = [...groups];
189+
groupsElements[index] = e.target.value;
190+
setGroups(groupsElements);
191+
}}
192+
overlayIcon={
193+
groups.length === index + 1 ? (
194+
<AddIcon />
195+
) : (
196+
<RemoveIcon />
197+
)
198+
}
199+
overlayAction={() => {
200+
alterGroupsList(groups.length === index + 1, index);
201+
}}
202+
/>
203+
);
204+
})}
205+
</Box>
180206
</Box>
181-
182-
<h4>Policies</h4>
183-
<Box
184-
sx={{
185-
minHeight: 220,
186-
maxHeight: "calc(100vh - 740px)",
187-
}}
188-
>
189-
<PolicySelectors selectedPolicy={selectedPolicies} noTitle />
207+
<Box sx={{ padding: "10px 26px" }} withBorders>
208+
<h4 style={{ margin: 0, marginBottom: 10, fontSize: 14 }}>
209+
Policies
210+
</h4>
211+
<Box
212+
sx={{
213+
minHeight: 265,
214+
maxHeight: "calc(100vh - 740px)",
215+
}}
216+
>
217+
<PolicySelectors selectedPolicy={selectedPolicies} noTitle />
218+
</Box>
190219
</Box>
191220
</Box>
192221
</Grid>
193-
<Grid item sm={12} md={6} lg={7} sx={{ padding: 10, paddingTop: 0 }}>
222+
<Grid
223+
item
224+
sm={12}
225+
md={6}
226+
lg={7}
227+
sx={{
228+
padding: 10,
229+
paddingTop: 0,
230+
display: "flex",
231+
flexDirection: "column",
232+
}}
233+
>
194234
{loading ? (
195235
<Box sx={{ textAlign: "center" }}>
196236
<Loader />
197237
</Box>
198238
) : (
199239
<Fragment>
200240
<SectionTitle
201-
separator
202-
sx={{ marginBottom: 15 }}
203241
actions={
204242
<Box
205243
sx={{
@@ -211,8 +249,13 @@ const LDAPEntitiesQuery = () => {
211249
>
212250
{results?.timestamp ? (
213251
<Fragment>
214-
<UptimeIcon
215-
style={{ width: 18, height: 18, marginRight: 5 }}
252+
<TimeIcon
253+
style={{
254+
width: 14,
255+
height: 14,
256+
marginRight: 5,
257+
fill: "#BEBFBF",
258+
}}
216259
/>
217260
{DateTime.fromISO(results.timestamp).toFormat(
218261
"D HH:mm:ss"
@@ -224,114 +267,30 @@ const LDAPEntitiesQuery = () => {
224267
</Box>
225268
}
226269
>
227-
Results
270+
Query Results
228271
</SectionTitle>
229272
{results ? (
230-
<Box>
273+
<Box
274+
sx={{
275+
backgroundColor: "#FBFAFA",
276+
padding: "8px 22px",
277+
flexGrow: 1,
278+
overflowY: "auto",
279+
}}
280+
>
231281
{!results.groups && !results.users && !results.policies && (
232282
<Box sx={{ textAlign: "center" }}>
233283
<h4>No Results Available</h4>
234284
</Box>
235285
)}
236286
{!!results.groups && (
237-
<Box className={"resultElement"}>
238-
<SectionTitle separator sx={{ fontSize: 12 }}>
239-
Group Mappings
240-
</SectionTitle>
241-
<Box sx={{ padding: "0 15px" }}>
242-
{results.groups.map((groupData, index) => {
243-
return (
244-
<Fragment key={`policy-res-${index}`}>
245-
<h4>{groupData.group}</h4>
246-
{groupData.policies && (
247-
<Fragment>
248-
Policies:
249-
<ul>
250-
{groupData.policies.map(
251-
(policy, index2) => (
252-
<li key={`policy-group-${index2}`}>
253-
{policy}
254-
</li>
255-
)
256-
)}
257-
</ul>
258-
</Fragment>
259-
)}
260-
</Fragment>
261-
);
262-
})}
263-
</Box>
264-
</Box>
287+
<LDAPResultsBlock results={results} entityName={"Group"} />
265288
)}
266289
{!!results.users && (
267-
<Box className={"resultElement"}>
268-
<SectionTitle separator sx={{ fontSize: 12 }}>
269-
User Mappings
270-
</SectionTitle>
271-
<Box sx={{ padding: "0 15px" }}>
272-
{results.users.map((groupData, index) => {
273-
return (
274-
<Fragment key={`users-res-${index}`}>
275-
<h4>{groupData.user}</h4>
276-
{groupData.policies && (
277-
<Fragment>
278-
Policies:
279-
<ul>
280-
{groupData.policies.map(
281-
(policy, index2) => (
282-
<li key={`policy-users-${index2}`}>
283-
{policy}
284-
</li>
285-
)
286-
)}
287-
</ul>
288-
</Fragment>
289-
)}
290-
</Fragment>
291-
);
292-
})}
293-
</Box>
294-
</Box>
290+
<LDAPResultsBlock results={results} entityName={"User"} />
295291
)}
296292
{!!results.policies && (
297-
<Box className={"resultElement"}>
298-
<SectionTitle separator sx={{ fontSize: 12 }}>
299-
Policy Mappings
300-
</SectionTitle>
301-
<Box sx={{ padding: "0 15px" }}>
302-
{results.policies.map((groupData, index) => {
303-
return (
304-
<Fragment key={`policy-map-${index}`}>
305-
<h4>{groupData.policy}</h4>
306-
{groupData.groups && (
307-
<Fragment>
308-
Groups:
309-
<ul>
310-
{groupData.groups.map((group, index2) => (
311-
<li key={`policy-map-group-${index}`}>
312-
{group}
313-
</li>
314-
))}
315-
</ul>
316-
</Fragment>
317-
)}
318-
{groupData.users && (
319-
<Fragment>
320-
Users:
321-
<ul>
322-
{groupData.users.map((user, index3) => (
323-
<li key={`policy-map-user-${index}`}>
324-
{user}
325-
</li>
326-
))}
327-
</ul>
328-
</Fragment>
329-
)}
330-
</Fragment>
331-
);
332-
})}
333-
</Box>
334-
</Box>
293+
<LDAPResultsBlock results={results} entityName={"Policy"} />
335294
)}
336295
</Box>
337296
) : (
@@ -342,12 +301,22 @@ const LDAPEntitiesQuery = () => {
342301
</Grid>
343302
</Grid>
344303
<Grid container>
345-
<Grid item xs={12} sx={{ display: "flex", justifyContent: "flex-end" }}>
304+
<Grid
305+
item
306+
xs={12}
307+
sx={{
308+
display: "flex",
309+
justifyContent: "flex-start",
310+
marginTop: 45,
311+
padding: "0 20px",
312+
}}
313+
>
346314
<Button
347315
id={"search-entity"}
348316
type={"button"}
349317
variant={"callAction"}
350318
onClick={searchEntities}
319+
icon={<SearchIcon />}
351320
>
352321
Search
353322
</Button>

0 commit comments

Comments
 (0)