Merge branch 'feature/fetch-replay-tool-status' into develop

Author: tnagorra

config/webpack.dev.js

@@ -83,6 +83,7 @@ module.exports = (env) => {
             host: '0.0.0.0',
             port: 3050,
             overlay: true,
+            disableHostCheck: true,
             watchOptions: {
                 ignored: /node_modules/,
             },

package.json

@@ -150,6 +150,9 @@
         "@togglecorp/fujs": "^1.8.0",
         "@togglecorp/ravl": "^1.2.3",
         "@togglecorp/react-rest-request": "^2.5.0-beta.2",
+        "@turf/nearest-point-to-line": "^6.0.0",
+        "@turf/point-to-line-distance": "^6.0.0",
+        "@turf/turf": "^5.1.6",
         "core-js": "3",
         "hoist-non-react-statics": "^3.3.0",
         "immer": "^3.2.0",

src/Root/App/Multiplexer/styles.scss

@@ -20,8 +20,17 @@
 
     .button-primary {
         background-color: var(--color-primary)!important;
-        color: var(--color-text-on-primary)!important;
         padding: var(--spacing-small) var(--spacing-medium)!important;
+        color: var(--color-text-on-primary)!important;
+
+        .tc-v2-button-spinner {
+            color: var(--color-text-on-primary)!important;
+        }
+
+        &:disabled {
+            background-color: var(--color-background-disabled)!important;
+            color: var(--color-text-disabled)!important;
+        }
     }
 }
 

src/components/TextOutput/index.tsx

@@ -13,6 +13,10 @@ interface Props {
 }
 
 class TextOutput extends React.PureComponent<Props> {
+    static defaultProps = {
+        value: '-',
+    };
+
     public render() {
         const {
             className,

src/constants/routeSettings.ts

@@ -42,14 +42,12 @@ const routeSettings: SomeRoute[] = [
         load: () => import('../views/ConflictResolution'),
         navbar: true,
     },
-
     {
         name: 'fourHundredThree',
         title: '403',
         path: '/403/',
         load: () => import('../views/FourHundredThree'),
     },
-
     {
         name: 'fourHundredFour',
         title: '404',

src/constants/types.ts

@@ -1,7 +1,21 @@
-export type ResolutionStatus = 'conflicted' | 'resolved' | 'partially-resolved';
-export type ElementType = 'point' | 'line' | 'area';
+import { Feature, Geometry } from '@turf/turf';
+
+export type ResolutionStatus = 'unresolved' | 'resolved' | 'partially_resolved';
+export type ElementType = 'node' | 'way' | 'relation';
+export type ShapeType = 'point' | 'line' | 'area';
 export type Bounds = [number, number, number, number];
 
+interface ElementProperties {
+    id: number;
+    version: number;
+    tags: Tags;
+    location?: unknown;
+    conflictingNodes?: unknown;
+}
+
+export type ElementGeoJSON = GeoJSON.Feature<GeoJSON.Geometry, ElementProperties>;
+//     | GeoJSON.FeatureCollection<GeoJSON.Geometry, ElementProperties>;
+
 interface Meta {
     id: number;
     version: number;
@@ -16,22 +30,34 @@ export interface Tags {
     [key: string]: string | undefined;
 }
 
+/*
 export interface Content {
     meta: Meta;
     tags: Tags;
     bounds: Bounds;
-    geoJSON?: GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>;
+    geoJSON?: ElementGeoJSON;
 }
+*/
 
-export interface ConflictElement {
-    id: string;
-    title: string;
-    resolutionStatus: ResolutionStatus;
+export interface BasicConflictElement {
+    elementId: number;
+    id: number;
+    name: string;
     type: ElementType; // IDK about this
+    status: ResolutionStatus;
+}
 
-    original: Content;
-    theirs?: Content;
-    ours?: Content;
+export interface ConflictElement extends BasicConflictElement {
+    originalGeojson: ElementGeoJSON;
+    localGeojson?: ElementGeoJSON;
+    upstreamGeojson?: ElementGeoJSON;
+    resolvedData: {
+        id: number;
+        tags?: Tags;
+        location?: unknown;
+        conflictingNodes?: unknown;
+    };
+    resolvedFrom: 'theirs' | 'ours' | 'custom' | null;
 }
 
 // For nodes:

src/declarations/png.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const value: any;
+    export = value;
+}

src/request.ts

@@ -3,17 +3,34 @@ import {
     methods,
     CoordinatorAttributes,
 } from '@togglecorp/react-rest-request';
-// import { AppState } from '#store/types';
 
-// import store from '#store';
 import schema from '#schema';
 import { sanitizeResponse } from '#utils/common';
 
 const wsEndpoint = process.env.REACT_APP_API_SERVER_URL;
 
-// FIXME: don't know why eslint disable is required right now
-// eslint-disable-next-line arrow-parens
-export const createConnectedRequestCoordinator = <OwnProps>() => {
+const disableSchemaError = true;
+
+export const getCookie = (name: string) => {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+
+    if (parts.length === 2) {
+        const part = parts.pop();
+        return part && part.split(';').shift();
+    }
+    return undefined;
+};
+
+interface Error {
+    errors?: {
+        nonFieldErrors?: string[];
+        internalNonFieldErrors?: string[];
+        [key: string]: string[] | undefined;
+    };
+}
+
+export function createConnectedRequestCoordinator<OwnProps>() {
     type Props = OwnProps;
 
     const requestor = createRequestCoordinator({
@@ -22,23 +39,21 @@ export const createConnectedRequestCoordinator = <OwnProps>() => {
                 body,
                 method,
             } = data;
+
+            const csrftoken = getCookie('csrftoken');
             return {
                 method: method || methods.GET,
                 body: JSON.stringify(body),
                 headers: {
                     Accept: 'application/json',
                     'Content-Type': 'application/json; charset=utf-8',
+                    'X-CSRFToken': csrftoken,
                 },
+                credentials: 'include',
             };
         },
+        // NOTE: we can inject props here
         transformProps: (props: Props) => props,
-        /*
-        transformProps: (props: Props) => {
-            const mapStyle = mapStyleSelector(store.getState() as AppState);
-            // console.warn('Map style is', mapStyle);
-            return props;
-        },
-        */
 
         transformUrl: (url: string) => {
             if (/^https?:\/\//i.test(url)) {
@@ -59,7 +74,7 @@ export const createConnectedRequestCoordinator = <OwnProps>() => {
             const extras = requestOptions as { schemaName?: string };
             if (!extras || extras.schemaName === undefined) {
                 // NOTE: usually there is no response body for DELETE
-                if (method !== methods.DELETE) {
+                if (method !== methods.DELETE && !disableSchemaError) {
                     console.error(`Schema is not defined for ${url} ${method}`);
                 }
             } else {
@@ -74,16 +89,21 @@ export const createConnectedRequestCoordinator = <OwnProps>() => {
             return sanitizedResponse;
         },
 
-        transformErrors: (response: { errors: string[] }) => {
-            const faramErrors = response.errors;
+        transformErrors: (response: Error) => {
+            // eslint-disable-next-line @typescript-eslint/camelcase
+            const { non_field_errors, ...faramErrors } = response.errors || {};
+            // eslint-disable-next-line @typescript-eslint/camelcase
+            const nonFieldErrors = non_field_errors ? non_field_errors.join(' ') : undefined;
+
             return {
                 response,
                 faramErrors,
+                nonFieldErrors,
             };
         },
     });
 
     return requestor;
-};
+}
 
 export * from '@togglecorp/react-rest-request';

src/utils/common.ts

@@ -13,16 +13,18 @@ export const forEach = (obj: object, func: (key: string, val: unknown) => void)
 
 export const sanitizeResponse = (data: unknown): any => {
     if (data === null || data === undefined) {
-        return undefined;
+        return data;
     }
     if (isList(data)) {
-        return data.map(sanitizeResponse).filter(isDefined);
+        return data
+            .map(sanitizeResponse)
+            .filter(item => item !== undefined);
     }
     if (isObject(data)) {
         let newData = {};
         forEach(data, (k, val) => {
             const newEntry = sanitizeResponse(val);
-            if (newEntry) {
+            if (newEntry !== undefined) {
                 newData = {
                     ...newData,
                     [k]: newEntry,