Merge pull request #1039 from CodeForAfrica/bugfix_search_location

ClimateMappedAfrica: User unable to click the search field
CodeForAfrica · Feb 4, 2025 · 5c3f901 · 5c3f901
2 parents fe670c1 + 4f9fa01
commit 5c3f901
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -109,8 +109,10 @@ function Chart({
 
   useEffect(() => {
     try {
-      const viewProp = new vega.View(vega.parse(cSpec), { renderer: "none" });
-      setDownloadView(viewProp);
+      if (cSpec) {
+        const viewProp = new vega.View(vega.parse(cSpec), { renderer: "none" });
+        setDownloadView(viewProp);
+      }
     } catch (error) {
       console.error("Error creating view", error);
     }

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/DesktopPanel/DesktopPanel.js
@@ -21,6 +21,12 @@ function DesktopPanel({ sx, ...props }) {
   const open = value === "rich-data" && !tutorialOpen;
   return (
     <>
+      <PanelButtons
+        {...props}
+        onValueChange={handleValueChange}
+        open={open}
+        value={value}
+      />
       <Drawer
         anchor="left"
         onClose={closeDrawer}
@@ -41,29 +47,25 @@ function DesktopPanel({ sx, ...props }) {
             overscrollBehaviorBlock: "none",
           },
         }}
+        variant="persistent"
         PaperProps={{
           elevation: 0,
           square: true,
-          sx: ({ typography }) => ({
+          sx: () => ({
             background: "transparent",
             border: "none",
             display: "flex",
             flexDirection: "row",
-            height: "100%",
+            // Setting Drawer persistent causes header to be non sticky. We are setting the height to 100vh - 88px to account for the toolbar height.
+            height: "calc(100vh - 88px)", // Toolbar height
             overflowY: "visible",
             position: "relative",
-            top: typography.pxToRem(88), // Toolbar height
+            top: 0,
           }),
         }}
       >
         <PanelItem {...props} item={{ value: "rich-data" }} />
       </Drawer>
-      <PanelButtons
-        {...props}
-        onValueChange={handleValueChange}
-        open={open}
-        value={value}
-      />
     </>
   );
 }

diff --git a/packages/commons-ui-next/src/Link/StyledLink.js b/packages/commons-ui-next/src/Link/StyledLink.js
@@ -74,7 +74,7 @@ const StyledLink = React.forwardRef(function Link(props, ref) {
   } = props;
 
   // https://nextjs.org/docs/app/api-reference/components/link#href-required
-  const url = typeof href === "string" ? href : href.pathname;
+  const url = typeof href === "string" ? href : href?.pathname;
   const isExternal = isExternalUrl(url);
   if (isExternal) {
     const externalLinkProps = {
@@ -117,7 +117,7 @@ const StyledLink = React.forwardRef(function Link(props, ref) {
 StyledLink.propTypes = {
   as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   className: PropTypes.string,
-  href: PropTypes.string,
+  href: PropTypes.string.isRequired,
   legacyBehavior: PropTypes.bool,
   linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   locale: PropTypes.string,