From 52e88d9d87ddeb1227501795e0d5e7fc61ce82d4 Mon Sep 17 00:00:00 2001
From: mahmoud adel <58145645+mahmoudadel54@users.noreply.github.com>
Date: Tue, 25 Jun 2024 11:40:45 +0300
Subject: [PATCH] #10424: The measure tool is not opened properly if Measure
 plugin has 'showCoordinateEditor' with true into cfg.defaultOptions (#10428)
 (#10440)

---
 web/client/plugins/Measure.jsx                | 2 +-
 web/client/plugins/__tests__/Measure-test.jsx | 8 ++++++++
 web/client/themes/default/less/measure.less   | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/client/plugins/Measure.jsx b/web/client/plugins/Measure.jsx
index 7d3e062e6a..19558db40c 100644
--- a/web/client/plugins/Measure.jsx
+++ b/web/client/plugins/Measure.jsx
@@ -175,7 +175,7 @@ const MeasurePlugin = connect(
     }))
 )(({coordsAeronauticalEnabled, ...props}) => {
     return (
-        <div className="measure-container" style={{top: coordsAeronauticalEnabled ? 88 : 48}}>
+        <div className={props.mapType !== MapLibraries.CESIUM && props?.defaultOptions?.showCoordinateEditor ? "measure-container measure-coords-editor" : "measure-container"} style={{top: coordsAeronauticalEnabled ? 88 : 48}}>
             {
                 props.mapType === MapLibraries.CESIUM
                     ? <div id="measure-cesium-wrapper"/>
diff --git a/web/client/plugins/__tests__/Measure-test.jsx b/web/client/plugins/__tests__/Measure-test.jsx
index bf6526fd2d..597ccbe829 100644
--- a/web/client/plugins/__tests__/Measure-test.jsx
+++ b/web/client/plugins/__tests__/Measure-test.jsx
@@ -34,4 +34,12 @@ describe('Measure Plugin', () => {
         Simulate.click(closeNode.parentNode);
         expect(store.getState().controls.measure.enabled).toBe(false);
     });
+    it('test measure in case default options showCoordinateEditor = true', () => {
+        const { Plugin} = getPluginForTest(Measure, { controls: { measure: { enabled: true } } });
+        ReactDOM.render(<Plugin defaultOptions={{showCoordinateEditor: true}} />, document.getElementById("container"));
+        const measureCoordEditor2DNode = document.querySelector('.measure-container.measure-coords-editor');
+        expect(measureCoordEditor2DNode).toBeTruthy();
+        const measureToolbarNode = document.querySelector('.ms-measure-toolbar');
+        expect(measureToolbarNode).toBeTruthy();
+    });
 });
diff --git a/web/client/themes/default/less/measure.less b/web/client/themes/default/less/measure.less
index 7e8dd6768d..fe1fbdf52b 100644
--- a/web/client/themes/default/less/measure.less
+++ b/web/client/themes/default/less/measure.less
@@ -113,12 +113,14 @@
         }
     }
 }
-.measure-container {
+.measure-container:not(.measure-coords-editor){
     position: absolute;
     z-index: 100;
     right: 46px;
     margin: 0;
     top: 48px;
+}
+.measure-container {
     .ms-measure-toolbar {
         position: relative;
         background-color: #ffffff;