From 7e563880e9540b86ee956b2d132491ba913f6bdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <jmj@umbraco.dk>
Date: Wed, 21 Sep 2022 15:40:26 +0200
Subject: [PATCH] added user linking to table

---
 .../users/editor-view-users-grid.element.ts   |  2 +-
 .../users/editor-view-users-list.element.ts   |  9 ++++---
 .../users/editor-view-users-table.element.ts  | 26 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts
index cc65027cce..e449d9fee5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts
@@ -68,7 +68,7 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
 
 	//TODO How should we handle url stuff?
 	private _handleOpenCard(key: string) {
-		history.pushState(null, '', window.location.pathname + '/' + key);
+		history.pushState(null, '', location.pathname + '/' + key);
 	}
 
 	private _selectRowHandler(user: UserItem) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
index 837db5f441..92ab22ff16 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
@@ -134,12 +134,13 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl
 			<div id="sticky-top">
 				<div id="user-list-top-bar">
 					<uui-button label="Invite user" look="outline"></uui-button>
-					<uui-input id="input-search"></uui-input>
+					<uui-input label="search" id="input-search"></uui-input>
 					<div>
-						<uui-button> Status: <b>All</b> </uui-button>
-						<uui-button> Groups: <b>All</b> </uui-button>
-						<uui-button> Order by: <b>Name (A-Z)</b> </uui-button>
+						<uui-button label="status"> Status: <b>All</b> </uui-button>
+						<uui-button label="groups"> Groups: <b>All</b> </uui-button>
+						<uui-button label="order by"> Order by: <b>Name (A-Z)</b> </uui-button>
 						<uui-button
+							label="view toggle"
 							@click=${this._toggleViewType}
 							look="${this._viewType === 'grid' ? 'outline' : 'primary'}"
 							compact>
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts
index 17c285826a..c09a5b660d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts
@@ -46,6 +46,14 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE
 				justify-content: space-between;
 				width: 100%;
 			}
+			.link-button {
+				font-weight: bold;
+				color: var(--uui-color-interactive);
+			}
+			.link-button:hover {
+				text-decoration: underline;
+				color: var(--uui-color-interactive-emphasis);
+			}
 		`,
 	];
 
@@ -138,6 +146,12 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE
 		console.log('SELECT ALL NOT IMPLEMENTED');
 	}
 
+	//TODO How should we handle url stuff?
+	private _handleOpenUser(event: Event, key: string) {
+		event.stopImmediatePropagation();
+		history.pushState(null, '', location.pathname + '/' + key);
+	}
+
 	private _selectRowHandler(user: UserItem) {
 		this._usersContext?.select(user.key);
 	}
@@ -186,7 +200,17 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE
 			</uui-table-cell>
 			<uui-table-cell>
 				<div style="display: flex; align-items: center;">
-					<a style="font-weight: bold;" href="http://">${user.name}</a>
+					<div
+						class="link-button"
+						@keydown=${(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								this._handleOpenUser(e, user.key);
+							}
+						}}
+						@click=${(e: Event) => this._handleOpenUser(e, user.key)}
+						href=${location.pathname + '/' + user.key}>
+						${user.name}
+					</div>
 				</div>
 			</uui-table-cell>
 			<uui-table-cell> ${user.userGroup} </uui-table-cell>