Release HAI.01.6

.eslintrc.js

@@ -28,7 +28,7 @@ module.exports = {
     'object-curly-spacing': ['warn', 'always'],
     'react/jsx-props-no-spreading': 'off',
     'import/prefer-default-export': 'off',
-    'react-hooks/exhaustive-deps': 'off',
+    'react-hooks/exhaustive-deps': 'warn',
     'no-underscore-dangle': ['error', { allow: ['__typename', '_env_'] }],
     'no-param-reassign': [
       'error',

.gitignore

@@ -27,6 +27,10 @@ package-lock.json
 public/env-config.js
 public/test-env-config.js
 
+# Generated Excel-sheet with translations and it's cache file
+locale_export.xlsx
+~$locale_export.xlsx
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

README.md

@@ -1,5 +1,8 @@
 # Haitaton UI
 
+Haitaton is a service owned by the city of Helsinki that supports the management and prediction of the adverse
+effects of projects taking place within the urban area.
+
 ## Requirements
 
 - Node 16.x
@@ -29,7 +32,7 @@ with `scripts/update-runtime-env.ts`, which contains the actual used variables w
 App is not using create-react-app's default `process.env` way to refer of variables
 but `window._env_` object.
 
-### 'yarn e2e'
+### `yarn e2e`
 
 Runs E2E cypress tests
 
@@ -82,7 +85,20 @@ the identification method in the local environment, edit the `.env` -file.
 
 Then either rebuild the docker container or run `yarn update-runtime-env` as discussed above.
 
-All cloud instances use Helsinki AD identification for now.
+In the cloud instances, dev uses Helsinki AD identification while others use Suomi.fi.
+
+## Excel for translations
+
+You can export an Excel-file with current translations. This can then be sent to translators.
+
+1. In the repository root, run the export script with `yarn locales:export`.
+2. The translations are written to `locale_export.xlsx`.
+
+After the translations are added to the Excel file, they can be imported back.
+
+1. Place the translated file inside repository root. It needs to be named `locale_export.xlsx`.
+2. Run the import script: `yarn locales:import`.
+3. The translations in `/src/locales` are updated.
 
 ## API mocking
 

cypress/integration/E2E.spec.ts

@@ -9,7 +9,6 @@ import {
   HankeDataDraft,
   HankeIndexData,
   HANKE_INDEX_TYPE,
-  HANKE_SUUNNITTELUVAIHE,
 } from '../../src/domain/types/hanke';
 import { createHankeFromUI } from '../utils/formFiller';
 import { validateIndexes } from '../utils/indexValidator';
@@ -68,15 +67,14 @@ const hankeMock: HankeDataDraft = {
   ],
   tyomaaKatuosoite: 'Mannerheimintie 14',
   vaihe: HANKE_VAIHE.SUUNNITTELU,
-  suunnitteluVaihe: HANKE_SUUNNITTELUVAIHE.KATUSUUNNITTELU_TAI_ALUEVARAUS,
   omistajat: [
     {
       id: null, // not used but types require it
       nimi: 'Harri Hankettaja',
       email: '[email protected]',
       puhelinnumero: '12341234',
       tyyppi: 'YKSITYISHENKILO',
-      ytunnusTaiHetu: 'tunnus',
+      ytunnus: 'tunnus',
     },
   ],
 };
@@ -87,7 +85,8 @@ const hankeMockIndex: Partial<HankeIndexData> = {
     tyyppi: HANKE_INDEX_TYPE.PERUSINDEKSI,
   },
   pyorailyIndeksi: 3,
-  joukkoliikenneIndeksi: 4,
+  raitiovaunuIndeksi: 4,
+  linjaautoIndeksi: 3,
   perusIndeksi: 4.8,
 };
 

cypress/utils/formFiller.ts

@@ -13,43 +13,17 @@ import {
   HANKE_TARINAHAITTA_KEY,
   HANKE_VAIHE,
   HankeDataDraft,
-  HANKE_SUUNNITTELUVAIHE,
   HANKE_VAIHE_KEY,
-  HANKE_SUUNNITTELUVAIHE_KEY,
 } from '../../src/domain/types/hanke';
 
-export const selectHankeVaihe = (
-  vaihe: HANKE_VAIHE_KEY,
-  suunnitteluVaihe?: HANKE_SUUNNITTELUVAIHE_KEY
-) => {
+export const selectHankeVaihe = (vaihe: HANKE_VAIHE_KEY) => {
   cy.get('#vaihe-toggle-button').click();
   switch (vaihe) {
     case HANKE_VAIHE.OHJELMOINTI:
       cy.get('#vaihe-item-0').click();
       break;
     case HANKE_VAIHE.SUUNNITTELU:
       cy.get('#vaihe-item-1').click();
-      if (suunnitteluVaihe) {
-        cy.get('#suunnitteluVaihe-toggle-button').click();
-        switch (suunnitteluVaihe) {
-          case HANKE_SUUNNITTELUVAIHE.YLEIS_TAI_HANKE:
-            cy.get('#suunnitteluVaihe-item-0').click();
-            break;
-          case HANKE_SUUNNITTELUVAIHE.KATUSUUNNITTELU_TAI_ALUEVARAUS:
-            cy.get('#suunnitteluVaihe-item-1').click();
-            break;
-          case HANKE_SUUNNITTELUVAIHE.RAKENNUS_TAI_TOTEUTUS:
-            cy.get('#suunnitteluVaihe-item-2').click();
-            break;
-          case HANKE_SUUNNITTELUVAIHE.TYOMAAN_TAI_HANKKEEN_AIKAINEN:
-            cy.get('#suunnitteluVaihe-item-3').click();
-            break;
-          default:
-            break;
-        }
-      } else {
-        throw new Error('Tämä testin vaihe tarvitsee suunnitteluvaiheen');
-      }
       break;
     case HANKE_VAIHE.RAKENTAMINEN:
       cy.get('#vaihe-item-2').click();
@@ -69,10 +43,7 @@ export const fillForm0 = (hankeData: HankeDataDraft) => {
   }
   cy.get('input[data-testid=nimi]').click();
 
-  selectHankeVaihe(
-    hankeData.vaihe,
-    hankeData.suunnitteluVaihe ? hankeData.suunnitteluVaihe : undefined
-  );
+  selectHankeVaihe(hankeData.vaihe);
 
   if (hankeData.onYKTHanke) {
     cy.get('input[data-testid=onYKTHanke]').click();

cypress/utils/indexValidator.ts

@@ -5,17 +5,18 @@ export const validateIndexes = (hankeIndexData: Partial<HankeIndexData>) => {
   if (hankeIndexData.liikennehaittaIndeksi && hankeIndexData.liikennehaittaIndeksi.indeksi) {
     cy.get('[data-testid=test-liikennehaittaIndeksi]').should('not.be.empty');
     cy.get('[data-testid=test-liikennehaittaIndeksi]').contains(
-      hankeIndexData.liikennehaittaIndeksi.indeksi
+      hankeIndexData.liikennehaittaIndeksi.indeksi,
     );
   }
   if (hankeIndexData.pyorailyIndeksi) {
     cy.get('[data-testid=test-pyorailyIndeksi]').should('not.be.empty');
     cy.get('[data-testid=test-pyorailyIndeksi]').contains(hankeIndexData.pyorailyIndeksi);
   }
-  if (hankeIndexData.joukkoliikenneIndeksi) {
-    cy.get('[data-testid=test-joukkoliikenneIndeksi]').contains(
-      hankeIndexData.joukkoliikenneIndeksi
-    );
+  if (hankeIndexData.raitiovaunuIndeksi) {
+    cy.get('[data-testid=test-raitiovaunuIndeksi]').contains(hankeIndexData.raitiovaunuIndeksi);
+  }
+  if (hankeIndexData.linjaautoIndeksi) {
+    cy.get('[data-testid=test-linjaautoIndeksi]').contains(hankeIndexData.linjaautoIndeksi);
   }
   if (hankeIndexData.perusIndeksi) {
     cy.get('[data-testid=test-ruuhkautumisIndeksi]').contains(hankeIndexData.perusIndeksi);

package.json

@@ -13,7 +13,7 @@
     "build-and-serve": "yarn run build && yarn run serve",
     "update-runtime-env": "ts-node -P ./scripts/tsconfig.json --files scripts/update-runtime-env.ts",
     "test": "TEST=true yarn run update-runtime-env && DEBUG_PRINT_LIMIT=50000 react-scripts test",
-    "testCI": "CI=true react-scripts test",
+    "testCI": "TEST=true yarn run update-runtime-env && CI=TRUE DEBUG_PRINT_LIMIT=50000 react-scripts test",
     "eject": "react-scripts eject",
     "type-check": "tsc --pretty --noEmit",
     "format": "prettier --write",
@@ -79,7 +79,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.35.0",
+    "react-hook-form": "^7.47.0",
     "react-i18next": "^12.0.0",
     "react-query": "^3.39.2",
     "react-redux": "^8.0.5",

public/mockServiceWorker.js

@@ -120,7 +120,7 @@ self.addEventListener('fetch', function (event) {
         console.warn(
           '[MSW] Successfully emulated a network error for the "%s %s" request.',
           request.method,
-          request.url
+          request.url,
         );
         return;
       }
@@ -131,9 +131,9 @@ self.addEventListener('fetch', function (event) {
 [MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
         request.method,
         request.url,
-        `${error.name}: ${error.message}`
+        `${error.name}: ${error.message}`,
       );
-    })
+    }),
   );
 });
 

src/common/components/app/App.tsx

@@ -10,13 +10,15 @@ import theme from './theme';
 import { GlobalNotificationProvider } from '../globalNotification/GlobalNotificationContext';
 import GlobalNotification from '../globalNotification/GlobalNotification';
 import { FeatureFlagsProvider } from '../featureFlags/FeatureFlagsContext';
+import ScrollToTop from '../scrollToTop/ScrollToTop';
 import './app.scss';
 import '../../../assets/styles/reset.css';
 
 const queryClient = new QueryClient();
 
 const App: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Router>
+    <ScrollToTop />
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>

src/common/components/footer/Footer.tsx

@@ -19,7 +19,7 @@ function HaitatonFooter() {
         <Footer.Item as={Link} to={ACCESSIBILITY.path} label={ACCESSIBILITY.label} />
         <Footer.Item as={Link} to={PRIVACY_POLICY.path} label={PRIVACY_POLICY.label} />
       </Footer.Navigation>
-      <Footer.Base copyrightHolder="Helsingin kaupunki" />
+      <Footer.Base copyrightHolder="Helsingin kaupunki, OpenStreetMap contributors" />
     </Footer>
   );
 }

src/common/components/radiobutton/BooleanRadioButton.tsx

@@ -15,7 +15,7 @@ type Props<T extends FieldValues> = {
  */
 const BooleanRadioButton = <T extends FieldValues>({ name, id, label, value }: Props<T>) => {
   const {
-    field: { onChange, onBlur, value: inputValue },
+    field: { onChange, onBlur, value: inputValue, ref },
   } = useController({ name });
 
   return (
@@ -30,6 +30,7 @@ const BooleanRadioButton = <T extends FieldValues>({ name, id, label, value }: P
       value={value.toString()}
       checked={value === inputValue}
       data-testid={id}
+      ref={ref}
     />
   );
 };

src/common/components/scrollToTop/ScrollToTop.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Scroll to top of document when URL pathname changes
+ */
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}

src/common/components/textArea/TextArea.tsx

@@ -36,7 +36,7 @@ const TextArea: React.FC<Props> = ({
       control={control}
       defaultValue=""
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => {
+      render={({ field: { onChange, onBlur, value, ref }, fieldState: { error } }) => {
         return (
           <HdsTextArea
             id={name}
@@ -53,6 +53,7 @@ const TextArea: React.FC<Props> = ({
             required={required}
             disabled={disabled}
             errorText={getInputErrorText(t, error)}
+            ref={ref}
           />
         );
       }}

src/common/components/textInput/TextInput.tsx

@@ -9,6 +9,7 @@ import { getInputErrorText } from '../../utils/form';
 type PropTypes = {
   name: string;
   label?: string;
+  maxLength?: number | undefined;
   disabled?: boolean;
   required?: boolean;
   readOnly?: boolean;
@@ -23,6 +24,7 @@ type PropTypes = {
 const TextInput: React.FC<React.PropsWithChildren<PropTypes>> = ({
   name,
   label,
+  maxLength = undefined,
   disabled,
   tooltip,
   required,
@@ -48,6 +50,7 @@ const TextInput: React.FC<React.PropsWithChildren<PropTypes>> = ({
           className={className}
           label={label || t(`hankeForm:labels:${name}`)}
           value={value || ''}
+          maxLength={maxLength}
           helperText={helperText}
           placeholder={placeholder}
           errorText={getInputErrorText(t, error)}

src/common/routes/LocaleRoutes.tsx

@@ -22,6 +22,7 @@ import EditJohtoselvitysPage from '../../pages/EditJohtoselvitysPage';
 import NotFoundPage from '../../pages/staticPages/404Page';
 import ManualPage from '../../pages/staticPages/ManualPage';
 import AccessRightsPage from '../../pages/AccessRightsPage';
+import UserIdentify from '../../domain/auth/components/UserIdentify';
 
 const LocaleRoutes = () => {
   const { t } = useTranslation();
@@ -74,6 +75,7 @@ const LocaleRoutes = () => {
       <Route path={t('routes:REFERENCES:path')} element={<ReferencesPage />} />
       <Route path={t('routes:PRIVACY_POLICY:path')} element={<PrivacyPolicyPage />} />
       <Route path={t('routes:MANUAL:path')} element={<ManualPage />} />
+      <Route path={t('routes:IDENTIFY_USER:path')} element={<UserIdentify />} />
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
   );