From 74dd769da1d49094fe5e4ff3c40b15623649d2f8 Mon Sep 17 00:00:00 2001
From: "Bierett, Danilo" <danilo.bierett@it.nrw.de>
Date: Tue, 19 Dec 2023 09:11:41 +0100
Subject: [PATCH] Code review

---
 src/packages/toc/Toc.tsx                           |  8 ++++----
 src/packages/toc/Tools.test.tsx                    |  4 ++--
 src/packages/toc/Tools.tsx                         | 12 ++++++------
 src/packages/toc/__snapshots__/Tools.test.tsx.snap |  8 ++++----
 src/packages/toc/i18n/de.yaml                      |  4 ++--
 src/packages/toc/i18n/en.yaml                      |  4 ++--
 src/packages/toc/index.ts                          |  2 +-
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/packages/toc/Toc.tsx b/src/packages/toc/Toc.tsx
index fc274337c..d6341b81f 100644
--- a/src/packages/toc/Toc.tsx
+++ b/src/packages/toc/Toc.tsx
@@ -32,7 +32,7 @@ export interface TocProps extends CommonComponentProps {
     /**
      * Properties for the embedded tool component.
      */
-    toolConfig?: ToolConfig;
+    toolsConfig?: ToolsConfig;
 
     /**
      * Defines whether the basemap switcher is shown in the toc.
@@ -50,7 +50,7 @@ export interface TocProps extends CommonComponentProps {
 /**
  * Props supported by the {@link Tools} component.
  */
-export interface ToolConfig {
+export interface ToolsConfig {
     /**
      * Optional property to show the `hide all layers` entry.
      * Defaults to `true`.
@@ -69,7 +69,7 @@ export const Toc: FC<TocProps> = (props: TocProps) => {
     const {
         mapId,
         showTools = false,
-        toolConfig,
+        toolsConfig,
         showBasemapSwitcher = true,
         basemapSwitcherProps
     } = props;
@@ -116,7 +116,7 @@ export const Toc: FC<TocProps> = (props: TocProps) => {
                                         })}
                                     </Text>
                                     <Spacer />
-                                    {showTools && <Tools mapId={mapId} {...toolConfig} />}
+                                    {showTools && <Tools mapId={mapId} {...toolsConfig} />}
                                 </Flex>
                             </SectionHeading>
                         }
diff --git a/src/packages/toc/Tools.test.tsx b/src/packages/toc/Tools.test.tsx
index ff11f9945..66a4bc652 100644
--- a/src/packages/toc/Tools.test.tsx
+++ b/src/packages/toc/Tools.test.tsx
@@ -73,7 +73,7 @@ it("Should successfully hide all layers in toc", async () => {
 
     await findTools();
 
-    const itemButton = await screen.findByLabelText("hideAllLayers");
+    const itemButton = await screen.findByLabelText("tools.hideAllLayers");
     expect(itemButton.tagName).toBe("BUTTON");
 
     expect(operationalLayers.length).toBe(2);
@@ -88,7 +88,7 @@ it("Should successfully hide all layers in toc", async () => {
 
 async function findTools() {
     const tocDiv = await screen.findByTestId("toc");
-    return tocDiv.querySelector(".tools");
+    return tocDiv.querySelector(".toc-tools");
 }
 
 async function findMenu() {
diff --git a/src/packages/toc/Tools.tsx b/src/packages/toc/Tools.tsx
index c8afc9880..22eccbdcb 100644
--- a/src/packages/toc/Tools.tsx
+++ b/src/packages/toc/Tools.tsx
@@ -13,9 +13,9 @@ import { FC } from "react";
 import { FiMoreVertical } from "react-icons/fi";
 import { useIntl } from "open-pioneer:react-hooks";
 import { MapModel, SublayersCollection, useMapModel } from "@open-pioneer/map";
-import { ToolConfig } from "./Toc";
+import { ToolsConfig } from "./Toc";
 
-export const Tools: FC<{ mapId: string } & ToolConfig> = (props) => {
+export const Tools: FC<{ mapId: string } & ToolsConfig> = (props) => {
     const intl = useIntl();
     const { mapId, showHideAllLayers = true } = props;
     const { map } = useMapModel(mapId);
@@ -24,11 +24,11 @@ export const Tools: FC<{ mapId: string } & ToolConfig> = (props) => {
 
     return (
         !noEntry && (
-            <Box className="tools">
+            <Box className="toc-tools">
                 <Menu placement="bottom-start">
                     <Button
                         as={MenuButton}
-                        className="tools-button"
+                        className="toc-tools-button"
                         aria-label={intl.formatMessage({ id: "toolsLabel" })}
                         borderRadius="full"
                         iconSpacing={0}
@@ -39,12 +39,12 @@ export const Tools: FC<{ mapId: string } & ToolConfig> = (props) => {
                     <Portal>
                         <MenuList className="tools-menu">
                             <MenuItem
-                                aria-label={intl.formatMessage({ id: "hideAllLayers" })}
+                                aria-label={intl.formatMessage({ id: "tools.hideAllLayers" })}
                                 onClick={() => {
                                     hideAllLayers(map);
                                 }}
                             >
-                                {intl.formatMessage({ id: "hideAllLayers" })}
+                                {intl.formatMessage({ id: "tools.hideAllLayers" })}
                             </MenuItem>
                         </MenuList>
                     </Portal>
diff --git a/src/packages/toc/__snapshots__/Tools.test.tsx.snap b/src/packages/toc/__snapshots__/Tools.test.tsx.snap
index 17641d17c..0670f5b07 100644
--- a/src/packages/toc/__snapshots__/Tools.test.tsx.snap
+++ b/src/packages/toc/__snapshots__/Tools.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Should successfully create a toc with default tool component 1`] = `
 <div
-  class="tools css-0"
+  class="toc-tools css-0"
   data-theme="light"
 >
   <button
@@ -10,7 +10,7 @@ exports[`Should successfully create a toc with default tool component 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="toolsLabel"
-    class="chakra-menu__menu-button chakra-button tools-button css-yfj65e"
+    class="chakra-menu__menu-button chakra-button toc-tools-button css-yfj65e"
     data-theme="light"
     id="menu-button-:r3:"
     type="button"
@@ -69,7 +69,7 @@ exports[`Should successfully create a toc with default tool component 2`] = `
   tabindex="-1"
 >
   <button
-    aria-label="hideAllLayers"
+    aria-label="tools.hideAllLayers"
     class="chakra-menu__menuitem css-18esm8n"
     data-index="0"
     data-theme="light"
@@ -78,7 +78,7 @@ exports[`Should successfully create a toc with default tool component 2`] = `
     tabindex="-1"
     type="button"
   >
-    hideAllLayers
+    tools.hideAllLayers
   </button>
 </div>
 `;
diff --git a/src/packages/toc/i18n/de.yaml b/src/packages/toc/i18n/de.yaml
index f9ba447ef..c6eb5c0a8 100644
--- a/src/packages/toc/i18n/de.yaml
+++ b/src/packages/toc/i18n/de.yaml
@@ -5,5 +5,5 @@ messages:
   missingLayers: "Es sind keine Layer vorhanden."
   error: "Beim Erstellen des Karteninhalts ist ein Fehler aufgetreten."
   toolsLabel: "Kartenwerkzeuge"
-  hideAllLayers: "Alle Karteninhalte ausblenden"
-  collapseGroups: "Gruppen einklappen"
+  tools:
+    hideAllLayers: "Alle Karteninhalte ausblenden"
diff --git a/src/packages/toc/i18n/en.yaml b/src/packages/toc/i18n/en.yaml
index e513a60a6..466dc1dc9 100644
--- a/src/packages/toc/i18n/en.yaml
+++ b/src/packages/toc/i18n/en.yaml
@@ -5,5 +5,5 @@ messages:
   missingLayers: "There are no layers to display."
   error: "Error while creating map content."
   toolsLabel: "Map tools"
-  hideAllLayers: "Hide all layers"
-  collapseGroups: "Collapse groups"
+  tools:
+    hideAllLayers: "Hide all layers"
diff --git a/src/packages/toc/index.ts b/src/packages/toc/index.ts
index add3c4f89..700fa37ec 100644
--- a/src/packages/toc/index.ts
+++ b/src/packages/toc/index.ts
@@ -1,3 +1,3 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-export { Toc, type TocProps, type ToolConfig } from "./Toc";
+export { Toc, type TocProps, type ToolsConfig } from "./Toc";