From 21229f3ba669cd5118e9483d5bfb2aebe5c75538 Mon Sep 17 00:00:00 2001 From: Sudheer Salavadi Date: Fri, 28 Jun 2024 18:22:05 +0530 Subject: [PATCH] Various style improvements in dashboards --- .../CustomMetricOverviewChart.tsx | 2 +- .../CustomMetricsWidgets/SessionsBy.tsx | 4 +- .../DashboardEditModal/DashboardEditModal.tsx | 17 +-- .../DashboardHeader/DashboardHeader.tsx | 10 +- .../DashboardList/DashboardList.tsx | 105 ++++++++++-------- .../NewDashModal/CardsLibrary.tsx | 2 +- .../NewDashModal/Examples/ExCard.tsx | 2 +- .../DashboardList/NewDashModal/SelectCard.tsx | 4 +- .../DashboardWidgetGrid.tsx | 4 +- .../components/FilterSeries/AddStepButton.tsx | 4 +- .../FilterSeries/SeriesName/SeriesName.tsx | 5 +- .../Funnels/FunnelIssues/FunnelIssues.tsx | 2 +- .../components/WidgetForm/CardBuilder.tsx | 9 +- .../components/WidgetForm/WidgetForm.tsx | 9 +- .../components/WidgetForm/WidgetFormNew.tsx | 13 +-- .../components/WidgetName/WidgetName.tsx | 4 +- .../WidgetSessions/WidgetSessions.tsx | 2 +- .../components/WidgetView/WidgetView.tsx | 34 +++--- .../WidgetView/WidgetViewHeader.tsx | 3 +- .../components/WidgetWrapper/CardMenu.tsx | 2 +- frontend/app/components/Login/Login.tsx | 1 + .../FilterSelection/FilterSelection.tsx | 2 +- frontend/app/components/ui/Modal/Modal.tsx | 2 +- 23 files changed, 125 insertions(+), 117 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx index de6fb9c87..d892682f6 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx @@ -27,7 +27,7 @@ function CustomMetricOverviewChart(props: Props) { /> - + 3 && (
diff --git a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx index 8666ffbdb..23fee3374 100644 --- a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx +++ b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx @@ -1,6 +1,8 @@ import { useObserver } from 'mobx-react-lite'; import React from 'react'; -import { Button, Modal, Form, Icon, Checkbox, Input } from 'UI'; +import { Modal, Form, Icon, Checkbox, Input } from 'UI'; +import {Button} from 'antd'; +import { CloseOutlined } from '@ant-design/icons'; import { useStore } from 'App/mstore' interface Props { @@ -32,14 +34,13 @@ function DashboardEditModal(props: Props) {
{ 'Edit Dashboard' }
- } /> + @@ -91,13 +92,13 @@ function DashboardEditModal(props: Props) {
- +
diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx index 837315497..f0cc31b9b 100644 --- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx +++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx @@ -61,7 +61,7 @@ function DashboardHeader(props: Props) { closeHandler={() => setShowEditModal(false)} focusTitle={focusTitle} /> - + /> */}
+ {dashboard?.name} } onDoubleClick={() => onEdit(true)} - className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer" + className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dashed hover:border-gray-medium cursor-pointer" />
@@ -112,7 +112,7 @@ function DashboardHeader(props: Props) {
{/* @ts-ignore */} - +

onEdit(false)} diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx index 77350083e..a9e634354 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx @@ -1,26 +1,25 @@ -import {LockOutlined, TeamOutlined} from '@ant-design/icons'; -import {Empty, Switch, Table, TableColumnsType, Tag, Tooltip, Typography} from 'antd'; -import {observer} from 'mobx-react-lite'; +import { LockOutlined, TeamOutlined } from '@ant-design/icons'; +import { Empty, Switch, Table, TableColumnsType, Tag, Tooltip, Typography } from 'antd'; +import { observer } from 'mobx-react-lite'; import React from 'react'; -import {connect} from 'react-redux'; -import {withRouter} from 'react-router-dom'; +import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; -import {checkForRecent} from 'App/date'; -import {useStore} from 'App/mstore'; +import { checkForRecent } from 'App/date'; +import { useStore } from 'App/mstore'; import Dashboard from 'App/mstore/types/dashboard'; -import {dashboardSelected, withSiteId} from 'App/routes'; +import { dashboardSelected, withSiteId } from 'App/routes'; -import AnimatedSVG, {ICONS} from 'Shared/AnimatedSVG/AnimatedSVG'; +import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; import CreateDashboardButton from "Components/Dashboard/components/CreateDashboardButton"; -import {useHistory} from "react-router"; +import { useHistory } from "react-router"; -function DashboardList({siteId}: { siteId: string }) { - const {dashboardStore} = useStore(); +function DashboardList({ siteId }: { siteId: string }) { + const { dashboardStore } = useStore(); const list = dashboardStore.filteredList; const dashboardsSearch = dashboardStore.filter.query; const history = useHistory(); - const tableConfig: TableColumnsType = [ { title: 'Title', @@ -28,14 +27,6 @@ function DashboardList({siteId}: { siteId: string }) { width: '25%', render: (t) =>
{t}
, }, - { - title: 'Description', - ellipsis: { - showTitle: false, - }, - width: '25%', - dataIndex: 'description', - }, { title: 'Last Modified', dataIndex: 'updatedAt', @@ -53,45 +44,62 @@ function DashboardList({siteId}: { siteId: string }) { }, { title: ( -
+
Visibility
- - dashboardStore.updateKey('filter', { - ...dashboardStore.filter, - showMine: !dashboardStore.filter.showMine, - })} checkedChildren={'Public'} unCheckedChildren={'Private'}/> + + + dashboardStore.updateKey('filter', { + ...dashboardStore.filter, + showMine: !dashboardStore.filter.showMine, + })} checkedChildren={'Team'} unCheckedChildren={'Private'} /> +
), width: '16.67%', dataIndex: 'isPublic', render: (isPublic: boolean) => ( - : }> + : }> {isPublic ? 'Team' : 'Private'} ), }, ]; + + const emptyDescription = dashboardsSearch !== '' ? ( +
+
+ + No search results found. + +
+ Try adjusting your search criteria or creating a new dashboard. +
+
+
+ ) : ( +
+
+ + Create your first dashboard. + +
+ Organize your product and technical insights as cards in dashboards to see the bigger picture. +
+
+ +
+
+
+ ); + + const emptyImage = dashboardsSearch !== '' ? ICONS.NO_RESULTS : ICONS.NO_DASHBOARDS; + return ( list.length === 0 && !dashboardStore.filter.showMine ? ( } - - imageStyle={{height: 300}} - description={( -
-
- - Create your first dashboard. - -
- Organize your product and technical insights as cards in dashboards to see the bigger picture,
take action and improve user experience. -
-
- -
-
-
- )} + image={} + imageStyle={{ height: 300 }} + description={emptyDescription} /> ) : ( ) + /> + ) ); - + } export default connect((state: any) => ({ diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx index 13b5e7d35..e000bd2d8 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx @@ -52,7 +52,7 @@ function CardsLibrary(props: Props) {
onItemClick(metric.metricId)}> -
onCard(type)}>
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx index 8a1ea4a35..f908fe004 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx @@ -73,7 +73,7 @@ const SelectCard: React.FC = (props: SelectCardProps) => { <>
- {dashboardId ? (isLibrary ? "Add Card" : "Create Card") : "Select a template to create a card"} + {dashboardId ? (isLibrary ? "Your Library" : "Create Card") : "Select a template to create a card"}
{isLibrary && ( @@ -84,7 +84,7 @@ const SelectCard: React.FC = (props: SelectCardProps) => { ) : ''} setLibraryQuery(value.target.value)} style={{width: 200}} /> diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx index 3c7702139..de42e052b 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx @@ -59,7 +59,7 @@ function DashboardWidgetGrid(props: Props) { >
{smallWidgets.length > 0 ? ( <> -
+
Web Vitals
@@ -85,7 +85,7 @@ function DashboardWidgetGrid(props: Props) { ) : null} {smallWidgets.length > 0 && regularWidgets.length > 0 ? ( -
+
All Cards
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx b/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx index cc3c08f92..55d005927 100644 --- a/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx +++ b/frontend/app/components/Dashboard/components/FilterSeries/AddStepButton.tsx @@ -23,8 +23,8 @@ function AddStepButton({series, excludeFilterKeys}: Props) { onFilterClick={onAddFilter} excludeFilterKeys={excludeFilterKeys} > - ); diff --git a/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx b/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx index d6a69c73d..9c4f58a66 100644 --- a/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx +++ b/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import { Icon } from 'UI'; +import {Input} from 'antd'; interface Props { name: string; @@ -35,15 +36,15 @@ function SeriesName(props: Props) { return (
{ editing ? ( - setEditing(true)} + className='bg-white' /> ) : (
{name && name.trim() === '' ? 'Series ' + (seriesIndex + 1) : name }
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx index f3d16ee9e..c30cf87c5 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx @@ -57,7 +57,7 @@ function FunnelIssues() { }, [stages.length, drillDownPeriod, filter.filters, depsString, metricStore.sessionsPage]); return useObserver(() => ( -
+

Most significant issues identified in this funnel

diff --git a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx index b7066b5d8..a7f883049 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx +++ b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx @@ -5,7 +5,7 @@ import {metricOf, issueOptions, issueCategories} from 'App/constants/filterOptio import {FilterKey} from 'Types/filter/filterType'; import {withSiteId, dashboardMetricDetails, metricDetails} from 'App/routes'; import {Icon, confirm} from 'UI'; -import {Card, Input, Space, Button, Segmented} from 'antd'; +import {Card, Input, Space, Button, Segmented, Alert} from 'antd'; import {AudioWaveform} from "lucide-react"; import FilterSeries from '../FilterSeries'; import Select from 'Shared/Select'; @@ -28,16 +28,13 @@ const AIInput = ({value, setValue, placeholder, onEnter}) => ( placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} - className='w-full mb-2' + className='w-full mb-2 bg-white' onKeyDown={(e) => e.key === 'Enter' && onEnter()} /> ); const PredefinedMessage = () => ( -
- -
Filtering and drill-downs will be supported soon for this card type.
-
+ ); const MetricTabs = ({metric, writeOption}: any) => { diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx index f85f0cce1..fe5730f25 100644 --- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx +++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx @@ -4,6 +4,7 @@ import {FilterKey} from 'Types/filter/filterType'; import {useStore} from 'App/mstore'; import {observer} from 'mobx-react-lite'; import {Button, Icon, confirm, Tooltip} from 'UI'; +import {Input, Alert} from 'antd' import FilterSeries from '../FilterSeries'; import Select from 'Shared/Select'; import {withSiteId, dashboardMetricDetails, metricDetails} from 'App/routes'; @@ -26,7 +27,6 @@ import {eventKeys} from 'App/types/filter/newFilter'; import {renderClickmapThumbnail} from './renderMap'; import Widget from 'App/mstore/types/widget'; import FilterItem from 'Shared/Filters/FilterItem'; -import {Input} from 'antd' interface Props { history: any; @@ -261,12 +261,7 @@ function WidgetForm(props: Props) { )} {isPredefined && ( -
- -
- Filtering and drill-downs will be supported soon for this card type. -
-
+ )} {testingKey ? - Define Steps +
+ Filter - +
); } @@ -172,8 +172,5 @@ const AdditionalFilters = observer(() => { const PredefinedMessage = () => ( -
- -
Filtering and drill-downs will be supported soon for this card type.
-
+ ); diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx index 00abe60ec..ae3ab3355 100644 --- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx +++ b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import { Icon, Tooltip } from 'UI'; +import { Input } from 'antd'; import cn from 'classnames'; interface Props { @@ -53,10 +54,9 @@ function WidgetName(props: Props) { return (
{ editing ? ( - onBlur()} diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx index f08cfff7c..a23d6ea10 100644 --- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx +++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx @@ -115,7 +115,7 @@ function WidgetSessions(props: Props) { }; return ( -
+

{metricStore.clickMapSearch ? 'Clicks' : 'Sessions'}

diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx index 02e586420..8202016ca 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx +++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx @@ -137,28 +137,34 @@ function WidgetView(props: Props) {
} > - - +
+
+ +
- +
+ +
{/*
*/} {/* */} {/*
*/} - +
+ - {widget.metricOf !== FilterKey.SESSIONS && widget.metricOf !== FilterKey.ERRORS && ( - <> - {(widget.metricType === TABLE || widget.metricType === TIMESERIES || widget.metricType === CLICKMAP || widget.metricType === INSIGHTS) && - } - {widget.metricType === FUNNEL && } - - )} + {widget.metricOf !== FilterKey.SESSIONS && widget.metricOf !== FilterKey.ERRORS && ( + <> + {(widget.metricType === TABLE || widget.metricType === TIMESERIES || widget.metricType === CLICKMAP || widget.metricType === INSIGHTS) && + } + {widget.metricType === FUNNEL && } + + )} - {widget.metricType === USER_PATH && } - {widget.metricType === RETENTION && } - + {widget.metricType === USER_PATH && } + {widget.metricType === RETENTION && } +
+
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx index 49a22e3a1..ea0cbf829 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx +++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx @@ -26,7 +26,8 @@ function WidgetViewHeader({onClick, onSave, undoChanges}: Props) {

metricStore.merge({name})} - canEdit={true}/> + canEdit={true} + />

diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx index c2d5494fb..90426a56c 100644 --- a/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/CardMenu.tsx @@ -21,7 +21,7 @@ function CardMenu({card}: any) { }, { key: 'hide', - label: 'Hide', + label: 'Remove', icon: , }, ]; diff --git a/frontend/app/components/Login/Login.tsx b/frontend/app/components/Login/Login.tsx index e59be3a85..ca187b1d6 100644 --- a/frontend/app/components/Login/Login.tsx +++ b/frontend/app/components/Login/Login.tsx @@ -110,6 +110,7 @@ const Login: React.FC = ({errors, loading, authDetails, login, setJw onChange={(e) => setEmail(e.target.value)} required icon="envelope" + /> diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx index c8eb01438..b8de307bd 100644 --- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx +++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx @@ -47,7 +47,7 @@ function FilterSelection(props: Props) { }) ) : (
setShowModal(true)} > diff --git a/frontend/app/components/ui/Modal/Modal.tsx b/frontend/app/components/ui/Modal/Modal.tsx index 8c1701fe6..3ebcf0c17 100644 --- a/frontend/app/components/ui/Modal/Modal.tsx +++ b/frontend/app/components/ui/Modal/Modal.tsx @@ -50,7 +50,7 @@ function Modal(props: Props) { style={{ zIndex: '9999', backgroundColor: 'rgba(0, 0, 0, 0.2)'}} onClick={handleClose} > -
+
{children}