Move "Report an Issue" item to sidebar-menu. (#327)

* Move the Report an Issue to sidebar menu. * Use sl-divider again, and fix styling. * Comment out stats part of test * lint
GoogleChrome · May 30, 2024 · 5e47d98 · 5e47d98
1 parent 2dd1ae8
commit 5e47d98
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 28 deletions.
diff --git a/e2e/tests/sidebar.spec.ts-snapshots/sidebar-firefox-linux.png b/e2e/tests/sidebar.spec.ts-snapshots/sidebar-firefox-linux.png
diff --git a/frontend/src/static/js/components/test/webstatus-sidebar-menu.test.ts b/frontend/src/static/js/components/test/webstatus-sidebar-menu.test.ts
@@ -54,12 +54,12 @@ describe('webstatus-sidebar-menu', () => {
 
     const tree = el.shadowRoot?.querySelector('sl-tree');
     const featuresItem = tree?.querySelector('#features-item');
-    const statsItem = tree?.querySelector('#statistics-item');
+    // const statsItem = tree?.querySelector('#statistics-item');
     const bookmarkItems = featuresItem?.querySelectorAll('sl-tree-item');
 
     expect(tree).to.exist;
     expect(featuresItem).to.exist;
-    expect(statsItem).to.exist;
+    // expect(statsItem).to.exist;
     expect(bookmarkItems).to.have.lengthOf(2); // Number of test bookmarks
 
     // By default no bookmarks should be highlighted

diff --git a/frontend/src/static/js/components/webstatus-sidebar-menu.ts b/frontend/src/static/js/components/webstatus-sidebar-menu.ts
@@ -30,6 +30,8 @@ import {
   navigateToUrl,
 } from '../utils/app-router.js';
 
+import {GITHUB_REPO_ISSUE_LINK} from '../utils/constants.js';
+
 // Map from sl-tree-item ids to paths.
 enum NavigationItemKey {
   FEATURES = 'features-item',
@@ -93,6 +95,15 @@ export class WebstatusSidebarMenu extends LitElement {
           color: inherit;
           text-decoration: none;
         }
+
+        .report-issue-item {
+          margin-top: auto;
+        }
+
+        .report-issue-link {
+          color: inherit;
+          text-decoration: none;
+        }
       `,
     ];
   }
@@ -262,8 +273,20 @@ export class WebstatusSidebarMenu extends LitElement {
             this.renderBookmark(bookmark, index)
           )}
         </sl-tree-item>
-        <sl-tree-item style="display:none" id="${NavigationItemKey.STATISTICS}">
+        <!-- <sl-tree-item style="display:none" id="{NavigationItemKey.STATISTICS}">
           <sl-icon name="heart-pulse"></sl-icon> Statistics
+        </sl-tree-item> -->
+
+        <sl-divider aria-hidden="true"></sl-divider>
+
+        <sl-tree-item class="report-issue-item">
+          <sl-icon name="github"></sl-icon>
+          <a
+            class="report-issue-link"
+            href="${GITHUB_REPO_ISSUE_LINK}"
+            target="_blank"
+            >Report an issue</a
+          >
         </sl-tree-item>
       </sl-tree>
     `;

diff --git a/frontend/src/static/js/components/webstatus-sidebar.ts b/frontend/src/static/js/components/webstatus-sidebar.ts
@@ -19,7 +19,6 @@ import {customElement} from 'lit/decorators.js';
 import {SHARED_STYLES} from '../css/shared-css.js';
 
 import './webstatus-sidebar-menu.js';
-import {GITHUB_REPO_ISSUE_LINK} from '../utils/constants.js';
 
 @customElement('webstatus-sidebar')
 export class WebstatusSidebar extends LitElement {
@@ -32,15 +31,6 @@ export class WebstatusSidebar extends LitElement {
           width: 288px;
         }
 
-        sl-tree#bottom-menu {
-          margin-top: auto;
-        }
-
-        sl-tree#bottom-menu a {
-          color: inherit;
-          text-decoration: none;
-        }
-
         sl-tree-item#theme-selector sl-select::part(combobox) {
           border: 0;
         }
@@ -60,21 +50,6 @@ export class WebstatusSidebar extends LitElement {
     return html`
       <div class="sidebar vbox">
         <webstatus-sidebar-menu></webstatus-sidebar-menu>
-
-        <sl-divider></sl-divider>
-        <div class="spacer"></div>
-
-        <div class="valign-stretch-2"></div>
-          <sl-tree id="bottom-menu">
-            <sl-tree-item>
-              <sl-icon name="github"></sl-icon>
-<a href="${GITHUB_REPO_ISSUE_LINK}"
-    target="_blank"
-                >Report an issue</a
-              >
-            </sl-tree-item>
-          </sl-tree>
-        </div>
       </div>
     `;
   }