only show to-device transport label in dev mode (#3221)

* Only show to device encryption label if developer mode on

* Add tests for developer mode to device label

---------

Co-authored-by: Timo <toger5@hotmail.de>

src/room/InCallView.test.tsx

@@ -42,7 +42,10 @@ import {
 import { E2eeType } from "../e2ee/e2eeType";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
 import { alice, local } from "../utils/test-fixtures";
-import { useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting } from "../settings/settings";
+import {
+  developerMode as developerModeSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
+} from "../settings/settings";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
@@ -201,6 +204,7 @@ describe("InCallView", () => {
         kind: E2eeType.PER_PARTICIPANT,
       });
       useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(true);
       const { getByText } = createInCallView();
       expect(getByText("using to Device key transport")).toBeInTheDocument();
     });
@@ -210,6 +214,7 @@ describe("InCallView", () => {
         kind: E2eeType.NONE,
       });
       useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(true);
       const { queryByText } = createInCallView();
       expect(
         queryByText("using to Device key transport"),
@@ -221,6 +226,7 @@ describe("InCallView", () => {
         kind: E2eeType.PER_PARTICIPANT,
       });
       useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(true);
       const { rtcSession, queryByText } = createInCallView();
       expect(queryByText("using to Device key transport")).toBeInTheDocument();
       expect(rtcSession).toBeDefined();
@@ -236,7 +242,18 @@ describe("InCallView", () => {
     });
     it("is not shown if setting is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(false);
-
+      developerModeSetting.setValue(true);
+      useRoomEncryptionSystemMock.mockReturnValue({
+        kind: E2eeType.PER_PARTICIPANT,
+      });
+      const { queryByText } = createInCallView();
+      expect(
+        queryByText("using to Device key transport"),
+      ).not.toBeInTheDocument();
+    });
+    it("is not shown if developer mode is disabled", () => {
+      useExperimentalToDeviceTransportSetting.setValue(true);
+      developerModeSetting.setValue(false);
       useRoomEncryptionSystemMock.mockReturnValue({
         kind: E2eeType.PER_PARTICIPANT,
       });

src/room/InCallView.tsx

@@ -101,6 +101,7 @@ import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
   muteAllAudio as muteAllAudioSetting,
+  developerMode as developerModeSetting,
   useSetting,
 } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
@@ -233,6 +234,8 @@ export const InCallView: FC<InCallViewProps> = ({
     RoomAndToDeviceEvents.EnabledTransportsChanged,
     (enabled) => setDidFallbackToRoomKey(enabled.room),
   );
+
+  const [developerMode] = useSetting(developerModeSetting);
   const [useExperimentalToDeviceTransport] = useSetting(
     useExperimentalToDeviceTransportSetting,
   );
@@ -240,13 +243,15 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const showToDeviceEncryption = useMemo(
     () =>
+      developerMode &&
       useExperimentalToDeviceTransport &&
       encryptionSystem.kind === E2eeType.PER_PARTICIPANT &&
       !didFallbackToRoomKey,
     [
+      developerMode,
+      useExperimentalToDeviceTransport,
       encryptionSystem.kind,
       didFallbackToRoomKey,
-      useExperimentalToDeviceTransport,
     ],
   );