From 4bb9e9467596758d010e882f68ee5e515447643d Mon Sep 17 00:00:00 2001
From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:42:52 +0100
Subject: [PATCH] Add recommendation to enable 'preserve log'

---
 front_end/entrypoints/rn_fusebox/rn_fusebox.ts   | 16 ++++++++++++++--
 front_end/panels/console/ConsoleViewMessage.ts   | 11 +++++++++++
 .../ui/components/settings/settingCheckbox.css   |  1 +
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts
index 8e3affb2193f..109daadca86d 100644
--- a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts
+++ b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts
@@ -22,10 +22,10 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Main from '../main/main.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as Common from '../../core/common/common.js';
 
-import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
-import type * as Protocol from '../../generated/protocol.js';
 import type * as Sources from '../../panels/sources/sources.js';
 import * as RNExperiments from '../../core/rn_experiments/rn_experiments.js';
 
@@ -106,6 +106,18 @@ class FuseboxClientMetadataModel extends SDK.SDKModel.SDKModel<void> {
           const success = false;
           Host.rnPerfMetrics.fuseboxSetClientMetadataFinished(success, reason);
         });
+
+    if (!Common.Settings.Settings.instance().moduleSetting('preserve-console-log').get()) {
+      target.model(SDK.ConsoleModel.ConsoleModel)
+          ?.addMessage(new SDK.ConsoleModel.ConsoleMessage(
+              target.model(SDK.RuntimeModel.RuntimeModel), Protocol.Log.LogEntrySource.Recommendation,
+              Protocol.Log.LogEntryLevel.Info,
+              '[React Native] Console messages are currently cleared upon DevTools disconnection. You can preserve logs in settings: ',
+              {
+                type: SDK.ConsoleModel.FrontendMessageType.System,
+                context: 'fusebox_preserve_log_rec',
+              }));
+    }
   }
 }
 
diff --git a/front_end/panels/console/ConsoleViewMessage.ts b/front_end/panels/console/ConsoleViewMessage.ts
index a4b47b6b2d70..9df5076f34be 100644
--- a/front_end/panels/console/ConsoleViewMessage.ts
+++ b/front_end/panels/console/ConsoleViewMessage.ts
@@ -445,6 +445,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       formattedMessage.appendChild(this.anchorElement);
     }
     formattedMessage.appendChild(messageElement);
+
+    if (this.message.context === 'fusebox_preserve_log_rec') {
+      const link = document.createElement('button');
+      link.classList.add('devtools-link', 'text-button', 'link-style');
+      link.appendChild(link.ownerDocument.createTextNode('show settings'));
+      link.addEventListener('click', async () => {
+        await Common.Revealer.reveal(Common.Settings.Settings.instance().moduleSetting('preserve-console-log'));
+      });
+      formattedMessage.appendChild(link);
+    }
+
     return formattedMessage;
   }
 
diff --git a/front_end/ui/components/settings/settingCheckbox.css b/front_end/ui/components/settings/settingCheckbox.css
index dcfb66736d35..53aa395baa34 100644
--- a/front_end/ui/components/settings/settingCheckbox.css
+++ b/front_end/ui/components/settings/settingCheckbox.css
@@ -5,6 +5,7 @@
  */
 
 :host {
+  display: block;
   padding: 0;
   margin: 0;
 }