Repository: wagtail/wagtail

Issue:
UX Unification - Cleanup for slim header in page listing
### Issue Summary

#8792 introduced some issues due to conflict with other PRs that have been merged previously. In addition, there are also other improvements that can be made.

### Details

- [ ] When moving `.form-side` styles to its own `_form-side.scss` file, some updates introduced in #8671 weren't carried over. By the way, should this be in `components` rather than `layouts`?
  **Original:** https://github.com/wagtail/wagtail/blob/0693eed2454240b4d0f31da5166772bdd106dbb9/client/scss/layouts/_page-editor.scss#L61-L103
  **Moved:** https://github.com/wagtail/wagtail/blob/35b5ed350a30dfb626d55c0b2c021976c1f65761/client/scss/layouts/_form-side.scss#L5-L47
- [ ] When moving side panel init code to a separate `sidePanel.js` file, the original code in `page-editor.js` hasn't been removed. This results in the event listeners being registered twice, making the side panels inaccessible in the page editor (it immediately closes again). To fix this, remove the following: https://github.com/wagtail/wagtail/blob/35b5ed350a30dfb626d55c0b2c021976c1f65761/client/src/entrypoints/admin/page-editor.js#L333-L407
- [ ] The locale selector in the side panel should take the user to the localised page in the **page explorer**. Right now, it brings you to the editor instead. Possible solutions: add another keyword argument to `PageSidePanels`, e.g. `in_explorer`, or make a subclass e.g. `PageExplorerSidePanels` in case we need more customisations in the future.

There may be other issues I haven't noticed. Will update later if I find more.


Discussion:

Resolving patch:
diff --git a/wagtail/admin/ui/side_panels.py b/wagtail/admin/ui/side_panels.py
--- a/wagtail/admin/ui/side_panels.py
+++ b/wagtail/admin/ui/side_panels.py
@@ -30,6 +30,10 @@ class BaseStatusSidePanel(BaseSidePanel):
     toggle_aria_label = gettext_lazy("Toggle status")
     toggle_icon_name = "info-circle"
 
+    def __init__(self, *args, in_explorer=False, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.in_explorer = in_explorer
+
     def get_status_templates(self, context):
         templates = []
 
@@ -86,15 +90,17 @@ def get_context_data(self, parent_context):
             )
 
         if getattr(settings, "WAGTAIL_I18N_ENABLED", False):
+            url_name = "wagtailadmin_pages:edit"
+            if self.in_explorer:
+                url_name = "wagtailadmin_explore"
+
             context.update(
                 {
                     "locale": page.locale,
                     "translations": [
                         {
                             "locale": translation.locale,
-                            "url": reverse(
-                                "wagtailadmin_pages:edit", args=[translation.id]
-                            ),
+                            "url": reverse(url_name, args=[translation.id]),
                         }
                         for translation in page.get_translations()
                         .only("id", "locale", "depth")
@@ -178,11 +184,13 @@ def media(self):
 
 
 class PageSidePanels(BaseSidePanels):
-    def __init__(self, request, page, *, preview_enabled, comments_enabled):
+    def __init__(
+        self, request, page, *, preview_enabled, comments_enabled, in_explorer=False
+    ):
         super().__init__(request, page)
 
         self.side_panels = [
-            PageStatusSidePanel(page, self.request),
+            PageStatusSidePanel(page, self.request, in_explorer=in_explorer),
         ]
 
         if preview_enabled and page.preview_modes:
diff --git a/wagtail/admin/views/pages/listing.py b/wagtail/admin/views/pages/listing.py
--- a/wagtail/admin/views/pages/listing.py
+++ b/wagtail/admin/views/pages/listing.py
@@ -97,6 +97,7 @@ def index(request, parent_page_id=None):
     side_panels = PageSidePanels(
         request,
         parent_page.specific,
+        in_explorer=True,
         preview_enabled=False,
         comments_enabled=False,
     )


Test patch:
diff --git a/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
--- a/wagtail/admin/tests/pages/test_explorer_view.py
+++ b/wagtail/admin/tests/pages/test_explorer_view.py
@@ -735,14 +735,35 @@ def test_locale_selector(self):
         response = self.client.get(
             reverse("wagtailadmin_explore", args=[self.events_page.id])
         )
+        html = response.content.decode()
 
         self.assertContains(response, 'id="status-sidebar-english"')
         self.assertContains(response, "Switch locales")
 
+        add_translation_url = reverse(
+            "wagtailadmin_explore", args=[self.translated_events_page.id]
+        )
+        self.assertTagInHTML(
+            f'<a href="{add_translation_url}" lang="fr">French</a>',
+            html,
+            allow_extra_attrs=True,
+        )
+
     @override_settings(WAGTAIL_I18N_ENABLED=False)
     def test_locale_selector_not_present_when_i18n_disabled(self):
         response = self.client.get(
             reverse("wagtailadmin_explore", args=[self.events_page.id])
         )
+        html = response.content.decode()
 
         self.assertNotContains(response, "Switch locales")
+
+        add_translation_url = reverse(
+            "wagtailadmin_explore", args=[self.translated_events_page.id]
+        )
+        self.assertTagInHTML(
+            f'<a href="{add_translation_url}" lang="fr">French</a>',
+            html,
+            allow_extra_attrs=True,
+            count=0,
+        )