Merge pull request TerriaJS#6260 from TerriaJS/tsify-sui

TSify StandardUserInterface (et al)

CHANGES.md

@@ -5,6 +5,7 @@ Change Log
 
 * Fixed bug that broke Cesium when WebGL was not available. Reverts to Leaflet.
 * Fixed bug where `new Terria()` constructror would try to access `document` and throw an error when running in NodeJS.
+* TSXified `StandardUserInterface` and some other components. If your TerriaMap imports `StandardUserInterface.jsx` remove the `.jsx` extension so webpack can find the new `.tsx` file.
 * [The next improvement]
 
 #### 8.2.4 - 2022-05-23

architecture/0003-drop-ie11-support.md

@@ -4,7 +4,7 @@ Date: 2020-08-28
 
 ## Status
 
-Accepted
+Superseded by [0010-never-support-ie11](./0010-never-support-ie11.md) on 2022-05-12
 
 ## Context
 

architecture/0010-never-support-ie11.md

@@ -0,0 +1,32 @@
+# 10. Never support Internet Explorer 11
+
+Date: 2022-05-12
+
+## Status
+
+Proposed
+
+## Context
+
+A decision was made in [0003-drop-ie11-support](./0003-drop-ie11-support.md) to discontinue support for IE11 in the following way:
+
+> 4. Deprecate IE11 support ASAP. Add dismissable message to maps warning them 
+   that on November 1, users will be unable to use new releases of Terria maps
+   in IE11. During the deprecation window, we will not use features that IE11
+   doesn't support. On November 1, new releases of Terria maps will display a 
+   message to IE11 users asking them to switch to another browser. They will w
+   not be able to use Terria in IE. Both messages will include a way for users
+   to send us feedback so that we can assess the impact.
+
+We have received no negative feedback about this decision, so we will now move forward with removing IE11 support entirely.
+
+## Decision
+
+Drop support for IE11 forever. I.e.
+
+> 1. Drop IE11 completely with no view of ever going back on that decision. We
+   upgrade to latest MobX, add service workers, use WASM, etc.
+
+## Consequences
+* We can remove old IE11 support code from the codebase
+* Packages can be upgraded and new features such as service workers and WASM can be used

doc/connecting-to-data/cross-origin-resource-sharing.md

@@ -6,7 +6,6 @@ Failing to do this may result in an error like this:
 
 Next, you should add servers that *do* support Cross-Origin Resource Sharing (CORS) to the `corsDomains` list in your [initialization file](../customizing/initialization-files.md). Servers in this list are contacted directly instead of going through the proxy... except:
 
-* in Internet Explorer 9
 * if an HTTPS web page is accessing an HTTP server (this way we avoid a mixed content warning from the browser).
 
 If your server does *not* support CORS, then you still need to add it to the `allowProxyFor` whitelist, but do not add it to the `corsDomains` list. It will then be proxied.

lib/Models/Terria.ts

@@ -89,7 +89,8 @@ import InitSource, {
   isInitFromDataPromise,
   isInitFromOptions,
   isInitFromUrl,
-  ShareInitSourceData
+  ShareInitSourceData,
+  StoryData
 } from "./InitSource";
 import Internationalization, {
   I18nStartOptions,
@@ -532,7 +533,7 @@ export default class Terria {
 
   @observable depthTestAgainstTerrainEnabled = false;
 
-  @observable stories: any[] = [];
+  @observable stories: StoryData[] = [];
 
   /**
    * Gets or sets the ID of the catalog member that is currently being

lib/ReactViews/BottomDock/BottomDock.tsx

@@ -4,22 +4,20 @@ import React from "react";
 import Terria from "../../Models/Terria";
 import ViewState from "../../ReactViewModels/ViewState";
 import ChartPanel from "../Custom/Chart/ChartPanel";
-import measureElement from "../HOCs/measureElement";
+import measureElement, { MeasureElementProps } from "../HOCs/measureElement";
 import withControlledVisibility from "../HOCs/withControlledVisibility";
 import Styles from "./bottom-dock.scss";
 import ChartDisclaimer from "./ChartDisclaimer";
 import Timeline from "./Timeline/Timeline";
 
-interface PropsType {
+interface PropsType extends MeasureElementProps {
   terria: Terria;
   viewState: ViewState;
-  heightFromMeasureElementHOC: number;
-  domElementRef: (element: HTMLDivElement) => void;
 }
 
 @observer
 class BottomDock extends React.Component<PropsType> {
-  refToMeasure?: HTMLDivElement;
+  refToMeasure: HTMLDivElement | null = null;
 
   handleClick() {
     runInAction(() => {
@@ -33,7 +31,7 @@ class BottomDock extends React.Component<PropsType> {
       this.props.heightFromMeasureElementHOC
     ) {
       this.props.viewState.setBottomDockHeight(
-        this.props.heightFromMeasureElementHOC
+        this.props.heightFromMeasureElementHOC ?? 0
       );
     }
   }
@@ -49,7 +47,6 @@ class BottomDock extends React.Component<PropsType> {
         }`}
         ref={element => {
           if (element !== null) {
-            this.props.domElementRef(element);
             this.refToMeasure = element;
           }
         }}

lib/ReactViews/DragDropFile.tsx

@@ -135,4 +135,5 @@ class DragDropFile extends React.Component<PropsType> {
     );
   }
 }
-module.exports = withTranslation()(DragDropFile);
+
+export default withTranslation()(DragDropFile);

lib/ReactViews/DragDropNotification.jsx

@@ -93,4 +93,4 @@ class DragDropNotification extends React.Component {
   }
 }
 
-module.exports = DragDropNotification;
+export default DragDropNotification;

lib/ReactViews/Feedback/FeedbackForm.tsx

@@ -1,4 +1,3 @@
-import { TFunction } from "i18next";
 import { runInAction } from "mobx";
 import { observer } from "mobx-react";
 import React, { useEffect, useRef } from "react";
@@ -22,7 +21,6 @@ import { useTranslationIfExists } from "./../../Language/languageHelpers";
 interface IProps extends WithTranslation {
   theme: DefaultTheme;
   viewState: ViewState;
-  t: TFunction;
 }
 
 interface IState {

lib/ReactViews/Generic/Responsive.tsx

@@ -0,0 +1,40 @@
+import PropTypes, { InferProps } from "prop-types";
+import React from "react";
+const MediaQuery = require("react-responsive").default;
+
+// This should come from some config some where
+const small = 768;
+const medium = 992;
+const large = 1300;
+
+// Use PropTypes and Typescript because this is widely used from JSX and TSX files
+const BreakpointPropTypes = {
+  children: PropTypes.node
+};
+type BreakpointProps = InferProps<typeof BreakpointPropTypes>;
+
+export function ExtraSmall(props: BreakpointProps) {
+  return <MediaQuery maxWidth={small}>{props.children}</MediaQuery>;
+}
+
+export function Small(props: BreakpointProps) {
+  return <MediaQuery maxWidth={small - 1}>{props.children}</MediaQuery>;
+}
+
+export function Medium(props: BreakpointProps) {
+  return <MediaQuery minWidth={small}>{props.children}</MediaQuery>;
+}
+
+export function Large(props: BreakpointProps) {
+  return <MediaQuery minWidth={medium}>{props.children}</MediaQuery>;
+}
+
+export function ExtraLarge(props: BreakpointProps) {
+  return <MediaQuery minWidth={large}>{props.children}</MediaQuery>;
+}
+
+ExtraSmall.propTypes = BreakpointPropTypes;
+Small.propTypes = BreakpointPropTypes;
+Medium.propTypes = BreakpointPropTypes;
+Large.propTypes = BreakpointPropTypes;
+ExtraLarge.propTypes = BreakpointPropTypes;

lib/ReactViews/HOCs/measureElement.tsx

@@ -1,13 +1,31 @@
 import React from "react";
 import debounce from "lodash-es/debounce";
 
-type Measurements =
-  | "widthFromMeasureElementHOC"
-  | "heightFromMeasureElementHOC";
+const getDisplayName = <P extends React.ComponentProps<any>>(
+  WrappedComponent: React.ComponentClass<P>
+) => {
+  return WrappedComponent.displayName || WrappedComponent.name || "Component";
+};
 
-interface MeasureElementState {
-  width: number | null;
+export interface MeasureElementProps {
+  heightFromMeasureElementHOC: number | null;
+  widthFromMeasureElementHOC: number | null;
+}
+
+interface MeasureElementComponent<P>
+  extends React.Component<P & MeasureElementProps> {
+  refToMeasure: React.RefObject<HTMLElement> | HTMLElement | null;
+}
+
+interface MeasureElementClass<P> {
+  new (props: P & MeasureElementProps, context?: any): MeasureElementComponent<
+    P
+  >;
+}
+
+interface IState {
   height: number | null;
+  width: number | null;
 }
 
 /*
@@ -29,23 +47,16 @@ interface MeasureElementState {
     ref={this.refToMeasure}>
     ```
 */
-function measureElement<WrappedComponentProps extends object>(
-  WrappedComponent: React.ComponentType<WrappedComponentProps>,
+const measureElement = <P extends React.ComponentProps<any>>(
+  WrappedComponent: MeasureElementClass<P>,
   verbose = true
-): React.ComponentType<Omit<WrappedComponentProps, Measurements>> {
-  type MeasureElementProps = Omit<WrappedComponentProps, Measurements>;
-  class MeasureElement extends React.Component<
-    MeasureElementProps,
-    MeasureElementState
-  > {
+) => {
+  class MeasureElement extends React.Component<P, IState> {
+    wrappedComponent = React.createRef<InstanceType<typeof WrappedComponent>>();
+    checkAndUpdateSizingWithDebounce: () => void;
     static displayName = `MeasureElement(${getDisplayName(WrappedComponent)})`;
-
-    wrappedComponent: React.RefObject<any>;
-    checkAndUpdateSizingWithDebounce: any;
-
-    constructor(props: MeasureElementProps) {
+    constructor(props: P) {
       super(props);
-      this.wrappedComponent = React.createRef();
       this.state = {
         width: null,
         height: null
@@ -56,38 +67,35 @@ function measureElement<WrappedComponentProps extends object>(
         200
       );
     }
-
     componentDidMount() {
       window.addEventListener("resize", this.checkAndUpdateSizingWithDebounce);
       this.checkAndUpdateSizing();
     }
-
     componentDidUpdate() {
       this.checkAndUpdateSizing();
     }
-
     componentWillUnmount() {
       window.removeEventListener(
         "resize",
         this.checkAndUpdateSizingWithDebounce
       );
     }
-
     checkAndUpdateSizing() {
       if (!this.wrappedComponent.current) {
         return;
       }
       const refToUse = this.wrappedComponent.current.refToMeasure;
       const widthFromRef = refToUse
-        ? refToUse.current
-          ? refToUse.current.clientWidth
+        ? "current" in refToUse
+          ? refToUse.current?.clientWidth
           : refToUse.clientWidth
         : undefined;
       const heightFromRef = refToUse
-        ? refToUse.current
-          ? refToUse.current.clientHeight
+        ? "current" in refToUse
+          ? refToUse.current?.clientHeight
           : refToUse.clientHeight
         : undefined;
+
       const newWidth = widthFromRef || 0;
       const newHeight = heightFromRef || 0;
       if (verbose) {
@@ -114,12 +122,10 @@ function measureElement<WrappedComponentProps extends object>(
         }
       }
     }
-
     render() {
-      const props = this.props as WrappedComponentProps;
       return (
         <WrappedComponent
-          {...props}
+          {...this.props}
           ref={this.wrappedComponent}
           widthFromMeasureElementHOC={this.state.width}
           heightFromMeasureElementHOC={this.state.height}
@@ -128,10 +134,6 @@ function measureElement<WrappedComponentProps extends object>(
     }
   }
   return MeasureElement;
-}
-
-const getDisplayName = (WrappedComponent: any) => {
-  return WrappedComponent.displayName || WrappedComponent.name || "Component";
 };
 
 export default measureElement;