From c309e6d80afaefe6cd40af3a09979a7894fde238 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 15:31:28 +0200
Subject: [PATCH] feat: Allow DebugPanel to be visible when flag__debug=true

---
 app/components/debug-panel/DebugPanel.tsx | 18 ++++++--------
 app/components/debug-panel/index.tsx      | 30 ++++++++++++++++-------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/app/components/debug-panel/DebugPanel.tsx b/app/components/debug-panel/DebugPanel.tsx
index 533d74006..83179d8b7 100644
--- a/app/components/debug-panel/DebugPanel.tsx
+++ b/app/components/debug-panel/DebugPanel.tsx
@@ -165,13 +165,14 @@ DESCRIBE <${configuratorState.dataSet ?? ""}>`
   );
 };
 
-const DebugPanel = ({
-  configurator = false,
-  interactiveFilters = false,
-}: {
+export type DebugPanelProps = {
   configurator?: Boolean;
   interactiveFilters?: Boolean;
-}) => {
+};
+
+const DebugPanel = (props: DebugPanelProps) => {
+  const { configurator = false, interactiveFilters = false } = props;
+
   return (
     <Box
       sx={{
@@ -198,9 +199,4 @@ const DebugPanel = ({
   );
 };
 
-const DebugPanelNull = () => null;
-
-const ExportedDebugPanel =
-  process.env.NODE_ENV === "development" ? DebugPanel : DebugPanelNull;
-
-export default ExportedDebugPanel;
+export default DebugPanel;
diff --git a/app/components/debug-panel/index.tsx b/app/components/debug-panel/index.tsx
index 32a1cf1ce..944dfbc65 100644
--- a/app/components/debug-panel/index.tsx
+++ b/app/components/debug-panel/index.tsx
@@ -2,12 +2,24 @@ import { CircularProgress } from "@mui/material";
 import dynamic from "next/dynamic";
 import { Suspense } from "react";
 
-const LazyDebugPanel = dynamic(() => import("./DebugPanel"));
-
-export default process.env.NODE_ENV === "development"
-  ? (props: React.ComponentProps<typeof LazyDebugPanel>) => (
-      <Suspense fallback={<CircularProgress />}>
-        <LazyDebugPanel {...props} />
-      </Suspense>
-    )
-  : () => null;
+import { flag } from "@/flags";
+
+import { DebugPanelProps } from "./DebugPanel";
+
+const LazyDebugPanel = dynamic(() => import("./DebugPanel"), { ssr: false });
+
+const DebugPanel = (props: DebugPanelProps) => {
+  const shouldShow = flag("debug") || process.env.NODE_ENV === "development";
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={<CircularProgress />}>
+      <LazyDebugPanel {...props} />
+    </Suspense>
+  );
+};
+
+export default DebugPanel;