mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format Add Users/Groups, Fix bug on Add Service Account (#1898)

Browse Source 
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2022-04-22 22:36:41 -07:00
committed by GitHub
parent 8a96d8d8a5
commit 8203449d92
3 changed files with 218 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
portal-ui/src/screens/Console/Console.tsx
View File

@@ -108,7 +108,9 @@ const Dashboard = React.lazy(() => import("./Dashboard/Dashboard"));
const Account = React.lazy(() => import("./Account/Account")); const Account = React.lazy(() => import("./Account/Account"));
const AccountCreate = React.lazy(() => import("./Account/AddServiceAccountScreen")); const AccountCreate = React.lazy(
() => import("./Account/AddServiceAccountScreen")
);
const Users = React.lazy(() => import("./Users/Users")); const Users = React.lazy(() => import("./Users/Users"));
const Groups = React.lazy(() => import("./Groups/Groups")); const Groups = React.lazy(() => import("./Groups/Groups"));
@@ -122,9 +124,7 @@ const ConfigurationOptions = React.lazy(
const AddPool = React.lazy( const AddPool = React.lazy(
() => import("./Tenants/TenantDetails/Pools/AddPool/AddPool") () => import("./Tenants/TenantDetails/Pools/AddPool/AddPool")
); );
const AddGroupScreen = React.lazy( const AddGroupScreen = React.lazy(() => import("./Groups/AddGroupScreen"));
() => import("./Groups/AddGroupScreen")
);
const SiteReplication = React.lazy( const SiteReplication = React.lazy(
() => import("./Configurations/SiteReplication/SiteReplication") () => import("./Configurations/SiteReplication/SiteReplication")
); );
@@ -411,6 +411,7 @@ const Console = ({
{ {
component: Account, component: Account,
path: IAM_PAGES.ACCOUNT, path: IAM_PAGES.ACCOUNT,
forceDisplay: true,
// user has implicit access to service-accounts // user has implicit access to service-accounts
}, },
{ {

66
portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
View File

@@ -14,7 +14,7 @@
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useState, useEffect } from "react"; import React, { Fragment, useEffect, useState } from "react";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles"; import withStyles from "@mui/styles/withStyles";
@@ -23,7 +23,7 @@ import {
modalStyleUtils, modalStyleUtils,
} from "../Common/FormComponents/common/styleLibrary"; } from "../Common/FormComponents/common/styleLibrary";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import { Button, Box, LinearProgress } from "@mui/material"; import { Box, Button, LinearProgress } from "@mui/material";
import PageHeader from "../Common/PageHeader/PageHeader"; import PageHeader from "../Common/PageHeader/PageHeader";
import PageLayout from "../Common/Layout/PageLayout"; import PageLayout from "../Common/Layout/PageLayout";
import history from "../../../../src/history"; import history from "../../../../src/history";
@@ -37,6 +37,7 @@ import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
import { ErrorResponseHandler } from "../../../../src/common/types"; import { ErrorResponseHandler } from "../../../../src/common/types";
import api from "../../../../src/common/api"; import api from "../../../../src/common/api";
import { setErrorSnackMessage } from "../../../../src/actions"; import { setErrorSnackMessage } from "../../../../src/actions";
import SectionTitle from "../Common/SectionTitle";
interface IAddGroupProps { interface IAddGroupProps {
classes: any; classes: any;
@@ -100,16 +101,12 @@ const styles = (theme: Theme) =>
...modalStyleUtils, ...modalStyleUtils,
}); });
const AddGroupScreen = ({ const AddGroupScreen = ({ classes, setErrorSnackMessage }: IAddGroupProps) => {
classes,
setErrorSnackMessage,
}: IAddGroupProps) => {
const [groupName, setGroupName] = useState<string>(""); const [groupName, setGroupName] = useState<string>("");
const [saving, isSaving] = useState<boolean>(false); const [saving, isSaving] = useState<boolean>(false);
const [selectedUsers, setSelectedUsers] = useState<string[]>([]); const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
const [validGroup, setValidGroup] = useState<boolean>(false); const [validGroup, setValidGroup] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
setValidGroup(groupName.trim() !== ""); setValidGroup(groupName.trim() !== "");
}, [groupName, selectedUsers]); }, [groupName, selectedUsers]);
@@ -117,7 +114,6 @@ const AddGroupScreen = ({
useEffect(() => { useEffect(() => {
if (saving) { if (saving) {
const saveRecord = () => { const saveRecord = () => {
api api
.invoke("POST", "/api/v1/groups", { .invoke("POST", "/api/v1/groups", {
group: groupName, group: groupName,
@@ -131,17 +127,11 @@ const AddGroupScreen = ({
isSaving(false); isSaving(false);
setErrorSnackMessage(err); setErrorSnackMessage(err);
}); });
} };
saveRecord(); saveRecord();
} }
}, [saving, groupName, selectedUsers, setErrorSnackMessage]);
}, [
saving,
groupName,
selectedUsers,
setErrorSnackMessage,
]);
//Fetch Actions //Fetch Actions
const setSaving = (event: React.FormEvent) => { const setSaving = (event: React.FormEvent) => {
@@ -155,8 +145,6 @@ const AddGroupScreen = ({
setSelectedUsers([]); setSelectedUsers([]);
}; };
return ( return (
<Fragment> <Fragment>
<Grid item xs={12}> <Grid item xs={12}>
@@ -164,27 +152,26 @@ const AddGroupScreen = ({
label={<BackLink to={IAM_PAGES.GROUPS} label={"Groups"} />} label={<BackLink to={IAM_PAGES.GROUPS} label={"Groups"} />}
/> />
<PageLayout> <PageLayout>
<Grid <Box
item sx={{
xs={12} display: "grid",
container padding: "25px",
className={classes.title} gap: "25px",
align-items="stretch" gridTemplateColumns: {
md: "2fr 1.2fr",
xs: "1fr",
},
border: "1px solid #eaeaea",
}}
> >
<Grid item className={classes.headIcon}>
<CreateGroupIcon />
</Grid>
<Grid item className={classes.headTitle}>
Create Group
</Grid>
</Grid>
<Grid container align-items="center">
<Grid item xs={8}>
<Box> <Box>
<form noValidate autoComplete="off" onSubmit={setSaving}> <form noValidate autoComplete="off" onSubmit={setSaving}>
<Grid container item spacing="20"> <Grid container item spacing="20">
<Grid item xs={12}>
<SectionTitle icon={<CreateGroupIcon />}>
Create Group
</SectionTitle>
</Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Grid container> <Grid container>
<Grid item xs={12} className={classes.formFieldRow}> <Grid item xs={12} className={classes.formFieldRow}>
@@ -194,7 +181,9 @@ const AddGroupScreen = ({
label="Group Name" label="Group Name"
autoFocus={true} autoFocus={true}
value={groupName} value={groupName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
setGroupName(e.target.value); setGroupName(e.target.value);
}} }}
/> />
@@ -236,13 +225,8 @@ const AddGroupScreen = ({
</Grid> </Grid>
</form> </form>
</Box> </Box>
</Grid>
<Grid item xs={4}>
<Box>
<AddGroupHelpBox /> <AddGroupHelpBox />
</Box> </Box>
</Grid>
</Grid>
</PageLayout> </PageLayout>
</Grid> </Grid>
</Fragment> </Fragment>

62
portal-ui/src/screens/Console/Users/AddUserScreen.tsx
View File

@@ -23,7 +23,7 @@ import {
modalStyleUtils, modalStyleUtils,
} from "../Common/FormComponents/common/styleLibrary"; } from "../Common/FormComponents/common/styleLibrary";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import { Button, LinearProgress, Box } from "@mui/material"; import { Box, Button, LinearProgress } from "@mui/material";
import { CreateUserIcon } from "../../../icons"; import { CreateUserIcon } from "../../../icons";
import PageHeader from "../Common/PageHeader/PageHeader"; import PageHeader from "../Common/PageHeader/PageHeader";
@@ -31,7 +31,6 @@ import PageLayout from "../Common/Layout/PageLayout";
import history from "../../../../src/history"; import history from "../../../../src/history";
import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import AddUserHelpBox from "./AddUserHelpBox";
import PolicySelectors from "../Policies/PolicySelectors"; import PolicySelectors from "../Policies/PolicySelectors";
import BackLink from "../../../common/BackLink"; import BackLink from "../../../common/BackLink";
import GroupsSelectors from "./GroupsSelectors"; import GroupsSelectors from "./GroupsSelectors";
@@ -45,6 +44,8 @@ import { ErrorResponseHandler } from "../../../../src/common/types";
import api from "../../../../src/common/api"; import api from "../../../../src/common/api";
import { setErrorSnackMessage } from "../../../../src/actions"; import { setErrorSnackMessage } from "../../../../src/actions";
import SectionTitle from "../Common/SectionTitle";
import AddUserHelpBox from "../Account/AddServiceAccountHelpBox";
interface IAddUserProps { interface IAddUserProps {
classes: any; classes: any;
@@ -102,10 +103,7 @@ const styles = (theme: Theme) =>
...modalStyleUtils, ...modalStyleUtils,
}); });
const AddUser = ({ const AddUser = ({ classes, setErrorSnackMessage }: IAddUserProps) => {
classes,
setErrorSnackMessage,
}: IAddUserProps) => {
const [addLoading, setAddLoading] = useState<boolean>(false); const [addLoading, setAddLoading] = useState<boolean>(false);
const [accessKey, setAccessKey] = useState<string>(""); const [accessKey, setAccessKey] = useState<string>("");
const [secretKey, setSecretKey] = useState<string>(""); const [secretKey, setSecretKey] = useState<string>("");
@@ -161,28 +159,18 @@ const AddUser = ({
<Grid item xs={12}> <Grid item xs={12}>
<PageHeader label={<BackLink to={IAM_PAGES.USERS} label={"Users"} />} /> <PageHeader label={<BackLink to={IAM_PAGES.USERS} label={"Users"} />} />
<PageLayout> <PageLayout>
<Grid <Box
item sx={{
xs={12} display: "grid",
container padding: "25px",
className={classes.title} gap: "25px",
align-items="baseline" gridTemplateColumns: {
md: "2fr 1.2fr",
xs: "1fr",
},
border: "1px solid #eaeaea",
}}
> >
<Grid item xs={"auto"}>
<CreateUserIcon />
</Grid>
<Grid
item
xs={"auto"}
align-self="end"
className={classes.headTitle}
>
Create User
</Grid>
</Grid>
<Grid container align-items="center">
<Grid item xs={8}>
<Box> <Box>
<form <form
noValidate noValidate
@@ -191,7 +179,12 @@ const AddUser = ({
saveRecord(e); saveRecord(e);
}} }}
> >
<Grid container> <Grid container spacing={1}>
<Grid item xs={12}>
<SectionTitle icon={<CreateUserIcon />}>
Create User
</SectionTitle>
</Grid>
<Grid item xs={12}> <Grid item xs={12}>
<div className={classes.formFieldRow}> <div className={classes.formFieldRow}>
<InputBoxWrapper <InputBoxWrapper
@@ -204,9 +197,7 @@ const AddUser = ({
label="User Name" label="User Name"
value={accessKey} value={accessKey}
autoFocus={true} autoFocus={true}
onChange={( onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
e: React.ChangeEvent<HTMLInputElement>
) => {
setAccessKey(e.target.value); setAccessKey(e.target.value);
}} }}
/> />
@@ -222,9 +213,7 @@ const AddUser = ({
label="Password" label="Password"
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={secretKey} value={secretKey}
onChange={( onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
e: React.ChangeEvent<HTMLInputElement>
) => {
setSecretKey(e.target.value); setSecretKey(e.target.value);
}} }}
autoComplete="current-password" autoComplete="current-password"
@@ -282,13 +271,8 @@ const AddUser = ({
</Grid> </Grid>
</form> </form>
</Box> </Box>
</Grid>
<Grid item xs={4}>
<Box>
<AddUserHelpBox /> <AddUserHelpBox />
</Box> </Box>
</Grid>
</Grid>
</PageLayout> </PageLayout>
</Grid> </Grid>
</Fragment> </Fragment>