From 018b01f53c09130b8a3084e72e52163cfd955ae9 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 27 Jun 2024 15:45:05 -0700 Subject: [PATCH 1/2] Redirected user to Monitors page after adding a new monitor --- Client/src/Pages/CreateNewMonitor/index.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx index 127ec9766..19dd1386a 100644 --- a/Client/src/Pages/CreateNewMonitor/index.jsx +++ b/Client/src/Pages/CreateNewMonitor/index.jsx @@ -9,11 +9,13 @@ import { MenuItem, Select, Typography } from "@mui/material"; import { useSelector, useDispatch } from "react-redux"; import { createMonitorValidation } from "../../Validation/validation"; import { createMonitor } from "../../Features/Monitors/monitorsSlice"; +import { useNavigate } from "react-router-dom"; const CreateNewMonitor = () => { const MS_PER_MINUTE = 60000; const { user, authToken } = useSelector((state) => state.auth); const dispatch = useDispatch(); + const navigate = useNavigate(); const [errors, setErrors] = useState({}); @@ -76,7 +78,7 @@ const CreateNewMonitor = () => { // })); // }; - const handleCreateNewMonitor = (event) => { + const handleCreateNewMonitor = async (event) => { event.preventDefault(); //obj to submit let monitor = { @@ -102,7 +104,14 @@ const CreateNewMonitor = () => { // ...advancedSettings, // TODO frequency should be interval, then we can use spread interval: advancedSettings.frequency * MS_PER_MINUTE, }; - dispatch(createMonitor({ authToken, monitor })); + try { + const action = await dispatch(createMonitor({ authToken, monitor })); + if (action.meta.requestStatus === "fulfilled") { + navigate("/monitors"); + } + } catch (error) { + alert(error); + } } }; From 62d545df065a9f02bc2f77c493a878a894ac3605 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 27 Jun 2024 19:19:36 -0400 Subject: [PATCH 2/2] Added account parent route and fixed links --- Client/src/App.jsx | 13 ++ Client/src/Components/NavBar/index.jsx | 4 +- .../PasswordPanel.jsx | 2 +- .../ProfilePanel.jsx | 2 +- .../TeamPanel.jsx | 2 +- Client/src/Pages/Account/index.css | 200 +++++++++++++++++ Client/src/Pages/Account/index.jsx | 84 ++++++++ Client/src/Pages/Settings/index.css | 203 ------------------ Client/src/Pages/Settings/index.jsx | 83 +------ 9 files changed, 304 insertions(+), 289 deletions(-) rename Client/src/Components/TabPanels/{ProfileSettings => Account}/PasswordPanel.jsx (99%) rename Client/src/Components/TabPanels/{ProfileSettings => Account}/ProfilePanel.jsx (99%) rename Client/src/Components/TabPanels/{ProfileSettings => Account}/TeamPanel.jsx (99%) create mode 100644 Client/src/Pages/Account/index.css create mode 100644 Client/src/Pages/Account/index.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 03ecf303b..4a05c1de3 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -6,6 +6,7 @@ import Register from "./Pages/Register"; import HomeLayout from "./Layouts/HomeLayout"; import Demo from "./Pages/Demo/Demo"; import PlayGround from "./Pages/PlayGround/PlayGround"; +import Account from "./Pages/Account"; import Monitors from "./Pages/Monitors"; import CreateNewMonitor from "./Pages/CreateNewMonitor"; import Incidents from "./Pages/Incidents"; @@ -53,6 +54,18 @@ function App() { path="settings" element={} /> + } + /> + } + /> + } + /> } /> diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx index c3ef60091..1e28f0aff 100644 --- a/Client/src/Components/NavBar/index.jsx +++ b/Client/src/Components/NavBar/index.jsx @@ -66,10 +66,10 @@ function NavBar() { setAnchorElUser(null); switch (setting) { case "Profile": - console.log("Profile"); + navigate("/account/profile"); break; case "Team": - console.log("Team"); + navigate("/account/team"); break; case "Invite Colleagues": console.log("Invite Colleagues"); diff --git a/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx similarity index 99% rename from Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx rename to Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 56eb9a12a..31664e2a2 100644 --- a/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -87,7 +87,7 @@ const PasswordPanel = () => { }; return ( - +
{ }; return ( - +
diff --git a/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx similarity index 99% rename from Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx rename to Client/src/Components/TabPanels/Account/TeamPanel.jsx index f639ec155..23ea3e6ba 100644 --- a/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -184,7 +184,7 @@ const TeamPanel = () => { return count; }; return ( - +
.announcement-tile { + width: 100%; +} +.edit-password-form__wrapper + > .announcement-tile + .announcement-content-subject { + margin-bottom: 2px; +} +#edit-new-password + div > button > svg, +#edit-confirm-password + div > button > svg, +#edit-current-password + div > button > svg { + color: var(--env-var-color-29); +} +.edit-password-form__wrapper .announcement-tile { + margin: 0; +} +.edit-password-form__wrapper .announcement-tile .announcement-close { + margin-left: auto; +} +.MuiBox-root > .announcement-tile { + border-color: var(--env-var-color-27); + background-color: var(--lighter-env-var-color-27); +} +.MuiBox-root > .announcement-tile .announcement-content-body { + color: var(--env-var-color-28); +} +.MuiBox-root > .announcement-tile .announcement-close svg, +.edit-password-form__wrapper > .announcement-tile .announcement-close svg { + display: none; +} +#org-name-flex-container .Mui-disabled { + color: var(--env-var-color-2) !important; +} + +.edit-team-form__wrapper td { + padding: 10px 0; + padding-top: 20px; + vertical-align: text-top; +} +.edit-team-form__wrapper th { + padding: var(--env-var-spacing-1) 0; +} +.edit-team-form__wrapper th:first-of-type { + padding-left: 20px; +} +.edit-team-form__wrapper td { + color: var(--env-var-color-25); +} + +#select-actions, +#select-role { + padding: 5px 0; + padding-left: 15px; + padding-right: 50px; + line-height: 1.75; +} +.MuiInputBase-root:has(#select-actions) fieldset, +.MuiInputBase-root:has(#select-role) fieldset { + border-color: #a1a7b1; + margin: -1px; + border-width: 1px; +} +.MuiInputBase-root:has(#select-actions):hover fieldset, +.MuiInputBase-root:has(#select-role):hover fieldset { + border-color: var(--env-var-color-2); +} + +.MuiStack-root:has(.MuiBox-root > .members-query) .MuiBox-root { + cursor: pointer; +} +.members-query { + display: inline-flex; + justify-content: center; + align-items: center; + margin-left: 6px; + padding: 2px; + font-size: 12px; + font-weight: 500; + color: var(--env-var-color-3); + background-color: #e0e9fd; + min-width: 22px; + min-height: 22px; + border-radius: 50%; +} + +/* for testing, will remove later */ +@media only screen and (max-width: 1600px) { + .edit-profile-form__wrapper .MuiStack-root:not(.row-stack), + .edit-password-form__wrapper .MuiStack-root:not(.row-stack), + .edit-organization-form__wrapper .MuiStack-root:not(.row-stack) { + margin-right: 30px; + } +} + +.account .MuiStack-root:has(p.MuiTypography-root.input-error) { + position: relative; +} +.account .text-field-icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 18px !important; + height: 18px !important; + opacity: 0.8; +} +.account p.MuiTypography-root.input-error { + color: var(--env-var-color-24); + opacity: 0.8; + position: absolute; + top: calc(100% + 5px); +} +.account .email-text-field, +.account .password-text-field { + margin: 0; +} + +.edit-profile-form__wrapper .MuiFormControl-root, +.edit-password-form__wrapper .MuiFormControl-root { + width: 100%; +} +.edit-profile-form__wrapper .MuiStack-root:has(.MuiFormControl-root), +.edit-password-form__wrapper .MuiStack-root:has(.MuiFormControl-root) { + margin: 0; +} \ No newline at end of file diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx new file mode 100644 index 000000000..1a24bb36e --- /dev/null +++ b/Client/src/Pages/Account/index.jsx @@ -0,0 +1,84 @@ +import PropTypes from "prop-types"; +import { useState } from "react"; +import { Box, Tab, useTheme } from "@mui/material"; +import TabContext from "@mui/lab/TabContext"; +import TabList from "@mui/lab/TabList"; +import "./index.css"; +import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel"; +import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel"; +import TeamPanel from "../../Components/TabPanels/Account/TeamPanel"; +import { useNavigate } from "react-router"; + +/** + * Account component renders a settings page with tabs for Profile, Password, and Team settings. + * @param {string} [props.open] - Specifies the initially open tab: 'profile', 'password', or 'team'. + * @returns {JSX.Element} + */ + +const tabList = ["Profile", "Password", "Team"]; + +const Account = ({ open = "profile" }) => { + const theme = useTheme(); + const navigate = useNavigate(); + const tab = open; + const handleTabChange = (event, newTab) => { + navigate(`/account/${newTab}`); + }; + + return ( + + + + + {tabList.map((label, index) => ( + + ))} + + + + + + + + ); +}; + +Account.propTypes = { + open: PropTypes.oneOf(["profile", "password", "team"]), +}; + +export default Account; diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css index b0c2afb8d..e69de29bb 100644 --- a/Client/src/Pages/Settings/index.css +++ b/Client/src/Pages/Settings/index.css @@ -1,203 +0,0 @@ -.settings h1.MuiTypography-root, -.settings p.MuiTypography-root, -.settings input, -.settings button, -.settings td, -.settings .MuiSelect-select { - font-size: var(--env-var-font-size-medium); -} -.settings h1.MuiTypography-root, -.settings p.MuiTypography-root, -.settings input, -.settings .MuiSelect-select { - color: var(--env-var-color-2); -} -.settings h1.MuiTypography-root { - font-weight: 600; -} -.settings .MuiStack-root:not(.table-stack) { - flex: 1; - -webkit-flex: 1; - -ms-flex: 1; -} -.settings .MuiTabPanel-root { - padding: 0; - margin-top: 50px; -} -.settings .MuiDivider-root:not(.short-divider) { - margin: 50px 0; -} -.settings .MuiDivider-root, -.settings .MuiOutlinedInput-root fieldset, -.announcement-tile { - border-color: var(--env-var-color-29); -} -.settings [class$="-form"] { - width: inherit; -} -.settings [class$="__wrapper"], -.settings [class$="__wrapper compact"] { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-start; -} -.edit-profile-form__wrapper .MuiStack-root:not(.row-stack), -.edit-password-form__wrapper .MuiStack-root:not(.row-stack), -.edit-organization-form__wrapper .MuiStack-root:not(.row-stack) { - flex-direction: column; - gap: 8px; - margin-right: 10px; -} -.edit-profile-form__wrapper p.MuiTypography-root, -.delete-profile-form__wrapper p.MuiTypography-root { - opacity: 0.6; -} -#modal-delete-account, -#modal-edit-org-name, -#modal-invite-member { - font-size: var(--env-var-font-size-large); -} -.edit-profile-form__wrapper:not(:first-of-type), -.edit-password-form__wrapper:not(:first-of-type), -.edit-team-form__wrapper:not(:first-of-type) { - margin-top: var(--env-var-spacing-4); -} -.edit-team-form__wrapper.compact { - margin-top: var(--env-var-spacing-3); - justify-content: flex-start; - align-items: center; -} -.edit-profile-form__wrapper input, -.edit-password-form__wrapper input, -#edit-organization-name, -#input-team-member { - padding: 10px; -} -.edit-password-form__wrapper > .announcement-tile { - width: 100%; -} -.edit-password-form__wrapper - > .announcement-tile - .announcement-content-subject { - margin-bottom: 2px; -} -#edit-new-password + div > button > svg, -#edit-confirm-password + div > button > svg, -#edit-current-password + div > button > svg { - color: var(--env-var-color-29); -} -.edit-password-form__wrapper .announcement-tile { - margin: 0; -} -.edit-password-form__wrapper .announcement-tile .announcement-close { - margin-left: auto; -} -.MuiBox-root > .announcement-tile { - border-color: var(--env-var-color-27); - background-color: var(--lighter-env-var-color-27); -} -.MuiBox-root > .announcement-tile .announcement-content-body { - color: var(--env-var-color-28); -} -.MuiBox-root > .announcement-tile .announcement-close svg, -.edit-password-form__wrapper > .announcement-tile .announcement-close svg { - display: none; -} -#org-name-flex-container .Mui-disabled { - color: var(--env-var-color-2) !important; -} - -.edit-team-form__wrapper td { - padding: 10px 0; - padding-top: 20px; - vertical-align: text-top; -} -.edit-team-form__wrapper th { - padding: var(--env-var-spacing-1) 0; -} -.edit-team-form__wrapper th:first-of-type { - padding-left: 20px; -} -.edit-team-form__wrapper td { - color: var(--env-var-color-25); -} - -#select-actions, -#select-role { - padding: 5px 0; - padding-left: 15px; - padding-right: 50px; - line-height: 1.75; -} -.MuiInputBase-root:has(#select-actions) fieldset, -.MuiInputBase-root:has(#select-role) fieldset { - border-color: #a1a7b1; - margin: -1px; - border-width: 1px; -} -.MuiInputBase-root:has(#select-actions):hover fieldset, -.MuiInputBase-root:has(#select-role):hover fieldset { - border-color: var(--env-var-color-2); -} - -.MuiStack-root:has(.MuiBox-root > .members-query) .MuiBox-root { - cursor: pointer; -} -.members-query { - display: inline-flex; - justify-content: center; - align-items: center; - margin-left: 6px; - padding: 2px; - font-size: 12px; - font-weight: 500; - color: var(--env-var-color-3); - background-color: #e0e9fd; - min-width: 22px; - min-height: 22px; - border-radius: 50%; -} - -/* for testing, will remove later */ -@media only screen and (max-width: 1600px) { - .settings { - max-width: calc(90vw - 250px) !important; - } - .edit-profile-form__wrapper .MuiStack-root:not(.row-stack), - .edit-password-form__wrapper .MuiStack-root:not(.row-stack), - .edit-organization-form__wrapper .MuiStack-root:not(.row-stack) { - margin-right: 30px; - } -} - -.settings .MuiStack-root:has(p.MuiTypography-root.input-error) { - position: relative; -} -.settings .text-field-icon { - position: absolute; - top: 50%; - transform: translateY(-50%); - width: 18px !important; - height: 18px !important; - opacity: 0.8; -} -.settings p.MuiTypography-root.input-error { - color: var(--env-var-color-24); - opacity: 0.8; - position: absolute; - top: calc(100% + 5px); -} -.settings .email-text-field, -.settings .password-text-field { - margin: 0; -} - -.edit-profile-form__wrapper .MuiFormControl-root, -.edit-password-form__wrapper .MuiFormControl-root { - width: 100%; -} -.edit-profile-form__wrapper .MuiStack-root:has(.MuiFormControl-root), -.edit-password-form__wrapper .MuiStack-root:has(.MuiFormControl-root) { - margin: 0; -} \ No newline at end of file diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx index 3dd47859b..3ca261a80 100644 --- a/Client/src/Pages/Settings/index.jsx +++ b/Client/src/Pages/Settings/index.jsx @@ -1,86 +1,7 @@ -import PropTypes from "prop-types"; -import { useState } from "react"; -import { Box, Tab, useTheme } from "@mui/material"; -import TabContext from "@mui/lab/TabContext"; -import TabList from "@mui/lab/TabList"; -import "./index.css"; -import ProfilePanel from "../../Components/TabPanels/ProfileSettings/ProfilePanel"; -import PasswordPanel from "../../Components/TabPanels/ProfileSettings/PasswordPanel"; -import TeamPanel from "../../Components/TabPanels/ProfileSettings/TeamPanel"; - -/** - * Settings component renders a settings page with tabs for Profile, Password, and Team settings. - * - * @returns {JSX.Element} - */ - -const tabList = ["Profile", "Password", "Team"]; +import React from "react"; const Settings = () => { - const theme = useTheme(); - //(tab) 0 - Profile - //(tab) 1 - Password - //(tab) 2 - Team - const [tab, setTab] = useState("0"); - const handleTabChange = (event, newTab) => { - setTab(newTab); - }; - - return ( - - - - - {tabList.map((label, index) => ( - - ))} - - - - - - - - ); -}; - -Settings.propTypes = { - // No props are being passed to this component, hence no specific PropTypes are defined. + return
Settings
; }; export default Settings;