add support for rendering a problem by concept class

src/api/types.ts

@@ -259,3 +259,14 @@ export interface DataSource<T> {
    */
   toUuidAndDisplay(item: T): OpenmrsResource;
 }
+
+export interface ControlTemplate{
+  name: string,
+  datasource: DataSourceParameters
+}
+
+export interface DataSourceParameters{
+  name: string,
+  config?: Record<string, any>
+}
+

src/datasources/class-array-datasource.ts

@@ -0,0 +1,17 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+
+export class ClassArrayDataSource extends BaseOpenMRSDataSource {
+  constructor() {
+    super('/ws/rest/v1/concept?v=custom:(uuid,display,conceptClass:(uuid,display))');
+  }
+
+  fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]> {
+    return openmrsFetch(searchTerm ? `${this.url}&q=${searchTerm}` : this.url).then(({ data }) => {
+      if(config?.class){
+        return data.results.filter(concept => concept.conceptClass && config.class.includes(concept.conceptClass.uuid))
+      }
+      return data.results;
+    });
+  }
+}

src/registry/inbuilt-components/control-templates.ts

@@ -1,4 +1,6 @@
-export const controlTemplates = [
+import { ControlTemplate } from "../../api/types";
+
+export const controlTemplates: Array<ControlTemplate> = [
   {
     name: 'drug',
     datasource: {
@@ -8,6 +10,17 @@ export const controlTemplates = [
       },
     },
   },
+  {
+    name: 'problem',
+    datasource: {
+      name: 'problem_datasource',
+      config: {
+        class: ['8d4918b0-c2cc-11de-8d13-0010c6dffd0f',
+        '8d492954-c2cc-11de-8d13-0010c6dffd0f',
+      ]
+      },
+    },
+  },
 ];
 
 export const getControlTemplate = (name: string) => {

src/registry/inbuilt-components/inbuiltDataSources.ts

@@ -1,4 +1,5 @@
 import { DataSource } from '../../api/types';
+import { ClassArrayDataSource } from '../../datasources/class-array-datasource';
 import { ConceptDataSource } from '../../datasources/concept-data-source';
 import { LocationDataSource } from '../../datasources/location-data-source';
 import { RegistryItem } from '../registry';
@@ -15,6 +16,10 @@ export const inbuiltDataSources: Array<RegistryItem<DataSource<any>>> = [
     name: 'drug_datasource',
     component: new ConceptDataSource(),
   },
+  {
+    name: 'problem_datasource',
+    component: new ClassArrayDataSource(),
+  }
 ];
 
 export const validateInbuiltDatasource = (name: string) => {

src/registry/inbuilt-components/template-component-map.ts

@@ -5,4 +5,8 @@ export const templateToComponentMap = [
     name: 'drug',
     baseControlComponent: UISelectExtended,
   },
+  {
+    name: 'problem',
+    baseControlComponent: UISelectExtended,
+  }
 ];