diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index b81cef7b9..e75fe6823 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx @@ -1,21 +1,21 @@ -import React, { useEffect } from "react"; -import { observer } from "mobx-react-lite"; -import { useStore } from "App/mstore"; -import { Button, PageTitle, Loader } from "UI"; -import { withSiteId } from "App/routes"; -import withModal from "App/components/Modal/withModal"; -import DashboardWidgetGrid from "../DashboardWidgetGrid"; -import { confirm } from "UI"; -import { withRouter, RouteComponentProps } from "react-router-dom"; -import { useModal } from "App/components/Modal"; -import DashboardModal from "../DashboardModal"; -import DashboardEditModal from "../DashboardEditModal"; -import AlertFormModal from "App/components/Alerts/AlertFormModal"; -import withPageTitle from "HOCs/withPageTitle"; -import withReport from "App/components/hocs/withReport"; -import DashboardOptions from "../DashboardOptions"; -import SelectDateRange from "Shared/SelectDateRange"; -import { Tooltip } from "react-tippy"; +import React, { useEffect } from 'react'; +import { observer } from 'mobx-react-lite'; +import { useStore } from 'App/mstore'; +import { Button, PageTitle, Loader } from 'UI'; +import { withSiteId } from 'App/routes'; +import withModal from 'App/components/Modal/withModal'; +import DashboardWidgetGrid from '../DashboardWidgetGrid'; +import { confirm } from 'UI'; +import { withRouter, RouteComponentProps } from 'react-router-dom'; +import { useModal } from 'App/components/Modal'; +import DashboardModal from '../DashboardModal'; +import DashboardEditModal from '../DashboardEditModal'; +import AlertFormModal from 'App/components/Alerts/AlertFormModal'; +import withPageTitle from 'HOCs/withPageTitle'; +import withReport from 'App/components/hocs/withReport'; +import DashboardOptions from '../DashboardOptions'; +import SelectDateRange from 'Shared/SelectDateRange'; +import { Tooltip } from 'react-tippy'; import Breadcrumb from 'Shared/Breadcrumb'; interface IProps { @@ -42,18 +42,18 @@ function DashboardView(props: Props) { const queryParams = new URLSearchParams(props.location.search); const trimQuery = () => { - if (!queryParams.has("modal")) return; - queryParams.delete("modal"); + if (!queryParams.has('modal')) return; + queryParams.delete('modal'); props.history.replace({ search: queryParams.toString(), }); }; const pushQuery = () => { - if (!queryParams.has("modal")) props.history.push("?modal=addMetric"); + if (!queryParams.has('modal')) props.history.push('?modal=addMetric'); }; useEffect(() => { - if (queryParams.has("modal")) { + if (queryParams.has('modal')) { onAddWidgets(); trimQuery(); } @@ -62,9 +62,9 @@ function DashboardView(props: Props) { useEffect(() => { const isExists = dashboardStore.getDashboardById(dashboardId); if (!isExists) { - props.history.push(withSiteId(`/dashboard`, siteId)) + props.history.push(withSiteId(`/dashboard`, siteId)); } - }, [dashboardId]) + }, [dashboardId]); useEffect(() => { if (!dashboard || !dashboard.dashboardId) return; @@ -73,14 +73,7 @@ function DashboardView(props: Props) { const onAddWidgets = () => { dashboardStore.initDashboard(dashboard); - showModal( - , - { right: true } - ); + showModal(, { right: true }); }; const onEdit = (isTitle: boolean) => { @@ -92,8 +85,8 @@ function DashboardView(props: Props) { const onDelete = async () => { if ( await confirm({ - header: "Confirm", - confirmButton: "Yes, delete", + header: 'Confirm', + confirmButton: 'Yes, delete', confirmation: `Are you sure you want to permanently delete this Dashboard?`, }) ) { @@ -107,60 +100,41 @@ function DashboardView(props: Props) { return ( -
- setShowEditModal(false)} - focusTitle={focusTitle} - /> +
+ setShowEditModal(false)} focusTitle={focusTitle} />
+ // @ts-ignore + {dashboard?.name} } onDoubleClick={() => onEdit(true)} - className="mr-3 select-none hover:border-dotted hover:border-b border-gray-medium cursor-pointer" + className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer" actionButton={ - } />
-
-
+
+
- dashboardStore.setPeriod(period) - } + onChange={(period: any) => dashboardStore.setPeriod(period)} right={true} />
@@ -176,30 +150,21 @@ function DashboardView(props: Props) {
-

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

+ {/* @ts-ignore */} + +

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

+
- - - dashboardStore.updateKey("showAlertModal", false) - } - /> + + dashboardStore.updateKey('showAlertModal', false)} />
); } -export default withPageTitle("Dashboards - OpenReplay")( - withReport(withRouter(withModal(observer(DashboardView)))) -); +export default withPageTitle('Dashboards - OpenReplay')(withReport(withRouter(withModal(observer(DashboardView))))); diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx index c796ecc5f..7cba9ac52 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx @@ -5,25 +5,41 @@ import { useModal } from 'App/components/Modal'; import { useStore } from 'App/mstore'; import AddMetric from './AddMetric'; import AddPredefinedMetric from './AddPredefinedMetric'; +import cn from 'classnames'; interface AddMetricButtonProps { iconName: string; title: string; description: string; + isPremade?: boolean; onClick: () => void; } -function AddMetricButton({ iconName, title, description, onClick }: AddMetricButtonProps) { +function AddMetricButton({ iconName, title, description, onClick, isPremade }: AddMetricButtonProps) { return (
-
- +
+
-
{title}
-
{description}
+
{title}
+
{description}
); } @@ -63,17 +79,18 @@ function AddMetricContainer({ siteId }: any) { ); }; return ( -
+
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx index 7750c8241..74c1d5c3d 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx @@ -24,9 +24,9 @@ function DashboardWidgetGrid(props: Props) { Build your dashboard} subtext={ - +
} >
@@ -41,6 +41,7 @@ function DashboardWidgetGrid(props: Props) { isWidget={true} /> ))} +
diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx index 67be4930d..d0d673df2 100644 --- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx +++ b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx @@ -68,7 +68,12 @@ function WidgetName(props: Props) {
setEditing(true)} - className={cn("text-2xl h-8 flex items-center border-transparent", canEdit && 'cursor-pointer select-none hover:border-dotted hover:border-b border-gray-medium')} + className={ + cn( + "text-2xl h-8 flex items-center border-transparent", + canEdit && 'cursor-pointer select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium' + ) + } > { name }
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index dd207816e..4a6582789 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -64,6 +64,7 @@ const SVG = (props: Props) => { case 'avatar/icn_wild_bore': return ; case 'ban': return ; case 'bar-chart-line': return ; + case 'bar-pencil': return ; case 'bell-plus': return ; case 'bell': return ; case 'binoculars': return ; @@ -221,6 +222,7 @@ const SVG = (props: Props) => { case 'github': return ; case 'graph-up-arrow': return ; case 'grid-3x3': return ; + case 'grid-check': return ; case 'grip-horizontal': return ; case 'hash': return ; case 'hdd-stack': return ; diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts index e172198ff..5b8c40b17 100644 --- a/frontend/app/mstore/types/dashboard.ts +++ b/frontend/app/mstore/types/dashboard.ts @@ -37,7 +37,7 @@ export interface IDashboard { export default class Dashboard implements IDashboard { public static get ID_KEY():string { return "dashboardId" } dashboardId: any = undefined - name: string = "New Dashboard" + name: string = "Untitled Dashboard" description: string = "" isPublic: boolean = true widgets: IWidget[] = [] diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 10e1e68f4..3d824c68f 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -60,7 +60,7 @@ export default class Widget implements IWidget { public static get ID_KEY():string { return "metricId" } metricId: any = undefined widgetId: any = undefined - name: string = "New Metric" + name: string = "Untitled Metric" // metricType: string = "timeseries" metricType: string = "timeseries" metricOf: string = "sessionCount" diff --git a/frontend/app/svg/icons/bar-pencil.svg b/frontend/app/svg/icons/bar-pencil.svg new file mode 100644 index 000000000..1b9916e25 --- /dev/null +++ b/frontend/app/svg/icons/bar-pencil.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/frontend/app/svg/icons/grid-check.svg b/frontend/app/svg/icons/grid-check.svg new file mode 100644 index 000000000..3e899f840 --- /dev/null +++ b/frontend/app/svg/icons/grid-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/app/theme/colors.js b/frontend/app/theme/colors.js index 51be4289d..297e044bd 100644 --- a/frontend/app/theme/colors.js +++ b/frontend/app/theme/colors.js @@ -43,5 +43,18 @@ module.exports = { 'gray-light-shade': '#EEEEEE', 'primary': '#3490dc', 'transparent': 'transparent', + }, + + // actual theme colors - use this for new components + figmaColors: { + 'accent-secondary': 'rgba(62, 170, 175, 1)', + 'main': 'rgba(57, 78, 255, 1)', + 'primary-outlined-hover-background': 'rgba(62, 170, 175, 0.08)', + 'primary-outlined-resting-border': 'rgba(62, 170, 175, 0.5)', + 'secondary-outlined-hover-background': 'rgba(63, 81, 181, 0.08)', + 'secondary-outlined-resting-border': 'rgba(63, 81, 181, 0.5)', + 'text-disabled': 'rgba(0,0,0, 0.38)', + 'text-primary': 'rgba(0,0,0, 0.87)', + 'outlined-border': 'rgba(0,0,0, 0.23)', } }