rename files to minimize change scope

Author: zoran995

entry.jsx

@@ -1,8 +1,3 @@
-import { UserInterface } from "./lib/Views/UserInterface";
-import Variables from "./lib/Styles/variables.scss";
-import { createRoot } from "react-dom/client";
+import { renderUi } from "./lib/Views/root";
 
-const container = document.getElementById("ui");
-const root = createRoot(container);
-
-root.render(<UserInterface themeOverrides={Variables} />);
+renderUi();

lib/Views/TerriaUserInterface.jsx

@@ -1,38 +1,40 @@
 import PropTypes from "prop-types";
-import React, { Suspense } from "react";
-import { useSyncExternalStore } from "react";
-import "./global.scss";
-import { Loader } from "./Loader";
-import { terriaStore } from "./terriaStore";
+import RelatedMaps from "terriajs/lib/ReactViews/RelatedMaps/RelatedMaps";
+import { MenuLeft } from "terriajs/lib/ReactViews/StandardUserInterface/customizable/Groups";
+import MenuItem from "terriajs/lib/ReactViews/StandardUserInterface/customizable/MenuItem";
+import StandardUserInterface from "terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface";
+import version from "../../version";
 
-// Lazy load the entire TerriaUserInterface component
-const LazyTerriaUserInterface = React.lazy(() =>
-  import("./TerriaUserInterface").then((module) => ({
-    default: module.TerriaUserInterface
-  }))
-);
-
-export const UserInterface = ({ themeOverrides }) => {
-  const { terria, viewState, status } = useSyncExternalStore(
-    terriaStore.subscribe,
-    terriaStore.getSnapshot
-  );
-
-  if (status === "loading") {
-    return <Loader />;
-  }
+export const TerriaUserInterface = ({ terria, viewState, themeOverrides }) => {
+  const relatedMaps = viewState.terria.configParameters.relatedMaps;
+  const aboutButtonHrefUrl =
+    viewState.terria.configParameters.aboutButtonHrefUrl;
 
   return (
-    <Suspense fallback={<Loader />}>
-      <LazyTerriaUserInterface
-        terria={terria}
-        viewState={viewState}
-        themeOverrides={themeOverrides}
-      />
-    </Suspense>
+    <StandardUserInterface
+      terria={terria}
+      viewState={viewState}
+      themeOverrides={themeOverrides}
+      version={version}
+    >
+      <MenuLeft>
+        {aboutButtonHrefUrl ? (
+          <MenuItem
+            caption="About"
+            href={aboutButtonHrefUrl}
+            key="about-link"
+          />
+        ) : null}
+        {relatedMaps && relatedMaps.length > 0 ? (
+          <RelatedMaps relatedMaps={relatedMaps} />
+        ) : null}
+      </MenuLeft>
+    </StandardUserInterface>
   );
 };
 
-UserInterface.propTypes = {
+TerriaUserInterface.propTypes = {
+  terria: PropTypes.object.isRequired,
+  viewState: PropTypes.object.isRequired,
   themeOverrides: PropTypes.object
 };

lib/Views/UserInterface.jsx

@@ -0,0 +1,50 @@
+import PropTypes from "prop-types";
+import React, { Suspense, useSyncExternalStore } from "react";
+import "./global.scss";
+import { Loader } from "./Loader";
+import { terriaStore } from "./terriaStore";
+import Variables from "../Styles/variables.scss";
+import { createRoot } from "react-dom/client";
+
+// Lazy load the entire TerriaUserInterface component
+const LazyTerriaUserInterface = React.lazy(() =>
+  import("./UserInterface").then((module) => ({
+    default: module.TerriaUserInterface
+  }))
+);
+
+const Root = ({ themeOverrides }) => {
+  const { terria, viewState, status } = useSyncExternalStore(
+    terriaStore.subscribe,
+    terriaStore.getSnapshot
+  );
+
+  if (status === "loading") {
+    return <Loader />;
+  }
+
+  return (
+    <Suspense fallback={<Loader />}>
+      <LazyTerriaUserInterface
+        terria={terria}
+        viewState={viewState}
+        themeOverrides={themeOverrides}
+      />
+    </Suspense>
+  );
+};
+
+Root.propTypes = {
+  themeOverrides: PropTypes.object
+};
+
+export const renderUi = () => {
+  const container = document.getElementById("ui");
+  if (!container) {
+    console.error("Container element with id 'ui' not found.");
+    return;
+  }
+
+  const root = createRoot(container);
+  root.render(<Root themeOverrides={Variables} />);
+};