Merge pull request #98 from ligangty/2.0-refactor

Align the user info section to upper right
Commonjava · Nov 23, 2023 · 96a9ac7 · 96a9ac7
2 parents 4232527 + 4c95f4d
commit 96a9ac7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/main/webui/src/app/components/nav/NavHeader.jsx b/src/main/webui/src/app/components/nav/NavHeader.jsx
@@ -30,7 +30,7 @@ export default function NavHeader(){
     <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-light" role="navigation">
       <Link className="navbar-brand" to="">Indy</Link>
       <div className="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul className="navbar-nav mr-auto">
+        <ul className="navbar-nav me-auto">
           {
             [
               {type: "remote", desc: "Remote Repositories"},
@@ -52,7 +52,7 @@ export default function NavHeader(){
           <Button href="/q/swagger-ui/" variant="secondary" className="mx-1">REST API</Button>
           <Dropdown data-bs-theme="dark" className="mx-1">
             <Dropdown.Toggle id={`dropdown-button-dark-addons`} variant="secondary">
-              more
+              More
             </Dropdown.Toggle>
             <Dropdown.Menu>
               <LinkContainer to="/nfc">
@@ -63,16 +63,18 @@ export default function NavHeader(){
               </LinkContainer>
             </Dropdown.Menu>
           </Dropdown>
-          { isUserloggedIn && <Dropdown data-bs-theme="dark" className="mx-1">
-              <Dropdown.Toggle id={`dropdown-button-dark-addons`} variant="link">
-                {username}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Item href="/logout" variant="link">Log Out</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
+          </ul>
+          { isUserloggedIn && <ul className="navbar-nav ms-auto">
+              <Dropdown data-bs-theme="dark" className="mx-1">
+                <Dropdown.Toggle id={`dropdown-button-dark-addons`} variant="link">
+                  {username}
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item href="/logout" variant="link">Log Out</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </ul>
           }
-        </ul>
       </div>
     </nav>
   );

diff --git a/src/main/webui/src/app/components/nav/NavHeader.test.jsx b/src/main/webui/src/app/components/nav/NavHeader.test.jsx
@@ -37,7 +37,7 @@ describe('Header tests', () => {
     const groupsButton = screen.getByRole("button", {name: "Groups"});
     expect(groupsButton).toBeInTheDocument();
     expect(screen.getByRole("button", {name: "REST API"})).toBeInTheDocument();
-    const addonsButton = screen.getByRole("button", {name: "more"});
+    const addonsButton = screen.getByRole("button", {name: "More"});
     expect(addonsButton).toBeInTheDocument();
     // TODO: test the user login elements later when implemented