package updates, BEM css names and more cleanup

Author: labkey-martyp

ehr/package-lock.json

@@ -15,8 +15,8 @@
     "lint-fix": "eslint --fix"
   },
   "dependencies": {
-    "@labkey/api": "1.44.0",
-    "@labkey/components": "6.72.1",
+    "@labkey/api": "1.45.0",
+    "@labkey/components": "7.13.1",
     "@labkey/ehr": "0.0.4-fb-ehr-hist-id-search.12"
   },
   "devDependencies": {

ehr/package.json

@@ -54,7 +54,7 @@
   },
   "homepage": "https://github.com/LabKey/ehrModules/labkey-ui-ehr#readme",
   "dependencies": {
-    "@labkey/components": "6.72.1"
+    "@labkey/components": "7.13.1"
   },
   "devDependencies": {
     "@labkey/build": "8.7.0",

labkey-ui-ehr/package-lock.json

@@ -181,7 +181,7 @@ describe('IdResolutionFeedback', () => {
 
             const { container } = render(<IdResolutionFeedback resolutionResult={resolutionResult} />);
 
-            const resolvedItems = container.querySelectorAll('.resolved-item');
+            const resolvedItems = container.querySelectorAll('.id-resolution-feedback__item--resolved');
             expect(resolvedItems).toHaveLength(2);
         });
 
@@ -193,7 +193,7 @@ describe('IdResolutionFeedback', () => {
 
             const { container } = render(<IdResolutionFeedback resolutionResult={resolutionResult} />);
 
-            const notFoundItems = container.querySelectorAll('.not-found-item');
+            const notFoundItems = container.querySelectorAll('.id-resolution-feedback__item--not-found');
             expect(notFoundItems).toHaveLength(2);
         });
     });

labkey-ui-ehr/package.json

@@ -27,35 +27,39 @@ export const IdResolutionFeedback: FC<IdResolutionFeedbackProps> = ({ resolution
 
     return (
         <div className="id-resolution-feedback">
-            <h3 className="title">ID Resolution</h3>
+            <h3 className="id-resolution-feedback__title">ID Resolution</h3>
 
             {resolved.length > 0 && (
-                <div className="section">
-                    <h4 className="section-title resolved">Resolved ({resolved.length})</h4>
-                    <div className="items">
+                <div className="id-resolution-feedback__section">
+                    <h4 className="id-resolution-feedback__section-title id-resolution-feedback__section-title--resolved">
+                        Resolved ({resolved.length})
+                    </h4>
+                    <div className="id-resolution-feedback__items">
                         {directMatches.map(match => (
-                            <div className="item resolved-item" key={match.inputId}>
-                                <span className="resolved-id">{match.resolvedId}</span>
+                            <div className="id-resolution-feedback__item id-resolution-feedback__item--resolved" key={match.inputId}>
+                                <span className="id-resolution-feedback__resolved-id">{match.resolvedId}</span>
                             </div>
                         ))}
                         {aliasMatches.map(match => (
-                            <div className="item resolved-item" key={match.inputId}>
-                                <span className="input-id">{match.inputId}</span>
-                                <span className="arrow">→</span>
-                                <span className="resolved-id">{match.resolvedId}</span>
-                                {match.aliasType && <span className="alias-type">({match.aliasType})</span>}
+                            <div className="id-resolution-feedback__item id-resolution-feedback__item--resolved" key={match.inputId}>
+                                <span className="id-resolution-feedback__input-id">{match.inputId}</span>
+                                <span className="id-resolution-feedback__arrow">→</span>
+                                <span className="id-resolution-feedback__resolved-id">{match.resolvedId}</span>
+                                {match.aliasType && <span className="id-resolution-feedback__alias-type">({match.aliasType})</span>}
                             </div>
                         ))}
                     </div>
                 </div>
             )}
 
             {notFound.length > 0 && (
-                <div className="section">
-                    <h4 className="section-title not-found">Not Found ({notFound.length})</h4>
-                    <div className="items">
+                <div className="id-resolution-feedback__section">
+                    <h4 className="id-resolution-feedback__section-title id-resolution-feedback__section-title--not-found">
+                        Not Found ({notFound.length})
+                    </h4>
+                    <div className="id-resolution-feedback__items">
                         {notFound.map(id => (
-                            <div className="item not-found-item" key={id}>
+                            <div className="id-resolution-feedback__item id-resolution-feedback__item--not-found" key={id}>
                                 {id}
                             </div>
                         ))}