(Cho) Fix schema editor layout and hook conventions

package.json

@@ -28,6 +28,7 @@
     "@hookform/resolvers": "^3.1.1",
     "ace-builds": "^1.36.5",
     "classnames": "^2.3.2",
+    "file-loader": "^6.2.0",
     "fuzzy": "^0.1.3",
     "react-ace": "^13.0.0",
     "react-hook-form": "^7.45.1",

packages/esm-billing-app/src/billable-services/billable-exemptions/billable-exemptions-viewer.component.tsx

@@ -16,7 +16,7 @@ import {
 } from '@carbon/react';
 import SchemaEditor from '../billable-exemptions/schema-editor/schema-editor.component';
 import SchemaViewer from '../billable-exemptions/schema-editor/schema-viewer-component';
-import { useSystemBillableSetting } from '../../hooks/useSystemBillableSetting';
+import { useSystemBillableSetting } from '../../hooks/useExemptionSchema';
 import ActionButtons from '../billable-exemptions/action-buttons/action-buttons.component';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import type { Schema } from '../../types';
@@ -115,11 +115,7 @@ export const BillableExemptionsViewer = () => {
       <Grid className={classNames(styles.grid)}>
         <Column lg={16} md={16} className={styles.column}>
           <div className={styles.actionButtons}>
-            {isLoading ? (
-              <InlineLoading description={`${t('loadingSchema', 'Loading schema')}...`} />
-            ) : (
-              <h1 className={styles.schemaName}>{t('exemptionSchema', 'Exemption Schema')}</h1>
-            )}
+            {isLoading ? <InlineLoading description={`${t('loadingSchema', 'Loading schema')}...`} /> : ''}
           </div>
           <div className={styles.heading}>
             <span className={styles.tabHeading}>{t('schemaEditor', 'Exemptions Schema Editor')}</span>

packages/esm-billing-app/src/billable-services/billable-exemptions/billable-exemptions.scss

@@ -16,7 +16,7 @@
   max-width: 100%;
 
   :global(.cds--tabs__nav-item--selected) {
-    border-bottom: 2px solid var(--cds-border-interactive, colors.$teal-70);
+    border-bottom: layout.$spacing-01 solid var(--cds-border-interactive, colors.$teal-70);
     outline: none !important;
   }
 }
@@ -57,16 +57,16 @@
 
 .heading {
   display: flex;
-  margin-right: 1rem;
+  margin-right: layout.$spacing-05;
   align-items: center;
 }
 .tabHeading {
   display: flex;
   align-items: center;
   @include type.type-style('heading-compact-01');
-  min-height: 2.5rem;
+  min-height: layout.$spacing-05;
   width: 100%;
-  padding: 0.75rem;
+  padding: layout.$spacing-04;
 }
 
 .topBtns {

packages/esm-billing-app/src/billable-services/billable-exemptions/modals/save-schema.modal.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ComposedModal, Form, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
-import { saveExemptionSchema, useSystemBillableSetting } from '../../../hooks/useSystemBillableSetting';
+import { saveExemptionSchema, useSystemBillableSetting } from '../../../hooks/useExemptionSchema';
 
 import type { Schema } from '../../../types';
 import styles from './save-schema-modal.scss';

packages/esm-billing-app/src/billable-services/billable-exemptions/schema-editor/schema-editor.component.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import AceEditor, { type IMarker } from 'react-ace';
+import 'ace-builds/webpack-resolver';
 import debounce from 'lodash-es/debounce';
 import Ajv from 'ajv';
 import { useTranslation } from 'react-i18next';
 import { ActionableNotification, Link } from '@carbon/react';
 import { ChevronRight, ChevronLeft } from '@carbon/react/icons';
 import styles from './schema-editor.scss';
-import { useStandardSchema } from '../../../hooks/useStandardSchema';
+import { useStandardSchema } from '../../../hooks/useExemptionSchema';
 
 interface MarkerProps extends IMarker {
   text: string;
@@ -149,7 +150,9 @@ const SchemaEditor: React.FC<SchemaEditorProps> = ({
     <div>
       {errors.length && validationOn ? <ErrorMessages /> : null}
       <AceEditor
-        style={{ height: '100vh', width: '100%', border: errors.length ? '3px solid #DA1E28' : 'none' }}
+        className={errors.length ? styles.hasErrors : ''}
+        width="100%"
+        height="100vh"
         mode="json"
         theme="textmate"
         name="schemaEditor"

packages/esm-billing-app/src/billable-services/billable-exemptions/schema-editor/schema-editor.scss

@@ -1,23 +1,24 @@
 @use '@carbon/colors';
 @use '@carbon/type';
+@use '@carbon/layout';
 
 .validationErrorsContainer {
   display: flex;
-  gap: 0.5rem;
+  gap: layout.$spacing-03;
 
   :global(.cds--actionable-notification) {
-    max-width: 38rem;
+    max-width: 100%;
   }
   :global(.cds--actionable-notification__details) {
-    margin: 0 0rem 0 0.8125rem !important;
+    margin: 0 0rem 0 layout.$spacing-04 !important;
   }
 }
 
 .pagination {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
+  gap: layout.$spacing-03;
+  font-size: layout.$spacing-04;
 
   .paginationIcon {
     fill: colors.$blue-50;
@@ -29,3 +30,7 @@
     cursor: not-allowed;
   }
 }
+
+.hasErrors {
+  border: layout.$spacing-02 solid colors.$red-60;
+}

packages/esm-billing-app/src/billable-services/billable-exemptions/schema-editor/schema-viewer-component.tsx

@@ -10,29 +10,21 @@ interface SchemaViewerProps {
 interface TreeNode {
   id: string;
   label: string;
-  children?: TreeNode[];
-  icon: React.ReactNode;
+  children?: Array<TreeNode>;
 }
 
-const transformDataToTree = (data: Record<string, any>, parentKey = 'root'): TreeNode[] => {
+const transformDataToTree = (data: Record<string, any>, parentKey = 'root'): Array<TreeNode> => {
   return Object.entries(data).map(([key, value]) => {
     const nodeId = `${parentKey}-${key}`;
     const isObject = typeof value === 'object' && !Array.isArray(value);
 
     return {
       id: nodeId,
       label: isObject || Array.isArray(value) ? key : `${key}: ${value}`,
-      icon:
-        isObject || Array.isArray(value) ? (
-          <Folder className={styles.folderIcon} />
-        ) : (
-          <DocumentTasks className={styles.dirIcon} />
-        ),
       children: Array.isArray(value)
         ? value.map((item, index) => ({
             id: `${nodeId}-${index}`,
             label: `${item.description} (${item.concept})`,
-            icon: <DocumentTasks className={styles.dirIcon} />,
           }))
         : isObject
         ? transformDataToTree(value, nodeId)
@@ -53,7 +45,7 @@ const SchemaViewer: React.FC<SchemaViewerProps> = ({ data }) => {
     }
   }, [data]);
 
-  const handleSelect = useCallback((selectedNodeIds: string[]) => {
+  const handleSelect = useCallback((selectedNodeIds: Array<string>) => {
     setSelectedNodes(selectedNodeIds);
   }, []);
 
@@ -69,15 +61,14 @@ const SchemaViewer: React.FC<SchemaViewerProps> = ({ data }) => {
     });
   }, []);
 
-  const renderTreeNodes = (nodes: TreeNode[]) =>
+  const renderTreeNodes = (nodes: Array<TreeNode>) =>
     nodes.map((node) => {
       const isExpanded = expandedNodes.has(node.id);
       return (
         <TreeView.TreeNode
           key={node.id}
           id={node.id}
           label={node.label}
-          renderIcon={() => node.icon}
           isExpanded={isExpanded}
           onToggle={() => handleToggle(node.id)}
           multiselect={true}

packages/esm-billing-app/src/hooks/useSystemBillableSetting.tsx → packages/esm-billing-app/src/hooks/useExemptionSchema.tsx

@@ -33,3 +33,17 @@ export async function saveExemptionSchema(schema: Schema, key: string): Promise<
     body,
   });
 }
+
+export function useStandardSchema(key: string) {
+  const { data, error, isLoading } = useSWRImmutable<{ data }, Error>(
+    `/ws/rest/v1/systemsetting?q=${key}&v=full`,
+    openmrsFetch,
+  );
+
+  return {
+    schema: data?.data,
+    schemaProperties: data?.data?.results?.find((resource) => resource.property === 'kenyaemr.billing.exemptions'),
+    error,
+    isLoading,
+  };
+}

packages/esm-billing-app/src/types/index.ts

@@ -551,21 +551,10 @@ export type FacilityClaim = {
 export type BillingPromptType = 'patient-chart' | 'billing-orders';
 
 export interface Schema {
-  services: {
-    all: Service[];
-    'program:HIV'?: Service[];
-    'program:TB'?: Service[];
-    'age<5'?: Service[];
-    'visitAttribute:prisoner'?: Service[];
-  };
+  services: Record<string, unknown>;
   commodities: Record<string, unknown>;
 }
 
-export interface Service {
-  concept: string;
-  description: string;
-}
-
 export type ServiceType = { uuid: string; display: string; id: number };
 
 export type ServiceTypesResponse = {

yarn.lock

@@ -2927,6 +2927,7 @@ __metadata:
     eslint-config-prettier: "npm:^8.2.0"
     eslint-config-ts-react-important-stuff: "npm:^3.0.0"
     eslint-plugin-prettier: "npm:^3.3.1"
+    file-loader: "npm:^6.2.0"
     fuzzy: "npm:^0.1.3"
     husky: "npm:^8.0.3"
     i18next: "npm:^19.7.0"
@@ -11212,6 +11213,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-loader@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "file-loader@npm:6.2.0"
+  dependencies:
+    loader-utils: "npm:^2.0.0"
+    schema-utils: "npm:^3.0.0"
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 10/3a854be3a7501bdb0fd8a1c0d45c156c0dc8f0afced07cbdac0b13a79c2f2a03f7770d68cb555ff30b5ea7c20719df34e1b2bd896c93e3138ee31f0bdc560310
+  languageName: node
+  linkType: hard
+
 "file-type@npm:^16.5.4":
   version: 16.5.4
   resolution: "file-type@npm:16.5.4"