Phani | A-1205421128183821 | Refactor SCSS classnames in Forms displa…

…y control to avoid Conflicts (#695) * Refactor the Css class names to avoid conflicts * Fix test * Fix time format
Bahmni · Sep 7, 2023 · 9d89ccb · 9d89ccb
1 parent d92d87d
commit 9d89ccb
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.jsx b/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.jsx
@@ -63,11 +63,11 @@ export function FormDisplayControl(props) {
         <>
         <I18nProvider>
             <div>
-                <h2 className={"section-title"}>
+                <h2 className={"forms-display-control-section-title"}>
                     {formsHeading}
                 </h2>
                 {isLoading ? <div className="loading-message">{loadingMessage}</div> : (
-                    <div className={"placeholder-text"}>{Object.entries(formList).length > 0 ? (
+                    <div className={"placeholder-text-forms-control"}>{Object.entries(formList).length > 0 ? (
                         Object.entries(formList).map(([key, value]) => {
                             const moreThanOneEntry = value.length > 1;
                             return (
@@ -77,17 +77,17 @@ export function FormDisplayControl(props) {
                                             value.map((entry) => {
                                                 return (
                                                     <div className={"row-accordion"}>
-                                                        <span className={"form-name-text"}><a className="form-link">{moment(entry.encounterDate).format("DD/MM/YYYY HH:MM")}</a>{showEdit(entry.encounterUuid) && <i className="fa fa-pencil"></i>}</span>
+                                                        <span className={"form-name-text"}><a className="form-link">{moment(entry.encounterDate).format("DD/MM/YYYY HH:mm")}</a>{showEdit(entry.encounterUuid) && <i className="fa fa-pencil"></i>}</span>
                                                         <span className={"form-provider-text"}>{entry.providerName}</span>
                                                     </div>
                                                 );
                                             })
                                         }
                                     </AccordionItem>
                                 </Accordion>) :
-                                    <div className={"row"}>
+                                    <div className={"form-display-control-row"}>
                                         <span className={"form-non-accordion-text form-heading"}>{key}</span>
-                                        <span className={"form-non-accordion-text  form-date-align"}><a className="form-link">{moment(value[0].encounterDate).format("DD/MM/YYYY HH:MM")}</a>{showEdit(value[0].encounterUuid) && <i className="fa fa-pencil"></i>}</span>
+                                        <span className={"form-non-accordion-text  form-date-align"}><a className="form-link">{moment(value[0].encounterDate).format("DD/MM/YYYY HH:mm")}</a>{showEdit(value[0].encounterUuid) && <i className="fa fa-pencil"></i>}</span>
                                         <span className={"form-non-accordion-text"}>{value[0].providerName}</span>
                                     </div>
                             );

diff --git a/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.spec.jsx b/micro-frontends/src/next-ui/Containers/formDisplayControl/FormDisplayControl.spec.jsx
@@ -32,7 +32,7 @@ describe('FormDisplayControl Component for empty mock data', () => {
 
     await waitFor(() => {
       expect(screen.getByText('No Form found for this patient....')).toBeTruthy();
-      expect(container.querySelector(".placeholder-text").innerHTML).toEqual('No Form found for this patient....');
+      expect(container.querySelector(".placeholder-text-forms-control").innerHTML).toEqual('No Form found for this patient....');
     });
   });
 });
@@ -73,7 +73,7 @@ describe('FormDisplayControl Component with Accordion and Non-Accordion', () =>
     await waitFor(() => {
       expect(container.querySelectorAll(".bx--accordion__title")).toHaveLength(1);
       expect(container.querySelector(".bx--accordion__title").innerHTML).toEqual('Pre Anaesthesia Assessment');
-      expect(container.querySelector(".row-accordion > .form-name-text > .form-link").innerHTML).toEqual(moment(1693217959000).format("DD/MM/YYYY HH:MM"));
+      expect(container.querySelector(".row-accordion > .form-name-text > .form-link").innerHTML).toEqual(moment(1693217959000).format("DD/MM/YYYY HH:mm"));
       expect(container.querySelector(".row-accordion > .form-provider-text").innerHTML).toEqual('Doctor One');
 
     });
@@ -85,10 +85,10 @@ describe('FormDisplayControl Component with Accordion and Non-Accordion', () =>
     await waitFor(() => {
       expect(container.querySelectorAll(".form-non-accordion-text")).toHaveLength(6);
       expect(container.querySelectorAll(".form-non-accordion-text.form-heading")[0].innerHTML).toEqual('Orthopaedic Triage');
-      expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[0].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:MM"));
+      expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[0].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:mm"));
       expect(container.querySelectorAll(".form-non-accordion-text")[2].innerHTML).toEqual('Doctor Two');
       expect(container.querySelectorAll(".form-non-accordion-text.form-heading")[1].innerHTML).toEqual('Patient Progress Notes and Orders');
-      expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[1].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:MM"));
+      expect(container.querySelectorAll(".form-non-accordion-text.form-date-align > a")[1].innerHTML).toEqual(moment(1693277657000).format("DD/MM/YYYY HH:mm"));
       expect(container.querySelectorAll(".form-non-accordion-text")[5].innerHTML).toEqual('Doctor One');
     });
 

diff --git a/.../src/next-ui/Containers/formDisplayControl/__snapshots__/FormDisplayControl.spec.jsx.snap b/.../src/next-ui/Containers/formDisplayControl/__snapshots__/FormDisplayControl.spec.jsx.snap
@@ -5,7 +5,7 @@ exports[`FormDisplayControl Component should render the component 1`] = `
   <div>
     <div>
       <h2
-        class="section-title"
+        class="forms-display-control-section-title"
       >
         Observation Forms
       </h2>

diff --git a/micro-frontends/src/next-ui/Containers/formDisplayControl/formDisplayControl.scss b/micro-frontends/src/next-ui/Containers/formDisplayControl/formDisplayControl.scss
@@ -1,4 +1,4 @@
-.section-title{
+.forms-display-control-section-title{
   font-family: OpenSans, Arial, sans-serif;
   padding: 10px;
   margin-top: 0;
@@ -11,13 +11,13 @@
   border-radius: 2px 2px 0 0;
 }
 
-.placeholder-text{
+.placeholder-text-forms-control{
   background: #fff;
   padding: 5px;
   color: #444 !important;
 }
 
-.row{
+.form-display-control-row{
   display: flex;
   justify-content: space-between;
   padding: 10px;