From 9008a535f31845e34ae5ffbad9e44df867187b89 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Tue, 31 Aug 2021 18:01:33 -0400
Subject: [PATCH] fix(cloud-masthead): set unique id for megamenu tabs instead
 of using title (#7024)

### Related Ticket(s)

[Cloud-masthead]: Adjust tabs to not use title as the identifier for related tab content, use unique ID instead #6975

### Description

Ran into an issue with the cloud megamenu tabs when the same tab title is used in two different megamenus. This causes an issue because the current logic uses the title as the identifier of the tabs. Solution is to use a unique id for the tabs instead so no issues occur if the same title is used in multiple megamenus.

**BEFORE:**
<img width="850" alt="Screen Shot 2021-08-31 at 1 09 35 PM" src="https://user-images.githubusercontent.com/54281166/131546404-3afc520d-cb9a-4fc7-ae08-149c316e9214.png">


**AFTER:**
<img width="837" alt="Screen Shot 2021-08-31 at 1 06 59 PM" src="https://user-images.githubusercontent.com/54281166/131546142-5cb53e96-8bbc-4405-8d0c-a53133c5a404.png">


### Changelog

**Changed**

- set a unique id using the parent menu item key + the tab key


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../masthead/cloud/cloud-masthead-composite.ts    | 15 ++++++---------
 .../src/components/masthead/masthead-composite.ts |  7 ++++---
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
index 5448927bdf7..c9de65acf04 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
@@ -89,23 +89,20 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
    *  Render MegaMenu content
    *
    * @param sections menu section data object
+   * @param parentKey parent key
    */
   // eslint-disable-next-line class-methods-use-this
-  protected _renderMegaMenu(sections) {
+  protected _renderMegaMenu(sections, parentKey) {
     let viewAllLink;
     type menuItem = MastheadMenuItem & { itemKey: String };
     const sortedMenuItems: menuItem[] = [];
-    sections[0].menuItems?.forEach(item => {
+    sections[0].menuItems?.forEach((item, i) => {
       if (item.megaPanelViewAll) {
         viewAllLink = item;
         return viewAllLink;
       }
-      const title = item.title
-        .replace(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/g, '')
-        .replace(/ +/g, '-')
-        .toLowerCase();
 
-      return sortedMenuItems.push({ ...item, itemKey: title });
+      return sortedMenuItems.push({ ...item, itemKey: `${parentKey}-${i}` });
     });
 
     return html`
@@ -114,10 +111,10 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
           view-all-href="${ifNonNull(viewAllLink?.url)}"
           view-all-title="${ifNonNull(viewAllLink?.title)}"
         >
-          <dds-cloud-megamenu-tabs value="${sortedMenuItems[0]?.itemKey}">
+          <dds-cloud-megamenu-tabs value="${sortedMenuItems[0]?.title}">
             ${sortedMenuItems.map(item => {
               return html`
-                <dds-cloud-megamenu-tab id="tab-${item.itemKey}" target="panel-${item.itemKey}" value="${item.itemKey}"
+                <dds-cloud-megamenu-tab id="tab-${item.itemKey}" target="panel-${item.itemKey}" value="${item.title}"
                   >${item.title}</dds-cloud-megamenu-tab
                 >
               `;
diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts
index 98ae92e62ff..7e82f3d7d2b 100644
--- a/packages/web-components/src/components/masthead/masthead-composite.ts
+++ b/packages/web-components/src/components/masthead/masthead-composite.ts
@@ -158,9 +158,10 @@ class DDSMastheadComposite extends LitElement {
    *  Render MegaMenu content
    *
    * @param sections menu section data object
+   * @param _parentKey parent menu key (used for the cloud-masthead-composite component)
    */
-  // eslint-disable-next-line class-methods-use-this
-  protected _renderMegaMenu(sections) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected _renderMegaMenu(sections, _parentKey) {
     const { viewAllLink, highlightedItems, menu } = this._getHighlightedMenuItems(sections);
 
     const hasHighlights = highlightedItems.length !== 0;
@@ -412,7 +413,7 @@ class DDSMastheadComposite extends LitElement {
             const selected = selectedMenuItem && titleEnglish === selectedMenuItem;
             let sections;
             if (link.hasMegapanel) {
-              sections = this._renderMegaMenu(menuSections);
+              sections = this._renderMegaMenu(menuSections, i);
             } else {
               sections = menuSections
                 // eslint-disable-next-line no-use-before-define