From e828312abf913ef039db48693b7e95b5e70a58e2 Mon Sep 17 00:00:00 2001 From: Vincent T Date: Wed, 29 Nov 2023 14:56:21 -0500 Subject: [PATCH] frontend Detail Drawer: Add detail drawer mode Signed-off-by: Vincent T --- frontend/src/components/App/Layout.tsx | 15 ++++ .../App/Settings/DrawerModeButton.tsx | 70 +++++++++++++++ .../src/components/App/Settings/Settings.tsx | 5 ++ .../__snapshots__/Settings.stories.storyshot | 46 ++++++++++ .../common/DetailDrawer/DetailDrawer.tsx | 86 +++++++++++++++++++ .../ActionsNotifier.stories.storyshot | 10 +-- frontend/src/i18n/locales/de/translation.json | 1 + frontend/src/i18n/locales/en/translation.json | 1 + frontend/src/i18n/locales/es/translation.json | 1 + frontend/src/i18n/locales/fr/translation.json | 1 + frontend/src/i18n/locales/pt/translation.json | 1 + frontend/src/redux/drawerModeSlice.ts | 29 +++++++ frontend/src/redux/reducers/reducers.tsx | 2 + 13 files changed, 263 insertions(+), 5 deletions(-) create mode 100644 frontend/src/components/App/Settings/DrawerModeButton.tsx create mode 100644 frontend/src/components/common/DetailDrawer/DetailDrawer.tsx create mode 100644 frontend/src/redux/drawerModeSlice.ts diff --git a/frontend/src/components/App/Layout.tsx b/frontend/src/components/App/Layout.tsx index 43dd210327b..7e4d19c0a23 100644 --- a/frontend/src/components/App/Layout.tsx +++ b/frontend/src/components/App/Layout.tsx @@ -17,6 +17,7 @@ import { useTypedSelector } from '../../redux/reducers/reducers'; import store from '../../redux/stores/store'; import ActionsNotifier from '../common/ActionsNotifier'; import AlertNotification from '../common/AlertNotification'; +import DetailDrawer from '../common/DetailDrawer/DetailDrawer'; import Sidebar, { NavigationTabs } from '../Sidebar'; import RouteSwitcher from './RouteSwitcher'; import TopBar from './TopBar'; @@ -93,6 +94,19 @@ export default function Layout({}: LayoutProps) { const { t } = useTranslation(); const clusterInURL = getCluster(); + // DETAIL DRAWER MODE + const isDetailDrawerEnabled = localStorage.getItem('detailDrawerEnabled') + ? Boolean(localStorage.getItem('detailDrawerEnabled')) + : useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); + + console.log('LAY - isDetailDrawerEnabled', isDetailDrawerEnabled); + + const isDetailDrawerOpen = localStorage.getItem('detailDrawerOpen') + ? Boolean(localStorage.getItem('detailDrawerOpen')) + : useTypedSelector(state => state.drawerMode.isDetailDrawerOpen); + + console.log('LAY - isDetailDrawerOpen', isDetailDrawerOpen); + useEffect(() => { window.clusterConfigFetchHandler = setInterval( () => { @@ -175,6 +189,7 @@ export default function Layout({}: LayoutProps) { + {isDetailDrawerEnabled && }
{clusters && !!clusterInURL && !Object.keys(clusters).includes(getCluster() || '') ? ( diff --git a/frontend/src/components/App/Settings/DrawerModeButton.tsx b/frontend/src/components/App/Settings/DrawerModeButton.tsx new file mode 100644 index 00000000000..5fc034c8294 --- /dev/null +++ b/frontend/src/components/App/Settings/DrawerModeButton.tsx @@ -0,0 +1,70 @@ +import { FormControlLabel, Switch } from '@material-ui/core'; +import React from 'react'; +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch } from 'react-redux'; +import { setDetailDrawerEnabled } from '../../../redux/drawerModeSlice'; +import { useTypedSelector } from '../../../redux/reducers/reducers'; + +export default function DrawerModeButton() { + const dispatch = useDispatch(); + const { t } = useTranslation('translation'); + + // This will fix the problem of the project refreshing the state away from needed position + + // DETAIL DRAWER MODE + const isDetailDrawerEnabled = localStorage.getItem('detailDrawerEnabled') + ? Boolean(localStorage.getItem('detailDrawerEnabled')) + : useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); + + console.log('BUTTON - isDetailDrawerEnabled', isDetailDrawerEnabled); + + const isDetailDrawerOpen = localStorage.getItem('detailDrawerOpen') + ? Boolean(localStorage.getItem('detailDrawerOpen')) + : useTypedSelector(state => state.drawerMode.isDetailDrawerOpen); + + console.log('BUTTON - isDetailDrawerOpen', isDetailDrawerOpen); + + // ############################ + // we initate a const that sets the state for the drawerMode, it will read whatever state is on and then set it to local storage through the setDetailDrawerEnabled function later + // @@@@@@ const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); + + // localStorage.getItem('detailDrawerEnabled') will return a string, so we need to convert it to a boolean + // ex. localStorage.getItem('detailDrawerEnabled') = 'true' or 'false' + // @@@@@@ const localDetailDrawerEnabled = Boolean(localStorage.getItem('detailDrawerEnabled')); + + // we need to create a state for the current changes to the drawerMode, so we create a new state called newDrawerEnabled and set it to the localDetailDrawerEnabled + // we use newDrawerEnabled to take in a change of state, send it to the setDetailDrawerEnabled function which the function then sets sets the state to the new change and ALSO sets it to local storage + // ############################ + + const [newDrawerEnabled, changeDetailDrawerEnabled] = useState(isDetailDrawerEnabled); + + // the useEffect will run everytime the newDrawerEnabled state changes, which is everytime the user clicks the switch button because the switch button changes the state of newDrawerEnabled + useEffect(() => { + dispatch(setDetailDrawerEnabled(newDrawerEnabled)); + console.log('ON SETTINGS'); + console.log(localStorage.getItem('detailDrawerEnabled')); + }, [newDrawerEnabled]); + + // this function takes in the current changes and updates it, this kicks off the useEffect that is listening for changes to newDrawerEnabled + function drawerModeToggle() { + console.log('drawerModeToggle'); + changeDetailDrawerEnabled(!newDrawerEnabled); + } + + // NOTICE THAT WE DO NOT USE NewDrawerEnabled TO DETERMINE HOW THE SWITCH IS RENDERED UNDER THE CHECKED PROP, THIS IS BECAUSE THE USEEFFECT WILL RERENDER THE COMPONENT WITH THE NEW STATE + return ( + drawerModeToggle()} + name="drawerMode" + color="primary" + /> + } + // will need to replace label + label={t('translation|Drawer Mode')} + /> + ); +} diff --git a/frontend/src/components/App/Settings/Settings.tsx b/frontend/src/components/App/Settings/Settings.tsx index 73b1bce3e48..e45b1b1dc0d 100644 --- a/frontend/src/components/App/Settings/Settings.tsx +++ b/frontend/src/components/App/Settings/Settings.tsx @@ -9,6 +9,7 @@ import { setAppSettings } from '../../../redux/configSlice'; import { defaultTableRowsPerPageOptions } from '../../../redux/configSlice'; import { ActionButton, NameValueTable, SectionBox } from '../../common'; import TimezoneSelect from '../../common/TimezoneSelect'; +import DrawerModeButton from './DrawerModeButton'; import { useSettings } from './hook'; import NumRowsInput from './NumRowsInput'; import ThemeChangeButton from './ThemeChangeButton'; @@ -69,6 +70,10 @@ export default function Settings() { name: t('translation|Theme'), value: , }, + { + name: t('translation|Drawer Mode'), + value: , + }, { name: t('translation|Number of rows for tables'), value: ( diff --git a/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot b/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot index 09b91fde7a7..52b65bbd660 100644 --- a/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot +++ b/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot @@ -158,6 +158,52 @@ exports[`Storyshots Settings General 1`] = ` +
+ Drawer Mode +
+
+ +
diff --git a/frontend/src/components/common/DetailDrawer/DetailDrawer.tsx b/frontend/src/components/common/DetailDrawer/DetailDrawer.tsx new file mode 100644 index 00000000000..d1813303bde --- /dev/null +++ b/frontend/src/components/common/DetailDrawer/DetailDrawer.tsx @@ -0,0 +1,86 @@ +import { Button } from '@material-ui/core'; +import Box from '@material-ui/core/Box'; +import Drawer from '@material-ui/core/Drawer'; +import React from 'react'; +import { useState } from 'react'; +import { useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { setDetailDrawerOpen } from '../../../redux/drawerModeSlice'; +import { useTypedSelector } from '../../../redux/reducers/reducers'; + +export interface DetailDrawerProps { + isOpen: boolean; + onClose?: () => void; + children?: React.ReactNode; +} + +export default function DetailDrawer({ isOpen, children }: DetailDrawerProps) { + const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); + + // localDetailDrawerEnabled is a string of either 'true' or 'false', if it does not exist yet it needs to be created + const localDetailDrawerEnabled = Boolean(localStorage.getItem('detailDrawerEnabled')); + console.log('LOCAL B OFF SETTINGS BEFORE localDetailDrawerEnabled', localDetailDrawerEnabled); + + if (!localDetailDrawerEnabled) { + useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); + } + console.log('LOCAL B OFF SETTINGS localDetailDrawerEnabled', localDetailDrawerEnabled); + + // const isDetailDrawerOpen = localStorage.getItem('detialDrawerOpen') ? Boolean(localStorage.getItem('detailDrawerOpen')) : useTypedSelector(state => state.drawerMode.isDetailDrawerOpen); + const isDetailDrawerOpen = isOpen; + console.log('OFF SETTINGS isDetailDrawerOpen', isDetailDrawerOpen); + // localDetailDrawerOpen is a string of either 'true' or 'false', if it does not exist yet it needs to be created + // const localDetailDrawerOpen = Boolean(localStorage.getItem('detailDrawerOpen')) + + const [openDetailDrawer, changeOpenDetailDrawer] = useState(isDetailDrawerOpen); + console.log('openDetailDrawer', openDetailDrawer); + const dispatch = useDispatch(); + + useEffect(() => { + console.log('Toggle Open Drawer', openDetailDrawer); + dispatch(setDetailDrawerOpen(openDetailDrawer)); + }, [openDetailDrawer]); + + function toggleOpenDrawer() { + changeOpenDetailDrawer(!openDetailDrawer); + } + + return ( + <> + {!openDetailDrawer && isDetailDrawerEnabled && ( + <> + toggleOpenDrawer()} + > + + + {children} + + + + )} + {openDetailDrawer && isDetailDrawerEnabled && ( + <> + toggleOpenDrawer()} + > + + + {children} + + + + )} + + ); +} + +// * the drawer is not opening in minimized mode? persistent drawer fix maybe - https://mui.com/material-ui/react-drawer/#persistent-drawer diff --git a/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot b/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot index e8cc3287b01..135224ef764 100644 --- a/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot +++ b/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot @@ -5,7 +5,7 @@ exports[`Storyshots ActionsNotifier None 1`] = `
`; exports[`Storyshots ActionsNotifier Some 1`] = `