fix(ui): more ui fixes, typing for router

frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx

@@ -44,7 +44,7 @@ function DashboardRouter(props: Props) {
                     <WidgetSubDetailsView siteId={siteId} {...props} />
                 </Route>
 
-                <Route exact strict path={withSiteId(dashboard(''), siteId)}>
+                <Route exact strict path={withSiteId(dashboard(), siteId)}>
                     <DashboardView siteId={siteId} dashboardId={dashboardId} />
                 </Route>
 

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -16,13 +16,17 @@ import withReport from 'App/components/hocs/withReport';
 import DashboardOptions from '../DashboardOptions';
 import SelectDateRange from 'Shared/SelectDateRange';
 import DashboardIcon from '../../../../svg/dashboard-icn.svg';
+import { Tooltip } from 'react-tippy';
 
-interface Props {
-    siteId: number;
+interface IProps {
+    siteId: string;
     dashboardId: any
     renderReport?: any
 }
-function DashboardView(props: RouteComponentProps<Props>) {
+
+type Props = IProps & RouteComponentProps;
+
+function DashboardView(props: Props) {
     const { siteId, dashboardId } = props;
     const { dashboardStore } = useStore();
     const [focusTitle, setFocusedInput] = React.useState(true);
@@ -67,7 +71,7 @@ function DashboardView(props: RouteComponentProps<Props>) {
         showModal(<DashboardModal siteId={siteId} onMetricAdd={pushQuery} dashboardId={dashboardId} />, { right: true })
     }
 
-    const onEdit = (isTitle) => {
+    const onEdit = (isTitle: boolean) => {
         dashboardStore.initDashboard(dashboard)
         setFocusedInput(isTitle);
         setShowEditModal(true)
@@ -113,8 +117,10 @@ function DashboardView(props: RouteComponentProps<Props>) {
                     <div className="flex items-center mb-4 justify-between">
                         <div className="flex items-center" style={{ flex: 3 }}>
                             <PageTitle
-                                title={dashboard?.name}
-                                className="mr-3"
+                                // @ts-ignore
+                                title={<Tooltip delay={100} arrow title="Double click to rename">{dashboard?.name}</Tooltip>}
+                                onDoubleClick={() => onEdit(true)}
+                                className="mr-3 select-none hover:border-dotted hover:border-b border-gray-medium cursor-pointer"
                                 actionButton={
                                     <Button variant="primary" onClick={onAddWidgets}>Add Metric</Button>
                                 }

frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Icon } from 'UI';
 import cn from 'classnames';
-
+import { Tooltip } from 'react-tippy';
 
 interface Props {
   name: string;
-  onUpdate: (name) => void;
+  onUpdate: (name: any) => void;
   seriesIndex?: number;
   canEdit?: boolean
 }
@@ -49,7 +49,16 @@ function WidgetName(props: Props) {
           onFocus={() => setEditing(true)}
         />
       ) : (
-        <div onDoubleClick={() => setEditing(true)} className={cn("text-2xl h-8 flex items-center border-transparent", canEdit && 'cursor-pointer')}>{ name }</div>
+        // @ts-ignore
+        <Tooltip delay={100} arrow title="Double click to rename" disabled={!canEdit}>
+          <div 
+            onDoubleClick={() => 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')}
+          >
+            { name }
+          </div>
+        </Tooltip>
+        
       )}
       { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div> }
     </div>

frontend/app/components/ui/PageTitle/PageTitle.tsx

@@ -2,14 +2,19 @@ import React from 'react';
 import cn from 'classnames';
 
 interface Props {
-    title: string;
+    title: React.ReactNode;
     className?: string;
+    actionButton?: React.ReactNode;
+    subTitle?: string;
+    subTitleClass?: string;
+    onDoubleClick?: () => void;
+    onClick?: () => void;
 }
-function PageTitle({ title, actionButton = null, subTitle = '', className = '', subTitleClass }) {
+function PageTitle({ title, actionButton = null, subTitle = '', className = '', subTitleClass, onDoubleClick, onClick }: Props) {
     return (
         <div>
             <div className='flex items-center'>
-                <h1 className={cn("text-2xl capitalize-first", className)}>
+                <h1 className={cn("text-2xl capitalize-first", className)} onDoubleClick={onDoubleClick} onClick={onClick}>
                     {title}
                 </h1>
                 { actionButton && actionButton}

frontend/package.json

@@ -84,6 +84,7 @@
     "@openreplay/sourcemap-uploader": "^3.0.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.24.0",
     "@typescript-eslint/parser": "^5.24.0",
     "autoprefixer": "^10.4.7",