change(ui): fix tooltip type, change rec name, add tooltip to recording name

frontend/app/components/Assist/RecordingsList/RecordsListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, ItemMenu } from 'UI';
+import { Icon, ItemMenu, Tooltip } from 'UI';
 import { durationFromMs, formatTimeOrDate, getDateFromMill } from 'App/date';
 import { IRecord } from 'App/services/RecordingsService';
 import { useStore } from 'App/mstore';
@@ -67,16 +67,18 @@ function RecordsListItem(props: Props) {
                   onFocus={() => setEdit(true)}
                 />
               ) : (
-                <div
-                  onDoubleClick={() => setEdit(true)}
-                  className={cn(
-                    'border-dotted border-gray-medium',
-                    'pt-1 w-fit -mt-2',
-                    'cursor-pointer select-none border-b'
-                  )}
-                >
-                  {recordingTitle}
-                </div>
+                <Tooltip delay={200} title="Double click to rename">
+                  <div
+                    onDoubleClick={() => setEdit(true)}
+                    className={cn(
+                      'border-dotted border-gray-medium',
+                      'pt-1 w-fit -mt-2',
+                      'cursor-pointer select-none border-b'
+                    )}
+                  >
+                    {recordingTitle}
+                  </div>
+                </Tooltip>
               )}
               <div className="text-gray-medium text-sm">{durationFromMs(record.duration)}</div>
             </div>

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

@@ -125,7 +125,7 @@ function DashboardView(props: Props) {
             <PageTitle
               title={
                 // @ts-ignore
-                <Tooltip title="Double click to rename">
+                <Tooltip delay={200} title="Double click to rename">
                   {dashboard?.name}
                 </Tooltip>
               }

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

@@ -64,12 +64,12 @@ function WidgetName(props: Props) {
         />
       ) : (
         // @ts-ignore
-        <Tooltip title="Double click to rename" disabled={!canEdit}>
-          <div 
-            onDoubleClick={() => setEditing(true)} 
+        <Tooltip delay={200} title="Double click to rename" disabled={!canEdit}>
+          <div
+            onDoubleClick={() => setEditing(true)}
             className={
               cn(
-                "text-2xl h-8 flex items-center border-transparent", 
+                "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'
               )
             }
@@ -77,7 +77,7 @@ function WidgetName(props: Props) {
             { name }
           </div>
         </Tooltip>
-        
+
       )}
       { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div> }
     </div>

frontend/app/components/Session_/BugReport/components/ReportTitle.tsx

@@ -45,7 +45,7 @@ function ReportTitle() {
         />
       ) : (
         // @ts-ignore
-        <Tooltip title="Double click to rename">
+        <Tooltip delay={200} title="Double click to rename">
           <div
             onDoubleClick={toggleEdit}
             className={cn(

frontend/app/components/Session_/ScreenRecorder/ScreenRecorder.tsx

@@ -47,11 +47,12 @@ function ScreenRecorder({
 
   const onSave = async (saveObj: { name: string; duration: number }, blob: Blob) => {
     try {
+      toast.warn('Uploading the recording...');
       const url = await recordingsService.reserveUrl(siteId, saveObj);
       const status = recordingsService.saveFile(url, blob);
 
       if (status) {
-        toast.success('Session recording saved');
+        toast.success('Session recording uploaded');
       }
     } catch (e) {
       console.error(e);
@@ -68,7 +69,7 @@ function ScreenRecorder({
   }, [recordingState, isRecording]);
 
   const startRecording = async () => {
-    const stop = await screenRecorder('test rec_' + new Date().getTime(), sessionId, onSave);
+    const stop = await screenRecorder(`${sessionId}_${new Date().getTime()}`, sessionId, onSave);
     stopRecorderCb = stop;
     setRecording(true);
   };

frontend/app/components/ui/Tooltip/Tooltip.tsx

@@ -4,8 +4,8 @@ import type { Placement } from '@floating-ui/react-dom-interactions';
 import cn from 'classnames';
 
 interface Props {
-  title: React.ReactNode;
-  children: any;
+  title?: React.ReactNode;
+  children: React.ReactNode;
   disabled?: boolean;
   open?: boolean;
   placement?: Placement;