feat: init the JsonModal component

package.json

@@ -41,6 +41,7 @@
     "not IE 11"
   ],
   "dependencies": {
+    "@monaco-editor/react": "^4.5.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@terrestris/base-util": "^1.0.1",
     "@terrestris/mapfish-print-manager": "^10.0.0",

src/bootstrap.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 
+import {
+  loader
+} from '@monaco-editor/react';
+
 import {
   Alert,
   ConfigProvider,
@@ -564,6 +568,12 @@ const matchRole = (role: string | RegExp, element: string): boolean => {
 
 const renderApp = async () => {
   try {
+    loader.config({
+      paths: {
+        vs: './vs'
+      }
+    });
+
     const keycloak = await initKeycloak();
 
     if (keycloak) {

src/components/DisplayField/index.tsx

@@ -12,18 +12,22 @@ import {
   useTranslation
 } from 'react-i18next';
 
+import JsonModal from '../JsonModal';
+
 export type ValueType = string | number | boolean | moment.Moment;
 
 export type DisplayFieldProps = {
   format?: string;
   suffix?: string;
   value?: ValueType | ValueType[];
+  label?: string;
 };
 
 export const DisplayField: React.FC<DisplayFieldProps> = ({
   format = 'DD.MM.YYYY',
   suffix,
   value,
+  label,
   ...passThroughProps
 }): JSX.Element => {
 
@@ -53,6 +57,27 @@ export const DisplayField: React.FC<DisplayFieldProps> = ({
     displayText = value.join(', ');
   }
 
+  const isJson = (val: ValueType | ValueType[]): val is string => {
+    let v = typeof val !== 'string' ? JSON.stringify(val) : val;
+
+    try {
+      v = JSON.parse(v);
+    } catch (e) {
+      return false;
+    }
+
+    return typeof v === 'object' && v !== null;
+  };
+
+  if (value && isJson(value)) {
+    return (
+      <JsonModal
+        value={value}
+        label={label}
+      />
+    );
+  }
+
   return (
     <Typography.Text
       className="displayfield"

src/components/JsonModal/index.less

@@ -0,0 +1,5 @@
+.json-modal-button {
+  svg {
+    padding-right: 10px;
+  }
+}

src/components/JsonModal/index.spec.tsx

@@ -0,0 +1,9 @@
+import JsonModal from '.';
+
+describe('<JsonModal />', () => {
+
+  it('is defined', () => {
+    expect(JsonModal).toBeDefined();
+  });
+
+});

src/components/JsonModal/index.tsx

@@ -0,0 +1,109 @@
+import React, {
+  useState
+} from 'react';
+
+import {
+  faBoxOpen
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  FontAwesomeIcon
+} from '@fortawesome/react-fontawesome';
+
+import Editor from '@monaco-editor/react';
+
+import {
+  Button,
+  Modal,
+  ModalProps
+} from 'antd';
+
+import {
+  useTranslation
+} from 'react-i18next';
+
+import './index.less';
+
+export type ValueType = string | number | boolean | moment.Moment;
+
+export type JsonModalProps = {
+  value?: string;
+  label?: string;
+} & ModalProps ;
+
+export const JsonModal: React.FC<JsonModalProps> = ({
+  value,
+  label,
+  ...passThroughProps
+}): JSX.Element => {
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    t
+  } = useTranslation();
+
+  const onButtonClick = () => {
+    setIsOpen(true);
+  };
+
+  const onCancel = () => {
+    setIsOpen(false);
+  };
+
+  if (!value) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <Button
+        className='json-modal-button'
+        title={t('JsonModal.buttonTitle', {
+          propertyName: label
+        })}
+        onClick={onButtonClick}
+        icon={(
+          <FontAwesomeIcon
+            icon={faBoxOpen}
+          />
+        )}
+      >
+        {t('JsonModal.buttonTitle', {
+          propertyName: label
+        })}
+      </Button>
+      <Modal
+        open={isOpen}
+        onCancel={onCancel}
+        width={800}
+        title={label}
+        footer={false}
+        {...passThroughProps}
+      >
+        <Editor
+          height="500px"
+          language="json"
+          value={JSON.stringify(JSON.parse(value), null, '  ')}
+          options={{
+            automaticLayout: true,
+            readOnly: true,
+            lineNumbers: 'off',
+            scrollBeyondLastLine: false,
+            minimap: {
+              enabled: false
+            },
+            scrollbar: {
+              useShadows: false
+            },
+            showFoldingControls: 'always',
+            selectionHighlight: false,
+            renderLineHighlight: 'none',
+            occurrencesHighlight: false
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+
+export default JsonModal;

src/components/ToolMenu/FeatureInfo/FeatureInfoForm/index.tsx

@@ -38,27 +38,18 @@ export const FeatureInfoForm: React.FC<FeatureInfoFormProps> = ({
     form.setFieldsValue(feature.getProperties());
   }, [feature, form]);
 
-  const createFormItem = (fieldCfg: any) => {
-    let field: React.ReactNode;
-
-    const createReadOnlyComponent = (fieldConfig: any) => {
-      return (
-        <DisplayField
-          {...fieldConfig.fieldProps}
-        />
-      );
-    };
-
-    field = createReadOnlyComponent(fieldCfg);
-
+  const createFormItem = (fieldCfg: PropertyFormItemReadConfig) => {
     return (
       <Form.Item
         key={fieldCfg.propertyName}
         name={fieldCfg.propertyName}
         label={fieldCfg.displayName || fieldCfg.propertyName}
         {...fieldCfg.fieldProps}
       >
-        {field}
+        <DisplayField
+          label={fieldCfg.displayName || fieldCfg.propertyName}
+          {...fieldCfg.fieldProps}
+        />
       </Form.Item>
     );
   };

src/i18n/translations.ts

@@ -213,6 +213,9 @@ export default {
       PaginationToolbar: {
         copyAsGeoJson: 'Als GeoJSON kopieren (inkl. Geometrie)',
         copyAsObject: 'Als Objekt kopieren (nur angezeigte Werte)'
+      },
+      JsonModal: {
+        buttonTitle: 'Öffne {{propertyName}}'
       }
     }
   },
@@ -430,6 +433,9 @@ export default {
       PaginationToolbar: {
         copyAsGeoJson: 'Copy as GeoJSON (incl. geometry)',
         copyAsObject: 'Copy as object (displayed values only)'
+      },
+      JsonModal: {
+        buttonTitle: 'Show {{propertyName}}'
       }
     }
   }

webpack.common.js

@@ -82,6 +82,9 @@ module.exports = {
       patterns: [{
         from: path.join(__dirname, 'resources', 'config', 'gis-client-config.js'),
         to: '.'
+      }, {
+        from: './node_modules/monaco-editor/min/vs',
+        to: 'vs'
       }]
     }),
     new webpack.DefinePlugin({