@openmrs/esm-implementer-tools-app 6.3.1-pre.3218 → 6.3.1-pre.3236

package/dist/openmrs-esm-implementer-tools-app.js.buildmanifest.json

@@ -391,30 +391,6 @@
       "hash": "ad8873304325ee50",
       "childrenByOrder": {}
     },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 830316,
-      "sizes": {
-        "javascript": 830316
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@openmrs/esm-implementer-tools-app",
-        "main"
-      ],
-      "files": [
-        "3150.js"
-      ],
-      "auxiliaryFiles": [
-        "3150.js.map"
-      ],
-      "hash": "34108f9dab7ad3ab",
-      "childrenByOrder": {}
-    },
     {
       "rendered": true,
       "initial": false,
@@ -536,9 +512,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1119,
+      "size": 1500,
       "sizes": {
-        "javascript": 1119
+        "javascript": 1500
       },
       "names": [],
       "idHints": [],
@@ -550,7 +526,7 @@
         "4300.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "e4d6b54b001185fc",
+      "hash": "e5ec50abd2006d8c",
       "childrenByOrder": {}
     },
     {
@@ -776,7 +752,7 @@
       "auxiliaryFiles": [
         "5563.js.map"
       ],
-      "hash": "50c736da17271a3b",
+      "hash": "d3d48bbe9d564559",
       "childrenByOrder": {}
     },
     {
@@ -901,6 +877,30 @@
       "hash": "7e9ab64623e07a93",
       "childrenByOrder": {}
     },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 847661,
+      "sizes": {
+        "javascript": 847661
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@openmrs/esm-implementer-tools-app",
+        "main"
+      ],
+      "files": [
+        "6132.js"
+      ],
+      "auxiliaryFiles": [
+        "6132.js.map"
+      ],
+      "hash": "fa1951d76a17d7ff",
+      "childrenByOrder": {}
+    },
     {
       "rendered": true,
       "initial": false,
@@ -1325,7 +1325,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "22ca3b526eee329e",
+      "hash": "8e276b02ed1ca12e",
       "childrenByOrder": {}
     },
     {
@@ -1578,7 +1578,7 @@
       "auxiliaryFiles": [
         "openmrs-esm-implementer-tools-app.js.map"
       ],
-      "hash": "5a434c49b55eb2ce",
+      "hash": "bf3a56f61f240a22",
       "childrenByOrder": {}
     }
   ]

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","pages":[{"component":"implementerTools","route":true},{"component":"globalImplementerTools","route":true}],"extensions":[{"name":"implementer-tools-button","slot":"top-nav-actions-slot","component":"implementerToolsButton","order":20}],"version":"6.3.1-pre.3218"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","pages":[{"component":"implementerTools","route":true},{"component":"globalImplementerTools","route":true}],"extensions":[{"name":"implementer-tools-button","slot":"top-nav-actions-slot","component":"implementerToolsButton","order":20}],"version":"6.3.1-pre.3236"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-implementer-tools-app",
-  "version": "6.3.1-pre.3218",
+  "version": "6.3.1-pre.3236",
   "license": "MPL-2.0",
   "description": "The admin interface for OpenMRS Frontend",
   "browser": "dist/openmrs-esm-implementer-tools-app.js",
@@ -17,7 +17,7 @@
     "analyze": "webpack --mode=production --env analyze=true",
     "typescript": "tsc",
     "lint": "eslint src --ext ts,tsx",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.button.tsx' 'src/**/*.extension.tsx' 'src/**/*.modal.tsx' --config='../../../tools/i18next-parser.config.js'"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.button.tsx' 'src/**/*.extension.tsx' 'src/**/*.modal.tsx' 'src/**/*.resource.ts' --config='../../../tools/i18next-parser.config.js'"
   },
   "keywords": [
     "openmrs",
@@ -51,8 +51,8 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-framework": "6.3.1-pre.3218",
-    "@openmrs/webpack-config": "6.3.1-pre.3218",
+    "@openmrs/esm-framework": "6.3.1-pre.3236",
+    "@openmrs/webpack-config": "6.3.1-pre.3236",
     "ace-builds": "^1.4.14",
     "react": "^18.1.0",
     "react-ace": "^9.5.0",

package/src/configuration/configuration.styles.scss

@@ -5,7 +5,6 @@
 
 .tools {
   width: 100%;
-  background-color: theme.$background;
   border-bottom: 1px solid theme.$border-subtle-00;
   border-top: 1px solid theme.$border-subtle-00;
   z-index: 2;
@@ -45,23 +44,6 @@
   width: 100%;
   display: flex;
   overflow-y: auto;
-
-  :global(.ace_scroller) {
-    background-color: theme.$background;
-    color: theme.$text-secondary;
-  }
-
-  :global(.ace_gutter) {
-    background-color: theme.$background;
-    color: theme.$text-secondary;
-  }
-
-  :global(.ace_active-line) {
-    background-color: theme.$layer-accent !important;
-  }
-  :global(.ace_cursor) {
-    color: theme.$text-secondary;
-  }
 }
 
 .configTreePane {

package/src/configuration/interactive-editor/editable-value.component.tsx

@@ -89,7 +89,7 @@ export default function EditableValue({ path, element, customType }: EditableVal
               customType={customType}
               path={path}
               handleClose={closeEditor}
-              handleSave={(val) => {
+              handleSaveToConfiguration={(val) => {
                 try {
                   const result = JSON.parse(val);
                   const tempConfigUpdate = set(cloneDeep(temporaryConfigStore.getState()), ['config', ...path], result);

package/src/configuration/interactive-editor/validators.resource.ts

@@ -0,0 +1,147 @@
+import { type TOptions } from 'i18next';
+import { Type, type ConfigValue, type ConfigSchema, type Validator, translateFrom } from '@openmrs/esm-framework';
+import type { CustomValueType } from './value-editor';
+
+const moduleName = '@openmrs/esm-implementer-tools-app';
+const t = (key: string, fallback?: string, options?: Omit<TOptions, 'ns' | 'defaultValue'>) =>
+  translateFrom(moduleName, key, fallback, options);
+
+const validateString = (value: ConfigValue, validators: Array<Validator>) => {
+  if (typeof value !== 'string') {
+    return t('stringValidationMessage', 'Value must be a string');
+  }
+  for (const validator of validators) {
+    const error = validator(value);
+    if (error) return error;
+  }
+  return null;
+};
+
+const validateNumber = (value: ConfigValue, validators: Array<Validator>) => {
+  if (typeof value !== 'number') {
+    return t('numberValidationMessage', 'Value must be a number');
+  }
+  for (const validator of validators) {
+    const error = validator(value);
+    if (error) return error;
+  }
+  return null;
+};
+
+const validateBoolean = (value: ConfigValue, validators: Array<Validator>) => {
+  if (typeof value !== 'boolean') {
+    return t('booleanValidationMessage', 'Value must be a boolean');
+  }
+  for (const validator of validators) {
+    const error = validator(value);
+    if (error) return error;
+  }
+  return null;
+};
+
+const validateArray = (value: ConfigValue, validators: Array<Validator>, elementSchema?: ConfigSchema) => {
+  if (!Array.isArray(value)) {
+    return t('arrayValidationMessage', 'Value must be an array');
+  }
+  for (const validator of validators) {
+    const error = validator(value);
+    if (error) return error;
+  }
+  if (elementSchema) {
+    for (let i = 0; i < value.length; i++) {
+      const element = value[i];
+      if (elementSchema._type === Type.Object) {
+        const error = validateObject(element, [], elementSchema);
+        if (error) return error;
+      } else {
+        const elementType = elementSchema._type;
+        const elementValidators = elementSchema._validators ?? [];
+        const error = validateValue(element, elementType, elementValidators, elementSchema._elements);
+        if (error) return error;
+      }
+    }
+  }
+  return null;
+};
+
+const validateObject = (value: ConfigValue, validators: Array<Validator>, elementSchema?: ConfigSchema) => {
+  if (!elementSchema || typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return t('objectValidationMessage', 'Value must be an object');
+  }
+  for (const validator of validators) {
+    const error = validator(value);
+    if (error) return error;
+  }
+  for (const key of Object.keys(elementSchema)) {
+    if (key.startsWith('_')) continue;
+    const propSchema = elementSchema[key];
+    const propValue = value[key];
+    if (typeof propSchema === 'object' && propSchema !== null && '_type' in propSchema) {
+      if (propSchema._type === Type.Array) {
+        const error = validateArray(propValue, propSchema._validators ?? [], propSchema._elements);
+        if (error)
+          return t('objectPropertyValidationMessage', 'Property {{key}}: {{error}}', {
+            key,
+            error,
+          });
+      } else {
+        const propType = propSchema._type;
+        const propValidators = propSchema._validators ?? [];
+        const error = validateValue(propValue, propType, propValidators, propSchema._elements);
+        if (error)
+          return t('objectPropertyValidationMessage', 'Property {{key}}: {{error}}', {
+            key,
+            error,
+          });
+      }
+    } else if (typeof propSchema === 'object' && propSchema !== null) {
+      const error = validateObject(propValue, [], propSchema as ConfigSchema);
+      if (error)
+        return t('objectPropertyValidationMessage', 'Property {{key}}: {{error}}', {
+          key,
+          error,
+        });
+    }
+  }
+  return null;
+};
+
+const validateUuid = (value: ConfigValue, validators: Array<Validator>) => {
+  if (
+    typeof value !== 'string' ||
+    !/^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}|[0-9A-Za-z]{11,36})$/i.test(
+      value,
+    )
+  ) {
+    return t('uuidValidationMessage', 'Value must be a valid UUID string');
+  }
+  for (const validator of validators) {
+    const error = validator(value);
+    if (error) return error;
+  }
+  return null;
+};
+
+export const validateValue = (
+  value: ConfigValue,
+  fieldType: Type | CustomValueType | undefined,
+  validators: Array<Validator>,
+  elementSchema?: ConfigSchema,
+) => {
+  switch (fieldType) {
+    case Type.String:
+      return validateString(value, validators);
+    case Type.Number:
+      return validateNumber(value, validators);
+    case Type.Boolean:
+      return validateBoolean(value, validators);
+    case Type.Array:
+      return validateArray(value, validators, elementSchema);
+    case Type.Object:
+      return validateObject(value, validators, elementSchema);
+    case Type.UUID || Type.ConceptUuid || Type.PersonAttributeTypeUuid || Type.PatientIdentifierTypeUuid:
+      return validateUuid(value, validators);
+    default:
+      return null;
+  }
+};

package/src/configuration/interactive-editor/{value-editor.scss → value-editor.styles.scss}

@@ -1,5 +1,12 @@
 @use '@carbon/layout';
 @use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/theme';
+
+.errorMessage {
+  color: theme.$text-error;
+  font-size: layout.$spacing-04;
+  margin-top: layout.$spacing-02;
+}
 
 .valueEditorButtons {
   margin-top: layout.$spacing-03;

package/src/configuration/interactive-editor/value-editor.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { Button } from '@carbon/react';
-import { CloseIcon, SaveIcon, type Type } from '@openmrs/esm-framework';
+import { CloseIcon, type ConfigSchema, type Config, getCoreTranslation, SaveIcon, Type } from '@openmrs/esm-framework';
 import type { ConfigValueDescriptor } from './editable-value.component';
 import { ValueEditorField } from './value-editors/value-editor-field';
-import styles from './value-editor.scss';
+import styles from './value-editor.styles.scss';
+import { validateValue } from './validators.resource';
 
 export type CustomValueType = 'add' | 'remove' | 'order' | 'configure';
 
@@ -14,23 +14,41 @@ interface ValueEditorProps {
   element: ConfigValueDescriptor;
   customType?: CustomValueType;
   path: Array<string>;
-  handleSave: (val: string) => void;
+  handleSaveToConfiguration: (val: string) => void;
   handleClose: () => void;
 }
 
-export function ValueEditor({ element, customType, path, handleSave, handleClose }: ValueEditorProps) {
+export function ValueEditor({ element, customType, path, handleSaveToConfiguration, handleClose }: ValueEditorProps) {
   const ref = useRef<HTMLDivElement>(null);
   const [tmpValue, setTmpValue] = useState(element._value);
-  const { t } = useTranslation();
+  const [error, setError] = useState<string | null>(null);
 
   const valueType = customType ?? element._type;
+  const validators = element._validators ?? [];
+
+  let elementSchema: ConfigValueDescriptor | Config | undefined = undefined;
+  if (valueType === Type.Object) {
+    elementSchema = element;
+  } else if (valueType === Type.Array) {
+    elementSchema = element._elements;
+  }
+
+  const handleSave = useCallback(() => {
+    const errorMessage = validateValue(tmpValue, valueType, validators, elementSchema as ConfigSchema);
+    if (errorMessage) {
+      setError(errorMessage);
+    } else {
+      setError(null);
+      handleSaveToConfiguration(JSON.stringify(tmpValue));
+    }
+  }, [tmpValue, valueType, validators, elementSchema, handleSaveToConfiguration]);
 
   useEffect(() => {
     const keyListener = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         handleClose();
       } else if (e.key === 'Enter') {
-        handleSave(JSON.stringify(tmpValue));
+        handleSave();
       }
     };
 
@@ -38,21 +56,31 @@ export function ValueEditor({ element, customType, path, handleSave, handleClose
     return () => {
       document.removeEventListener('keyup', keyListener);
     };
-  }, [handleSave, handleClose, tmpValue]);
+  }, [handleSave, handleClose]);
 
   return (
-    <div ref={ref} style={{ display: 'inherit' }}>
-      <ValueEditorField element={element} path={path} value={tmpValue} onChange={setTmpValue} valueType={valueType} />
+    <div ref={ref}>
+      <ValueEditorField
+        element={element}
+        path={path}
+        value={tmpValue}
+        onChange={setTmpValue}
+        valueType={valueType}
+        error={error}
+      />
+      <div className={styles.errorMessage}>
+        {valueType !== Type.Number &&
+          valueType !== Type.String &&
+          valueType !== Type.UUID &&
+          valueType !== Type.Boolean &&
+          error}
+      </div>
       <div className={styles.valueEditorButtons}>
-        <Button
-          renderIcon={(props) => <SaveIcon {...props} size={16} />}
-          kind="primary"
-          onClick={() => handleSave(JSON.stringify(tmpValue))}
-        >
-          {t('saveValueButtonText', 'Save')}
+        <Button renderIcon={(props) => <SaveIcon {...props} size={16} />} kind="primary" onClick={handleSave}>
+          {getCoreTranslation('save')}
         </Button>
         <Button renderIcon={(props) => <CloseIcon {...props} size={16} />} kind="secondary" onClick={handleClose}>
-          {t('cancelButtonText', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
       </div>
     </div>

package/src/configuration/interactive-editor/value-editors/value-editor-field.tsx

@@ -19,9 +19,10 @@ export interface ValueEditorFieldProps {
   valueType?: ValueType;
   value: any;
   onChange: (value: any) => void;
+  error?: string | null;
 }
 
-export function ValueEditorField({ element, path, valueType, value, onChange }: ValueEditorFieldProps) {
+export function ValueEditorField({ element, path, valueType, value, onChange, error }: ValueEditorFieldProps) {
   const [id] = useState(uniqueId('value-editor-'));
 
   if (valueType === 'remove' && !path) {
@@ -31,7 +32,15 @@ export function ValueEditorField({ element, path, valueType, value, onChange }:
   return valueType === Type.Array ? (
     <ArrayEditor element={element} valueArray={value} setValue={onChange} />
   ) : valueType === Type.Boolean ? (
-    <Checkbox id={id} checked={value} hideLabel labelText="" onChange={(event, { checked, id }) => onChange(checked)} />
+    <Checkbox
+      id={id}
+      checked={value}
+      hideLabel
+      labelText=""
+      onChange={(event, { checked, id }) => onChange(checked)}
+      invalid={Boolean(error)}
+      invalidText={error}
+    />
   ) : valueType === Type.ConceptUuid ? (
     <ConceptSearchBox value={value} setConcept={(concept) => onChange(concept.uuid)} />
   ) : valueType === Type.PersonAttributeTypeUuid ? (
@@ -47,9 +56,18 @@ export function ValueEditorField({ element, path, valueType, value, onChange }:
       value={value}
       onChange={(_, { value }) => onChange(value ? (typeof value === 'string' ? parseInt(value) : value) : 0)}
       hideSteppers
+      invalid={Boolean(error)}
+      invalidText={error}
     />
   ) : valueType === Type.String || valueType === Type.UUID ? (
-    <TextInput id={id} value={value} labelText="" onChange={(e) => onChange(e.target.value)} />
+    <TextInput
+      id={id}
+      value={value}
+      labelText=""
+      onChange={(e) => onChange(e.target.value)}
+      invalid={Boolean(error)}
+      invalidText={error}
+    />
   ) : valueType === 'add' ? (
     <ExtensionSlotAdd value={value ?? element._value} setValue={onChange} />
   ) : valueType === 'remove' && path ? (

package/src/popup/popup.component.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { ContentSwitcher, IconButton, Switch } from '@carbon/react';
+import { ContentSwitcher, IconButton, Switch, Theme } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { CloseIcon } from '@openmrs/esm-framework';
 import { Configuration } from '../configuration/configuration.component';
@@ -45,43 +45,45 @@ export default function Popup({
 
   return (
     <div className={styles.popup}>
-      <div className={styles.topBar}>
-        <div className={styles.tabs}>
-          <ContentSwitcher
-            className={styles.contentSwitcher}
-            selectedIndex={activeTab}
-            onChange={(switcherItem: SwitcherItem) => {
-              setActiveTab(switcherItem.index);
-            }}
-            size="lg"
-          >
-            <Switch name="configuration-tab" text={t('configuration', 'Configuration')} className="darkThemeSwitch" />
-            <Switch
-              name="frontend-modules-tab"
-              text={t('frontendModules', 'Frontend modules')}
-              className="darkThemeSwitch"
-            />
-            <Switch
-              name="backend-modules-tab"
-              text={t('backendModules', 'Backend modules')}
-              className="darkThemeSwitch"
-            />
-            <Switch name="feature-flags-tab" text={t('featureFlags', 'Feature flags')} className="darkThemeSwitch" />
-          </ContentSwitcher>
+      <Theme theme="g90">
+        <div className={styles.topBar}>
+          <div className={styles.tabs}>
+            <ContentSwitcher
+              className={styles.contentSwitcher}
+              selectedIndex={activeTab}
+              onChange={(switcherItem: SwitcherItem) => {
+                setActiveTab(switcherItem.index);
+              }}
+              size="lg"
+            >
+              <Switch name="configuration-tab" text={t('configuration', 'Configuration')} className="darkThemeSwitch" />
+              <Switch
+                name="frontend-modules-tab"
+                text={t('frontendModules', 'Frontend modules')}
+                className="darkThemeSwitch"
+              />
+              <Switch
+                name="backend-modules-tab"
+                text={t('backendModules', 'Backend modules')}
+                className="darkThemeSwitch"
+              />
+              <Switch name="feature-flags-tab" text={t('featureFlags', 'Feature flags')} className="darkThemeSwitch" />
+            </ContentSwitcher>
+          </div>
+          <div>
+            <IconButton
+              align="left"
+              className={styles.closeButton}
+              kind="secondary"
+              label={t('close', 'Close')}
+              onClick={close}
+            >
+              <CloseIcon />
+            </IconButton>
+          </div>
         </div>
-        <div>
-          <IconButton
-            align="left"
-            className={styles.closeButton}
-            kind="secondary"
-            label={t('close', 'Close')}
-            onClick={close}
-          >
-            <CloseIcon />
-          </IconButton>
-        </div>
-      </div>
-      <div className={styles.content}>{tabContent}</div>
+        <div className={styles.content}>{tabContent}</div>
+      </Theme>
     </div>
   );
 }

package/src/popup/popup.styles.scss

@@ -9,9 +9,7 @@
   left: 0;
   width: 100%;
   z-index: 100000;
-  background-color: theme.$background;
   border-top: 2px solid $ui-05;
-  color: $color-gray-100;
   box-sizing: border-box;
 
   tr {
@@ -62,7 +60,6 @@
   justify-content: space-between;
   align-items: center;
   z-index: 2;
-  background-color: theme.$background;
 }
 
 .closeButton {

package/translations/en.json

@@ -1,6 +1,8 @@
 {
   "activeItemSourceText": "The current value comes from ",
+  "arrayValidationMessage": "Value must be an array",
   "backendModules": "Backend modules",
+  "booleanValidationMessage": "Value must be a boolean",
   "checkImplementerToolsMessage": "Check the Backend Modules tab in the Implementer Tools for more details",
   "clearConfig": "Clear local config",
   "close": "Close",
@@ -21,12 +23,17 @@
   "missing": "Missing",
   "moduleName": "Module name",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "numberValidationMessage": "Value must be a number",
+  "objectPropertyValidationMessage": "Property {{key}}: {{error}}",
+  "objectValidationMessage": "Value must be an object",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
+  "stringValidationMessage": "Value must be a string",
   "toggleImplementerTools": "Toggle Implementer Tools",
   "uiEditor": "UI editor",
   "unknownVersion": "unknown",
   "updateConfig": "Update config",
+  "uuidValidationMessage": "Value must be a valid UUID string",
   "value": "Value",
   "viewModules": "View modules"
 }