[UI] Allow org members to navigate between the org and the dashboard

- add a new button to the org view that is only shown to the org members
- add integration test to verify the expected navigatability
- add a new translation string to that button
- fix display style of "View <orgname>" button on the dashboard
- fix gap size between buttons on the org view by utilizing the common class top-right-buttons

options/locale/locale_en-US.ini

@@ -2733,6 +2733,7 @@ org_name_holder = Organization name
 org_full_name_holder = Organization full name
 org_name_helper = Organization names should be short and memorable.
 create_org = Create organization
+open_dashboard = Open dashboard
 repo_updated = Updated
 members = Members
 teams = Teams

release-notes/8.0.0/feat/3642.md

@@ -0,0 +1 @@
+Allow navigating to the organization dashboard from the organization view

templates/org/header.tmpl

@@ -7,7 +7,7 @@
 				{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
 				{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
 			</span>
-			<span class="tw-flex tw-items-center tw-gap-1 tw-ml-auto tw-text-16 tw-whitespace-nowrap">
+			<span class="tw-flex tw-items-center top-right-buttons tw-ml-auto tw-text-16 tw-whitespace-nowrap">
 				{{if .EnableFeed}}
 					<a class="ui basic label button tw-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
 						{{svg "octicon-rss" 24}}
@@ -16,6 +16,9 @@
 				{{if .IsSigned}}
 					{{template "org/follow_unfollow" .}}
 				{{end}}
+				{{if .IsOrganizationMember}}
+					<a class="ui basic button tw-mr-0" href="{{.OrgLink}}/dashboard">{{ctx.Locale.Tr "org.open_dashboard"}}</a>
+				{{end}}
 			</span>
 		</div>
 		{{if .RenderedDescription}}<div class="render-content markup">{{.RenderedDescription}}</div>{{end}}

templates/user/dashboard/navbar.tmpl

@@ -92,7 +92,7 @@
 			</a>
 			{{end}}
 			<div class="item">
-				<a class="ui primary basic button" href="{{.ContextUser.HomeLink}}" title="{{ctx.Locale.Tr "home.view_home" .ContextUser.Name}}">
+				<a class="ui basic button" href="{{.ContextUser.HomeLink}}" title="{{ctx.Locale.Tr "home.view_home" .ContextUser.Name}}">
 					{{ctx.Locale.Tr "home.view_home" (.ContextUser.ShortName 40)}}
 				</a>
 			</div>

tests/integration/org_nav_test.go

@@ -0,0 +1,51 @@
+// Copyright 2024 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package integration
+
+import (
+	"net/http"
+	"testing"
+
+	"code.gitea.io/gitea/tests"
+)
+
+// This test makes sure that organization members are able to navigate between `/<orgname>` and `/org/<orgname>/<section>` freely.
+// The `/org/<orgname>/<section>` page is only accessible to the members of the organization. It doesn't have
+// a special logic to show the button or not.
+// The `/<orgname>` page utilizes the `IsOrganizationMember` function to show the button for navigation to
+// the organization dashboard. That function is covered by a test and is supposed to be true for the
+// owners/admins/members of the organization.
+func TestOrgNavigationDashboard(t *testing.T) {
+	defer tests.PrepareTestEnv(t)()
+
+	// Login as the future organization admin and create an organization
+	session1 := loginUser(t, "user2")
+	session1.MakeRequest(t, NewRequestWithValues(t, "POST", "/org/create", map[string]string{
+		"_csrf":                         GetCSRF(t, session1, "/org/create"),
+		"org_name":                      "org_navigation_test",
+		"visibility":                    "0",
+		"repo_admin_change_team_access": "on",
+	}), http.StatusSeeOther)
+
+	// Check if the "Open dashboard" button is available to the org admin (member)
+	resp := session1.MakeRequest(t, NewRequest(t, "GET", "/org_navigation_test"), http.StatusOK)
+	doc := NewHTMLParser(t, resp.Body)
+	doc.AssertElement(t, "#org-info a[href='/org/org_navigation_test/dashboard']", true)
+
+	// Check if the "View <orgname>" button is available on dashboard for the org admin (member)
+	resp = session1.MakeRequest(t, NewRequest(t, "GET", "/org/org_navigation_test/dashboard"), http.StatusOK)
+	doc = NewHTMLParser(t, resp.Body)
+	doc.AssertElement(t, ".dashboard .secondary-nav a[href='/org_navigation_test']", true)
+
+	// Login a non-member user
+	session2 := loginUser(t, "user4")
+
+	// Check if the "Open dashboard" button is available to non-member
+	resp = session2.MakeRequest(t, NewRequest(t, "GET", "/org_navigation_test"), http.StatusOK)
+	doc = NewHTMLParser(t, resp.Body)
+	doc.AssertElement(t, "#org-info a[href='/org/org_navigation_test/dashboard']", false)
+
+	// There's no need to test "View <orgname>" button on dashboard as non-member
+	// because this page is not supposed to be visitable for this user
+}