First steps towards validating XSLT

src/settings/ScriptOK.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ScriptOK = ({ xslText }) => {
+  if (xslText === '') {
+    return null;
+  }
+
+  const parser = new DOMParser();
+  const xsltProcessor = new XSLTProcessor();
+
+  console.log('xslText =', xslText);
+  const xslStylesheet = parser.parseFromString(xslText, 'application/xml');
+  const errorNode = xslStylesheet.querySelector('parsererror');
+  if (errorNode) {
+    let errorMessage = errorNode.textContent;
+    console.log('untrimmed =', errorMessage);
+    errorMessage = errorMessage.trim();
+    console.log('trimmed =', errorMessage);
+    // This is often of the form:
+    // XML Parsing Error: syntax error Location: http://localhost:3000/settings/ha/step/10010?layer=edit Line Number 1, Column 1
+    errorMessage = errorMessage.replace(/Location: https?:[^ ]+/, '');
+    return 'Bad XML: ' + errorMessage;
+  }
+
+  console.log('xslStylesheet =', xslStylesheet);
+  try {
+    xsltProcessor.importStylesheet(xslStylesheet);
+  } catch (e) {
+    // No value to the exception: it's effectively a boolean (thrown or not)
+    // The XML was not valid XSLT
+    return 'Bad XSLT';
+  }
+  return 'Good XSLT';
+};
+
+ScriptOK.propTypes = {
+  xslText: PropTypes.string,
+};
+
+export default ScriptOK;

src/settings/StepForm.js

@@ -9,6 +9,7 @@ import { isEqual } from 'lodash';
 import setFieldData from 'final-form-set-field-data'; // XXX do we need this?
 import { RCF, CF } from '../components/CF';
 import renderPaneFooter from './renderPaneFooter';
+import ScriptOK from './ScriptOK';
 
 
 function validate(values) {
@@ -33,6 +34,15 @@ const StepForm = (props) => {
   const { form, handleSubmit, onCancel, pristine, submitting } = props;
   const intl = useIntl();
 
+  /*
+  console.log('xform = ', form);
+  console.log('getRegisteredFields =', form.getRegisteredFields());
+  const getFieldState = form.getFieldState
+  console.log('getFieldState = ', getFieldState);
+  const scriptField = getFieldState('script');
+  console.log('scriptField = ', form.scriptField);
+  */
+
   const noValue = {
     value: '',
     label: intl.formatMessage({ id: 'ui-harvester-admin.selectValue' }),
@@ -65,6 +75,7 @@ const StepForm = (props) => {
             <CF tag="outputFormat" domain="step" xs={6} component={Select} dataOptions={[noValue].concat(formats)} required />
           </Row>
           <RCF tag="script" domain="step" component={TextArea} rows="4" />
+          <ScriptOK xslText={form.getState().values.script} />
           <RCF tag="testData" domain="step" component={TextArea} rows="4" />
           <RCF tag="testOutput" domain="step" component={TextArea} rows="4" />
           <Row>