Merge branch 'dev' into support-graphql-trip-requests

opentripplanner · Aug 12, 2024 · 152219b · 152219b
2 parents 42e6753 + 1e06c30
commit 152219b
Show file tree

Hide file tree

Showing 10 changed files with 351 additions and 491 deletions.
diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
@@ -103,7 +103,7 @@ function createGraphQLQueryAction(
   options
 ) {
   const fetchOptions = {
-    body: JSON.stringify({ query, variables }),
+    body: JSON.stringify({ batchId: options.batchId, query, variables }),
     headers: { 'Content-Type': 'application/json' },
     method: 'POST'
   }
@@ -1064,6 +1064,7 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
           },
           routingError,
           {
+            batchId: searchId,
             rewritePayload: (response, dispatch, getState) => {
               const itineraries = response.data?.plan?.itineraries
 

diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
@@ -31,6 +31,26 @@ const StyledNav = styled(Nav)`
     margin-left: 5px;
     margin-right: -10px;
   }
+
+  .navBarItem {
+    position: static;
+    & > button {
+      background: transparent;
+      border: none;
+      color: white;
+      padding: 15px;
+      line-height: 20px;
+
+      @media (max-width: 768px) {
+        padding: 10px;
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05);
+        color: #ececec;
+      }
+    }
+  }
 `
 
 const NavItemOnLargeScreens = styled(NavbarItem)`

diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux'
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { GlobeAmericas } from '@styled-icons/fa-solid/GlobeAmericas'
 import { useIntl } from 'react-intl'
 import React from 'react'
 
 import * as uiActions from '../../actions/ui'
-import { Dropdown } from '../util/dropdown'
 import { getLanguageOptions } from '../../util/i18n'
 import { UnstyledButton } from '../util/unstyled-button'
 
@@ -23,11 +23,12 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
   return languageOptions ? (
     <li>
       <Dropdown
+        className="navBarItem"
         id="locale-selector"
         label={intl.formatMessage({ id: 'components.SubNav.selectALanguage' })}
         listLabel={intl.formatMessage({ id: 'components.SubNav.languages' })}
-        name={<GlobeAmericas />}
         style={{ display: 'block ruby' }}
+        text={<GlobeAmericas />}
       >
         {Object.keys(languageOptions).map((locale: string) => (
           <li key={locale} lang={locale}>

diff --git a/lib/components/narrative/narrative-itineraries-header.tsx b/lib/components/narrative/narrative-itineraries-header.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable complexity */
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { ExclamationTriangle } from '@styled-icons/fa-solid/ExclamationTriangle'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Itinerary } from '@opentripplanner/types'
@@ -11,7 +12,6 @@ import styled from 'styled-components'
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
 import { ItinerarySortOption } from '../../util/config-types'
 import { sortOptions } from '../util/sortOptions'
-import { SortResultsDropdown } from '../util/dropdown'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import PopupTriggerText from '../app/popup-trigger-text'
@@ -35,6 +35,12 @@ const ItinerariesHeaderContainer = styled.div<{ showHeaderText: boolean }>`
   margin-left: ${(props) => (props.showHeaderText ? 'inherit' : 'auto')};
 `
 
+const SortResultsDropdown = styled(Dropdown)`
+  button {
+    border: none;
+  }
+`
+
 export default function NarrativeItinerariesHeader({
   customBatchUiBackground,
   enabledSortModes,
@@ -209,7 +215,7 @@ export default function NarrativeItinerariesHeader({
             <SortResultsDropdown
               id="sort-results"
               label={sortResultsLabel}
-              name={sortText}
+              text={sortText}
               title={sortResultsLabel}
             >
               {sortOptionsArr.map((sortOption) => (

diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
@@ -25,6 +25,18 @@
   background-color: #080808;
 }
 
+.navBarItem p {
+  padding: 5px 15px;
+  margin: 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.navBarItem ul {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
 #app-menu-locale-selector {
   display: none;
 }

diff --git a/lib/components/user/nav-login-button.tsx b/lib/components/user/nav-login-button.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { User } from '@auth0/auth0-react'
 import { User as UserIcon } from '@styled-icons/fa-regular/User'
 import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
-import { Dropdown } from '../util/dropdown'
 import { NewWindowIconA11y } from '../util/externalLink'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
@@ -64,9 +64,10 @@ const NavLoginButton = ({
     return (
       <li>
         <Dropdown
+          className="navBarItem"
           id="user-selector"
           label={intl.formatMessage({ id: 'components.SubNav.userMenu' })}
-          name={
+          text={
             <span>
               <Avatar
                 alt={displayedName}
@@ -75,51 +76,51 @@ const NavLoginButton = ({
               />
             </span>
           }
-          pullRight
         >
-          <li className="header">{displayedName}</li>
-
-          {links &&
-            links.map((link, i) => {
-              if (link.url.startsWith('http')) {
+          <p>{displayedName}</p>
+          <ul>
+            {links &&
+              links.map((link, i) => {
+                if (link.url.startsWith('http')) {
+                  return (
+                    <li key={link.url}>
+                      <NavUnstyledLink
+                        // Bypass our Link component and directly render an <a> element here,
+                        // so that the link works even when running the app locally.
+                        as="a"
+                        href={link.url}
+                        target="_blank"
+                      >
+                        <FormattedMessage id="components.NavLoginButton.help" />
+                        <NewWindowIconA11y
+                          size={12}
+                          style={{ marginLeft: '5px', marginTop: '-3px' }}
+                        />
+                      </NavUnstyledLink>
+                    </li>
+                  )
+                }
                 return (
                   <li key={link.url}>
-                    <NavUnstyledLink
-                      // Bypass our Link component and directly render an <a> element here,
-                      // so that the link works even when running the app locally.
-                      as="a"
-                      href={link.url}
-                      target="_blank"
-                    >
-                      <FormattedMessage id="components.NavLoginButton.help" />
-                      <NewWindowIconA11y
-                        size={12}
-                        style={{ marginLeft: '5px', marginTop: '-3px' }}
-                      />
+                    <NavUnstyledLink to={link.url}>
+                      {link.messageId === 'myAccount' ? ( // messageId is 'myAccount' or 'help'
+                        <FormattedMessage id="components.NavLoginButton.myAccount" />
+                      ) : (
+                        <FormattedMessage id="components.NavLoginButton.help" />
+                      )}
                     </NavUnstyledLink>
                   </li>
                 )
-              }
-              return (
-                <li key={link.url}>
-                  <NavUnstyledLink to={link.url}>
-                    {link.messageId === 'myAccount' ? ( // messageId is 'myAccount' or 'help'
-                      <FormattedMessage id="components.NavLoginButton.myAccount" />
-                    ) : (
-                      <FormattedMessage id="components.NavLoginButton.help" />
-                    )}
-                  </NavUnstyledLink>
-                </li>
-              )
-            })}
+              })}
 
-          <hr role="presentation" />
+            <hr role="presentation" />
 
-          <li>
-            <UnstyledButton onClick={onSignOutClick}>
-              <FormattedMessage id="components.NavLoginButton.signOut" />
-            </UnstyledButton>
-          </li>
+            <li>
+              <UnstyledButton onClick={onSignOutClick}>
+                <FormattedMessage id="components.NavLoginButton.signOut" />
+              </UnstyledButton>
+            </li>
+          </ul>
         </Dropdown>
       </li>
     )