ASSETS-88920 : Cosmetic Updates from MVP Feedback (#126)

* feat: Add Geo column to program list and adjust column widths for proper alignment

- Updated `gmo-program-list.js` to include Geo column in the header configuration and campaign list
- Adjusted column widths in `gmo-program-list.css` to ensure proper alignment under each column heading
- Add function `formatGeos` to format Geo array as comma-delimited list, that is displayed in the Geo column

* - Added a tooltip to the "Total Approved Assets" field in the Deliverables tab.
- Tooltip text provides instructions to view assets: "To view the assets, go to the 'All Asset' search page and use Program and Campaign name facet to filter the assets."
- Styled the tooltip to match the color and background of the Launch Date tooltip.
- Ensured the tooltip text appears on one line and positioned it correctly.
- Updated the "Total Asset" label to "Total Approved Asset"
- Updated the "Deliverable Name" column name to "Deliverable Task Name"

* - Added the Driver detail in Overview Tab next to Launch date like "Project Owner: Aina Tchoshanova"
- Update the Project "Owner column" label to "Task Owner"

blocks/gmo-program-details/gmo-program-details.css

@@ -102,6 +102,20 @@ body {
     }
 }
 
+.details-header-wrapper .header-row3 {
+    display: flex;
+    align-items: center;
+}
+
+.details-header-wrapper .header-row3 .icon-calendar {
+    margin-right: 10px;
+}
+
+.details-header-wrapper .header-row3 .driver-text {
+    font: normal normal normal 14px/21px Adobe Clean;
+    margin-left: 55px;
+}
+
 .campaign-img {
     width: 80px;
     height: 80px;
@@ -319,6 +333,47 @@ body {
     }
 }
 
+.total-assets-tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.total-assets-tooltip .tooltiptext {
+    visibility: hidden;
+    white-space: nowrap; /* Ensure text appears on one line */
+    background-color: #D3D3D3; /* Match the background color */
+    color: black; /* Match the text color */
+    text-align: left; /* Left-align the text */
+    border-radius: 4px;
+    padding: 5px 10px; /* Adjust padding as needed */
+    position: absolute;
+    z-index: 1;
+    top: 50%; /* Center vertically */
+    left: 100%; /* Position to the right of the element */
+    transform: translateY(-50%); /* Center vertically */
+    margin-left: 10px; /* Adjust margin to match the screenshot */
+    opacity: 0;
+    transition: opacity 0.3s;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
+}
+
+.total-assets-tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 50%; /* Center the arrow vertically */
+    left: -5px; /* Adjust to position the arrow */
+    transform: translateY(-50%); /* Center vertically */
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent #D3D3D3 transparent transparent; /* Arrow color matches tooltip background */
+}
+
+.total-assets-tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
 .table-wrapper {
     font: normal normal bold 14px/21px Adobe Clean;
     & > .table-header {
@@ -528,3 +583,4 @@ body {
         width: 100px;
     }
 }
+

blocks/gmo-program-details/gmo-program-details.js

@@ -125,21 +125,22 @@ export default async function decorate(block) {
         <div id="tab2" class="deliverables tab inactive">
             <div class="page-heading">
                 ${artifactLinks}
-                <div class="total-assets">
-                    <div class="h3">Total Assets</div>
+                <div class="total-assets total-assets-tooltip">
+                    <div class="h3">Total Approved Assets</div>
                     <span id="totalassets" class="description"></span>
+                    <span class="tooltiptext">To view the assets, go to the "All Asset" search page and use Program and Campaign name facet to filter the assets</span>
                 </div>
             </div>
             <div class="table-wrapper">
                 <div class="table-header">
-                    <div class="header table-column column1">Deliverable Name</div>
+                    <div class="header table-column column1">Deliverable Task Name</div>
                     <div class="header table-column column2">Deliverable Type</div>
                     <div class="header table-column column3">Platforms</div>
                     <div class="header table-column column4">Review Link</div>
                     <div class="header table-column column5">Final Asset</div>
                     <div class="header table-column column7">Status Update</div>
                     <div class="header table-column column8">Completion Date</div>
-                    <div class="header table-column column9">Project Owner</div>
+                    <div class="header table-column column9">Task Owner</div>
                 </div>
                 <div class="table-content">
                 </div>
@@ -192,13 +193,28 @@ function enableBackBtn(block, blockConfig) {
     })
 }
 
+function buildDriverField(driverName) {
+    const driverSpan = document.createElement('span');
+    driverSpan.classList.add('driver-text');
+    driverSpan.innerHTML = `Project Owner: ${driverName}`;
+    return driverSpan;
+}
+
 function buildHeader(program, queryVars) {
     const headerWrapper = document.createElement('div');
     headerWrapper.classList.add('details-header-wrapper');
     const date = program && program.launchDate ? `<div class="header-row3"><span class="icon icon-calendar">` +
         `</span><span class="date-tooltip">Launch date</span><span class="campaign-date">${formatDate(program.launchDate)}</span></div>` : "";
     const programName = program ? program.programName : queryVars.programName;
     const campaignName = program && program.campaignName ? '<div class="header-row2"><span class="subtitle">' + program.campaignName + '</span></div> ': "";
+
+    const driver = program && program.driver ? program.driver : "Not Available";
+    let driverField = '';
+
+    if (program){
+      driverField=buildDriverField(driver).outerHTML;
+    }
+
     headerWrapper.innerHTML = `
         <div class="campaign-img">
         </div>
@@ -207,7 +223,10 @@ function buildHeader(program, queryVars) {
                 <span class="h1">${programName}</span>
             </div>
             ${campaignName}
-            ${date}
+            <div class="header-row3">
+              ${date}
+              ${driverField}
+            </div>
         </div>
     `
     return headerWrapper;
@@ -611,4 +630,4 @@ function extractQueryVars() {
             programID: 'Program ID Not Available'
         }
     }
-}
+}

blocks/gmo-program-list/gmo-program-list.css

@@ -204,28 +204,33 @@ select {
     border-radius: 4px;
 }
 .column-1 {
-    width: 28%;
+    width: 18%;
     margin-right: 1%;
 }
 .column-2 {
-    width: 40%;
+    width: 25%;
     margin-right: 1%;
 }
 .column-3 {
-    width: 12%;
+    width: 15%;
     margin-right: 1%;
 }
 .column-4 {
-    width: 16%;
+    width: 14%;
     margin-right: 1%;
 }
 .column-5 {
-    width: 13%;
+    width: 10%;
     margin-right: 1%;
 }
 .column-6 {
-    width: 14%;
+    width: 10%;
+    margin-right: 1%;
 }
+.column-7 {
+    width: 5%;
+}
+
 .status {
     width: 80px;
     text-align: center;

blocks/gmo-program-list/gmo-program-list.js

@@ -30,6 +30,11 @@ const headerConfig = [
         'name': 'Status',
         'attribute': 'status',
         'sortable': false
+    },
+    {
+        'name': 'Geo',
+        'attribute': 'geo',
+        'sortable': false
     }
 ]
 
@@ -214,17 +219,28 @@ async function buildCampaignList(campaigns, numPerPage) {
         var campaignStatusWrapper = document.createElement('div');
         campaignStatusWrapper.classList.add('status-wrapper', 'column-6', 'vertical-center');
         campaignStatusWrapper = buildStatus(campaignStatusWrapper, campaign);
+
+        const campaignGeo = document.createElement('div');
+        campaignGeo.textContent = formatGeos(campaign.node.p0TargetGeo);
+        campaignGeo.classList.add('column-7', 'vertical-center');
+        campaignGeo.dataset.property = 'geo';
+
         campaignRow.appendChild(campaignInfoWrapper);
         campaignRow.appendChild(campaignOverviewWrapper);
         campaignRow.appendChild(campaignLaunch);
         campaignRow.appendChild(campaignProducts);
         campaignRow.appendChild(campaignStatusWrapper);
+        campaignRow.appendChild(campaignGeo);
 
         listWrapper.appendChild(campaignRow);
     }
     return listWrapper;
 }
 
+function formatGeos(geoArray) {
+    return geoArray.map(geo => geo.toUpperCase()).join(', ');
+}
+
 function buildStatus(statusWrapper, campaign) {
     const campaignStatus = document.createElement('div');
     const statusStr = checkBlankString(campaign.node.status);