Add button to change input value between input fields

backend/__init__.py

@@ -3,6 +3,8 @@
 from flask_cors import CORS
 from flask_restful import Api
 from requests_oauthlib import OAuth2Session
+import sentry_sdk
+from sentry_sdk.integrations.flask import FlaskIntegration
 
 from backend.config import EnvironmentConfig
 
@@ -15,6 +17,18 @@
 
 
 def create_app(config=EnvironmentConfig):
+
+    if config.SENTRY_BACKEND_DSN:
+        sentry_sdk.init(
+            dsn=EnvironmentConfig.SENTRY_BACKEND_DSN,
+            environment=EnvironmentConfig.SENTRY_ENVIRONMENT,
+            integrations=[FlaskIntegration()],
+            traces_sample_rate=1.0,
+            _experiments={
+                "profiles_sample_rate": 1.0,
+            },
+        )
+
     app = Flask(__name__)
     app.config.from_object(config)
     db.init_app(app)

backend/config.py

@@ -44,3 +44,7 @@ class EnvironmentConfig:
     OAUTH2_USER_INFO_URL = os.getenv("OAUTH2_USER_INFO_URL", None)
 
     APP_SECRET_KEY = os.getenv("APP_SECRET_KEY", None)
+
+    # Sentry configuration
+    SENTRY_BACKEND_DSN = os.getenv("SENTRY_BACKEND_DSN", None)
+    SENTRY_ENVIRONMENT = os.getenv("SENTRY_ENVIRONMENT", "development")

example.env

@@ -1,10 +1,9 @@
 # Backend App config
 API_DEBUG=1
-API_BASE_URL=
-MAPBOX_ACCESS_TOKEN=
 
 # Frontend App config
 API_BASE_URL=http://127.0.0.1:5000
+MAPBOX_ACCESS_TOKEN=
 
 # DATABASE CONNECTION PARAMETRS
 POSTGRES_DB=osm-localizer
@@ -25,3 +24,7 @@ OAUTH2_SCOPE=read_prefs write_api
 
 # Create a strong secret key
 APP_SECRET_KEY=secret
+
+# Sentry config
+# SENTRY_BACKEND_DSN="https://"
+# SENTRY_FRONTEND_DSN="https://"

frontend/.env.expand

@@ -3,3 +3,6 @@ REACT_APP_OAUTH_CLIENT_ID=$OAUTH2_CLIENT_ID
 REACT_APP_OAUTH_CLIENT_SECRET=$OAUTH2_CLIENT_SECRET
 REACT_APP_DEFAULT_CHANGESET_COMMENT=$DEFAULT_CHANGESET_COMMENT
 REACT_APP_API_BASE_URL=$API_BASE_URL
+
+REACT_APP_SENTRY_FRONTEND_DSN=$SENTRY_FRONTEND_DSN
+REACT_APP_SENTRY_ENVIRONMENT=$SENTRY_ENVIRONMENT

frontend/package.json

@@ -7,6 +7,8 @@
     "@emotion/styled": "^11.10.5",
     "@mapbox/mapbox-gl-draw": "^1.4.0",
     "@reduxjs/toolkit": "^1.9.3",
+    "@sentry/react": "^7.43.0",
+    "@sentry/tracing": "^7.43.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

frontend/src/components/tagEditor/editForm.js

@@ -5,22 +5,45 @@ import { useDetectClickOutside } from "react-detect-click-outside";
 import InputToolForm from "./inputToolForm";
 import TranslateComponent from "./translate";
 
-export const inputComponnent = (key, value) => {
+export const inputComponnent = (key, value, index, props, editTags) => {
   return (
-    <div className="input-group input-group-sm p-2" key={key}>
-      <span className="input-group-text sm" id={key}>
-        {key}
-      </span>
-      <Field
-        className="form-control form-control-sm"
-        name={key}
-        component="input"
-        initialValue={value ? value : ""}
-      />
+    <div className="d-flex" key={key}>
+      <div className="input-group input-group-sm p-2 flex-grow-1" >
+        <span className="input-group-text sm" id={key}>
+          {key}
+        </span>
+        <Field
+          className="form-control form-control-sm"
+          name={key}
+          component="input"
+          initialValue={value ? value : ""}
+        />
+      </div>
     </div>
   );
 };
 
+const range = (a, b, step)=>{
+    var A = [];
+    A[0] = a;
+    step = step || 1;
+    while(a+step <= b){
+        A[A.length]= a+= step;
+    }
+    return A
+}
+
+const ExchangeButton = ({topKey,buttomKey})=>{
+  return(
+      <span
+        className="btn btn-sm btn-light p-1 rounded"
+        onClick={(e) => { }}
+      >
+        <i className="fa fa-exchange fa-rotate-90"></i>
+      </span>
+  )
+}
+
 const SkipDropdown = (props) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const ref = useDetectClickOutside({
@@ -102,6 +125,8 @@ export function TagEditorForm(props) {
     return changedKeys;
   };
 
+  console.log(range(1, (editTags.length)-1, 1))
+
   const onSubmitChange = (values) => {
     async function updateElement() {
       const changedKeys = detectChange(values);
@@ -137,10 +162,27 @@ export function TagEditorForm(props) {
               form.reset(props.element["tags"]);
             }}
           >
-            <div className="border border-secondary-subtle p-2 m-2 rounded">
-              {editTags.map((key) => {
-                return inputComponnent(key, props.element["tags"][key]);
-              })}
+            <div className="border border-secondary-subtle p-2 m-2 rounded d-flex">
+              <div className="flex-grow-1">
+                {editTags.map((tag, index) => {
+                  return inputComponnent(
+                    tag,
+                    props.element["tags"][tag],
+                    index,
+                    props,
+                    editTags
+                  );
+                })}
+              </div>
+              {/* Add button between two input fields to exchange value between them */}
+              <div className="d-flex justify-content-evenly flex-column">
+                {range(1, (editTags.length)-1, 1).map((index)=>{
+                  return(
+                    <ExchangeButton topKey={editTags[index-1]} buttomKey={editTags[index]} key={index} />
+                  )
+                })
+                }
+              </div>
             </div>
             <div className="border border-secondary-subtle rounded overflow-y-auto m-2 mb-1">
               {props.translateEngine ? (

frontend/src/config.js

@@ -8,3 +8,6 @@ export const DEFAULT_CHANGESET_COMMENT =
 export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL
   ? new URL("/api/", process.env.REACT_APP_API_BASE_URL)
   : "http://127.0.0.1:5000/api/";
+
+export const SENTRY_FRONTEND_DSN = process.env.REACT_APP_SENTRY_FRONTEND_DSN;
+export const SENTRY_ENVIRONMENT = process.env.REACT_APP_SENTRY_ENVIRONMENT;

frontend/src/index.js

@@ -1,12 +1,24 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
+import * as Sentry from "@sentry/react";
+import { BrowserTracing } from "@sentry/tracing";
 
 import "./index.css";
 import App from "./App";
 import store from "./store/store";
 import reportWebVitals from "./reportWebVitals";
 import "bootstrap/dist/css/bootstrap.min.css";
+import { SENTRY_FRONTEND_DSN, SENTRY_ENVIRONMENT } from "./config";
+
+if (SENTRY_FRONTEND_DSN) {
+  Sentry.init({
+    dsn: SENTRY_FRONTEND_DSN,
+    environment: SENTRY_ENVIRONMENT,
+    integrations: [new BrowserTracing()],
+    tracesSampleRate: 0.1,
+  });
+}
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

frontend/yarn.lock

@@ -1852,6 +1852,69 @@
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
+"@sentry/[email protected]":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.43.0.tgz#335f23ae020fc5be9aec2a89f65022e0e93d915f"
+  integrity sha512-NlRkBYKb9o5IQdGY8Ktps19Hz9RdSuqS1tlLC7Sjr+MqZqSHmhKq8MWJKciRynxBeMbeGt0smExi9BqpVQdCEg==
+  dependencies:
+    "@sentry/core" "7.43.0"
+    "@sentry/replay" "7.43.0"
+    "@sentry/types" "7.43.0"
+    "@sentry/utils" "7.43.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.43.0.tgz#c78e79399172738c96e3b388244258153c49215f"
+  integrity sha512-zvMZgEi7ptLBwDnd+xR/u4zdSe5UzS4S3ZhoemdQrn1PxsaVySD/ptyzLoGSZEABqlRxGHnQrZ78MU1hUDvKuQ==
+  dependencies:
+    "@sentry/types" "7.43.0"
+    "@sentry/utils" "7.43.0"
+    tslib "^1.9.3"
+
+"@sentry/react@^7.43.0":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.43.0.tgz#a81d57aae7bf6d02238c69b508861a52714ae141"
+  integrity sha512-HWt0Eh+Y+Z/g+PWgeYWT6+5B+J82gauQ0GydjGeHeeSpoZRPRwWAoRFh+NKM/pe3neVr59VCyn4ghyoE3kODGA==
+  dependencies:
+    "@sentry/browser" "7.43.0"
+    "@sentry/types" "7.43.0"
+    "@sentry/utils" "7.43.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.43.0.tgz#c77d5c6c4a3921cf67a58b69302ec4ea5eaa7fbe"
+  integrity sha512-2dGJS6p8uG1JZ7x/A3FyqnILTkXarbvfR+o1lC7z9lu34Wx0ZBeU2in/S2YHNGAE6XvfsePq3ya/s7LaNkk4qQ==
+  dependencies:
+    "@sentry/core" "7.43.0"
+    "@sentry/types" "7.43.0"
+    "@sentry/utils" "7.43.0"
+
+"@sentry/tracing@^7.43.0":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.43.0.tgz#0164e2754736976469cfbe6adcb8919ec8adbe41"
+  integrity sha512-Mld2AyV8xYnRLYbDWvDy8PlGcln3h5JsUx6ScQGOxnFTmCQR50Tldtzq50VDs2fv6xH0+YrL/UIyjxCDc7EXzQ==
+  dependencies:
+    "@sentry/core" "7.43.0"
+    "@sentry/types" "7.43.0"
+    "@sentry/utils" "7.43.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.43.0.tgz#e621257601e9db2a39cdd3bd75e67fe338ed51eb"
+  integrity sha512-5XxCWqYWJNoS+P6Ie2ZpUDxLRCt7FTEzmlQkCdjW6MFWOX26hAbF/wEuOTYAFKZXMIXOz0Egofik1e8v1Cg6/A==
+
+"@sentry/[email protected]":
+  version "7.43.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.43.0.tgz#ad16efb86b94ffe6dca2ed2b299d5230ba6d815b"
+  integrity sha512-f78YfMLcgNU7+suyWFCuQhQlneXXMS+egb0EFZh7iU7kANUPRX5T4b+0C+fwaPm5gA6XfGYskr4ZnzQJLOlSqg==
+  dependencies:
+    "@sentry/types" "7.43.0"
+    tslib "^1.9.3"
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz"
@@ -9091,7 +9154,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1:
+tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

pyproject.toml

@@ -28,6 +28,7 @@ dependencies = [
     "flask-restful>=0.3.9",
     "gunicorn>=20.1.0",
     "tornado>=6.2",
+    "sentry-sdk[flask]>=1.17.0",
 ]
 requires-python = ">=3.10"
 license = {text = "MIT"}