diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index c1713b61c..12f9b2f15 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -358,12 +358,6 @@ export const objectBrowserCommon = {
// ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width.
// "The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)"
-export const selectorsCommon = {
- multiSelectTable: {
- height: 200,
- },
-};
-
export const settingsCommon: any = {
settingsFormContainer: {
padding: 38,
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
index efab4bb37..1f5b7fd27 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
@@ -1,26 +1,31 @@
-import React, { useState } from "react";
-import UsersSelectors from "./UsersSelectors";
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
-import Grid from "@mui/material/Grid";
-import { AddMembersToGroupIcon, Button } from "mds";
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import {
- formFieldStyles,
- modalBasic,
- modalStyleUtils,
-} from "../Common/FormComponents/common/styleLibrary";
-import withStyles from "@mui/styles/withStyles";
+import React, { useState } from "react";
+import { AddMembersToGroupIcon, Button, FormLayout, Grid, ReadBox } from "mds";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import { encodeURLString } from "../../../common/utils";
import { setModalErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import { api } from "api";
import { errorToHandler } from "api/errors";
+import UsersSelectors from "./UsersSelectors";
+import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
type UserPickerModalProps = {
- classes?: any;
title?: string;
preSelectedUsers?: string[];
selectedGroup?: string;
@@ -30,21 +35,7 @@ type UserPickerModalProps = {
groupStatus?: string;
};
-const styles = (theme: Theme) =>
- createStyles({
- userSelector: {
- "& .MuiPaper-root": {
- padding: 0,
- marginBottom: 15,
- },
- },
- ...modalStyleUtils,
- ...formFieldStyles,
- ...modalBasic,
- });
-
const AddGroupMember = ({
- classes,
title = "",
groupStatus = "enabled",
preSelectedUsers = [],
@@ -77,21 +68,17 @@ const AddGroupMember = ({
title={title}
titleIcon={}
>
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {selectedGroup}
+
+
+
+
.
import React, { Fragment, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
- formFieldStyles,
- modalStyleUtils,
-} from "../Common/FormComponents/common/styleLibrary";
-import Grid from "@mui/material/Grid";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
import { LinearProgress } from "@mui/material";
-import { BackLink, Button, CreateGroupIcon, FormLayout, PageLayout } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import AddGroupHelpBox from "./AddGroupHelpBox";
-import UsersSelectors from "./UsersSelectors";
-import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-
-import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
-import { useAppDispatch } from "../../../store";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import HelpMenu from "../HelpMenu";
+import {
+ BackLink,
+ Button,
+ CreateGroupIcon,
+ FormLayout,
+ Grid,
+ InputBox,
+ PageLayout,
+} from "mds";
import { api } from "api";
import { errorToHandler } from "api/errors";
+import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
+import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
+import { useAppDispatch } from "../../../store";
+import AddGroupHelpBox from "./AddGroupHelpBox";
+import UsersSelectors from "./UsersSelectors";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../HelpMenu";
-interface IAddGroupProps {
- classes: any;
-}
-
-const styles = (theme: Theme) =>
- createStyles({
- ...formFieldStyles,
- ...modalStyleUtils,
- });
-
-const AddGroupScreen = ({ classes }: IAddGroupProps) => {
+const AddGroupScreen = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const [groupName, setGroupName] = useState("");
@@ -101,73 +90,64 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
return (
-
- navigate(IAM_PAGES.GROUPS)}
+ navigate(IAM_PAGES.GROUPS)}
+ />
+ }
+ actions={}
+ />
+
+ }
+ helpBox={}
+ >
+
+ )}
+
+
+
);
};
-export default withStyles(styles)(AddGroupScreen);
+export default AddGroupScreen;
diff --git a/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx b/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
index 2ff2f41d1..ee5ace25e 100644
--- a/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
@@ -14,17 +14,14 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-import React from "react";
-
-import { DialogContentText } from "@mui/material";
-
+import React, { Fragment } from "react";
import { ErrorResponseHandler } from "../../../common/types";
-import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
-import useApi from "../Common/Hooks/useApi";
import { ConfirmDeleteIcon } from "mds";
import { encodeURLString } from "../../../common/utils";
import { setErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
+import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
+import useApi from "../Common/Hooks/useApi";
interface IDeleteGroup {
selectedGroups: string[];
@@ -72,11 +69,12 @@ const DeleteGroup = ({
onConfirm={onDeleteGroups}
onClose={onClose}
confirmationContent={
-
- Are you sure you want to delete the following {selectedGroups.length}{" "}
- group{selectedGroups.length > 1 ? "s?" : "?"}
+
+ Are you sure you want to delete the following{" "}
+ {selectedGroups.length === 1 ? "" : selectedGroups.length} group
+ {selectedGroups.length > 1 ? "s?" : "?"}
{renderGroups}
-
+
}
/>
);
diff --git a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
deleted file mode 100644
index 93e051f97..000000000
--- a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Fragment, useEffect } from "react";
-import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-import { BackLink } from "mds";
-import { useNavigate } from "react-router-dom";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import HelpMenu from "../HelpMenu";
-import { useAppDispatch } from "../../../store";
-import { setHelpName } from "../../../systemSlice";
-
-const GroupDetailsHeader = () => {
- const navigate = useNavigate();
-
- const dispatch = useAppDispatch();
- useEffect(() => {
- dispatch(setHelpName("group_details"));
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
- return (
-
- navigate(IAM_PAGES.GROUPS)}
- />
-
- }
- actions={}
- />
- );
-};
-
-export default GroupDetailsHeader;
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index f61ee232c..33888189f 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -15,7 +15,6 @@
// along with this program. If not, see .
import React, { Fragment, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import {
AddIcon,
@@ -26,22 +25,14 @@ import {
IAMPoliciesIcon,
PageLayout,
UsersIcon,
+ DataTable,
+ Grid,
+ Box,
} from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import Grid from "@mui/material/Grid";
-import { Box, LinearProgress } from "@mui/material";
-
+import { LinearProgress } from "@mui/material";
+import { api } from "api";
import { stringSort } from "../../../utils/sortFunctions";
-import {
- actionsTray,
- containerForHeader,
- searchField,
- tableStyles,
-} from "../Common/FormComponents/common/styleLibrary";
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import AButton from "../Common/AButton/AButton";
-import SearchBox from "../Common/SearchBox";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
import {
applyPolicyPermissions,
CONSOLE_UI_RESOURCE,
@@ -56,44 +47,23 @@ import {
hasPermission,
SecureComponent,
} from "../../../common/SecureComponent";
-
+import { errorToHandler } from "../../../api/errors";
import withSuspense from "../Common/Components/withSuspense";
-
import { encodeURLString } from "../../../common/utils";
-
import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
+import AButton from "../Common/AButton/AButton";
+import SearchBox from "../Common/SearchBox";
const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
const SetPolicy = withSuspense(
React.lazy(() => import("../Policies/SetPolicy"))
);
-interface IGroupsProps {
- classes: any;
- openGroupModal: any;
-}
-
-const styles = (theme: Theme) =>
- createStyles({
- tableBlock: {
- ...tableStyles.tableBlock,
- marginTop: 15,
- },
- ...actionsTray,
- searchField: {
- ...searchField.searchField,
- maxWidth: 380,
- },
- ...containerForHeader,
- });
-
-const Groups = ({ classes }: IGroupsProps) => {
+const Groups = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
@@ -230,8 +200,8 @@ const Groups = ({ classes }: IGroupsProps) => {
} />
-
-
+
+ {
{
{records.length > 0 && (
-
+
- {
/>
-
+ }
@@ -382,12 +352,7 @@ const Groups = ({ classes }: IGroupsProps) => {
)}
{records.length === 0 && (
-
+ {
);
};
-export default withStyles(styles)(Groups);
+export default Groups;
diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
index 264c5189e..8f761a00d 100644
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -1,34 +1,40 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
import React, { Fragment, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
import { useNavigate, useParams } from "react-router-dom";
import {
AddIcon,
+ BackLink,
+ Box,
Button,
+ DataTable,
+ Grid,
GroupsIcon,
IAMPoliciesIcon,
PageLayout,
+ ScreenTitle,
+ SectionTitle,
+ Switch,
+ Tabs,
TrashIcon,
} from "mds";
-import createStyles from "@mui/styles/createStyles";
-import {
- actionsTray,
- containerForHeader,
- searchField,
- spacingUtils,
- tableStyles,
-} from "../Common/FormComponents/common/styleLibrary";
-
-import withStyles from "@mui/styles/withStyles";
-import { Grid } from "@mui/material";
-import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import SetPolicy from "../Policies/SetPolicy";
-import AddGroupMember from "./AddGroupMember";
-import DeleteGroup from "./DeleteGroup";
-import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import PanelTitle from "../Common/PanelTitle/PanelTitle";
-import SearchBox from "../Common/SearchBox";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { Group } from "api/consoleApi";
import {
addUserToGroupPermissions,
CONSOLE_UI_RESOURCE,
@@ -47,83 +53,34 @@ import {
hasPermission,
SecureComponent,
} from "../../../common/SecureComponent";
-import GroupDetailsHeader from "./GroupDetailsHeader";
-
import { decodeURLString, encodeURLString } from "../../../common/utils";
import { setHelpName, setModalErrorSnackMessage } from "../../../systemSlice";
import { useAppDispatch } from "../../../store";
import { setSelectedPolicies } from "../Users/AddUsersSlice";
+import SetPolicy from "../Policies/SetPolicy";
+import AddGroupMember from "./AddGroupMember";
+import DeleteGroup from "./DeleteGroup";
+import SearchBox from "../Common/SearchBox";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
-import { Group } from "api/consoleApi";
-
-const styles = (theme: Theme) =>
- createStyles({
- pageContainer: {
- border: "1px solid #EAEAEA",
- width: "100%",
- },
- statusLabel: {
- fontSize: ".8rem",
- marginRight: ".7rem",
- },
- statusValue: {
- fontWeight: "bold",
- fontSize: ".9rem",
- marginRight: ".7rem",
- },
- searchField: {
- ...searchField.searchField,
- maxWidth: 280,
- },
- ...tableStyles,
- ...spacingUtils,
- actionsTray: {
- ...actionsTray.actionsTray,
-
- alignItems: "center",
- "& h1": {
- flex: 1,
- },
- "& button": {
- marginLeft: ".8rem",
- },
- "@media (max-width: 900px)": {
- justifyContent: "flex-end",
- "& h1": {
- display: "none",
- },
- "& button": {
- whiteSpace: "nowrap",
- textOverflow: "ellipsis",
- },
- },
- },
- ...containerForHeader,
- });
-
-interface IGroupDetailsProps {
- classes: any;
-}
+import HelpMenu from "../HelpMenu";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
export const formatPolicy = (policy: string = ""): string[] => {
if (policy.length <= 0) return [];
return policy.split(",");
};
-const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
+const GroupsDetails = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
const params = useParams();
const [groupDetails, setGroupDetails] = useState({});
-
- /*Modals*/
const [policyOpen, setPolicyOpen] = useState(false);
const [usersOpen, setUsersOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const [memberFilter, setMemberFilter] = useState("");
+ const [currentTab, setCurrentTab] = useState("members");
const groupName = decodeURLString(params.groupName || "");
@@ -140,7 +97,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
);
useEffect(() => {
- dispatch(setHelpName("groups_members"));
+ dispatch(setHelpName("group_details"));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -207,73 +164,70 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
}
const groupsTabContent = (
-
-