TSify MenuBar

CHANGES.md

@@ -3,6 +3,8 @@
 #### next release (8.7.6)
 
 - Set default value for date and datetime WPS fields only when the field is marked as required.
+- TSify MenuBar and Groups
+- Add elements config for MenuBar
 - [The next improvement]
 
 #### 8.7.5 - 2024-06-26
@@ -12,7 +14,6 @@
 - Show rectangle selector for WPS bounding box parameter
 - Fix `store` and `status` values send in WPS Execute request.
 - Add docs for `modelDimensions`
-- [The next improvement]
 
 #### 8.7.4 - 2024-06-07
 

lib/Models/InitSource.ts

@@ -38,9 +38,10 @@ export interface StoryData {
   title: string;
   text: string;
   id: string;
-  shareData: ShareInitSourceData;
+  shareData: StartData;
 }
-export interface ShareInitSourceData {
+
+export interface StartData {
   version: string;
   /** Share data initSources can be a mix of initUrls (string) and initData (InitDataSource/JsonObject) */
   initSources: (InitSourceData | string)[];

lib/Models/Terria.ts

@@ -106,7 +106,7 @@ import IElementConfig from "./IElementConfig";
 import InitSource, {
   InitSourceData,
   InitSourceFromData,
-  ShareInitSourceData,
+  StartData,
   StoryData,
   isInitFromData,
   isInitFromDataPromise,
@@ -168,8 +168,17 @@ export interface ConfigParameters {
    * @deprecated
    */
   proxyableDomainsUrl?: string;
+  /** URL to TerriaJS-server config. Defaults to `serverconfig/`. */
   serverConfigUrl?: string;
+  /**
+   * URL of the service used to generate share links. This defaults to `share` if not specified, which maps to TerriaJS Server `share` endpoint.
+   */
   shareUrl?: string;
+  /**
+   * Base URL of the client application used to generate share links. If not specified, the current page base URI will be used.
+   * For example, if `shareClientBaseUrl` is `http://example.com/`, then a share link will be generated as `http://example.com/#share=...`.
+   */
+  shareClientBaseUrl?: string;
   /**
    * URL of the service used to send feedback.  If not specified, the "Give Feedback" button will not appear.
    */
@@ -506,6 +515,7 @@ export default class Terria {
     proxyableDomainsUrl: "proxyabledomains/", // deprecated, will be determined from serverconfig
     serverConfigUrl: "serverconfig/",
     shareUrl: "share",
+    shareClientBaseUrl: undefined,
     feedbackUrl: undefined,
     initFragmentPaths: ["init/"],
     storyEnabled: true,
@@ -2259,7 +2269,7 @@ async function interpretStartData(
 ) {
   if (isJsonObject(startData, false)) {
     // Convert startData to v8 if necessary
-    let startDataV8: ShareInitSourceData | null;
+    let startDataV8: StartData | null;
     try {
       if (
         // If startData.version has version 0.x.x - user catalog-converter to convert startData

lib/ReactViews/Map/MenuBar/HelpButton/HelpButton.tsx

@@ -7,6 +7,7 @@ import Prompt from "../../../Generic/Prompt";
 import { useViewState } from "../../../Context";
 
 import Styles from "./help-button.scss";
+import withControlledVisibility from "../../../HOCs/withControlledVisibility";
 
 const HelpButton = observer(() => {
   const { t } = useTranslation();
@@ -48,4 +49,4 @@ const HelpButton = observer(() => {
   );
 });
 
-export default HelpButton;
+export default withControlledVisibility(HelpButton);

lib/ReactViews/Map/MenuBar/MenuBar.jsx → lib/ReactViews/Map/MenuBar/MenuBar.tsx

@@ -1,30 +1,39 @@
 import classNames from "classnames";
 import { runInAction } from "mobx";
 import { observer } from "mobx-react";
-import PropTypes from "prop-types";
 import React from "react";
-import styled from "styled-components";
-import withControlledVisibility from "../../HOCs/withControlledVisibility";
+import styled, { useTheme } from "styled-components";
 import { useViewState } from "../../Context";
+import withControlledVisibility from "../../HOCs/withControlledVisibility";
 import LangPanel from "../Panels/LangPanel/LangPanel";
 import SettingPanel from "../Panels/SettingPanel";
 import SharePanel from "../Panels/SharePanel/SharePanel";
 import ToolsPanel from "../Panels/ToolsPanel/ToolsPanel";
-import StoryButton from "./StoryButton/StoryButton";
 import HelpButton from "./HelpButton/HelpButton";
+import StoryButton from "./StoryButton/StoryButton";
 
+import IElementConfig from "../../../Models/IElementConfig";
 import Styles from "./menu-bar.scss";
 
-const StyledMenuBar = styled.div`
+const StyledMenuBar = styled.div<{ trainerBarVisible: boolean }>`
   pointer-events: none;
   ${(p) =>
     p.trainerBarVisible &&
     `
     top: ${Number(p.theme.trainerHeight) + Number(p.theme.mapButtonTop)}px;
   `}
 `;
+
+interface PropsType {
+  animationDuration?: number;
+  menuItems: React.ReactElement[];
+  menuLeftItems: React.ReactElement[];
+  elementConfig?: IElementConfig;
+}
+
 // The map navigation region
-const MenuBar = observer((props) => {
+const MenuBar = observer((props: PropsType) => {
+  const theme = useTheme();
   const viewState = useViewState();
   const terria = viewState.terria;
   const menuItems = props.menuItems || [];
@@ -53,7 +62,7 @@ const MenuBar = observer((props) => {
         <ul className={classNames(Styles.menu)}>
           {enableTools && (
             <li className={Styles.menuItem}>
-              <ToolsPanel />
+              <ToolsPanel elementConfig={terria.elements.get("menu-bar-tools")}/>
             </li>
           )}
           {!viewState.useSmallScreenInterface &&
@@ -67,17 +76,22 @@ const MenuBar = observer((props) => {
       <section className={classNames(Styles.flex)}>
         <ul className={classNames(Styles.menu)}>
           <li className={Styles.menuItem}>
-            <SettingPanel terria={terria} viewState={viewState} />
+            <SettingPanel
+              terria={terria}
+              viewState={viewState}
+              elementConfig={terria.elements.get("menu-bar-settings")}
+            />
           </li>
           <li className={Styles.menuItem}>
-            <HelpButton viewState={viewState} />
+            <HelpButton elementConfig={terria.elements.get("menu-bar-help")}/>
           </li>
 
           {terria.configParameters?.languageConfiguration?.enabled ? (
             <li className={Styles.menuItem}>
               <LangPanel
                 terria={terria}
                 smallScreen={viewState.useSmallScreenInterface}
+                elementConfig={terria.elements.get("menu-bar-lang")}
               />
             </li>
           ) : null}
@@ -88,18 +102,15 @@ const MenuBar = observer((props) => {
               <StoryButton
                 terria={terria}
                 viewState={viewState}
-                theme={props.theme}
+                theme={theme}
+                elementConfig={terria.elements.get("menu-bar-story")}
               />
             </li>
           </ul>
         )}
         <ul className={classNames(Styles.menu)}>
           <li className={Styles.menuItem}>
-            <SharePanel
-              terria={terria}
-              viewState={viewState}
-              animationDuration={props.animationDuration}
-            />
+            <SharePanel terria={terria} viewState={viewState} elementConfig={terria.elements.get("menu-bar-share")} />
           </li>
         </ul>
         {!viewState.useSmallScreenInterface &&
@@ -112,11 +123,5 @@ const MenuBar = observer((props) => {
     </StyledMenuBar>
   );
 });
-MenuBar.displayName = "MenuBar";
-MenuBar.propTypes = {
-  animationDuration: PropTypes.number,
-  menuItems: PropTypes.arrayOf(PropTypes.element),
-  menuLeftItems: PropTypes.arrayOf(PropTypes.element)
-};
 
 export default withControlledVisibility(MenuBar);

lib/ReactViews/Map/MenuBar/StoryButton/StoryButton.tsx

@@ -11,12 +11,13 @@ import Prompt from "../../../Generic/Prompt";
 import { useRefForTerria } from "../../../Hooks/useRefForTerria";
 
 import Styles from "./story-button.scss";
+import withControlledVisibility from "../../../HOCs/withControlledVisibility";
 
-interface Props {
+interface Props  {
   terria: Terria;
   theme: DefaultTheme;
   viewState: ViewState;
-  animationDuration: number;
+  animationDuration?: number;
 }
 
 interface ButtonProps extends Props {
@@ -110,4 +111,4 @@ const StoryButton = (props: Props) => {
     </div>
   );
 };
-export default StoryButton;
+export default withControlledVisibility(StoryButton);

lib/ReactViews/Map/Panels/LangPanel/LangPanel.tsx

@@ -7,6 +7,7 @@ import Icon from "../../../../Styled/Icon";
 import Ul, { Li } from "../../../../Styled/List";
 import MenuPanel from "../../../StandardUserInterface/customizable/MenuPanel";
 import Styles from "../../MenuBar/menu-bar.scss";
+import withControlledVisibility from "../../../HOCs/withControlledVisibility";
 
 const stripLangLocale = (lang: string = ""): string => lang.split("-")[0];
 
@@ -61,4 +62,4 @@ const LangPanel = (props: Props) => {
     </MenuPanel>
   );
 };
-export default LangPanel;
+export default withControlledVisibility (LangPanel);

lib/ReactViews/Map/Panels/SettingPanel.tsx

@@ -30,6 +30,7 @@ import Text, { TextSpan } from "../../../Styled/Text";
 import withTerriaRef from "../../HOCs/withTerriaRef";
 import MenuPanel from "../../StandardUserInterface/customizable/MenuPanel";
 import Styles from "./setting-panel.scss";
+import withControlledVisibility from "../../HOCs/withControlledVisibility";
 
 const sides = {
   left: "settingPanel.terrain.left",
@@ -413,7 +414,7 @@ class SettingPanel extends React.Component<PropTypes> {
 
 export const SETTING_PANEL_NAME = "MenuBarMapSettingsButton";
 export default withTranslation()(
-  withTheme(withTerriaRef(SettingPanel, SETTING_PANEL_NAME))
+  withTheme(withTerriaRef(withControlledVisibility(SettingPanel), SETTING_PANEL_NAME))
 );
 
 type IFlexGrid = {

lib/ReactViews/Map/Panels/SharePanel/BuildShareLink.ts

@@ -17,7 +17,7 @@ import HasLocalData from "../../../../Models/HasLocalData";
 import {
   InitSourceData,
   InitSourcePickedFeatures,
-  ShareInitSourceData,
+  StartData,
   ViewModeJson
 } from "../../../../Models/InitSource";
 import Terria from "../../../../Models/Terria";
@@ -38,7 +38,13 @@ function buildBaseShareUrl(
   terria: Terria,
   hashParams: { [key: string]: string }
 ) {
-  const uri = new URI(document.baseURI).fragment("").search("");
+  let baseUrl = document.baseURI;
+
+  if (terria.configParameters.shareClientBaseUrl) {
+    baseUrl = terria.configParameters.shareClientBaseUrl;
+  }
+
+  const uri = new URI(baseUrl).fragment("").search("");
 
   if (terria.developmentEnv) {
     uri.addSearch(toJS(terria.userProperties));
@@ -109,7 +115,7 @@ export function getShareData(
   terria: Terria,
   viewState?: ViewState,
   options = { includeStories: true }
-): ShareInitSourceData {
+): StartData {
   return runInAction(() => {
     const { includeStories } = options;
     const initSource: InitSourceData = {};

lib/ReactViews/Map/Panels/SharePanel/SharePanel.tsx

@@ -12,20 +12,21 @@ import { canShorten } from "./BuildShareLink";
 import Styles from "./share-panel.scss";
 import { SharePanelContent } from "./SharePanelContent";
 import { ShareUrl } from "./ShareUrl";
+import withControlledVisibility from "../../../HOCs/withControlledVisibility";
 
 const MenuPanel =
   require("../../../StandardUserInterface/customizable/MenuPanel").default;
 const StorySharePanel = require("./StorySharePanel").default;
 
 interface PropTypes extends WithTranslation {
   terria: Terria;
-  storyShare: boolean;
+  storyShare?: boolean;
   catalogShare?: boolean;
   catalogShareWithoutText?: boolean;
-  modalWidth: number;
+  modalWidth?: number;
   viewState: ViewState;
-  onUserClick: () => void;
-  btnDisabled: boolean;
+  onUserClick?: () => void;
+  btnDisabled?: boolean;
   t: TFunction;
 }
 
@@ -184,7 +185,7 @@ class SharePanel extends React.Component<PropTypes, SharePanelState> {
   }
 }
 
-export default withTranslation()(SharePanel);
+export default withControlledVisibility(withTranslation()(SharePanel))
 
 export function shouldShorten(terria: Terria) {
   return (

lib/ReactViews/Map/Panels/ToolsPanel/ToolsPanel.jsx

@@ -8,6 +8,7 @@ import { useViewState } from "../../../Context";
 import DropdownStyles from "../panel.scss";
 import CountDatasets from "./CountDatasets";
 import Styles from "./tools-panel.scss";
+import withControlledVisibility from "../../../HOCs/withControlledVisibility";
 
 const ToolsPanel = observer(() => {
   const [isOpen, setIsOpen] = useState(false);
@@ -45,4 +46,4 @@ const ToolsPanel = observer(() => {
   );
 });
 
-export default ToolsPanel;
+export default withControlledVisibility(ToolsPanel);

lib/ReactViews/Mobile/MobileMenu.jsx

@@ -128,12 +128,14 @@ class MobileMenu extends React.Component {
             <SettingPanel
               terria={this.props.terria}
               viewState={this.props.viewState}
+              elementConfig={this.props.terria.elements.get("menu-bar-settings")}
             />
           </div>
           <div onClick={() => this.hideMenu()}>
             <SharePanel
               terria={this.props.terria}
               viewState={this.props.viewState}
+              elementConfig={this.props.terria.elements.get("menu-bar-share")}
             />
           </div>
           {this.props.menuItems.map((menuItem) => (
@@ -165,6 +167,7 @@ class MobileMenu extends React.Component {
               <LangPanel
                 terria={this.props.terria}
                 smallScreen={this.props.viewState.useSmallScreenInterface}
+                elementConfig={this.props.terria.elements.get("menu-bar-lang")}
               />
             </div>
           )}