@salesforce/plugin-omnistudio-migration-tool 2.0.0-rc.6 → 2.0.0-rc.61

package/lib/styles/reportGenerator.css

@@ -9,6 +9,10 @@
   text-align: center;
 }
 
+.slds-m-around_medium {
+  margin: 1vw;
+}
+
 .filter-header-bar {
   display: flex;
   justify-content: flex-end;
@@ -32,6 +36,31 @@
   margin-left: -32px;
 }
 
+/* EXPORT CSV BUTTON */
+.export-csv-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  background-color: #0070d2;
+  color: #fff;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: 13px;
+  height: 28px;
+  border: none;
+  white-space: nowrap;
+}
+
+.export-csv-button:hover {
+  background-color: #005bb5;
+}
+
+.export-csv-button:active {
+  background-color: #004494;
+}
+
 /* FILTER BUTTON */
 .filter-toggle-button {
   display: flex;
@@ -48,9 +77,11 @@
 /* === Dropdown Styles === */
 .filter-dropdown-container {
   display: flex;
-  justify-content: flex-end; /* push right */
+  justify-content: flex-end;
+  /* push right */
   width: 100%;
   padding: 8px 0;
+  position: relative;
 }
 
 .filter-dropdown {
@@ -58,13 +89,15 @@
   position: absolute;
   background-color: white;
   min-width: 250px;
+  max-width: 400px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
   padding: 12px;
-  z-index: 10;
+  z-index: 100;
   border: 1px solid #ccc;
   border-radius: 8px;
-  right: 0;
-  margin: 32px;
+  right: 20px;
+  top: 40px;
+  margin-top: 0;
 }
 
 .filter-dropdown.show {
@@ -102,7 +135,8 @@
 
 /* === Table Styles === */
 .table-container {
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
   max-width: 100%;
   position: relative;
   margin-top: 20px;
@@ -157,13 +191,14 @@ tbody tr td {
 /* === Filter, search and count === */
 .slds-text-heading_large {
   width: auto;
-  height: 28px;
+  min-height: 28px;
   top: 50px;
   left: 43px;
   font-weight: 200;
   font-size: 28px;
   line-height: 28px;
   letter-spacing: 0px;
+  white-space: nowrap;
 }
 
 .search-container {
@@ -182,7 +217,8 @@ tbody tr td {
 }
 
 .search-input {
-  padding: 6px 10px 6px 28px; /* space for icon on left */
+  padding: 6px 10px 6px 28px;
+  /* space for icon on left */
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 14px;
@@ -238,6 +274,12 @@ html {
   background: #f8f8f8;
 }
 
+body {
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+}
+
 .diffModal {
   display: none;
   position: fixed;
@@ -305,12 +347,15 @@ html {
 
 .expandModalButton {
   position: absolute;
-  top: 5px;
-  right: 5px;
+  top: 8px;
+  right: 8px;
   width: 30px;
   height: 30px;
   opacity: 0.7;
+  display: none;
+  z-index: 10;
 }
+
 .report-wrapper {
   display: flex;
   gap: 20px;
@@ -325,7 +370,7 @@ html {
 .scrollable-wrapper {
   display: flex;
   width: 100%;
-  overflow-x: auto;
+  /* overflow-x moved to .table-container to allow sticky positioning to work */
   transition: all 0.3s ease;
   box-sizing: border-box;
 }
@@ -335,7 +380,8 @@ html {
   width: 100%;
   transition: width 0.3s ease;
   box-sizing: border-box;
-  min-width: 700px;
+  /* Removed min-width to prevent forcing horizontal scroll at page level */
+  /* min-width: 700px; */
 }
 
 .table-summary-wrapper.shrunk {
@@ -386,7 +432,7 @@ html {
 .details-body {
   display: flex;
   flex-direction: row;
-  gap: 10px;
+  gap: 0.5vw;
   margin-top: 2rem;
   flex-wrap: wrap;
 }
@@ -402,8 +448,8 @@ html {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  height: 14rem;
-  min-width: 25rem;
+  min-height: 14rem;
+  min-width: max(23.6vw, 20rem);
   background-color: #fff;
 }
 
@@ -428,7 +474,6 @@ hr {
 }
 
 td {
-  border-left: 1px solid #e5e5e5;
   word-wrap: break-word;
   white-space: normal !important;
 }
@@ -541,7 +586,8 @@ td {
 
 .invalid-icon {
   position: relative;
-  padding-left: 24px; /* space for icon */
+  padding-left: 24px;
+  /* space for icon */
 }
 
 .invalid-icon::before {
@@ -566,3 +612,182 @@ td {
   background-color: red;
   transform: translateY(-50%) rotate(45deg);
 }
+
+.highlight {
+  background-color: #f3f3f3;
+}
+
+.normal-td-padding {
+  padding-left: 0.5rem !important;
+}
+
+.no-display {
+  display: none;
+}
+
+.diff-cell {
+  min-width: 30rem;
+  max-width: none !important;
+  padding: 0 !important;
+  overflow: visible !important;
+}
+
+.diff-content-wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.diff-content-wrapper:hover .expandModalButton {
+  display: block;
+}
+
+/* === Dashboard Layout Changes === */
+
+/* Two-Pane Layout */
+.dashboard-layout-container {
+  display: flex;
+  gap: 1vw;
+  margin-top: 16px;
+}
+
+.dashboard-layout-container.single-pane {
+  gap: 0;
+}
+
+.dashboard-left-pane {
+  flex: 1;
+  min-width: 72vw;
+  /* Allows flex item to shrink below content size */
+}
+
+.dashboard-layout-container.single-pane .dashboard-left-pane {
+  flex: 1;
+  width: 100%;
+}
+
+.dashboard-right-pane {
+  margin-top: 16px;
+}
+
+.dashboard-right-pane li {
+  margin-bottom: 1rem;
+}
+
+.user-actions-container {
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  top: 20px;
+}
+
+.action-items-subtitle {
+  color: #666;
+  font-weight: 500;
+}
+
+.dashboard-common-pane {
+  display: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+  .dashboard-common-pane {
+    display: block;
+    margin-top: 1rem;
+  }
+
+  .dashboard-right-pane {
+    display: none;
+  }
+
+  .dashboard-layout-container {
+    flex-direction: column;
+  }
+
+  .dashboard-layout-container.single-pane {
+    flex-direction: column;
+  }
+
+  .dashboard-right-pane {
+    flex: none;
+    max-width: none;
+    margin-top: 16px;
+  }
+
+  .dashboard-right-pane li {
+    margin-bottom: 1rem;
+  }
+
+  .user-actions-container {
+    position: static;
+  }
+}
+
+/* Status Legends Styling */
+.status-legends-container {
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  margin-bottom: 16px;
+}
+
+.status-legends h3 {
+  color: #333;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.legend-items {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  display: inline-block;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.legend-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.legend-green {
+  background-color: #2e844a;
+}
+
+.legend-yellow {
+  background-color: #fe9339;
+}
+
+.legend-red {
+  background-color: #ea001e;
+}
+
+.legend-text {
+  font-size: 14px;
+  color: #333;
+  font-weight: 600;
+}
+
+.legend-description {
+  font-size: 13px;
+  color: #666;
+  font-weight: 400;
+  line-height: 1.4;
+}

package/lib/templates/assessmentReport.template

@@ -9,10 +9,11 @@
 </head>
 
 <body>
+  <div id="props" class="no-display">{{props}}</div>
   <div style="margin: 20px">
     <div class="report-wrapper">
       <div id="scrollable-wrapper" class="scrollable-wrapper">
-        <c:if exp={$callToAction.length> 0}>
+        <c:if exp={$callToAction.length>0}>
           <!-- Call To Action Button -->
           <button class="cta-button" onclick="toggleCtaPanel()">Call To Action</button>
 
@@ -48,7 +49,7 @@
               <path
                 d="M31.082 27.5l-13.999-24.249c-0.237-0.352-0.633-0.58-1.083-0.58s-0.846 0.228-1.080 0.575l-0.003 0.005-14 24.249c-0.105 0.179-0.167 0.395-0.167 0.625 0 0.69 0.56 1.25 1.25 1.25h28c0.69 0 1.249-0.56 1.249-1.25 0-0.23-0.062-0.446-0.171-0.631zM4.165 26.875l11.835-20.499 11.834 20.499zM14.75 12v8.994c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25V12c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25zM15.12 23.619c-0.124 0.106-0.22 0.24-0.278 0.394-0.051 0.143-0.08 0.308-0.08 0.48s0.029 0.337 0.083 0.491c0.144 0.3 0.38 0.536 0.671 0.676 0.143 0.051 0.308 0.080 0.48 0.080s0.337-0.029 0.49-0.083c0.156-0.071 0.288-0.166 0.4-0.281 0.224-0.225 0.363-0.536 0.363-0.878 0-0.687-0.557-1.244-1.244-1.244-0.343 0-0.653 0.139-0.878 0.363z" />
             </svg>
-            <span>High level description of what actions were taken as part of the migration will come here</span>
+            <span>A high-level summary of the actions taken during the Omnistudio migration will appear here.</span>
           </div>
 
           <div class="header-container">
@@ -72,13 +73,13 @@
               <div class="label-value">{{org.dataModel}}</div>
             </div>
 
-            <div class="org-details-section">
-              <div class="label-key">Assessment Date and Time</div>
-              <div class="label-value">{{assessmentDate}}</div>
-            </div>
+          <div class="org-details-section">
+            <div class="label-key">Assessment Date and Time</div>
+            <div class="label-value">{{assessmentDate}}</div>
           </div>
+        </div>
 
-          <div class="filter-dropdown-container">
+        <div class="filter-dropdown-container">
             <div class="filter-header-bar">
               <!-- Row count display -->
               <div class="row-count-display" id="row-count">Loading Records...</div>
@@ -93,6 +94,14 @@
                 <input type="text" id="name-search-input" class="search-input" placeholder="Search Name"
                   oninput="filterAndSearchTable('report-table')" />
               </div>
+              <!-- Export to CSV button -->
+              <button class="export-csv-button" onclick="exportTableToCSV('report-table')" title="Export to CSV">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
+                  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
+                </svg>
+                Export CSV
+              </button>
               <c:if exp={$filterGroups.length>0}>
                 <div class="filter-toggle-button" onclick="toggleFilterDropdown('report-table')">
                   Filters
@@ -127,7 +136,7 @@
               </c:for>
             </div>
           </div>
-          <div class="table-container">
+          <div class="table-container standard custom" data-model="(org.dataModel)" data-report-type="(reportType)">
             <table
               class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped slds-table_col-bordered"
               aria-label="Data Mapper Assessment">
@@ -219,6 +228,19 @@
                 </tr>
               </tbody>
             </table>
+            <c:if exp={Array.isArray($actionItems) && $actionItems.length> 0}>
+              <div class="slds-box slds-theme_default slds-m-top_medium">
+                <div class="slds-text-heading_medium slds-m-bottom_small">User Action Required</div>
+                <div class="slds-m-bottom_small">
+                  <p class="slds-m-bottom_x-small">Action Items</p>
+                  <ul class="slds-list_dotted">
+                    <c:for items=(actionItems) var="actionItem">
+                      <li class="slds-item slds-text-color_destructive">{{actionItem}}</li>
+                    </c:for>
+                  </ul>
+                </div>
+              </div>
+            </c:if>
           </div>
         </div>
         <div id="cta-summary-panel" class="cta-summary-panel hidden">
@@ -260,6 +282,54 @@
             </div>
           </c:if>
         </div>
+        
+        <!-- Pagination Navigation -->
+        <c:if exp={$pagination}>
+          <div class="pagination-container" style="margin-top: 20px; text-align: center;">
+            <div class="pagination-info" style="margin-bottom: 10px; color: #666;">
+              Page {{pagination.currentPage}} of {{pagination.totalPages}} 
+              ({{pagination.pageSize}} items per page)
+            </div>
+            
+            <div class="pagination-controls">
+              <c:if exp={$pagination.hasPreviousPage}>
+                <a href="{{pagination.previousPageFile}}" class="pagination-btn" style="
+                  display: inline-block;
+                  padding: 8px 16px;
+                  margin: 0 5px;
+                  background-color: #0070d2;
+                  color: white;
+                  text-decoration: none;
+                  border-radius: 4px;
+                  font-weight: bold;
+                ">&larr; Previous</a>
+              </c:if>
+              
+              <span class="current-page" style="
+                display: inline-block;
+                padding: 8px 16px;
+                margin: 0 5px;
+                background-color: #f3f2f2;
+                color: #333;
+                border-radius: 4px;
+                font-weight: bold;
+              ">{{pagination.currentPage}}</span>
+              
+              <c:if exp={$pagination.hasNextPage}>
+                <a href="{{pagination.nextPageFile}}" class="pagination-btn" style="
+                  display: inline-block;
+                  padding: 8px 16px;
+                  margin: 0 5px;
+                  background-color: #0070d2;
+                  color: white;
+                  text-decoration: none;
+                  border-radius: 4px;
+                  font-weight: bold;
+                ">Next &rarr;</a>
+              </c:if>
+            </div>
+          </div>
+        </c:if>
       </div>
     </div>
   </div>

package/lib/templates/dashboard.template

@@ -11,76 +11,105 @@
 <body>
   <div class="slds-m-around_medium">
     <div class="slds-text-heading_large">{{heading}}</div>
-    <div class="header-container">
-      <div class="org-details-section">
-        <div class="label-key">Org Name</div>
-        <div class="label-value">{{org.name}}</div>
-      </div>
-
-      <div class="org-details-section">
-        <div class="label-key">Org ID</div>
-        <div class="label-value">{{org.id}}</div>
-      </div>
+    
+    <!-- Two-Pane Layout Container -->
+    <div class="dashboard-layout-container">
+      <!-- Left Pane: Org Details, Legends, and Component Cards -->
+      <div class="dashboard-left-pane">
+        <!-- Org Details Section -->
+        <div class="header-container">
+          <div class="org-details-section">
+            <div class="label-key">Org Name</div>
+            <div class="label-value">{{org.name}}</div>
+          </div>
 
-      <div class="org-details-section">
-        <div class="label-key">Namespace</div>
-        <div class="label-value">{{org.namespace}}</div>
-      </div>
+          <div class="org-details-section">
+            <div class="label-key">Org ID</div>
+            <div class="label-value">{{org.id}}</div>
+          </div>
 
-      <div class="org-details-section">
-        <div class="label-key">Data Model</div>
-        <div class="label-value">{{org.dataModel}}</div>
-      </div>
+          <div class="org-details-section">
+            <div class="label-key">Namespace</div>
+            <div class="label-value">{{org.namespace}}</div>
+          </div>
 
-      <div class="org-details-section">
-        <c:if exp={$mode == 'assess'}>
-          <div class="label-key">Assessment Date and Time</div>
-        </c:if>
-        <c:if exp={$mode == 'migrate'}>
-          <div class="label-key">Migration Date and Time</div>
-        </c:if>
-        <div class="label-value">{{assessmentDate}}</div>
-      </div>
-    </div>
+          <div class="org-details-section">
+            <div class="label-key">Data Model</div>
+            <div class="label-value">{{org.dataModel}}</div>
+          </div>
 
-    <div class="details-body">
-      <c:for items=(summaryItems) var="summary">
-        <div class="slds-box slds-box_small slds-box_body-spacing">
-          <div class="detail-row">
-            <div class="detail-item slds-text-heading_medium">{{summary.name}}</div>
-            <div class="detail-item slds-text-heading_medium">{{summary.total}}</div>
+          <div class="org-details-section">
+            <c:if exp={$mode == 'assess'}>
+              <div class="label-key">Assessment Date and Time</div>
+            </c:if>
+            <c:if exp={$mode == 'migrate'}>
+              <div class="label-key">Migration Date and Time</div>
+            </c:if>
+            <div class="label-value">{{assessmentDate}}</div>
           </div>
-          <hr />
-          <c:for items=(summary.data) var="item">
-            <div class="detail-row">
-              <div class="detail-item">{{item.name}}</div>
-              <div class="(item.cssClass)">{{item.count}}</div>
+        </div>
+
+        <div class="dashboard-common-pane">
+          <c:if exp={Array.isArray($actionItems) && $actionItems.length > 0}>
+            <div class="user-actions-container">
+              <div class="slds-text-heading_medium slds-m-bottom_small">User Actions Required</div>
+              <div class="slds-text-body_small slds-m-bottom_small action-items-subtitle">Action Items</div>
+              <ul class="slds-list_dotted">
+                <c:for items=(actionItems) var="actionItem">
+                  <li class="slds-item action-item-black">{{actionItem}}</li>
+                </c:for>
+              </ul>
             </div>
-          </c:for>
+          </c:if>
+        </div>
 
-          <div class="detail-row card-footer">
-            <button class="slds-button_stretch slds-button slds-button_neutral" data-summary="(summary.file)"
-              onclick="openReport(this)">
-              View Report
-            </button>
-          </div>
+        <!-- Component Cards Section -->
+        <div class="details-body">
+          <c:for items=(summaryItems) var="summary">
+            <div class="slds-box slds-box_small slds-box_body-spacing">
+              <div class="detail-row">
+                <div class="detail-item slds-text-heading_medium">{{summary.name}}</div>
+                <c:if exp={$summary.showDetails !== false}>
+                  <div class="detail-item slds-text-heading_medium">{{summary.total}}</div>
+                </c:if>
+              </div>
+              <hr />
+              <c:for items=(summary.data) var="item">
+                <div class="detail-row">
+                  <div class="detail-item">{{item.name}}</div>
+                  <c:if exp={$summary.showDetails !== false}>
+                    <div class="(item.cssClass)">{{item.count}}</div>
+                  </c:if>
+                </div>
+              </c:for>
+
+              <c:if exp={$summary.showDetails !== false}>
+                <div class="detail-row card-footer">
+                  <button class="slds-button_stretch slds-button slds-button_neutral" data-summary="(summary.file)"
+                    onclick="openReport(this)">
+                    View Report
+                  </button>
+                </div>
+              </c:if>
+            </div>
+          </c:for>
         </div>
-      </c:for>
-    </div>
-    <div>
-      <c:if exp={Array.isArray($actionItems) && $actionItems.length > 0}>
-        <div class="slds-box slds-theme_default slds-m-top_medium">
-          <div class="slds-text-heading_medium slds-m-bottom_small">User Action Required</div>
-          <div class="slds-m-bottom_small">
-            <p class="slds-m-bottom_x-small">Action Items</p>
+      </div>
+
+      <!-- Right Pane: User Actions -->
+      <div class="dashboard-right-pane">
+        <c:if exp={Array.isArray($actionItems) && $actionItems.length > 0}>
+          <div class="user-actions-container">
+            <div class="slds-text-heading_medium slds-m-bottom_small">User Actions Required</div>
+            <div class="slds-text-body_small slds-m-bottom_small action-items-subtitle">Action Items</div>
             <ul class="slds-list_dotted">
               <c:for items=(actionItems) var="actionItem">
-                <li class="slds-item slds-text-color_destructive">{{actionItem}}</li>
+                <li class="slds-item action-item-black">{{actionItem}}</li>
               </c:for>
             </ul>
           </div>
-        </div>
-      </c:if>
+        </c:if>
+      </div>
     </div>
   </div>
 </body>