Release/v1.7.0

.eslintrc.js

@@ -69,6 +69,7 @@ module.exports = {
     'no-console': 1,
     'no-unused-vars': 2,
     'no-use-before-define': 0,
+    'object-curly-spacing': [1, 'always'],
     'prefer-template': 2,
     'react/destructuring-assignment': 0,
     'react-hooks/exhaustive-deps': 'warn',

.prettierrc

@@ -5,5 +5,5 @@
   "singleQuote": true,
   "parser": "babel",
   "htmlWhitespaceSensitivity": "strict",
-  "printWidth": 80
+  "printWidth": 120
 }

docs/adr/0001-fetching-incidents.md

@@ -1,7 +1,8 @@
-# Architectural decision records
+# Fetching incidents
 
-## Fetching incidents
+date: 2020-01-15
 
+## Context
 In the Signals frontend application, two different endpoints provide data that can be used to render an overview of incidents.
 
 The first one is the [private signals endpoint](https://api.data.amsterdam.nl/api/swagger/?url=/signals/swagger/openapi.yaml#/default/get_signals_v1_private_signals_), the second is the private search endpoint. Both return the same data structure, but expect/require different parameters.
@@ -27,29 +28,29 @@ In a number of occasions, a request is made to one of the private endpoints to r
    Every time the input for the `SearchBar` is submitted, the `SearchBar` container dispatches an action that trigger another fetch. The `submit` event triggers a redirect to the `IncidentManagement` module. See 1. for details.
 
    Component: `signals/containers/SearchBar`
-   
+
    Action: `setSearchQuery`
 
 4. **When a pagination item is clicked**
 
    If the incidents overview page renders a `Pagination` component, every click on a pagination item results in an action being dispatched. This action, in turn, triggers a fetch of results from either the `search` endpoint or the `signals` endpoint, depending on the presence of a search query.
 
    Component: `signals/IncidentManagement/containers/IncidentOverviewPage`
-   
+
    Action: `pageChanged`
 
 5. **When a column's order is changed**
 
    The incidents overview page shows a table with sortable columns. Clicking on a column header will dispatch an action. This action, similar to `pageChanged` will trigger a fetch of results from either the `search` endpoint or the `signals` endpoint.
 
    Component: `signals/IncidentManagement/containers/IncidentOverviewPage`
-   
+
    Action: `orderingChanged`
 
 6. **When an incident has been successfully patched**
 
    Individual incidents can be patched in the `IncidentDetail` container. Navigating back from the detail page to the overview page should show the changes that have been applied to the incident. Therefore, after the `patchIncidentSuccess` action has been dispatched, a new set of (updated) incidents is retrieved.
 
    Component: `signals/IncidentManagement/containers/IncidentDetail`
-   
+
    Action: `patchIncident`

docs/adr/0002-using-local-state-in-settings-module.md

@@ -0,0 +1,21 @@
+# Using local state in settings module
+
+Date: 2020-03-11
+
+## Status
+
+Accepted
+
+## Context
+
+Some of the data that is required by the application is only needed in specific modules. Till now, `redux` has been relied on heavily and most of times for good reason. Some data, however, is only needed in specific parts of the application, but is still stored in the global store or is kept in a reducer on a per-component basis.
+
+Different parts of the application have their own saga, reducer, actions and selectors which makes the application more difficult to understand, error prone and maintenance harder to keep up.
+
+Storing all data in the global store requires a lot of (duplicate) boilerplate code, tests and mocking.
+
+## Decision
+
+The structure of the application's state needs to reflect the data that is globally required. If specific data is only needed in specific parts of the application, that application's part should provide the data through a reducer and a context provider and not make use of the global (`redux`) store.
+
+Essentially, the entire application's state can be provided by a context provider, but for now we'll take the bottom-up approach and gradually refactor and introduce the reducer/context approach in favour of `redux` complexity.

src/components/SiteHeader/__tests__/SiteHeader.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, fireEvent, cleanup } from '@testing-library/react';
+import { render, fireEvent, cleanup, act } from '@testing-library/react';
 import MatchMediaMock from 'match-media-mock';
-import { act } from 'react-dom/test-utils';
+import 'jest-styled-components';
 
 import * as auth from 'shared/services/auth/auth';
 import { history, withAppContext } from 'test/utils';
@@ -25,7 +25,9 @@ describe('components/SiteHeader', () => {
   it('should render correctly when not authenticated', () => {
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
 
-    history.push('/');
+    act(() => {
+      history.push('/');
+    });
 
     const { container, rerender, queryByText } = render(
       withAppContext(<SiteHeader />)
@@ -50,17 +52,23 @@ describe('components/SiteHeader', () => {
       value: mmm,
     });
 
-    history.push('/manage');
+    act(() => {
+      history.push('/manage');
+    });
 
     rerender(withAppContext(<SiteHeader />));
 
     expect(queryByText('Melden')).toBeNull();
+
+    expect(container.querySelector('#header')).toHaveStyleRule('z-index: 2');
   });
 
   it('should render correctly when authenticated', () => {
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => true);
 
-    history.push('/');
+    act(() => {
+      history.push('/');
+    });
 
     const { container, queryByText } = render(withAppContext(<SiteHeader showItems={{ settings: true, users: true, groups: true }} />));
 
@@ -73,12 +81,16 @@ describe('components/SiteHeader', () => {
       1
     );
 
+    expect(container.querySelector('#header')).toHaveStyleRule('z-index: 2');
+
     cleanup();
 
     // narrow window toggle
     mmm.setConfig({ type: 'screen', width: breakpoint - 1 });
 
-    history.push('/manage');
+    act(() => {
+      history.push('/manage');
+    });
 
     render(withAppContext(<SiteHeader showItems={{ settings: true, users: true, groups: true }} />));
 
@@ -119,7 +131,9 @@ describe('components/SiteHeader', () => {
   it('should render a title', () => {
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
 
-    history.push('/');
+    act(() => {
+      history.push('/');
+    });
 
     const { queryByText } = render(withAppContext(<SiteHeader />));
 
@@ -132,7 +146,9 @@ describe('components/SiteHeader', () => {
 
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => true);
 
-    history.push('/');
+    act(() => {
+      history.push('/');
+    });
 
     render(withAppContext(<SiteHeader />));
 
@@ -143,7 +159,9 @@ describe('components/SiteHeader', () => {
 
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
 
-    history.push('/manage');
+    act(() => {
+      history.push('/manage');
+    });
 
     render(withAppContext(<SiteHeader />));
 
@@ -163,7 +181,9 @@ describe('components/SiteHeader', () => {
   it('should render a tall header', () => {
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
 
-    history.push('/');
+    act(() => {
+      history.push('/');
+    });
 
     const { container, rerender } = render(
       withAppContext(<SiteHeader location={{ pathname: '/' }} />)
@@ -185,7 +205,9 @@ describe('components/SiteHeader', () => {
 
     cleanup();
 
-    history.push('/manage');
+    act(() => {
+      history.push('/manage');
+    });
 
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => false);
 
@@ -237,7 +259,9 @@ describe('components/SiteHeader', () => {
   });
 
   it('should handle logout callback', () => {
-    history.push('/');
+    act(() => {
+      history.push('/');
+    });
 
     jest.spyOn(auth, 'isAuthenticated').mockImplementation(() => true);
 

src/components/SiteHeader/index.js

@@ -26,26 +26,28 @@ const StyledHeader = styled(HeaderComponent)`
   a:link {
     text-decoration: none;
   }
-  ${({ isFrontOffice, tall }) =>
-    isFrontOffice &&
-    tall &&
-    css`
+
+  ${({ isFrontOffice, tall }) => isFrontOffice && tall && css`
       & {
         max-width: 960px;
         h1 {
           margin-left: ${themeSpacing(-5)};
+          font-weight: 400;
         }
+
         h1 a {
           &,
           span {
             width: 153px;
           }
         }
+
         h1 a span {
           background-image: url(${svg.LogoShort}) !important;
         }
       }
-    `}
+  `}
+
   nav {
     width: 100%;
     ul {
@@ -86,9 +88,12 @@ const StyledSearchBar = styled(SearchBar)`
 `;
 
 const HeaderWrapper = styled.div`
-  z-index: 1;
   position: relative;
 
+  #header {
+    z-index: 2;
+  }
+
   ${({ tall }) =>
     !tall &&
     css`
@@ -104,7 +109,6 @@ const HeaderWrapper = styled.div`
     css`
       #header {
         position: relative;
-        z-index: 2;
 
         header {
           height: 160px;

src/models/incident/reducer.js

@@ -1,7 +1,6 @@
 import { fromJS } from 'immutable';
 
-import stadsdeelList from 'signals/incident-management/definitions/stadsdeelList';
-import priorityList from 'signals/incident-management/definitions/priorityList';
+import { stadsdeelList, priorityList, typesList } from 'signals/incident-management/definitions';
 import statusList, {
   changeStatusOptionList,
   defaultTextsOptionList,
@@ -54,6 +53,7 @@ export const initialState = fromJS({
     [PATCH_TYPE_LOCATION]: false,
   },
   split: false,
+  typesList,
 });
 
 function incidentModelReducer(state = initialState, action) {

src/shared/services/configuration/configuration.js

@@ -108,8 +108,12 @@ export class Configuration {
     return `${this.API_ROOT}signals/category/prediction`;
   }
 
-  get INCIDENT_ENDPOINT() {
-    return `${this.API_ROOT}signals/signal/`;
+  get INCIDENT_PUBLIC_ENDPOINT() {
+    return `${this.API_ROOT}signals/v1/public/signals/`;
+  }
+
+  get INCIDENT_PRIVATE_ENDPOINT() {
+    return `${this.API_ROOT}signals/v1/private/signals/`;
   }
 
   get INCIDENTS_ENDPOINT() {

src/shared/services/file-upload-channel/index.js

@@ -1,11 +1,7 @@
-import {
-  buffers,
-  eventChannel,
-  END,
-} from 'redux-saga';
-
-function fileUploadChannel(endpoint, file, id) {
-  return eventChannel(emitter => {
+import { buffers, eventChannel, END } from 'redux-saga';
+
+export default (endpoint, file, id) =>
+  eventChannel(emitter => {
     const formData = new window.FormData();
     formData.append('signal_id', id);
     formData.append('image', file);
@@ -52,6 +48,3 @@ function fileUploadChannel(endpoint, file, id) {
       xhr.abort();
     };
   }, buffers.sliding(2));
-}
-
-export default fileUploadChannel;

src/signals/incident-management/containers/IncidentDetail/components/MetaList/index.js

@@ -22,10 +22,11 @@ function getId(item) {
 
 const MetaList = ({
   incident,
-  subcategories,
-  priorityList,
-  onPatchIncident,
   onEditStatus,
+  onPatchIncident,
+  priorityList,
+  subcategories,
+  typesList,
 }) => {
   const children = get(incident, '_links.sia:children');
   const parent = get(incident, '_links.sia:parent');
@@ -86,6 +87,24 @@ const MetaList = ({
           </Highlight>
         )}
 
+        {incident.type && (
+          <Highlight
+            subscribeTo={incident.type.code}
+          >
+            <ChangeValue
+              component={RadioInput}
+              definitionClass="meta-list__definition"
+              display="Type"
+              incident={incident}
+              list={typesList}
+              onPatchIncident={onPatchIncident}
+              path="type.code"
+              type="type"
+              valueClass="meta-list__value"
+            />
+          </Highlight>
+        )}
+
         <Highlight subscribeTo={incident.category.sub_slug}>
           <ChangeValue
             display="Subcategorie"
@@ -217,11 +236,11 @@ const MetaList = ({
 
 MetaList.propTypes = {
   incident: incidentType.isRequired,
+  onEditStatus: PropTypes.func.isRequired,
+  onPatchIncident: PropTypes.func.isRequired,
   priorityList: dataListType.isRequired,
   subcategories: PropTypes.array.isRequired,
-
-  onPatchIncident: PropTypes.func.isRequired,
-  onEditStatus: PropTypes.func.isRequired,
+  typesList: dataListType.isRequired,
 };
 
 export default MetaList;