Update urls.py (url -> re_path)

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', {runtime: 'automatic',},],
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
+};

omero_forms/urls.py

@@ -1,68 +1,68 @@
-from django.conf.urls import url
+from django.urls import re_path
 from . import views
 
 urlpatterns = [
     # Designer App
-    url(r"^designer/$", views.designer, name="omeroforms_designer"),
+    re_path(r"^designer/$", views.designer, name="omeroforms_designer"),
     # API
-    url(r"^$", lambda x: None, name="omeroforms_base"),
+    re_path(r"^$", lambda x: None, name="omeroforms_base"),
     # List all forms
-    url(r"^list_forms/$", views.list_forms, name="omeroforms_list_forms"),
+    re_path(r"^list_forms/$", views.list_forms, name="omeroforms_list_forms"),
     # List the forms that are assigned to the user's active group that
     # apply to the object type
-    url(
+    re_path(
         r"^list_applicable_forms/(?P<obj_type>\w+)/$",
         views.list_applicable_forms,
         name="omeroforms_list_applicable_forms",
     ),
     # Get a form (latest version)
-    url(r"^get_form/(?P<form_id>[\w ]+)/$", views.get_form, name="omeroforms_get_form"),
+    re_path(r"^get_form/(?P<form_id>[\w ]+)/$", views.get_form, name="omeroforms_get_form"),
     # Get data for a form (latest version) for a certain object
-    url(
+    re_path(
         r"^get_form_data/"
         r"(?P<form_id>[\w ]+)/(?P<obj_type>\w+)/(?P<obj_id>[\w ]+)/$",
         views.get_form_data,
         name="omeroforms_get_form_data",
     ),
     # Get assignments (restricted to those the user can unassign)
-    url(
+    re_path(
         r"get_form_assignments/$",
         views.get_form_assignments,
         name="omeroforms_get_form_assignments",
     ),
     # Get the entire history of a form including all data and the forms used
     # to enter that data
-    url(
+    re_path(
         r"^get_form_data_history/"
         r"(?P<form_id>[\w ]+)/(?P<obj_type>\w+)/(?P<obj_id>[\w ]+)/$",
         views.get_form_data_history,
         name="omeroforms_get_form_data_history",
     ),
     # Get groups that the user can manage
-    url(
+    re_path(
         r"^get_managed_groups/$",
         views.get_managed_groups,
         name="omeroforms_get_managed_groups",
     ),
     # Lookup usernames by uid
-    url(r"^get_users/$", views.get_users, name="omeroforms_get_users"),
+    re_path(r"^get_users/$", views.get_users, name="omeroforms_get_users"),
     # Check form id ownership
-    url(
+    re_path(
         r"^get_formid_editable/(?P<form_id>[\w ]+)/$",
         views.get_formid_editable,
         name="omeroforms_get_formid_editable",
     ),
     # Save a form version (potentially a new form)
-    url(r"^save_form/$", views.save_form, name="omeroforms_save_form"),
+    re_path(r"^save_form/$", views.save_form, name="omeroforms_save_form"),
     # Save data for a form
-    url(
+    re_path(
         r"^save_form_data/"
         r"(?P<form_id>[\w ]+)/(?P<obj_type>\w+)/(?P<obj_id>[\w ]+)/$",
         views.save_form_data,
         name="omeroforms_save_form_data",
     ),
     # Save a form assignment
-    url(
+    re_path(
         r"^save_form_assignment/$",
         views.save_form_assignment,
         name="omeroforms_save_form_assignment",

package.json

@@ -3,33 +3,57 @@
   "version": "1.1.0",
   "description": "",
   "main": "bundle.js",
+  "babel": {
+    "presets": [
+      "react",
+      "env",
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "./node_modules/webpack/bin/webpack.js --progress"
   },
   "author": "Douglas P.W. Russell",
   "license": "MIT",
-  "devDependencies": {
-    "babel-core": "^6.4.5",
-    "babel-loader": "^6.2.2",
+  "dependencies": {
+    "@babel/core": "^7.23.2",
+    "@babel/cli": "^7.23.0",
+    "babel-loader": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.23.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-proposal-function-sent": "^7.22.5",
+    "@babel/plugin-proposal-json-strings": "^7.18.6",
+    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-proposal-throw-expressions": "^7.22.5",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "babel-plugin-transform-runtime": "^6.8.0",
     "babel-polyfill": "^6.5.0",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-2": "^6.13.0",
-    "babel-runtime": "^6.5.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/runtime": "^7.23.2",
+    "codemirror": "^5.57.0",
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.5",
-    "react": "^15.1.0",
-    "react-bootstrap": "^0.30.5",
-    "react-codemirror": "^0.2.6",
-    "react-dom": "^15.1.0",
-    "react-jsonschema-form": "^0.33.2",
+    "path": "^0.12.7",
+    "react": "^16.14.0",
+    "react-bootstrap": "^2.9.0",
+    "react-codemirror2": "^7.3.0",
+    "react-dom": "^16.14.0",
+    "@rjsf/core": "^5.13.4",
+    "@rjsf/utils": "^5.13.4",
+    "@rjsf/validator-ajv8": "^5.13.4",
+    "react-scripts": "^5.0.1",
     "react-select": "^1.0.0-rc",
-    "react-tooltip": "^2.0.3",
+    "react-tooltip": "^4.5.1",
     "style-loader": "^0.13.0",
+    "terser-webpack-plugin":"^4.2.3",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.13",
-    "whatwg-fetch": "^1.0.0"
+    "webpack": "^4.47.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "whatwg-fetch": "^3.6.19"
   }
 }

src/Forms.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Select from 'react-select';
-import Form from "react-jsonschema-form";
+import Form from '@rjsf/core';
 
 function compareFormData(d1, d2) {
   // No previous data

src/History.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Select from 'react-select';
-import Form from "react-jsonschema-form";
+import Form from '@rjsf/core';
 
 const padDate = v => {
   return v < 10 ? '0' + v : v

src/designer-editor.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import Codemirror from 'react-codemirror';
+import CodeMirror from 'react-codemirror2';
 import Select from 'react-select';
 import 'codemirror/mode/javascript/javascript';
-import { shouldRender } from 'react-jsonschema-form/lib/utils';
+import { shouldRender } from "@rjsf/core/lib/utils";
 import defaultData from './designer-default';
 const samples = {};
-import Form from 'react-jsonschema-form';
+import Form from '@rjsf/core';
 import { Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock, Checkbox } from 'react-bootstrap'
 
 // Patching CodeMirror#componentWillReceiveProps so it's executed synchronously
 // Ref https://github.com/mozilla-services/react-jsonschema-form/issues/174
-Codemirror.prototype.componentWillReceiveProps = function (nextProps) {
+CodeMirror.prototype.componentWillReceiveProps = function (nextProps) {
   if (this.codeMirror &&
       nextProps.value !== undefined &&
       this.codeMirror.getValue() != nextProps.value) {

webpack.config.js

@@ -1,6 +1,6 @@
 // webpack.config.js
 var webpack = require('webpack');
-
+const TerserPlugin = require("terser-webpack-plugin");
 var path = require('path');
 
 module.exports = {
@@ -10,65 +10,100 @@ module.exports = {
     'designer': ['whatwg-fetch', './src/designer.jsx'],
     'designer.min': ['whatwg-fetch', './src/designer.jsx'],
   },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
   output: {
-    path: './omero_forms/static/forms/js',
+    path: __dirname + '/omero_forms/static/forms/js',
     filename: '[name].js',
     library: 'omeroforms'
   },
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      include: /\.min\.js$/,
-      minimize: true
-    })
-  ],
+  plugins: [],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
-        query: {
+        options: {
           plugins: ['transform-runtime'],
-          presets: ['react', 'es2015', 'stage-2']
+          presets: ['@babel/react', '@babel/env']
         }
       },
       {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
-        query: {
+        options: {
           plugins: ['transform-runtime'],
-          presets: ['es2015', 'stage-2']
+          presets: ['@babel/env']
         }
       },
       {
         test: /\.css$/, // Only .css files
-        loader: 'style-loader!css-loader' // Run both loaders
+        use: ['style-loader', 'css-loader'], // Run both loaders
       },
-      { test: /\.png$/,
-        loader: "url-loader?limit=100000"
+      { 
+        test: /\.png$/,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 100000,
+            },
+          },
+        ],
       },
 
       // Bootstrap
       {
         test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url?limit=10000&mimetype=application/font-woff'},
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              mimetype: 'application/font-woff',
+            },
+          },
+        ],
+      },
       {
         test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url?limit=10000&mimetype=application/octet-stream'
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              mimetype: 'application/octet-stream',
+            },
+          },
+        ],
       },
       {
         test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file'
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
       },
       {
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url?limit=10000&mimetype=image/svg+xml'
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              mimetype: 'image/svg+xml',
+            },
+          },
+        ],
       }
-
     ]
   },
   resolve: {
-    extensions: ['', '.js', '.jsx', '.json']
+    extensions: ['.js', '.jsx', '.json']
   },
 };