Backport upstream MessageBar changes

Parts of this PR are a subset of general alert translation removal of HSLdevcom@7887d10
stadtnavi · Dec 1, 2024 · 19933c9 · 19933c9
1 parent ebef8b5
commit 19933c9
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 105 deletions.
diff --git a/app/component/MessageBar.js b/app/component/MessageBar.js
@@ -5,18 +5,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { intlShape } from 'react-intl';
 import { graphql, fetchQuery, ReactRelayContext } from 'react-relay';
-
+import { configShape, relayShape } from '../util/shapes';
 import SwipeableTabs from './SwipeableTabs';
 import Icon from './Icon';
 import MessageBarMessage from './MessageBarMessage';
 import { markMessageAsRead } from '../action/MessageActions';
 import { getReadMessageIds } from '../store/localStorage';
-import {
-  getServiceAlertDescription,
-  getServiceAlertHeader,
-  getServiceAlertUrl,
-  mapAlertSource,
-} from '../util/alertUtils';
+import { mapAlertSource } from '../util/alertUtils';
 import { isKeyboardSelectionEvent } from '../util/browser';
 import hashCode from '../util/hashUtil';
 
@@ -38,23 +33,13 @@ const fetchServiceAlerts = async (feedids, relayEnvironment) => {
         alertUrl
         effectiveEndDate
         effectiveStartDate
-        alertDescriptionTextTranslations {
-          language
-          text
-        }
-        alertHeaderTextTranslations {
-          language
-          text
-        }
-        alertUrlTranslations {
-          language
-          text
-        }
       }
     }
   `;
 
-  const result = await fetchQuery(relayEnvironment, query, { feedids });
+  const result = await fetchQuery(relayEnvironment, query, {
+    feedids,
+  });
   return result && Array.isArray(result.alerts) ? result.alerts : [];
 };
 
@@ -68,52 +53,26 @@ export const getServiceAlertId = alert =>
      ${alert.feed}`,
   );
 
-const toMessage = (alert, intl, config) => {
-  const source = {
-    en: mapAlertSource(config, 'en', alert.feed),
-    fi: mapAlertSource(config, 'fi', alert.feed),
-    sv: mapAlertSource(config, 'sv', alert.feed),
-  };
+const toMessage = (alert, intl, config, lang) => {
+  const source = mapAlertSource(config, lang, alert.feed);
+  const content = {};
+  content[lang] = [
+    {
+      type: 'heading',
+      content: source
+        ? source.concat(alert.alertHeaderText)
+        : alert.alertHeaderText,
+    },
+    { type: 'text', content: alert.alertDescriptionText },
+    {
+      type: 'a',
+      content: intl.formatMessage({ id: 'extra-info' }),
+      href: alert.alertUrl,
+    },
+  ];
 
   return {
-    content: {
-      en: [
-        {
-          type: 'heading',
-          content: source.en.concat(getServiceAlertHeader(alert, 'en')),
-        },
-        { type: 'text', content: getServiceAlertDescription(alert, 'en') },
-        {
-          type: 'a',
-          content: intl.formatMessage({ id: 'extra-info' }),
-          href: getServiceAlertUrl(alert, 'en'),
-        },
-      ],
-      fi: [
-        {
-          type: 'heading',
-          content: source.fi.concat(getServiceAlertHeader(alert, 'fi')),
-        },
-        { type: 'text', content: getServiceAlertDescription(alert, 'fi') },
-        {
-          type: 'a',
-          content: intl.formatMessage({ id: 'extra-info' }),
-          href: getServiceAlertUrl(alert, 'fi'),
-        },
-      ],
-      sv: [
-        {
-          type: 'heading',
-          content: source.sv.concat(getServiceAlertHeader(alert, 'sv')),
-        },
-        { type: 'text', content: getServiceAlertDescription(alert, 'sv') },
-        {
-          type: 'a',
-          content: intl.formatMessage({ id: 'extra-info' }),
-          href: getServiceAlertUrl(alert, 'sv'),
-        },
-      ],
-    },
+    content,
     icon: 'caution',
     id: getServiceAlertId(alert),
     persistence: 'repeat',
@@ -126,21 +85,23 @@ class MessageBar extends Component {
     getStore: PropTypes.func.isRequired,
     intl: intlShape.isRequired,
     executeAction: PropTypes.func.isRequired,
-    config: PropTypes.object.isRequired,
+    config: configShape.isRequired,
   };
 
   static propTypes = {
     currentTime: PropTypes.number.isRequired,
     getServiceAlertsAsync: PropTypes.func,
     lang: PropTypes.string.isRequired,
-    messages: PropTypes.array.isRequired,
-    relayEnvironment: PropTypes.object,
+    // eslint-disable-next-line
+    messages: PropTypes.arrayOf(PropTypes.object).isRequired,
+    relayEnvironment: relayShape.isRequired,
     duplicateMessageCounter: PropTypes.number.isRequired,
     breakpoint: PropTypes.string,
   };
 
   static defaultProps = {
     getServiceAlertsAsync: fetchServiceAlerts,
+    breakpoint: undefined,
   };
 
   state = {
@@ -184,16 +145,6 @@ class MessageBar extends Component {
     }
   };
 
-  ariaContent = (content, id) => {
-    return (
-      <span key={`message-${id}`}>
-        {content.map(e => (
-          <span key={`message-content-${id}-${e.type}`}>{e.content}</span>
-        ))}
-      </span>
-    );
-  };
-
   getTabContent = (textColor, slideIndex) =>
     this.validMessages().map((el, index) => (
       <div
@@ -206,7 +157,6 @@ class MessageBar extends Component {
           textColor={textColor}
           truncate={!this.state.allAlertsOpen}
           onShowMore={this.openAllAlerts}
-          config={this.context.config}
         />
       </div>
     ));
@@ -221,7 +171,9 @@ class MessageBar extends Component {
     );
     const { lang, messages } = this.props;
     return [
-      ...filteredServiceAlerts.map(alert => toMessage(alert, intl, config)),
+      ...filteredServiceAlerts.map(alert =>
+        toMessage(alert, intl, config, lang),
+      ),
       ...messages,
     ].filter(el => {
       if (
@@ -265,14 +217,20 @@ class MessageBar extends Component {
     const backgroundColor = msg.backgroundColor || '#fff';
     const textColor = isDisruption ? '#fff' : msg.textColor || '#000';
     const dataURI = msg.dataURI || null;
+    const ariaContent = (content, id) => {
+      return (
+        <span key={`message-${id}`}>
+          {content.map(e => (
+            <span key={`message-content-${id}-${e.type}`}>{e.content}</span>
+          ))}
+        </span>
+      );
+    };
     return (
       <>
         <span className="sr-only" role="alert">
           {messages.map(el =>
-            this.ariaContent(
-              el.content[this.props.lang] || el.content.fi,
-              el.id,
-            ),
+            ariaContent(el.content[this.props.lang] || el.content.fi, el.id),
           )}
         </span>
         <section

diff --git a/app/component/MessageBarMessage.js b/app/component/MessageBarMessage.js
@@ -1,15 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import { configShape } from '../util/shapes';
 import TruncatedMessage from './TruncatedMessage';
 
-const MessageBarMessage = ({
-  content,
-  textColor,
-  truncate,
-  onShowMore,
-  config,
-}) => {
+export default function MessageBarMessage(
+  { content, textColor, truncate, onShowMore },
+  { config },
+) {
   const heading = (e, color) => {
     if (config.showAlertHeader && e?.type === 'heading') {
       return <h2 style={{ color }}>{e.content}</h2>;
@@ -24,9 +21,9 @@ const MessageBarMessage = ({
         <a
           className="message-bar-link"
           href={link.href}
-          style={{ color: link.color || null }}
           target="_blank"
-          rel="noreferrer noopener"
+          rel="noreferrer"
+          style={{ color: link.color || null }}
         >
           {link.content || link.href}
         </a>
@@ -38,6 +35,7 @@ const MessageBarMessage = ({
         {linkPart}
       </>
     );
+
     return (
       <TruncatedMessage
         lines={2}
@@ -65,14 +63,21 @@ const MessageBarMessage = ({
       )}
     </div>
   );
-};
+}
 
 MessageBarMessage.propTypes = {
-  content: PropTypes.array,
+  // eslint-disable-next-line
+  content: PropTypes.arrayOf(PropTypes.object).isRequired,
   textColor: PropTypes.string,
   truncate: PropTypes.bool,
-  onShowMore: PropTypes.func,
-  config: PropTypes.object,
+  onShowMore: PropTypes.func.isRequired,
+};
+
+MessageBarMessage.defaultProps = {
+  textColor: undefined,
+  truncate: false,
 };
 
-export default MessageBarMessage;
+MessageBarMessage.contextTypes = {
+  config: configShape.isRequired,
+};
diff --git a/app/configurations/config.herrenberg.js b/app/configurations/config.herrenberg.js
@@ -390,7 +390,7 @@ export default configMerger(parentConfig, {
         ],
     },
     staticMessagesUrl: STATIC_MESSAGE_URL,
-
+    
     parkAndRideBannedVehicleParkingTags: [
         'lot_type:Parkplatz',
         'lot_type:Tiefgarage',

diff --git a/app/util/shapes.js b/app/util/shapes.js
@@ -1,6 +1,10 @@
 /* eslint-disable import/prefer-default-export */
 import PropTypes from 'prop-types';
 
+export const configShape = PropTypes.shape({
+  CONFIG: PropTypes.string.isRequired,
+});
+
 export const dtLocationShape = PropTypes.shape({
   lat: PropTypes.number,
   lon: PropTypes.number,
@@ -31,6 +35,15 @@ export const mapLayerOptionsShape = PropTypes.shape({
   citybike: PropTypes.shape(mapLayerOptionShape),
 });
 
+export const relayShape = PropTypes.shape({
+  refetchConnection: PropTypes.func,
+  refetch: PropTypes.func,
+  hasMore: PropTypes.func,
+  loadMore: PropTypes.func,
+  // eslint-disable-next-line
+  environment: PropTypes.object,
+});
+
 export const FareShape = PropTypes.shape({
   agency: PropTypes.shape({
     fareUrl: PropTypes.string,

diff --git a/test/unit/component/MessageBar.test.js b/test/unit/component/MessageBar.test.js
@@ -17,11 +17,13 @@ const defaultProps = {
   currentTime: 1558610379,
   duplicateMessageCounter: 0,
   breakpoint: 'large',
+  relayEnvironment: { environment: {} },
 };
 
 const context = {
   ...mockContext,
   config: {
+    CONFIG: 'default',
     messageBarAlerts: true,
   },
 };
@@ -135,6 +137,7 @@ describe('<MessageBar />', () => {
       context: {
         ...context,
         config: {
+          CONFIG: 'default',
           messageBarAlerts: false,
         },
       },

diff --git a/test/unit/component/MessageBarMessage.test.js b/test/unit/component/MessageBarMessage.test.js
@@ -9,9 +9,12 @@ describe('<MessageBarMessage />', () => {
     const props = {
       content: [{ type: 'a', content: 'This is a link', href: undefined }],
       breakpoint: 'small',
-      config: { showAlertHeader: true },
+      onShowMore: () => {},
     };
-    const wrapper = shallowWithIntl(<MessageBarMessage {...props} />);
+    const context = { config: { showAlertHeader: true } };
+    const wrapper = shallowWithIntl(<MessageBarMessage {...props} />, {
+      context,
+    });
     expect(wrapper.find('a')).to.have.lengthOf(0);
   });
 
@@ -20,19 +23,25 @@ describe('<MessageBarMessage />', () => {
       content: [{ type: 'heading', content: 'This is a header' }],
       breakpoint: 'small',
       onMaximize: () => {},
-      config: { showAlertHeader: true },
+      onShowMore: () => {},
     };
-    const wrapper = shallowWithIntl(<MessageBarMessage {...props} />);
+    const context = { config: { showAlertHeader: true } };
+    const wrapper = shallowWithIntl(<MessageBarMessage {...props} />, {
+      context,
+    });
     expect(wrapper.find('h2').text()).to.equal('This is a header');
   });
 
   it('should render text for type "text"', () => {
     const props = {
       content: [{ type: 'text', content: 'This is text' }],
       breakpoint: 'small',
-      config: { showAlertHeader: true },
+      onShowMore: () => {},
     };
-    const wrapper = shallowWithIntl(<MessageBarMessage {...props} />);
+    const context = { config: { showAlertHeader: true } };
+    const wrapper = shallowWithIntl(<MessageBarMessage {...props} />, {
+      context,
+    });
     expect(wrapper.find(TruncatedMessage)).to.have.lengthOf(1);
   });
 });