change(ui): change file upl confirmation

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon, ItemMenu, Tooltip } from 'UI';
-import { durationFromMs, formatTimeOrDate, getDateFromMill } from 'App/date';
+import { durationFromMs, formatTimeOrDate } from 'App/date';
 import { IRecord } from 'App/services/RecordingsService';
 import { useStore } from 'App/mstore';
 import { toast } from 'react-toastify';
@@ -32,7 +32,9 @@ function RecordsListItem(props: Props) {
 
   const onDelete = () => {
     recordingsStore.deleteRecording(record.recordId).then(() => {
-      recordingsStore.setRecordings(recordingsStore.recordings.filter(rec => rec.recordId !== record.recordId))
+      recordingsStore.setRecordings(
+        recordingsStore.recordings.filter((rec) => rec.recordId !== record.recordId)
+      );
       toast.success('Recording deleted');
     });
   };
@@ -40,7 +42,12 @@ function RecordsListItem(props: Props) {
   const menuItems = [{ icon: 'trash', text: 'Delete', onClick: onDelete }];
 
   const onSave = () => {
-    recordingsStore.updateRecordingName(record.recordId, recordingTitle);
+    recordingsStore
+      .updateRecordingName(record.recordId, recordingTitle)
+      .then(() => {
+        toast.success('Name updated');
+      })
+      .catch(() => toast.error("Couldn't update name"));
     setEdit(false);
   };
 

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -186,7 +186,7 @@ function AssistActions({
       )}
 
       {/* @ts-ignore wtf? */}
-      <ScreenRecorder />
+      {isEnterprise ? <ScreenRecorder /> : null}
       <div className={stl.divider} />
 
       {/* @ts-ignore */}

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

@@ -8,6 +8,7 @@ import { SessionRecordingStatus } from 'Player/MessageDistributor/managers/Assis
 let stopRecorderCb: () => void;
 import { recordingsService } from 'App/services';
 import { toast } from 'react-toastify';
+import { durationFromMs, formatTimeOrDate } from 'App/date';
 
 /**
  * "edge" || "edg/"   chromium based edge (dev or canary)
@@ -48,14 +49,16 @@ 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);
+      const { URL, key } = await recordingsService.reserveUrl(siteId, { ...saveObj, sessionId });
+      const status = recordingsService.saveFile(URL, blob);
 
       if (status) {
+        await recordingsService.confirmFile(siteId, { ...saveObj, sessionId }, key);
         toast.success('Session recording uploaded');
       }
     } catch (e) {
       console.error(e);
+      toast.error("Couldn't upload the file");
     }
   };
 
@@ -69,7 +72,11 @@ function ScreenRecorder({
   }, [recordingState, isRecording]);
 
   const startRecording = async () => {
-    const stop = await screenRecorder(`${sessionId}_${new Date().getTime()}`, sessionId, onSave);
+    const stop = await screenRecorder(
+      `${formatTimeOrDate(new Date().getTime(), undefined, true)}_${sessionId}`,
+      sessionId,
+      onSave
+    );
     stopRecorderCb = stop;
     setRecording(true);
   };

frontend/app/services/RecordingsService.ts

@@ -3,6 +3,7 @@ import APIClient from 'App/api_client';
 interface RecordingData {
   name: string;
   duration: number;
+  sessionId: string;
 }
 
 interface FetchFilter {
@@ -34,10 +35,10 @@ export default class RecordingsService {
     this.client = client || new APIClient();
   }
 
-  reserveUrl(siteId: string, recordingData: RecordingData): Promise<string> {
+  reserveUrl(siteId: string, recordingData: RecordingData): Promise<{ URL: string; key: string }> {
     return this.client.put(`/${siteId}/assist/save`, recordingData).then((r) => {
       if (r.ok) {
-        return r.json().then((j) => j.data.URL);
+        return r.json().then((j) => j.data);
       } else {
         throw new Error("Can't reserve space for recording: " + r.status);
       }
@@ -58,6 +59,16 @@ export default class RecordingsService {
     });
   }
 
+  confirmFile(siteId: string, recordingData: RecordingData, key: string): Promise<any> {
+    return this.client.put(`/${siteId}/assist/save/done`, { ...recordingData, key }).then((r) => {
+      if (r.ok) {
+        return r.json().then((j) => j.data);
+      } else {
+        throw new Error("Can't confirm file saving: " + r.status);
+      }
+    });
+  }
+
   fetchRecordings(filters: FetchFilter): Promise<IRecord[]> {
     return this.client.post(`/assist/records`, filters).then((r) => {
       if (r.ok) {

tracker/tracker-assist/src/ScreenRecordingState.ts

@@ -105,11 +105,18 @@ export default class ScreenRecordingState {
       Object.assign(stopButton.style, styles)
       stopButton.textContent = 'Stop Recording'
       stopButton.id = 'or-recording-border'
+      stopButton.setAttribute('data-openreplay-obscured', '')
+      stopButton.setAttribute('data-openreplay-hidden', '')
+      stopButton.setAttribute('data-openreplay-ignore', '')
       window.document.body.appendChild(stopButton)
 
       Object.entries(borderEmulationStyles).forEach(([key, style,]) => {
         Object.assign(borders[key].style, style)
         borders[key].id = 'or-recording-border'
+
+        borders[key].setAttribute('data-openreplay-obscured', '')
+        borders[key].setAttribute('data-openreplay-hidden', '')
+        borders[key].setAttribute('data-openreplay-ignore', '')
         window.document.body.appendChild(borders[key])
       })