Merge pull request #2833 from GreenAsJade/restore_rdh_on_phones

Restore dynamic help for mobile (with layout fix)

package.json

@@ -136,7 +136,7 @@
  "react-datetime": "^3.0.4",
  "react-dom": "^18.2.0",
  "react-dropzone": "^12.0.5",
- "react-dynamic-help": "^3.0.1",
+ "react-dynamic-help": "^3.1.2",
  "react-linkify": "^1.0.0-alpha",
  "react-router-dom": "=6.3.0",
  "react-select": "^5.0.1",

src/components/OgsHelpProvider/OgsHelpProvider.tsx

@@ -24,7 +24,7 @@ import * as data from "@/lib/data";
 
 import { HelpProvider, HelpPopupDictionary } from "react-dynamic-help";
 import * as DynamicHelp from "react-dynamic-help";
-import { useIsDesktop, useUser } from "@/lib/hooks";
+import { useUser } from "@/lib/hooks";
 
 const helpPopupDictionary: HelpPopupDictionary = {
  "Skip this topic": pgettext("A button to dismiss a help popup topic", "Skip this topic"),
@@ -40,9 +40,6 @@ type OgsHelpProviderProps = {
  */
 
 export function OgsHelpProvider(props: OgsHelpProviderProps): JSX.Element {
- // RDH needs work to support mobile layouts
- const isDesktop = useIsDesktop();
-
  const [storageLoaded, setStorageLoaded] = React.useState(false);
 
  const debugDynamicHelp = data.get("debug-dynamic-help", false);
@@ -86,7 +83,7 @@ export function OgsHelpProvider(props: OgsHelpProviderProps): JSX.Element {
  <HelpProvider
  dictionary={helpPopupDictionary}
  storageApi={dynamicHelpStorage}
- storageReady={storageLoaded && isDesktop} // hack to turn it off for mobile
+ storageReady={storageLoaded}
  debug={debugDynamicHelp}
  >
  {props.children}

src/views/HelpFlows/HelpFlows.styl

@@ -26,14 +26,12 @@
  font-size: 1.0rem;
  box-shadow: 0 0.2rem 0.5rem 0.2rem rgba(0,0,0,0.2);
 
- // Don't try to position RDH popups near the target on a phone
- // Instead, put them at the bottom of the screen.
+ // On the phone, make sure the items will be visible even if it means
+ // that they appear over their target (they will be dismissed anyhow).
  @media only screen and (max-width 800px) {
- bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
- top: auto !important;
- }
+ }
 }
 
 .rdh-help-item>.rdh-popup-dismissers {

yarn.lock

@@ -9181,10 +9181,10 @@ react-dropzone@^12.0.5:
  file-selector "^0.5.0"
  prop-types "^15.8.1"
 
-react-dynamic-help@^3.0.1:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/react-dynamic-help/-/react-dynamic-help-3.0.1.tgz#e1df13afb3aa570e12ce6518ff764a05ef0fd1f2"
- integrity sha512-eZ53H0SQuX5oiatXWy+dKsMVlMGxIlDxk06CPnr2oLdAY3cCZd8ztUhpNwsWfM9GtpeZAIxsBeTiwlXyFRutug==
+react-dynamic-help@^3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/react-dynamic-help/-/react-dynamic-help-3.1.2.tgz#60d5471ab6b93cbf75df6620d2a729ccab40566b"
+ integrity sha512-oVxyg4Lo/UPUYyc5MTqGoFvrGYY3ZxrUdgMfmK3PY7z5voHR9EJ9IAptCHkh9rWEtdpmeSpvS+jgvxxF9KkInQ==
 
 react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"