fix header alignment

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>

ui/api/endpoint.go

@@ -1707,7 +1707,7 @@ func organizationEndpoint(svc ui.Service) endpoint.Endpoint {
 			return nil, err
 		}
 
-		res, err := svc.Organization(req.token, req.id, req.page, req.limit)
+		res, err := svc.Organization(req.token, req.id, req.relation, req.page, req.limit)
 		if err != nil {
 			return nil, err
 		}
@@ -1739,7 +1739,7 @@ func assignMemberEndpoint(svc ui.Service) endpoint.Endpoint {
 
 		return uiRes{
 			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": organizationsAPIEndpoint + "/" + req.OrgID},
+			headers: map[string]string{"Location": organizationsAPIEndpoint + "/" + req.OrgID + "?relation=members"},
 		}, nil
 	}
 }
@@ -1764,7 +1764,7 @@ func unassignMemberEndpoint(svc ui.Service) endpoint.Endpoint {
 
 		return uiRes{
 			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": organizationsAPIEndpoint + "/" + req.OrgID},
+			headers: map[string]string{"Location": organizationsAPIEndpoint + "/" + req.OrgID + "?relation=members"},
 		}, nil
 	}
 }

ui/api/logging.go

@@ -1131,7 +1131,7 @@ func (lm *loggingMiddleware) UpdateOrganization(token string, domain sdk.Domain)
 }
 
 // Organization adds logging middleware to organization method.
-func (lm *loggingMiddleware) Organization(token, orgID string, page, limit uint64) (b []byte, err error) {
+func (lm *loggingMiddleware) Organization(token, orgID, tabActive string, page, limit uint64) (b []byte, err error) {
 	defer func(begin time.Time) {
 		message := fmt.Sprintf("Method organization for organization %s took %s to complete", orgID, time.Since(begin))
 		if err != nil {
@@ -1140,7 +1140,7 @@ func (lm *loggingMiddleware) Organization(token, orgID string, page, limit uint6
 		lm.logger.Info(fmt.Sprintf("%s without errors.", message))
 	}(time.Now())
 
-	return lm.svc.Organization(token, orgID, page, limit)
+	return lm.svc.Organization(token, orgID, tabActive, page, limit)
 }
 
 // AssignMember adds logging middleware to assign member method.

ui/api/metrics.go

@@ -821,13 +821,13 @@ func (mm *metricsMiddleware) UpdateOrganization(token string, domain sdk.Domain)
 }
 
 // Organization adds metrics middleware to organization method.
-func (mm *metricsMiddleware) Organization(token, orgID string, page, limit uint64) ([]byte, error) {
+func (mm *metricsMiddleware) Organization(token, orgID, tabActive string, page, limit uint64) ([]byte, error) {
 	defer func(begin time.Time) {
 		mm.counter.With("method", "organization").Add(1)
 		mm.latency.With("method", "organization").Observe(time.Since(begin).Seconds())
 	}(time.Now())
 
-	return mm.svc.Organization(token, orgID, page, limit)
+	return mm.svc.Organization(token, orgID, tabActive, page, limit)
 }
 
 // AssignMember adds metrics middleware to assign member method.

ui/service.go

@@ -297,7 +297,7 @@ type Service interface {
 	// UpdateOrganization updates the organization with the given ID.
 	UpdateOrganization(token string, domain sdk.Domain) error
 	// Organization displays the organization page.
-	Organization(token, orgID string, page, limit uint64) ([]byte, error)
+	Organization(token, orgID, tabActive string, page, limit uint64) ([]byte, error)
 	// AssignMember adds a member to an organization.
 	AssignMember(token, orgID string, req sdk.UsersRelationRequest) error
 	// UnassignMember removes a member from an organization.
@@ -1765,7 +1765,7 @@ func (us *uiService) UpdateOrganization(token string, domain sdk.Domain) error {
 	return err
 }
 
-func (us *uiService) Organization(token, orgID string, page, limit uint64) ([]byte, error) {
+func (us *uiService) Organization(token, orgID, tabActive string, page, limit uint64) ([]byte, error) {
 	offset := (page - 1) * limit
 
 	pgm := sdk.PageMetadata{
@@ -1789,6 +1789,7 @@ func (us *uiService) Organization(token, orgID string, page, limit uint64) ([]by
 		Organization sdk.Domain
 		Members      []sdk.User
 		Relations    []string
+		TabActive    string
 		CurrentPage  int
 		Pages        int
 		Limit        int
@@ -1797,6 +1798,7 @@ func (us *uiService) Organization(token, orgID string, page, limit uint64) ([]by
 		domain,
 		membersPage.Users,
 		groupRelations,
+		tabActive,
 		int(page),
 		noOfPages,
 		int(limit),

ui/web/static/css/styles.css

@@ -242,7 +242,7 @@ body.sidebar-toggled .main-content {
 	color: var(--main-color);
 }
 
-.active .page-link {
+.page-item.active .page-link {
 	background: var(--main-color) !important;
 	color: #fff !important;
 }

ui/web/template/navbar.html

@@ -153,7 +153,7 @@ <h1 class="mx-3">Magistrala</h1>
 							aria-expanded="false"
 							id="organizationName"
 						></a>
-						<ul class="dropdown-menu mt-3 position-absolute end-0 p-3">
+						<ul class="dropdown-menu dropdown-menu-md-start mt-2 p-3">
 							<li class="text-center fw-bold">
 								<span id="organizationName2"></span>
 							</li>

ui/web/template/organization.html

@@ -17,9 +17,12 @@
 									role="tablist"
 								>
 									<li class="nav-item">
+										{{ $tabActive := "" }}
 										<a
 											href="#detailsTab"
-											class="nav-link active org-nav"
+											class="nav-link {{ if eq .TabActive $tabActive }}
+												active
+											{{ end }} org-nav"
 											role="tab"
 											data-bs-toggle="tab"
 											aria-controls="detailsTab"
@@ -29,9 +32,12 @@
 										</a>
 									</li>
 									<li class="nav-item">
+										{{ $tabActive = "members" }}
 										<a
 											href="#membersTab"
-											class="nav-link org-nav"
+											class="nav-link {{ if eq .TabActive $tabActive }}
+												active
+											{{ end }} org-nav"
 											role="tab"
 											data-bs-toggle="tab"
 											aria-controls="membersTab"
@@ -44,7 +50,9 @@
 							</div>
 							<div class="tab-content mt-4">
 								<div
-									class="org-tab tab-pane fade show active px-5"
+									class="org-tab tab-pane fade show {{ if eq .TabActive "" }}
+										active
+									{{ end }} px-5"
 									role="tabpanel"
 									id="detailsTab"
 									tabindex="0"
@@ -220,16 +228,16 @@ <h4 class="mb-3">Organization Information</h4>
 									</div>
 								</div>
 								<div
-									class="org-tab tab-pane fade show px-5"
+									class="org-tab tab-pane fade show {{ if eq .TabActive "members" }}
+										active
+									{{ end }} px-5"
 									role="tabpanel"
 									id="membersTab"
 									tabindex="0"
 								>
 									<div class="row mb-3 p-3">
 										<div class="col-md-12">
-											<div
-												class="row-mb-3 d-flex justify-content-between mb-3"
-											>
+											<div class="row-mb-3 d-flex justify-content-between mb-3">
 												<h2>Organization Members</h2>
 												<button
 													role="button"