From 0e59e083082b817c4a8efd6ab92c4d22949ba0f5 Mon Sep 17 00:00:00 2001
From: Suren <dsuren1@gmail.com>
Date: Mon, 8 Jan 2024 17:13:18 +0530
Subject: [PATCH] #9840: StreetView plugin ability to set parameters for the
 default size of panel (#9842)

(cherry picked from commit 0be639d77d0fb449f0ce182cd610d64c588e9683)
---
 web/client/plugins/StreetView/StreetView.jsx           |  5 +++--
 .../plugins/StreetView/components/EmptyStreetView.js   | 10 +++++++++-
 .../StreetView/containers/StreetViewContainer.jsx      |  4 ++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/client/plugins/StreetView/StreetView.jsx b/web/client/plugins/StreetView/StreetView.jsx
index cd14a73602..8a9e795ca8 100644
--- a/web/client/plugins/StreetView/StreetView.jsx
+++ b/web/client/plugins/StreetView/StreetView.jsx
@@ -20,14 +20,14 @@ import streetView from './reducers/streetview';
 import * as epics from './epics/streetView';
 import './css/style.css';
 
-const StreetViewPluginComponent = ({onMount, onUnmount, apiKey, useDataLayer, dataLayerConfig, panoramaOptions}) => {
+const StreetViewPluginComponent = ({onMount, onUnmount, apiKey, useDataLayer, dataLayerConfig, panoramaOptions, panelSize}) => {
     useEffect(() => {
         onMount({apiKey, useDataLayer, dataLayerConfig, panoramaOptions});
         return () => {
             onUnmount();
         };
     }, [apiKey, useDataLayer, dataLayerConfig, JSON.stringify(panoramaOptions ?? {})]);
-    return <StreetViewContainer />;
+    return <StreetViewContainer panelSize={panelSize} />;
 };
 
 const StreetViewPluginContainer = connect(() => ({}), {
@@ -49,6 +49,7 @@ const StreetViewPluginContainer = connect(() => ({}), {
  * @property {boolean} [cfg.useDataLayer=true] If true, adds to the map a layer for street view data availability when the plugin is turned on.
  * @property {object} [cfg.dataLayerConfig] configuration for the data layer. By default `{provider: 'custom', type: "tileprovider", url: "https://mts1.googleapis.com/vt?hl=en-US&lyrs=svv|cb_client:apiv3&style=40,18&x={x}&y={y}&z={z}"}`
  * @property {object} [cfg.panoramaOptions] options to configure the panorama. {@link https://developers.google.com/maps/documentation/javascript/reference/street-view#panoramaOptions|Reference for google maps API}
+ * @property {object} [cfg.panelSize] option to configure default street view modal panel size `width` and `height`. Example: `{"width": 500, "height": 500}`.
  * @class
  */
 export default createPlugin(
diff --git a/web/client/plugins/StreetView/components/EmptyStreetView.js b/web/client/plugins/StreetView/components/EmptyStreetView.js
index 15342be693..71053aec61 100644
--- a/web/client/plugins/StreetView/components/EmptyStreetView.js
+++ b/web/client/plugins/StreetView/components/EmptyStreetView.js
@@ -3,6 +3,14 @@ import Message from '../../../components/I18N/Message';
 
 import EmptyView from '../../../components/misc/EmptyView';
 const EmptyStreetView = () => {
-    return <EmptyView iconFit={false} glyph="road" title={<Message msgId="streetView.emptyTitle"/>} description={<Message msgId="streetView.emptyDescription"/>} />;
+    return (
+        <EmptyView
+            style={{display: "flex", justifyContent: "center"}}
+            iconFit={false}
+            glyph="road"
+            title={<Message msgId="streetView.emptyTitle"/>}
+            description={<Message msgId="streetView.emptyDescription"/>}
+        />
+    );
 };
 export default EmptyStreetView;
diff --git a/web/client/plugins/StreetView/containers/StreetViewContainer.jsx b/web/client/plugins/StreetView/containers/StreetViewContainer.jsx
index 3eceec6b88..a17eb42ecf 100644
--- a/web/client/plugins/StreetView/containers/StreetViewContainer.jsx
+++ b/web/client/plugins/StreetView/containers/StreetViewContainer.jsx
@@ -17,9 +17,9 @@ import { toggleStreetView } from '../actions/streetView';
  * @param {*} param0
  * @returns
  */
-function Panel({enabled, onClose = () => {}}) {
+function Panel({enabled, onClose = () => {}, panelSize}) {
     const margin = 10;
-    const [size, setSize] = useState({width: 400, height: 300});
+    const [size, setSize] = useState({width: 400, height: 300, ...panelSize});
     if (!enabled) {
         return null;
     }