From 8f6895327fb46f91f5bdaa3f77dda1ec11a8f007 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.com>
Date: Mon, 19 May 2025 08:53:21 +0100
Subject: [PATCH] fix(web): render keymap in topbar only in local connections

---
 .../components/core/InstallerOptions.test.tsx |  9 ++++++
 web/src/components/core/InstallerOptions.tsx  | 30 +++++++++++--------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/web/src/components/core/InstallerOptions.test.tsx b/web/src/components/core/InstallerOptions.test.tsx
index b75984fd7a..621bded93a 100644
--- a/web/src/components/core/InstallerOptions.test.tsx
+++ b/web/src/components/core/InstallerOptions.test.tsx
@@ -243,6 +243,15 @@ describe("InstallerOptions", () => {
         jest.spyOn(utils, "localConnection").mockReturnValue(false);
       });
 
+      it("does not render keymap value in the toggle button", () => {
+        installerRender(<InstallerOptions />, { withL10n: true });
+        const toggle = screen.getByRole("button", {
+          name: "Change display language",
+        });
+        expect(toggle).toHaveTextContent("Deutsch");
+        expect(toggle).not.toHaveTextContent("us");
+      });
+
       it("does not allow setting the keyboard layout", async () => {
         const { user } = await renderAndOpen();
         const dialog = screen.getByRole("dialog");
diff --git a/web/src/components/core/InstallerOptions.tsx b/web/src/components/core/InstallerOptions.tsx
index c7f2bfe506..446ed0a377 100644
--- a/web/src/components/core/InstallerOptions.tsx
+++ b/web/src/components/core/InstallerOptions.tsx
@@ -469,19 +469,6 @@ const CenteredContent = ({
   </Flex>
 );
 
-/** Toggle button for accessing both language and keyboard layout settings. */
-const AllSettingsToggle = ({ onClick, language, keymap }: ToggleProps) => (
-  <Button
-    onClick={onClick}
-    aria-label={_("Change display language and keyboard layout")}
-    variant="plain"
-  >
-    <CenteredContent>
-      <LanguageIcon /> {language} <KeyboardIcon /> <code>{keymap}</code>
-    </CenteredContent>
-  </Button>
-);
-
 /** Toggle button for accessing only language settings. */
 const LanguageOnlyToggle = ({ onClick, language }: ToggleProps) => (
   <Button onClick={onClick} aria-label={_("Change display language")} variant="plain">
@@ -500,6 +487,23 @@ const KeyboardOnlyToggle = ({ onClick, keymap }: ToggleProps) => (
   </Button>
 );
 
+/** Toggle button for accessing both language and keyboard layout settings. */
+const AllSettingsToggle = ({ onClick, language, keymap }: ToggleProps) => {
+  if (!localConnection()) return <LanguageOnlyToggle onClick={onClick} language={language} />;
+
+  return (
+    <Button
+      onClick={onClick}
+      aria-label={_("Change display language and keyboard layout")}
+      variant="plain"
+    >
+      <CenteredContent>
+        <LanguageIcon /> {language} <KeyboardIcon /> <code>{keymap}</code>
+      </CenteredContent>
+    </Button>
+  );
+};
+
 /**
  * Maps each dialog variant to its corresponding React component.
  */