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

Removed deprecated components and replaced them with mds ones (#3077)

Browse Source 
- SectionTitle
- AButton
- ScreenTitle

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-10-06 11:11:48 -05:00
committed by GitHub
parent fb02a7da06
commit 71681b710c
12 changed files with 23 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
View File

@@ -30,6 +30,7 @@ import {
Grid,
breakPoints,
ProgressBar,
ActionLink,
} from "mds";
import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
@@ -53,7 +54,6 @@ import { errorToHandler } from "../../../../api/errors";
import HelpMenu from "../../HelpMenu";
import AutoColorIcon from "../../Common/Components/AutoColorIcon";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
import AButton from "../../Common/AButton/AButton";
import SearchBox from "../../Common/SearchBox";
import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
import BulkLifecycleModal from "./BulkLifecycleModal";
@@ -438,13 +438,13 @@ const ListBuckets = () => {
>
<br />
To get started,&nbsp;
<AButton
<ActionLink
onClick={() => {
navigate(IAM_PAGES.ADD_BUCKETS);
}}
>
Create a Bucket.
</AButton>
</ActionLink>
</SecureComponent>
</Fragment>
}

51
portal-ui/src/screens/Console/Common/AButton/AButton.tsx
View File

@@ -1,51 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2021 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 <http://www.gnu.org/licenses/>.
import React from "react";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { IconButtonProps } from "@mui/material";
const styles = (theme: Theme) =>
createStyles({
root: {
padding: 0,
margin: 0,
border: 0,
backgroundColor: "transparent",
textDecoration: "underline",
cursor: "pointer",
fontSize: "inherit",
color: theme.palette.info.main,
fontFamily: "Inter, sans-serif",
},
});
interface IAButton extends IconButtonProps {
classes: any;
children: any;
}
const AButton = ({ classes, children, ...rest }: IAButton) => {
return (
<button {...rest} className={classes.root}>
{children}
</button>
);
};
export default withStyles(styles)(AButton);

10
portal-ui/src/screens/Console/Common/ComponentsScreen.tsx
View File

@@ -15,9 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { Fragment, useEffect, useState } from "react";
import { DialogContentText, Grid } from "@mui/material";
import SectionTitle from "./SectionTitle";
import { Button, ConfirmDeleteIcon, PageLayout } from "mds";
import { Button, ConfirmDeleteIcon, PageLayout, SectionTitle, Grid } from "mds";
import ConfirmDialog from "./ModalWrapper/ConfirmDialog";
import PageHeaderWrapper from "./PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
@@ -38,7 +36,7 @@ const ComponentsScreen = () => {
<PageHeaderWrapper label={"Components"} actions={<HelpMenu />} />
<PageLayout>
<Grid container spacing={1}>
<Grid container>
<Grid item xs={12}>
<SectionTitle>Confirm Dialogs</SectionTitle>
</Grid>
@@ -68,10 +66,10 @@ const ComponentsScreen = () => {
setDialogOpen(false);
}}
confirmationContent={
<DialogContentText>
<Fragment>
Are you sure you want to delete bucket <b>bucket</b>
? <br />A bucket can only be deleted if it's empty.
</DialogContentText>
</Fragment>
}
/>
</Grid>

2
portal-ui/src/screens/Console/Common/IconsScreen.tsx
View File

@@ -15,7 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState } from "react";
import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
import { containerForHeader } from "./FormComponents/common/styleLibrary";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";

118
portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
View File

@@ -1,118 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2021 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 <http://www.gnu.org/licenses/>.
import React from "react";
import Grid from "@mui/material/Grid";
import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
interface IScreenTitle {
icon?: any;
title?: any;
subTitle?: any;
actions?: any;
className?: any;
}
const useStyles = makeStyles((theme: Theme) => ({
headerBarIcon: {
marginRight: ".7rem",
color: theme.palette.primary.main,
"& .min-icon": {
width: 44,
height: 44,
},
"@media (max-width: 600px)": {
display: "none",
},
},
headerBarSubheader: {
color: "grey",
"@media (max-width: 900px)": {
maxWidth: 200,
},
},
stContainer: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: 8,
borderBottom: "1px solid #EAEAEA",
"@media (max-width: 600px)": {
flexFlow: "column",
},
},
titleColumn: {
height: "auto",
justifyContent: "center",
display: "flex",
flexFlow: "column",
alignItems: "flex-start",
"& h1": {
fontSize: 19,
},
},
leftItems: {
display: "flex",
alignItems: "center",
"@media (max-width: 600px)": {
flexFlow: "column",
width: "100%",
},
},
rightItems: {
display: "flex",
alignItems: "center",
"& button": {
marginLeft: 8,
},
"@media (max-width: 600px)": {
width: "100%",
},
},
}));
const ScreenTitle = ({
icon,
title,
subTitle,
actions,
className,
}: IScreenTitle) => {
const classes = useStyles();
return (
<Grid container>
<Grid
item
xs={12}
className={`${classes.stContainer} ${className ? className : ""}`}
>
<div className={classes.leftItems}>
{icon ? <div className={classes.headerBarIcon}>{icon}</div> : null}
<div className={classes.titleColumn}>
<h1 style={{ margin: 0 }}>{title}</h1>
<span className={classes.headerBarSubheader}>{subTitle}</span>
</div>
</div>
<div className={classes.rightItems}>{actions}</div>
</Grid>
</Grid>
);
};
export default ScreenTitle;

68
portal-ui/src/screens/Console/Common/SectionTitle.tsx
View File

@@ -1,68 +0,0 @@
// This file is part of MinIO Console Server
// Copyright (c) 2022 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 <http://www.gnu.org/licenses/>.
import React from "react";
import Grid from "@mui/material/Grid";
type Props = {
separator?: boolean;
actions?: React.ReactNode;
icon?: React.ReactNode;
children: string;
};
const SectionTitle: React.FC<Props> = ({
children,
separator = true,
actions,
icon,
}) => {
return (
<Grid
container
alignItems={"center"}
justifyContent="space-between"
sx={{
borderBottom: separator ? "1px solid #eaeaea" : "",
}}
>
<Grid item xs>
<h3
style={{
margin: 0,
marginBottom: 10,
}}
>
{icon && (
<Grid
container
alignItems={"center"}
justifyContent={"flex-start"}
spacing={1}
>
<Grid item>{icon}</Grid>
<Grid item>{children}</Grid>
</Grid>
)}
{!icon && children}
</h3>
</Grid>
{actions && <Grid item> {actions}</Grid>}
</Grid>
);
};
export default SectionTitle;

6
portal-ui/src/screens/Console/EventDestinations/ListEventDestinations.tsx
View File

@@ -16,6 +16,7 @@
import React, { Fragment, useEffect, useState } from "react";
import {
ActionLink,
AddIcon,
Box,
Button,
@@ -44,7 +45,6 @@ import {
settingsCommon,
tableStyles,
} from "../Common/FormComponents/common/styleLibrary";
import AButton from "../Common/AButton/AButton";
import SearchBox from "../Common/SearchBox";
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
@@ -298,13 +298,13 @@ const ListEventDestinations = ({ classes }: IListNotificationEndpoints) => {
<br />
<br />
To get started,{" "}
<AButton
<ActionLink
onClick={() => {
navigate(IAM_PAGES.EVENT_DESTINATIONS_ADD);
}}
>
Add an Event Destination
</AButton>
</ActionLink>
.
</Fragment>
}

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

@@ -29,6 +29,7 @@ import {
Grid,
Box,
ProgressBar,
ActionLink,
} from "mds";
import { api } from "api";
@@ -56,7 +57,6 @@ import { useAppDispatch } from "../../../store";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../HelpMenu";
import AButton from "../Common/AButton/AButton";
import SearchBox from "../Common/SearchBox";
const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
@@ -372,13 +372,13 @@ const Groups = () => {
<br />
<br />
To get started,{" "}
<AButton
<ActionLink
onClick={() => {
navigate(`${IAM_PAGES.GROUPS_ADD}`);
}}
>
Create a Group
</AButton>
</ActionLink>
.
</SecureComponent>
</Fragment>

3
portal-ui/src/screens/Console/IDP/LDAP/IDPLDAPConfigurationDetails.tsx
View File

@@ -32,6 +32,7 @@ import {
Tooltip,
ValuePair,
WarnIcon,
ScreenTitle,
} from "mds";
import { api } from "api";
import { ConfigurationKV } from "api/consoleApi";
@@ -44,7 +45,6 @@ import {
setSnackBarMessage,
} from "../../../../systemSlice";
import { ldapFormFields, ldapHelpBoxContents } from "../utils";
import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
import AddIDPConfigurationHelpBox from "../AddIDPConfigurationHelpbox";
import LDAPEntitiesQuery from "./LDAPEntitiesQuery";
@@ -302,6 +302,7 @@ const IDPLDAPConfigurationDetails = () => {
content: (
<Fragment>
<ScreenTitle
icon={null}
title={editMode ? "Edit Configuration" : ""}
actions={
!editMode ? (

2
portal-ui/src/screens/Console/KMS/Status.tsx
View File

@@ -16,6 +16,7 @@
import React, { Fragment, useEffect, useState } from "react";
import { Box, Grid } from "@mui/material";
import { SectionTitle } from "mds";
import api from "../../../common/api";
import { ErrorResponseHandler } from "../../../common/types";
@@ -32,7 +33,6 @@ import Tab from "@mui/material/Tab";
import { TabPanel } from "../../shared/tabs";
import LabelValuePair from "../Common/UsageBarWrapper/LabelValuePair";
import SectionTitle from "../Common/SectionTitle";
import LabelWithIcon from "../Buckets/BucketDetails/SummaryItems/LabelWithIcon";
import {
Bar,

6
portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
View File

@@ -19,6 +19,7 @@ import React, { Fragment, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Theme } from "@mui/material/styles";
import {
ActionLink,
BucketsIcon,
Button,
DataTable,
@@ -51,7 +52,6 @@ import { useSelector } from "react-redux";
import { selFeatures } from "../consoleSlice";
import AutoColorIcon from "../Common/Components/AutoColorIcon";
import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
import AButton from "../Common/AButton/AButton";
import makeStyles from "@mui/styles/makeStyles";
import { niceBytesInt } from "../../../common/utils";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
@@ -313,13 +313,13 @@ const OBListBuckets = () => {
>
<br />
To get started,&nbsp;
<AButton
<ActionLink
onClick={() => {
navigate(IAM_PAGES.ADD_BUCKETS);
}}
>
Create a Bucket.
</AButton>
</ActionLink>
</SecureComponent>
</Fragment>
}

6
portal-ui/src/screens/Console/Users/ListUsers.tsx
View File

@@ -27,6 +27,7 @@ import {
DataTable,
Grid,
ProgressBar,
ActionLink,
} from "mds";
import { User, UsersList } from "./types";
@@ -46,7 +47,6 @@ import {
viewUserPermissions,
} from "../../../common/SecureComponent/permissions";
import api from "../../../common/api";
import AButton from "../Common/AButton/AButton";
import SearchBox from "../Common/SearchBox";
import withSuspense from "../Common/Components/withSuspense";
@@ -446,13 +446,13 @@ const ListUsers = () => {
<br />
<br />
To get started,{" "}
<AButton
<ActionLink
onClick={() => {
navigate(`${IAM_PAGES.USER_ADD}`);
}}
>
Create a User
</AButton>
</ActionLink>
.
</SecureComponent>
</Fragment>