Skip to content

Commit 62fe583

Browse files
prakashsvmxbexsoftdvaldivia
authored
UX updates to Policy list Bucket and Object List (#1253)
Co-authored-by: Alex <[email protected]> Co-authored-by: Daniel Valdivia <[email protected]>
1 parent a69f597 commit 62fe583

File tree

10 files changed

+211
-165
lines changed

10 files changed

+211
-165
lines changed

‎portal-ui/src/screens/Console/Account/Account.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ const Account = ({
249249
<PageLayout>
250250
<Grid item xs={12} className={classes.actionsTray}>
251251
<SearchBox
252-
placeholder={"Search Groups"}
252+
placeholder={"Search Service Accounts"}
253253
onChange={setFilter}
254254
classes={classes}
255255
/>

‎portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import PageHeader from "../../Common/PageHeader/PageHeader";
5050
import BackLink from "../../../../common/BackLink";
5151
import { BucketsIcon } from "../../../../icons";
5252
import { setErrorSnackMessage } from "../../../../actions";
53+
import PageLayout from "../../Common/Layout/PageLayout";
5354

5455
const styles = (theme: Theme) =>
5556
createStyles({
@@ -279,10 +280,8 @@ const AddBucket = ({
279280
return (
280281
<Fragment>
281282
<PageHeader label={"Create a Bucket"} />
282-
<Grid container className={classes.container}>
283-
<Grid item xs={12}>
284-
<BackLink to="/buckets" label="Return to Buckets" />
285-
</Grid>
283+
<BackLink label={"Return to Buckets"} to={"/buckets"} />
284+
<PageLayout>
286285
<Grid item xs={12} className={classes.boxy}>
287286
<form
288287
noValidate
@@ -536,7 +535,7 @@ const AddBucket = ({
536535
</Grid>
537536
</form>
538537
</Grid>
539-
</Grid>
538+
</PageLayout>
540539
</Fragment>
541540
);
542541
};

‎portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,26 @@ const styles = (theme: Theme) =>
145145
width: 48,
146146
},
147147
},
148+
bucketInfo: {
149+
display: "flex",
150+
"@media (max-width: 900px)": {
151+
flexFlow: "column-reverse",
152+
},
153+
},
154+
bucketStats: {
155+
marginTop: 15,
156+
borderTop: "1px solid rgb(234,234,234, .7)",
157+
paddingTop: 14,
158+
},
159+
bucketActionButtons: {
160+
display: "flex",
161+
alignItems: "center",
162+
justifyContent: "flex-end",
163+
164+
"@media (max-width: 900px)": {
165+
marginTop: "-33px",
166+
},
167+
},
148168
});
149169

150170
interface IBucketListItem {
@@ -183,10 +203,10 @@ const BucketListItem = ({
183203
};
184204

185205
return (
186-
<Grid container className={classes.root} spacing={1}>
206+
<Grid container className={classes.root}>
187207
<Grid item xs={12}>
188208
<Grid container justifyContent={"space-between"}>
189-
<Grid item xs={12} sm={8}>
209+
<Grid item xs={12} sm={7}>
190210
<Grid container>
191211
<Grid item xs={12}>
192212
{bulkSelect && (
@@ -209,22 +229,22 @@ const BucketListItem = ({
209229
<h1 className={classes.bucketName}>{bucket.name}</h1>
210230
</Grid>
211231
<Grid item xs={12}>
212-
<Grid container>
232+
<Grid container className={classes.bucketInfo}>
213233
<Grid item xs={12} sm>
214234
<Typography variant="body2">
215-
Created: <b>{bucket.creation_date}</b>
235+
Created: {bucket.creation_date}
216236
</Typography>
217237
</Grid>
218238
<Grid item xs={12} sm>
219239
<Typography variant="body2">
220-
Access: <b> {accessToStr(bucket)}</b>
240+
Access: {accessToStr(bucket)}
221241
</Typography>
222242
</Grid>
223243
</Grid>
224244
</Grid>
225245
</Grid>
226246
</Grid>
227-
<Grid item xs={12} sm={4} textAlign={"right"}>
247+
<Grid item xs={12} sm={5} className={classes.bucketActionButtons}>
228248
<SecureComponent
229249
scopes={IAM_PERMISSIONS[IAM_ROLES.admin]}
230250
resource={bucket.name}
@@ -260,10 +280,8 @@ const BucketListItem = ({
260280
</Grid>
261281
</Grid>
262282
</Grid>
263-
<Grid item xs={12}>
264-
<hr />
265-
</Grid>
266-
<Grid item xs={12}>
283+
284+
<Grid item xs={12} className={classes.bucketStats}>
267285
<Grid container justifyContent={"flex-start"} spacing={4}>
268286
<Grid item className={classes.bucketIcon}>
269287
<BucketsIcon />

‎portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx‎

Lines changed: 74 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@ import BucketListItem from "./BucketListItem";
3737
import BulkReplicationModal from "./BulkReplicationModal";
3838
import HelpBox from "../../../../common/HelpBox";
3939
import { ISessionResponse } from "../../types";
40-
import TextField from "@mui/material/TextField";
41-
import InputAdornment from "@mui/material/InputAdornment";
42-
import SearchIcon from "../../../../icons/SearchIcon";
4340
import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
4441
import RefreshIcon from "../../../../icons/RefreshIcon";
4542
import AButton from "../../Common/AButton/AButton";
@@ -50,6 +47,8 @@ import {
5047
CONSOLE_UI_RESOURCE,
5148
IAM_SCOPES,
5249
} from "../../../../common/SecureComponent/permissions";
50+
import PageLayout from "../../Common/Layout/PageLayout";
51+
import SearchBox from "../../Common/SearchBox";
5352

5453
const styles = (theme: Theme) =>
5554
createStyles({
@@ -130,10 +129,18 @@ const styles = (theme: Theme) =>
130129
marginRight: 10,
131130
marginLeft: 10,
132131
},
132+
bucketList: {
133+
marginTop: 25,
134+
},
135+
133136
...containerForHeader(theme.spacing(4)),
134137
...searchField,
135-
constrainedContainer: {
136-
maxWidth: 1180,
138+
searchField: {
139+
...searchField.searchField,
140+
minWidth: 380,
141+
"@media (max-width: 900px)": {
142+
minWidth: 220,
143+
},
137144
},
138145
});
139146

@@ -251,89 +258,76 @@ const ListBuckets = ({
251258
/>
252259
)}
253260
<PageHeader label={"Buckets"} />
254-
<Grid container className={classes.container}>
255-
<Grid item xs={12} className={classes.buttonTray}>
256-
<Grid container>
257-
<Grid item xs={12} sm>
258-
<TextField
259-
placeholder="Filter Buckets"
260-
className={classes.searchField}
261-
id="search-resource"
262-
label=""
263-
InputProps={{
264-
disableUnderline: true,
265-
startAdornment: (
266-
<InputAdornment position="start">
267-
<SearchIcon />
268-
</InputAdornment>
269-
),
270-
}}
271-
onChange={(e) => {
272-
setFilterBuckets(e.target.value);
273-
}}
274-
variant="standard"
275-
/>
276-
</Grid>
277-
<Grid item xs={12} sm={"auto"}>
278-
<BoxIconButton
279-
variant={bulkSelect ? "contained" : "outlined"}
280-
tooltip={"Select Multiple"}
281-
onClick={() => {
282-
setBulkSelect(!bulkSelect);
283-
}}
284-
size={"small"}
285-
className={classes.bulkSelect}
286-
>
287-
<SelectMultipleIcon />
288-
</BoxIconButton>
289-
<BoxIconButton
290-
variant="outlined"
291-
tooltip={"Set Replication"}
292-
onClick={() => {
293-
setReplicationModalOpen(true);
294-
}}
295-
disabled={selectedBuckets.length === 0}
296-
size={"small"}
297-
>
298-
<MultipleBucketsIcon />
299-
</BoxIconButton>
300-
<BoxIconButton
261+
<PageLayout>
262+
<Grid item xs={12} className={classes.actionsTray} display="flex">
263+
<SearchBox
264+
onChange={setFilterBuckets}
265+
classes={classes}
266+
placeholder="Search Buckets"
267+
/>
268+
269+
<Grid
270+
item
271+
xs={12}
272+
display={"flex"}
273+
alignItems={"center"}
274+
justifyContent={"flex-end"}
275+
>
276+
<BoxIconButton
277+
variant={bulkSelect ? "contained" : "outlined"}
278+
tooltip={"Select Multiple"}
279+
onClick={() => {
280+
setBulkSelect(!bulkSelect);
281+
}}
282+
size={"small"}
283+
className={classes.bulkSelect}
284+
>
285+
<SelectMultipleIcon />
286+
</BoxIconButton>
287+
<BoxIconButton
288+
variant="outlined"
289+
tooltip={"Set Replication"}
290+
onClick={() => {
291+
setReplicationModalOpen(true);
292+
}}
293+
disabled={selectedBuckets.length === 0}
294+
size={"small"}
295+
>
296+
<MultipleBucketsIcon />
297+
</BoxIconButton>
298+
<BoxIconButton
299+
color="primary"
300+
aria-label="Refresh"
301+
tooltip={"Refresh"}
302+
onClick={() => {
303+
setLoading(true);
304+
}}
305+
size="large"
306+
>
307+
<RefreshIcon />
308+
</BoxIconButton>
309+
<SecureComponent
310+
scopes={[IAM_SCOPES.S3_CREATE_BUCKET]}
311+
resource={CONSOLE_UI_RESOURCE}
312+
>
313+
<Button
314+
variant="contained"
301315
color="primary"
302-
aria-label="Refresh"
303-
tooltip={"Refresh"}
316+
endIcon={<AddIcon />}
304317
onClick={() => {
305-
setLoading(true);
318+
history.push("/add-bucket");
306319
}}
307-
size="large"
308-
>
309-
<RefreshIcon />
310-
</BoxIconButton>
311-
<SecureComponent
312-
scopes={[IAM_SCOPES.S3_CREATE_BUCKET]}
313-
resource={CONSOLE_UI_RESOURCE}
320+
className={classes.addBucket}
314321
>
315-
<Button
316-
variant="contained"
317-
color="primary"
318-
endIcon={<AddIcon />}
319-
onClick={() => {
320-
history.push("/add-bucket");
321-
}}
322-
className={classes.addBucket}
323-
>
324-
Create Bucket
325-
</Button>
326-
</SecureComponent>
327-
</Grid>
322+
Create Bucket
323+
</Button>
324+
</SecureComponent>
328325
</Grid>
329326
</Grid>
330327

331-
<Grid item xs={12}>
332-
<br />
333-
</Grid>
334328
{loading && <LinearProgress />}
335329
{!loading && (
336-
<Grid item xs={12}>
330+
<Grid item xs={12} className={classes.bucketList}>
337331
{filteredRecords.map((bucket, index) => {
338332
return (
339333
<BucketListItem
@@ -405,7 +399,7 @@ const ListBuckets = ({
405399
)}
406400
</Grid>
407401
)}
408-
</Grid>
402+
</PageLayout>
409403
</Fragment>
410404
);
411405
};

0 commit comments

Comments
 (0)