From f56b4905c94696ac3097158555e63869d4ecd4b8 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Sat, 20 Nov 2021 04:57:18 +0530 Subject: [PATCH] Settings page ux refactor (#1242) Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- .../CSVMultiSelector/CSVMultiSelector.tsx | 1 + .../InputBoxWrapper/InputBoxWrapper.tsx | 4 +- .../FormComponents/common/styleLibrary.ts | 4 +- .../Common/VerticalTabs/VerticalTabs.tsx | 7 +- .../Configurations/ConfigurationMain.tsx | 4 +- .../ConfigurationPanels/ConfigurationForm.tsx | 47 +++++------- .../ConfigurationOptions.tsx | 71 ++++++++++++++++--- portal-ui/src/screens/Console/Console.tsx | 6 +- .../ConfTargetGeneric.tsx | 70 +++++++++++++++--- .../CustomForms/EditConfiguration.tsx | 4 +- 10 files changed, 155 insertions(+), 63 deletions(-) diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx index 321991066..af726f70c 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx @@ -146,6 +146,7 @@ const CSVMultiSelector = ({ {label !== "" && ( tabsContainer: { display: "flex", height: "100%", + width: "100%", }, tabsHeaderContainer: { width: "300px", @@ -39,11 +40,9 @@ const styles = (theme: Theme) => alignItems: "center", justifyContent: "flex-start", borderBottom: "1px solid #EAEAEA", - "& .min-icon": { - marginRight: ".3rem", + "& .MuiSvgIcon-root": { + marginRight: 8, marginBottom: 0, - height: ".8rem", - width: ".8rem", }, "&.Mui-selected": { background: "#E5E5E5", diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx index e0a1097f3..e2775abce 100644 --- a/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx +++ b/portal-ui/src/screens/Console/Configurations/ConfigurationMain.tsx @@ -18,15 +18,13 @@ import React from "react"; import { Route, Router, Switch } from "react-router-dom"; import history from "../../../history"; import ConfigurationOptions from "./ConfigurationPanels/ConfigurationOptions"; -import ConfigurationForm from "./ConfigurationPanels/ConfigurationForm"; import NotFoundPage from "../../NotFoundPage"; const ConfigurationMain = () => { return ( - - + diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx index 9b89177a6..f9efeda28 100644 --- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx +++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { Fragment } from "react"; +import React from "react"; import get from "lodash/get"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; @@ -28,8 +28,6 @@ import { searchField, settingsCommon, } from "../../Common/FormComponents/common/styleLibrary"; -import BackLink from "../../../../common/BackLink"; -import PageHeader from "../../Common/PageHeader/PageHeader"; interface IListConfiguration { classes: any; @@ -65,36 +63,27 @@ const styles = (theme: Theme) => }, }); -const ConfigurationsList = ({ - classes, - match, - history, -}: IListConfiguration) => { - const configurationName = get(match, "params.option", ""); +const ConfigurationsList = ({ match, history }: IListConfiguration) => { + const activeConfRoute = get(match, "url", ""); - const findConfiguration = configurationElements.find( - (element) => element.configuration_id === configurationName + const configName = activeConfRoute.substring( + activeConfRoute.lastIndexOf("/") + 1 ); + const validActiveConfig = configurationElements.find( + (element) => element.configuration_id === configName + ); + const containerClassName = `${configName}`; return ( - - - - - - - - {findConfiguration && ( - - )} - - - + + {validActiveConfig && ( + + )} + ); }; diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx index 8b173fa6f..74ae9494d 100644 --- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx +++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx @@ -27,12 +27,19 @@ import { searchField, } from "../../Common/FormComponents/common/styleLibrary"; import PageHeader from "../../Common/PageHeader/PageHeader"; -import SettingsCard from "../../Common/SettingsCard/SettingsCard"; import HelpBox from "../../../../common/HelpBox"; import { SettingsIcon } from "../../../../icons"; +import { Link, Redirect, Route, Router, Switch } from "react-router-dom"; +import ConfigurationForm from "./ConfigurationForm"; +import history from "../../../../history"; +import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs"; +import PageLayout from "../../Common/Layout/PageLayout"; +import get from "lodash/get"; +import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle"; interface IConfigurationOptions { classes: any; + match: any; } const styles = (theme: Theme) => @@ -60,7 +67,6 @@ const styles = (theme: Theme) => flexWrap: "wrap" as const, border: "#E5E5E5 1px solid", borderRadius: 2, - padding: 5, backgroundColor: "#fff", }, configurationLink: { @@ -76,20 +82,63 @@ const styles = (theme: Theme) => ...containerForHeader(theme.spacing(4)), }); -const ConfigurationOptions = ({ classes }: IConfigurationOptions) => { +const getRoutePath = (path: string) => { + return `/settings/${path}`; +}; + +const ConfigurationOptions = ({ classes, match }: IConfigurationOptions) => { + const configurationName = get(match, "url", ""); + let selConfigTab = configurationName.substring( + configurationName.lastIndexOf("/") + 1 + ); + selConfigTab = selConfigTab === "settings" ? "region" : selConfigTab; + return ( - + +
- {configurationElements.map((element) => ( - - ))} + } title={"Configuration:"} /> + + + + {configurationElements.map((element) => ( + + ))} + + + + + +
+ } + > + {configurationElements.map((element) => { + const { configuration_id, configuration_label, icon } = + element; + return { + tabConfig: { + label: configuration_label, + value: configuration_id, + icon: icon, + component: Link, + to: getRoutePath(configuration_id), + }, + }; + })} + @@ -116,7 +165,7 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => { } /> - + ); }; diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx index 356e7d92e..a2939d36e 100644 --- a/portal-ui/src/screens/Console/Console.tsx +++ b/portal-ui/src/screens/Console/Console.tsx @@ -86,6 +86,7 @@ const IconsScreen = React.lazy(() => import("./Common/IconsScreen")); const Speedtest = React.lazy(() => import("./Speedtest/Speedtest")); + const drawerWidth = 245; const Buckets = React.lazy(() => import("./Buckets/Buckets")); @@ -102,6 +103,7 @@ const TenantDetails = React.lazy( () => import("./Tenants/TenantDetails/TenantDetails") ); const License = React.lazy(() => import("./License/License")); +const ConfigurationOptions = React.lazy(() => import("./Configurations/ConfigurationPanels/ConfigurationOptions")); const styles = (theme: Theme) => createStyles({ @@ -341,11 +343,11 @@ const Console = ({ path: "/tools", }, { - component: ConfigurationMain, + component: ConfigurationOptions, path: "/settings", }, { - component: ConfigurationMain, + component: ConfigurationOptions, path: "/settings/:option", }, { diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx index dbcdb43d3..d443b2550 100644 --- a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx +++ b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx @@ -14,13 +14,17 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState, Fragment } from "react"; +import React, { useEffect, useState } from "react"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import Grid from "@mui/material/Grid"; import { IElementValue, KVField } from "../Configurations/types"; -import { modalBasic } from "../Common/FormComponents/common/styleLibrary"; +import { + fieldBasic, + formFieldStyles, + modalBasic, +} from "../Common/FormComponents/common/styleLibrary"; import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import CSVMultiSelector from "../Common/FormComponents/CSVMultiSelector/CSVMultiSelector"; import CommentBoxWrapper from "../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper"; @@ -35,6 +39,52 @@ interface IConfGenericProps { const styles = (theme: Theme) => createStyles({ + ...formFieldStyles, + formFieldRow: { + ...formFieldStyles.formFieldRow, + }, + inputBoxContainer: { + marginBottom: 7, + "& .MuiInputLabel-root": { + minWidth: 200, + "& svg": { + width: 16, + height: 16, + }, + }, + "& div[class|='InputBoxWrapper-textBoxContainer']": { + display: "flex", + }, + }, + overlayAction: { + top: 0, + right: 0, + position: "relative", + marginLeft: 10, + display: "flex", + alignItems: "center", + "& button": { + background: "#EAEAEA", + }, + }, + fieldContainer: { + "& .MuiInputLabel-root": { + flex: 1, + minWidth: 200, + }, + "& div[class|='CommentBoxWrapper-textBoxContainer']": { + flexGrow: 1, + width: "100%", + }, + }, + tooltipContainer: { + ...fieldBasic.tooltipContainer, + "& svg": { + width: 16, + height: 16, + }, + }, + ...modalBasic, }); @@ -102,6 +152,7 @@ const ConfTargetGeneric = ({ return ( ) => { const value = e.target.checked ? "true" : "false"; setValueElement(field.name, value, item); @@ -117,6 +168,7 @@ const ConfTargetGeneric = ({ case "csv": return ( ); case "comment": return ( - + {fieldsElements.map((field, item) => ( - - - {fieldDefinition(field, item)} - - + + {fieldDefinition(field, item)} + ))} diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx index 8019fefd7..5df74f018 100644 --- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx +++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx @@ -68,6 +68,7 @@ interface IAddNotificationEndpointProps { selectedConfiguration: IConfigurationElement; classes: any; history: any; + className?: string; } const EditConfiguration = ({ @@ -76,6 +77,7 @@ const EditConfiguration = ({ setErrorSnackMessage, classes, history, + className = "", }: IAddNotificationEndpointProps) => { //Local States const [valuesObj, setValueObj] = useState([]); @@ -147,7 +149,7 @@ const EditConfiguration = ({ return ( -
+ {loadingConfig && (