BN-75 | Refactor dashboard schema validation and remove unused parameters

Author: devsingh05298

src/components/clinical/dashboardContainer/DashboardContainer.tsx

@@ -20,16 +20,16 @@ const DashboardContainer: React.FC<DashboardContainerProps> = ({
   sections,
   activeItemId,
 }) => {
-  // Create a ref map for each section - fix the type definition here
+  // Create a ref map for each section using section name as key
   const sectionRefs = useRef<{
     [key: string]: React.RefObject<HTMLDivElement | null>;
   }>({});
 
   // Initialize refs for each section
   useEffect(() => {
     sections.forEach((section) => {
-      if (!sectionRefs.current[section.id]) {
-        sectionRefs.current[section.id] = React.createRef<HTMLDivElement>();
+      if (!sectionRefs.current[section.name]) {
+        sectionRefs.current[section.name] = React.createRef<HTMLDivElement>();
       }
     });
   }, [sections]);
@@ -39,12 +39,12 @@ const DashboardContainer: React.FC<DashboardContainerProps> = ({
     if (activeItemId) {
       // Find the section that corresponds to the activeItemId
       const activeSection = sections.find(
-        (section) => section.id === activeItemId,
+        (section) => section.name === activeItemId,
       );
 
-      if (activeSection && sectionRefs.current[activeSection.id]?.current) {
+      if (activeSection && sectionRefs.current[activeSection.name]?.current) {
         // Added optional chaining and null check to prevent errors
-        const sectionDiv = sectionRefs.current[activeSection.id].current;
+        const sectionDiv = sectionRefs.current[activeSection.name].current;
         if (sectionDiv) {
           sectionDiv.scrollIntoView({
             behavior: 'smooth',
@@ -62,17 +62,17 @@ const DashboardContainer: React.FC<DashboardContainerProps> = ({
   return (
     <Section>
       <Grid>
-        {sections.map((section) => (
+        {sections.map((section, index) => (
           <Column
             lg={16}
             md={8}
             sm={4}
-            key={section.id}
+            key={`${section.name}-${index}`}
             className={styles.sectionColumn}
           >
             <DashboardSection
               section={section}
-              ref={sectionRefs.current[section.id]}
+              ref={sectionRefs.current[section.name]}
             />
           </Column>
         ))}

src/components/clinical/dashboardContainer/__tests__/DashboardContainer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import DashboardContainer from '../DashboardContainer';
-import { DashboardSectionConfig as DashboardSectionType } from '@types/dashboardConfig';
+import { DashboardSectionConfig as DashboardSectionType } from '@/types/dashboardConfig';
 
 // Mock scrollIntoView
 const mockScrollIntoView = jest.fn();
@@ -28,21 +28,6 @@ jest.mock('../../dashboardSection/DashboardSection', () => {
   ));
 });
 
-// Mock the Carbon components with ref forwarding
-jest.mock('@carbon/react', () => ({
-  Grid: jest.fn(({ children }) => (
-    <div data-testid="carbon-grid">{children}</div>
-  )),
-  Column: jest.fn(({ children, ref }) => (
-    <div data-testid="carbon-column" ref={ref}>
-      {children}
-    </div>
-  )),
-  Section: jest.fn(({ children }) => (
-    <div data-testid="carbon-section">{children}</div>
-  )),
-}));
-
 describe('DashboardContainer Component', () => {
   // Set up and reset mocks before each test
   beforeEach(() => {
@@ -59,19 +44,18 @@ describe('DashboardContainer Component', () => {
   afterEach(() => {
     // Clean up the mock after each test
     if (HTMLElement.prototype.scrollIntoView === mockScrollIntoView) {
-      delete HTMLElement.prototype.scrollIntoView;
+      // Use Reflect.deleteProperty to safely delete the property
+      Reflect.deleteProperty(HTMLElement.prototype, 'scrollIntoView');
     }
   });
 
   const mockSections: DashboardSectionType[] = [
     {
-      id: 'section-1-id',
       name: 'Section 1',
       icon: 'icon-1',
       controls: [],
     },
     {
-      id: 'section-2-id',
       name: 'Section 2',
       icon: 'icon-2',
       controls: [],
@@ -104,7 +88,7 @@ describe('DashboardContainer Component', () => {
     expect(screen.getAllByTestId('carbon-column').length).toBe(2); // One column per section
   });
 
-  it('scrolls to the active section when activeItemId matches section id', async () => {
+  it('scrolls to the active section when activeItemId matches section name', async () => {
     // Create a spy div element with scrollIntoView method
     const spyElement = document.createElement('div');
     const scrollSpy = jest.spyOn(spyElement, 'scrollIntoView');
@@ -114,11 +98,11 @@ describe('DashboardContainer Component', () => {
       current: spyElement,
     }));
 
-    // Render component with activeItemId matching a section id
+    // Render component with activeItemId matching a section name
     render(
       <DashboardContainer
         sections={mockSections}
-        activeItemId="section-1-id"
+        activeItemId="Section 1"
       />,
     );
 
@@ -176,7 +160,6 @@ describe('DashboardContainer Component', () => {
     const updatedSections: DashboardSectionType[] = [
       ...mockSections,
       {
-        id: 'section-3-id',
         name: 'Section 3',
         icon: 'icon-3',
         controls: [],
@@ -193,7 +176,7 @@ describe('DashboardContainer Component', () => {
     rerender(
       <DashboardContainer
         sections={updatedSections}
-        activeItemId="section-3-id"
+        activeItemId="Section 3"
       />,
     );
 
@@ -226,7 +209,7 @@ describe('DashboardContainer Component', () => {
     rerender(
       <DashboardContainer
         sections={reducedSections}
-        activeItemId="section-2-id"
+        activeItemId="Section 2"
       />,
     );
 

src/components/clinical/dashboardSection/DashboardSection.tsx

@@ -19,7 +19,7 @@ const renderSectionContent = (section: DashboardSectionConfig) => {
     return (
       <div className="section-controls">
         {section.controls.map((control, index) => (
-          <div key={index}>
+          <div key={`${control.type}-${index}`}>
             {renderControlContent(control.type)}
           </div>
         ))}
@@ -68,7 +68,7 @@ const DashboardSection: React.FC<DashboardSectionProps> = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <Tile id={`section-${section.id}`} ref={ref}>
+    <Tile id={`section-${section.name.toLowerCase().replace(/\s+/g, '-')}`} ref={ref}>
       <p className={styles.sectionTitle}>
         {t(section.translationKey || section.name)}
       </p>

src/components/clinical/dashboardSection/__tests__/DashboardSection.test.tsx

@@ -34,14 +34,13 @@ jest.mock('@displayControls/conditions/ConditionsTable', () => ({
 
 describe('DashboardSection Component', () => {
   const mockSection: DashboardSectionConfig = {
-    id: 'test-section-id',
     name: 'Test Section',
     icon: 'test-icon',
     controls: [],
   };
 
   // Handle for forwardRef in tests
-  const mockRef = jest.fn();
+  const mockRef = React.createRef<HTMLDivElement>();
 
   it('renders with the correct section name', () => {
     render(<DashboardSection section={mockSection} ref={mockRef} />);
@@ -50,14 +49,14 @@ describe('DashboardSection Component', () => {
     expect(screen.getByText('Test Section')).toBeInTheDocument();
   });
 
-  it('has the correct id attribute', () => {
+  it('has the correct id attribute based on section name', () => {
     const { container } = render(
       <DashboardSection section={mockSection} ref={mockRef} />,
     );
 
-    // Check if the div has the correct id
+    // Check if the div has the correct id based on section name
     const sectionDiv = container.querySelector(
-      `div[id="section-${mockSection.id}"]`,
+      `div[id="section-test-section"]`,
     );
     expect(sectionDiv).not.toBeNull();
   });
@@ -70,7 +69,7 @@ describe('DashboardSection Component', () => {
   });
 
   it('accepts a ref prop', () => {
-    const mockRefFn = jest.fn();
+    const mockRefFn = React.createRef<HTMLDivElement>();
 
     render(<DashboardSection section={mockSection} ref={mockRefFn} />);
 
@@ -81,7 +80,6 @@ describe('DashboardSection Component', () => {
 
   it('uses translationKey instead of name when available', () => {
     const sectionWithTranslationKey: DashboardSectionConfig = {
-      id: 'test-section-id',
       name: 'Test Section',
       translationKey: 'custom.translation.key',
       icon: 'test-icon',
@@ -100,7 +98,6 @@ describe('DashboardSection Component', () => {
   describe('content rendering', () => {
     it('renders AllergiesTable when section name is Allergies', () => {
       const allergiesSection: DashboardSectionConfig = {
-        id: 'allergies-id',
         name: 'Allergies',
         icon: 'test-icon',
         controls: [],
@@ -113,7 +110,6 @@ describe('DashboardSection Component', () => {
 
     it('renders ConditionsTable when section name is Conditions', () => {
       const conditionsSection: DashboardSectionConfig = {
-        id: 'conditions-id',
         name: 'Conditions',
         icon: 'test-icon',
         controls: [],
@@ -126,7 +122,6 @@ describe('DashboardSection Component', () => {
 
     it('renders no content for unknown section types', () => {
       const unknownSection: DashboardSectionConfig = {
-        id: 'unknown-section-id',
         name: 'Unknown Section',
         icon: 'test-icon',
         controls: [],

src/displayControls/diagnoses/styles/Diagnoses.module.scss

@@ -4,7 +4,7 @@
 
 .tableHeader {
   display: flex;
-  padding: 1rem 1rem;
+  padding: 1rem;
   background-color: #ffffff;
   border-bottom: 1px solid #e0e0e0;
   font-size: 0.875rem;
@@ -17,8 +17,8 @@
 }
 
 .recordedByColumn {
-  width: 200px;
-  padding-right: 1rem;
+  width: 180px;
+padding-right: 1rem;
 }
 
 .accordionItem {
@@ -27,10 +27,6 @@
     padding-inline: 0px;
   }
 
-  :global(.cds--accordion__heading) {
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
 
   :global(.cds--accordion__wrapper) {
    padding-inline: 0px !important;
@@ -46,12 +42,7 @@
 
 .diagnosisRow {
   display: flex;
-  padding: 1rem;
   align-items: center;
-
-  &:last-child {
-    border-bottom: none;
-  }
 }
 
 .diagnosisCell {

src/schemas/dashboardConfig.schema.json

@@ -28,10 +28,21 @@
           },
           "controls": {
             "type": "array",
-            "description": "List of controls in the section"
+            "description": "List of controls in the section",
+            "items": {
+              "type": "object",
+              "additionalProperties": false,
+              "required": ["type"],
+              "properties": {
+                "type": {
+                  "type": "string"
+                }
+              }
+            }
+          }
           }
         }
       }
     }
   }
-}
+  

src/types/dashboardConfig.ts

@@ -3,32 +3,17 @@ export type ControlType = 'allergies' | 'conditions' | 'diagnoses' | 'labInvesti
 
 // Enhanced control configuration interface
 export interface ControlConfig {
-  id: string;
   type: ControlType;
-  props?: Record<string, any>; // Control-specific props
-  config?: Record<string, any>; // Control-specific configuration
-  enabled?: boolean; // Whether the control is enabled
 }
 
 // Updated DashboardSectionConfig with better typing
 export interface DashboardSectionConfig {
-  id: string;
   name: string;
   translationKey?: string;
   icon: string;
   controls: ControlConfig[]; // Changed from fixed array to flexible array
-  enabled?: boolean; // Whether the section is enabled
-  order?: number; // Display order
 }
 
 export interface DashboardConfig {
   sections: DashboardSectionConfig[];
-  version?: string; // Configuration version for future compatibility
-}
-
-// Control component interface for registry
-export interface ControlComponent {
-  component: React.ComponentType<any>;
-  defaultProps?: Record<string, any>;
-  displayName?: string;
 }