From a62a19a38d8745f25f2eb3edaa5ced6f37ef6f2b Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 2 Jul 2024 10:45:10 +0200 Subject: [PATCH] change(ui): dashboard back button --- .../CustomMetricsWidgets/SessionsBy.tsx | 3 +- .../DashboardHeader/DashboardHeader.tsx | 204 +++++++++--------- .../WidgetWrapper/WidgetWrapperNew.tsx | 2 +- .../shared/Breadcrumb/BackButton.tsx | 22 +- 4 files changed, 116 insertions(+), 115 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx index 5ad6fdf3e..33352d59c 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx @@ -38,7 +38,8 @@ function SessionsBy(props: Props) { onClick(filters); }; - const showMore = () => { + const showMore = (e: any) => { + e.stopPropagation(); openModal( { closeModal(); diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx index 3a9fbeff5..09f2348f6 100644 --- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx +++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx @@ -1,24 +1,24 @@ import React from 'react'; //import {Breadcrumb} from 'Shared/Breadcrumb'; import BackButton from '../../../shared/Breadcrumb/BackButton'; -import {withSiteId} from 'App/routes'; -import {withRouter, RouteComponentProps} from 'react-router-dom'; -import {Button, PageTitle, confirm, Tooltip} from 'UI'; +import { withSiteId } from 'App/routes'; +import { withRouter, RouteComponentProps } from 'react-router-dom'; +import { Button, PageTitle, confirm, Tooltip } from 'UI'; import SelectDateRange from 'Shared/SelectDateRange'; -import {useStore} from 'App/mstore'; -import {useModal} from 'App/components/Modal'; +import { useStore } from 'App/mstore'; +import { useModal } from 'App/components/Modal'; import DashboardOptions from '../DashboardOptions'; import withModal from 'App/components/Modal/withModal'; -import {observer} from 'mobx-react-lite'; +import { observer } from 'mobx-react-lite'; import DashboardEditModal from '../DashboardEditModal'; -import CreateDashboardButton from "Components/Dashboard/components/CreateDashboardButton"; -import CreateCard from "Components/Dashboard/components/DashboardList/NewDashModal/CreateCard"; -import CreateCardButton from "Components/Dashboard/components/CreateCardButton"; +import CreateDashboardButton from 'Components/Dashboard/components/CreateDashboardButton'; +import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard'; +import CreateCardButton from 'Components/Dashboard/components/CreateCardButton'; interface IProps { - dashboardId: string; - siteId: string; - renderReport?: any; + dashboardId: string; + siteId: string; + renderReport?: any; } @@ -26,49 +26,49 @@ type Props = IProps & RouteComponentProps; const MAX_CARDS = 29; function DashboardHeader(props: Props) { - const {siteId, dashboardId} = props; - const {dashboardStore} = useStore(); - const {showModal} = useModal(); - const [focusTitle, setFocusedInput] = React.useState(true); - const [showEditModal, setShowEditModal] = React.useState(false); - const period = dashboardStore.period; + const { siteId, dashboardId } = props; + const { dashboardStore } = useStore(); + const { showModal } = useModal(); + const [focusTitle, setFocusedInput] = React.useState(true); + const [showEditModal, setShowEditModal] = React.useState(false); + const period = dashboardStore.period; - const dashboard: any = dashboardStore.selectedDashboard; - const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS; + const dashboard: any = dashboardStore.selectedDashboard; + const canAddMore: boolean = dashboard?.widgets?.length <= MAX_CARDS; - const onEdit = (isTitle: boolean) => { - dashboardStore.initDashboard(dashboard); - setFocusedInput(isTitle); - setShowEditModal(true); - }; + const onEdit = (isTitle: boolean) => { + dashboardStore.initDashboard(dashboard); + setFocusedInput(isTitle); + setShowEditModal(true); + }; - const onDelete = async () => { - if ( - await confirm({ - header: 'Delete Dashboard', - confirmButton: 'Yes, delete', - confirmation: `Are you sure you want to permanently delete this Dashboard?`, - }) - ) { - dashboardStore.deleteDashboard(dashboard).then(() => { - props.history.push(withSiteId(`/dashboard`, siteId)); - }); - } - }; - return ( -
- setShowEditModal(false)} - focusTitle={focusTitle} - /> - -
-
+ const onDelete = async () => { + if ( + await confirm({ + header: 'Delete Dashboard', + confirmButton: 'Yes, delete', + confirmation: `Are you sure you want to permanently delete this Dashboard?` + }) + ) { + dashboardStore.deleteDashboard(dashboard).then(() => { + props.history.push(withSiteId(`/dashboard`, siteId)); + }); + } + }; + return ( +
+ setShowEditModal(false)} + focusTitle={focusTitle} + /> - - - {/* +
+ + + + {/* */} - - - - {dashboard?.name} - - } - onDoubleClick={() => onEdit(true)} - className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dashed hover:border-gray-medium cursor-pointer" - /> -
-
- - -
- dashboardStore.setPeriod(period)} - right={true} - isAnt={true} - useButtonStyle={true} - /> -
- -
- -
-
-
-
- {/* @ts-ignore */} - -

onEdit(false)} - > - {/* {dashboard?.description || 'Describe the purpose of this dashboard'} */} -

- -
+ + {dashboard?.name} + + } + onDoubleClick={() => onEdit(true)} + className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dashed hover:border-gray-medium cursor-pointer" + />
- ); +
+ + +
+ dashboardStore.setPeriod(period)} + right={true} + isAnt={true} + useButtonStyle={true} + /> +
+ +
+ +
+
+
+
+ {/* @ts-ignore */} + +

onEdit(false)} + > + {/* {dashboard?.description || 'Describe the purpose of this dashboard'} */} +

+ +
+
+ ); } export default withRouter(withModal(observer(DashboardHeader))); diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx index 043d0fc04..126e347b1 100644 --- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx @@ -75,7 +75,7 @@ function WidgetWrapperNew(props: Props & RouteComponentProps) { }); const onChartClick = () => { - if (!isWidget || isPredefined) return; + // if (!isWidget || isPredefined) return; props.history.push( withSiteId(dashboardMetricDetails(dashboard?.dashboardId, widget.metricId), siteId) ); diff --git a/frontend/app/components/shared/Breadcrumb/BackButton.tsx b/frontend/app/components/shared/Breadcrumb/BackButton.tsx index 0eb961a84..334aebbd7 100644 --- a/frontend/app/components/shared/Breadcrumb/BackButton.tsx +++ b/frontend/app/components/shared/Breadcrumb/BackButton.tsx @@ -3,18 +3,20 @@ import { Button } from 'antd'; import { useHistory } from 'react-router-dom'; import { LeftOutlined } from '@ant-design/icons'; -function BackButton({ siteId }) { - const history = useHistory(); +function BackButton() { + const history = useHistory(); + const siteId = location.pathname.split('/')[1]; - const handleBackClick = () => { - history.goBack(); - }; + const handleBackClick = () => { + console.log('siteId', siteId); + history.push(`/${siteId}/dashboard`); + }; - return ( - - ); + return ( + + ); } export default BackButton;