From 69def583214da3c67b6f6d3fa0f8700c484570f6 Mon Sep 17 00:00:00 2001
From: Michael Pearson <michael.pearson@canva.com>
Date: Sat, 23 Apr 2022 13:34:59 +1000
Subject: [PATCH] Add option to hide "debug" information.

---
 frigate/config.py            | 3 +++
 web/src/Sidebar.jsx          | 5 +++--
 web/src/components/Tabs.jsx  | 3 +++
 web/src/routes/Camera_V2.jsx | 3 ++-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frigate/config.py b/frigate/config.py
index 58b064214..d70ab8f8f 100644
--- a/frigate/config.py
+++ b/frigate/config.py
@@ -46,6 +46,9 @@ class DetectorConfig(FrigateBaseModel):
 
 class UIConfig(FrigateBaseModel):
     use_experimental: bool = Field(default=False, title="Experimental UI")
+    hide_configuration_options: bool = Field(
+        default=False, title="Hide UI components used for configuring Frigate"
+    )
 
 
 class MqttConfig(FrigateBaseModel):
diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
index a74a8c80b..87a139696 100644
--- a/web/src/Sidebar.jsx
+++ b/web/src/Sidebar.jsx
@@ -23,7 +23,8 @@ export default function Sidebar() {
   if (!config) {
     return null;
   }
-  const { birdseye } = config;
+  const { birdseye, ui } = config;
+  const hideConfigurationOptions = ui?.hide_configuration_options;
 
   return (
     <NavigationDrawer header={<Header />}>
@@ -44,7 +45,7 @@ export default function Sidebar() {
       </Match>
       {birdseye?.enabled ? <Destination href="/birdseye" text="Birdseye" /> : null}
       <Destination href="/events" text="Events" />
-      <Destination href="/debug" text="Debug" />
+      { hideConfigurationOptions ? null : <Destination href="/debug" text="Debug" /> }
       <Separator />
       <div className="flex flex-grow" />
       {ENV !== 'production' ? (
diff --git a/web/src/components/Tabs.jsx b/web/src/components/Tabs.jsx
index 800375c31..1d1885ee2 100644
--- a/web/src/components/Tabs.jsx
+++ b/web/src/components/Tabs.jsx
@@ -14,6 +14,9 @@ export function Tabs({ children, selectedIndex: selectedIndexProp, onChange, cla
 
   const RenderChildren = useCallback(() => {
     return children.map((child, i) => {
+      if (!child) {
+        return null
+      }
       child.props.selected = i === selectedIndex;
       child.props.onClick = handleSelected(i);
       return child;
diff --git a/web/src/routes/Camera_V2.jsx b/web/src/routes/Camera_V2.jsx
index 15ee1a996..f1b04a4da 100644
--- a/web/src/routes/Camera_V2.jsx
+++ b/web/src/routes/Camera_V2.jsx
@@ -14,6 +14,7 @@ export default function Camera({ camera }) {
   const [playerType, setPlayerType] = useState('live');
 
   const cameraConfig = config?.cameras[camera];
+  const hideConfigurationOptions = config?.ui?.hide_configuration_options;
 
   const handleTabChange = (index) => {
     if (index === 0) {
@@ -49,7 +50,7 @@ export default function Camera({ camera }) {
           <Tabs selectedIndex={1} onChange={handleTabChange} className='justify'>
             <TextTab text='History' />
             <TextTab text='Live' />
-            <TextTab text='Debug' />
+            {hideConfigurationOptions ? null : <TextTab text="Debug"/>}
           </Tabs>
         </div>
       </div>