From 42bc372d6e6e3d6fed5d3e12418cf216c8f829b6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 10 Nov 2022 05:31:19 -0700
Subject: [PATCH 1/3] Update mask editor to have instructions (#4324)

---
 web/src/routes/CameraMap.jsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/routes/CameraMap.jsx b/web/src/routes/CameraMap.jsx
index 6f7bc6fce..9ac3013c2 100644
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@@ -203,9 +203,20 @@ ${Object.keys(objectMaskPoints)
       <Card
         content={
           <p>
-            This tool can help you create masks & zones for your {camera} camera. When done, copy each mask
-            configuration into your <code className="font-mono">config.yml</code> file restart your Frigate instance to
-            save your changes.
+            This tool can help you create masks & zones for your {camera} camera.
+            • Click to add a point.
+            • Click and hold on an existing point to move it.
+            • Right-Click on an existing point to delete it.
+          </p>
+        }
+        header="Instructions"
+      />
+
+      <Card
+        content={
+          <p>
+            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file 
+            restart your Frigate instance to save your changes.
           </p>
         }
         header="Warning"

From e718d09c7942a4304cd13e56f432de9cb9e5738a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 13 Nov 2022 11:49:08 -0700
Subject: [PATCH 2/3] Fix new lines for instructions (#4371)

* Fix new lines for instructions

* Use correct formatting for list

* Fix formatting
---
 web/src/routes/CameraMap.jsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/src/routes/CameraMap.jsx b/web/src/routes/CameraMap.jsx
index 9ac3013c2..27cf07287 100644
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@@ -202,12 +202,14 @@ ${Object.keys(objectMaskPoints)
 
       <Card
         content={
-          <p>
-            This tool can help you create masks & zones for your {camera} camera.
-            • Click to add a point.
-            • Click and hold on an existing point to move it.
-            • Right-Click on an existing point to delete it.
-          </p>
+          <div>
+            <p>This tool can help you create masks & zones for your {camera} camera.</p>
+            <ul>
+              <li>Click to add a point.</li>
+              <li>Click and hold on an existing point to move it.</li>
+              <li>Right-Click on an existing point to delete it.</li>
+            </ul>
+          </div>
         }
         header="Instructions"
       />
@@ -215,7 +217,7 @@ ${Object.keys(objectMaskPoints)
       <Card
         content={
           <p>
-            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file 
+            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file
             restart your Frigate instance to save your changes.
           </p>
         }

From a1b21a87a1fb7683fef4ee381b05f7aa2672881f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 13 Nov 2022 11:50:25 -0700
Subject: [PATCH 3/3] Catch case where recording is not enabled (#4069)

* Catch case where recording is not enabled

* Add test for Record to catch this

* Add test for Record to catch this
---
 web/src/routes/Recording.jsx                |  4 +++
 web/src/routes/__tests__/Recording.test.jsx | 27 +++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 web/src/routes/__tests__/Recording.test.jsx

diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index 3c8607833..1b018138b 100644
--- a/web/src/routes/Recording.jsx
+++ b/web/src/routes/Recording.jsx
@@ -54,6 +54,10 @@ export default function Recording({ camera, date, hour = '00', minute = '00', se
 
     const selectedDayRecordingData = recordingsSummary.find((s) => !date || s.day === date);
 
+    if (!selectedDayRecordingData) {
+      return [];
+    }
+
     const [year, month, day] = selectedDayRecordingData.day.split('-');
     return selectedDayRecordingData.hours
       .map((h) => {
diff --git a/web/src/routes/__tests__/Recording.test.jsx b/web/src/routes/__tests__/Recording.test.jsx
new file mode 100644
index 000000000..dfaa3d167
--- /dev/null
+++ b/web/src/routes/__tests__/Recording.test.jsx
@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import * as CameraImage from '../../components/CameraImage';
+import * as Mqtt from '../../api/mqtt';
+import Cameras from '../Cameras';
+import { render, screen, waitForElementToBeRemoved } from 'testing-library';
+
+describe('Recording Route', () => {
+  beforeEach(() => {
+    jest.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
+    jest.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
+  });
+
+  test('shows an ActivityIndicator if not yet loaded', async () => {
+    render(<Cameras />);
+    expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
+  });
+
+
+
+  test('shows no recordings warning', async () => {
+    render(<Cameras />);
+
+    await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
+
+    expect(screen.queryAllByText('No Recordings Found')).toHaveLength(0);
+  });
+});