From 8b40813060e5683f424b7b715c2ef7ac905862d3 Mon Sep 17 00:00:00 2001
From: nadijagraca <108531476+nadijagraca@users.noreply.github.com>
Date: Fri, 26 Jan 2024 09:34:06 +0100
Subject: [PATCH] Bug fix on accordion active item (#276)

Signed-off-by: Anna Xiong <anna.xiong@quantumblack.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Anna Xiong <anna.xiong@quantumblack.com>
Co-authored-by: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com>
Co-authored-by: petar-qb <petar_pejovic@external.mckinsey.com>
Co-authored-by: Antony Milne <49395058+antonymilne@users.noreply.github.com>
Co-authored-by: Maximilian Schulz <83698606+maxschulz-COL@users.noreply.github.com>
Co-authored-by: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Co-authored-by: Alexey Snigir <35569332+l0uden@users.noreply.github.com>
---
 ...ja_ratkusic_graca_accordion_active_item.md | 47 +++++++++++++++++++
 .../src/vizro/models/_navigation/accordion.py |  6 +++
 .../models/_navigation/test_accordion.py      |  7 +++
 3 files changed, 60 insertions(+)
 create mode 100644 vizro-core/changelog.d/20240123_103311_nadija_ratkusic_graca_accordion_active_item.md

diff --git a/vizro-core/changelog.d/20240123_103311_nadija_ratkusic_graca_accordion_active_item.md b/vizro-core/changelog.d/20240123_103311_nadija_ratkusic_graca_accordion_active_item.md
new file mode 100644
index 000000000..cd4f94549
--- /dev/null
+++ b/vizro-core/changelog.d/20240123_103311_nadija_ratkusic_graca_accordion_active_item.md
@@ -0,0 +1,47 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Fixed
+
+- Fix bug on accordion group not opening properly when re-directing to active page via navigation card or URL path. ([#276](https://github.com/mckinsey/vizro/pull/276))
+
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/src/vizro/models/_navigation/accordion.py b/vizro-core/src/vizro/models/_navigation/accordion.py
index 14f5c656e..101e8409e 100644
--- a/vizro-core/src/vizro/models/_navigation/accordion.py
+++ b/vizro-core/src/vizro/models/_navigation/accordion.py
@@ -53,9 +53,14 @@ def build(self, *, active_page_id=None):
                     children=accordion_buttons,
                     title=page_group.upper(),
                     class_name="accordion-item-header",
+                    item_id=page_group,
                 )
             )
 
+        active_item = next(
+            (page_group for page_group, page_members in self.pages.items() if active_page_id in page_members), None
+        )
+
         return html.Div(
             children=[
                 dbc.Accordion(
@@ -65,6 +70,7 @@ def build(self, *, active_page_id=None):
                     persistence=True,
                     persistence_type="session",
                     always_open=True,
+                    active_item=active_item,
                 ),
             ],
             id="nav-panel",
diff --git a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
index d929e6c8a..c26ab7ec4 100644
--- a/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
+++ b/vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py
@@ -68,8 +68,10 @@ class TestAccordionBuild:
                             dbc.Button(children=["Page 2"], active=False, href="/page-2", key="/page-2"),
                         ],
                         title="GROUP",
+                        item_id="Group",
                     )
                 ],
+                active_item="Group",
                 **common_args,
             ),
         ),
@@ -82,14 +84,17 @@ class TestAccordionBuild:
                             dbc.Button(children=["Page 1"], active=True, href="/", key="/"),
                         ],
                         title="GROUP 1",
+                        item_id="Group 1",
                     ),
                     dbc.AccordionItem(
                         children=[
                             dbc.Button(children=["Page 2"], active=False, href="/page-2", key="/page-2"),
                         ],
                         title="GROUP 2",
+                        item_id="Group 2",
                     ),
                 ],
+                active_item="Group 1",
                 **common_args,
             ),
         ),
@@ -103,8 +108,10 @@ class TestAccordionBuild:
                             dbc.Button(children=["Page 2"], active=False, href="/page-2", key="/page-2"),
                         ],
                         title=ACCORDION_DEFAULT_TITLE,
+                        item_id="SELECT PAGE",
                     ),
                 ],
+                active_item="SELECT PAGE",
                 **common_args,
             ),
         ),