Merge branch 'v3' into next

Author: hjvuor

.github/workflows/dev-pipeline.yml

@@ -239,6 +239,36 @@ jobs:
           name: sbom-artifact
           path: ${{ github.repository }}-${{ github.sha }}.json
 
+      - name: 'Az CLI login for central SBOM server'
+        uses: azure/login@v3
+        with:
+          client-id: ${{ secrets.SBOM_CLIENT_ID }}
+          tenant-id: ${{ secrets.SBOM_TENANT_ID }}
+          subscription-id: ${{ secrets.SBOM_SUBSCRIPTION_ID }}
+
+      - name: 'Send SBOM to central SBOM server'
+        if: github.ref == 'refs/heads/v3'
+        run: >-
+          az storage blob upload
+          --account-name ${{ secrets.SBOM_STORAGE_ACCOUNT_NAME }}
+          --container-name sbom-ingest
+          --file ${{ github.repository }}-${{ github.sha }}.json
+          --name ${{ secrets.SBOM_ENV_KEY_DEV_V3 }}/${{ github.sha }}.json
+          --auth-mode login
+          --overwrite true
+          
+      - name: 'Send SBOM to central SBOM server'
+        if: github.ref == 'refs/heads/next'
+        run: >-
+          az storage blob upload
+          --account-name ${{ secrets.SBOM_STORAGE_ACCOUNT_NAME }}
+          --container-name sbom-ingest
+          --file ${{ github.repository }}-${{ github.sha }}.json
+          --name ${{ secrets.SBOM_ENV_KEY_DEV_NEXT }}/${{ github.sha }}.json
+          --auth-mode login
+          --overwrite true
+          
+
   # This is only done when pushing to v3
   publish-npm:
     if: github.ref == 'refs/heads/v3'

app/component/itinerary/SettingsButton.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState, useCallback, useRef } from 'react';
+import cx from 'classnames';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Icon from '../Icon';
 import { isKeyboardSelectionEvent } from '../../util/browser';
@@ -36,19 +37,22 @@ export default function SettingsButton({ onToggleClick }) {
   const dismissPopover = useCallback(() => {
     // wait 1 second before dismissing to allow user to see the popover disappearing
     const timeoutId = setTimeout(() => {
+      setDialogState(dismissTarget);
       if (dismissTarget === 'setting-change-acknowledged') {
         setSettingChangeInfoDismissed(true);
       } else {
         setPersonalizationInfoDismissed(true);
       }
-      setDialogState(dismissTarget);
     }, 1000);
     return () => clearTimeout(timeoutId);
   }, []);
 
   let personalizationPopover;
   const personalizationEnabled = isPersonalizationEnabled(config, settings);
-  if (!isPersonalizationInfoDismissed && config.personalization) {
+  if (
+    !getDialogState('personalization-acknowledged', config) &&
+    config.personalization
+  ) {
     personalizationPopover = personalizationEnabled ? (
       <div>
         <div className="popover-header">
@@ -94,7 +98,14 @@ export default function SettingsButton({ onToggleClick }) {
         onKeyPress={e => isKeyboardSelectionEvent(e) && onToggleClick()}
         aria-label={label}
         title={label}
-        className="noborder cursor-pointer open-advanced-settings-window-button"
+        className={cx(
+          'noborder',
+          'cursor-pointer',
+          'open-advanced-settings-window-button',
+          {
+            'highlight-z-index': personalizationPopover,
+          },
+        )}
       >
         <div className="icon-holder">
           <Icon img="icon_settings" />

app/component/itinerary/TransitLeg.js

@@ -70,7 +70,7 @@ const filterNextLegs = l => {
 
 export default function TransitLeg({
   leg,
-  interliningLegs,
+  interliningLegs = [],
   index,
   mode,
   focusAction,

app/component/itinerary/search-settings.scss

@@ -209,6 +209,9 @@
   border-radius: 999px;
   background: #fff;
   position: relative;
+}
+
+.highlight-z-index {
   z-index: 1004;
 }
 

app/component/trafficnow/DisruptionBadge.js

@@ -25,7 +25,7 @@ const getIcon = variant => {
       return <Icon img="icon_info-circled" className="info" />;
     }
     case variant === AlertSeverityLevelType.Warning: {
-      return <Icon img="icon_alert-circled" className="warning" />;
+      return <Icon img="icon_caution_white_exclamation" className="warning" />;
     }
     case variant === AlertSeverityLevelType.Severe: {
       return <Icon img="icon_caution_white_exclamation" className="danger" />;

app/component/trafficnow/TrafficNow.js

@@ -17,6 +17,9 @@ import Filters from './filters/Filters';
 import { FilterContextProvider } from './filters/FiltersContext';
 import FiltersModal from './filters/FiltersModal';
 
+// defines the scroll position at which a drop shadow is applied to the header button on mobile
+const HEADER_HEIGHT = 320;
+
 const TrafficNow = () => {
   const {
     match: {
@@ -38,6 +41,16 @@ const TrafficNow = () => {
   const isMobileCanceledTripsView = !!mode && mobile;
   const isDetailsView = !!alertId;
 
+  const [top, setTop] = useState(true);
+
+  useEffect(() => {
+    const scrollHandler = () => {
+      setTop(window.scrollY <= HEADER_HEIGHT);
+    };
+    window.addEventListener('scroll', scrollHandler);
+    return () => window.removeEventListener('scroll', scrollHandler);
+  }, []);
+
   return (
     <div className="traffic-now design-system">
       {!isMobileCanceledTripsView && !(isDetailsView && mobile) && (
@@ -84,7 +97,12 @@ const TrafficNow = () => {
                     <Filters />
                   </div>
                 ) : (
-                  <div className="traffic-now__filters-button-container">
+                  <div
+                    className={cx(
+                      'traffic-now__filters-button-container',
+                      !top && 'scrolled',
+                    )}
+                  >
                     <FiltersModal
                       isOpen={showFiltersModal}
                       onClose={() => setShowFiltersModal(false)}

app/component/trafficnow/components/DisruptionStatus.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { DateTime } from 'luxon';
 import Icon from '../../Icon';
 import { getFormattedTimeDate } from '../../../util/timeUtils';
 import { useConfigContext } from '../../../configurations/ConfigContext';
@@ -24,9 +25,19 @@ export default function DisruptionStatus({
       ? active
       : now > effectiveStartDate * 1000 && now < effectiveEndDate * 1000;
 
+  // We want to hide start year when both dates are the current year
+  const hideStartYear =
+    effectiveStartDate &&
+    effectiveEndDate &&
+    DateTime.now().year === DateTime.fromSeconds(effectiveStartDate).year &&
+    DateTime.now().year === DateTime.fromSeconds(effectiveEndDate).year;
+
   const startDate =
     effectiveStartDate &&
-    getFormattedTimeDate(effectiveStartDate * 1000, DATE_FORMAT);
+    getFormattedTimeDate(
+      effectiveStartDate * 1000,
+      hideStartYear ? 'd.L.' : DATE_FORMAT,
+    );
   const endDate =
     effectiveEndDate &&
     getFormattedTimeDate(effectiveEndDate * 1000, DATE_FORMAT);

app/component/trafficnow/components/RouteBadgeGroup.js

@@ -32,7 +32,7 @@ const RouteBadgeGroup = ({
     <div className="badges__group">
       <Icon
         img={`icon_${mode}`}
-        className={mode}
+        className={cx(mode, isStop ? 'stop' : 'route')}
         height={2}
         width={2}
         iconScale={isStop ? STOP_SIGN_ICON_SCALE : NORMAL_ICON_SCALE}

app/component/trafficnow/filters/Filters.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@hsl-fi/button';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import ValidityPeriodFilter from './ValidityPeriodFilter';
 import { useFilterContext } from './FiltersContext';
 import { useBreakpoint } from '../../../util/withBreakpoint';
@@ -28,10 +27,6 @@ const Filters = ({ onApplyClick = undefined, onResetClick = () => {} }) => {
       id: 'vehicleModes',
       Component: VehicleModesFilter,
     },
-    {
-      id: 'separator-1',
-      Component: Separator,
-    },
     {
       id: 'validityPeriod',
       Component: ValidityPeriodFilter,
@@ -53,28 +48,23 @@ const Filters = ({ onApplyClick = undefined, onResetClick = () => {} }) => {
     }
   };
 
-  return (
-    <form
-      className={cx('traffic-now__filters', {
-        'traffic-now__filters-mobile': mobile,
-      })}
-    >
-      {components.map(({ id, Component }) => (
-        <Component key={id} filterId={id} />
-      ))}
+  const buttons = (
+    <>
       {onApplyClick && (
         <Button
           type="button"
           size="medium"
           fullWidth
           variant="blue"
-          value={intl.formatMessage({ id: 'traffic-now_filters_view-results' })}
+          value={intl.formatMessage({
+            id: 'traffic-now_filters_view-results',
+          })}
           onClick={onApplyClick}
         />
       )}
       <Button
         type="button"
-        size={mobile ? 'medium' : 'small'}
+        size="medium"
         disabled={
           JSON.stringify(selectedFilters) === JSON.stringify(DEFAULT_FILTERS)
         }
@@ -83,6 +73,24 @@ const Filters = ({ onApplyClick = undefined, onResetClick = () => {} }) => {
         value={intl.formatMessage({ id: 'clear-button-label' })}
         onClick={handleResetClick}
       />
+    </>
+  );
+
+  return mobile ? (
+    <div>
+      <form className="traffic-now__filters traffic-now__filters-mobile">
+        {components.map(({ id, Component }) => (
+          <Component key={id} filterId={id} />
+        ))}
+      </form>
+      <div className="traffic-now__filters-form-buttons">{buttons}</div>
+    </div>
+  ) : (
+    <form className="traffic-now__filters">
+      {components.map(({ id, Component }) => (
+        <Component key={id} filterId={id} />
+      ))}
+      {buttons}
     </form>
   );
 };

app/component/trafficnow/filters/FiltersModal.js

@@ -23,17 +23,21 @@ const FiltersModal = ({ isOpen, onClose }) => {
       })}
       onRequestClose={onClose}
       variant="large"
-      className="traffic-now traffic-now__modal"
+      className="traffic-now traffic-now__modal design-system"
     >
       <header className="traffic-now__modal-header bordered">
         <FormattedMessage id="filter" defaultMessage="Filter">
-          {msg => <h3 className="heading-xs">{msg}</h3>}
+          {msg => (
+            <h3 className="heading-xs traffic-now__modal-header__label">
+              {msg}
+            </h3>
+          )}
         </FormattedMessage>
         <button type="button" onClick={onClose}>
           <Icon
-            height={1.5}
-            width={1.5}
-            iconScale={0.4}
+            height={2.1}
+            width={2.1}
+            iconScale={0.5}
             img="icon_close"
             color="#007ac9"
             background={<IconBackground shape="circle" color="#ebf6fd" />}