From f26ee105047ffa20b57192c653691e5f2b959eda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Thu, 6 Mar 2025 08:29:58 +0100
Subject: [PATCH] Change: Replace withUserName HOC by useUserName hook

Use more modern react. Hooks are easier to understand then HOCs.
---
 src/web/entities/EntityNameTableData.jsx | 74 ++++++++++++------------
 src/web/pages/audits/Row.jsx             |  8 +--
 2 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/web/entities/EntityNameTableData.jsx b/src/web/entities/EntityNameTableData.jsx
index 92923fd936..a2e8e390a5 100644
--- a/src/web/entities/EntityNameTableData.jsx
+++ b/src/web/entities/EntityNameTableData.jsx
@@ -13,51 +13,52 @@ import DetailsLink from 'web/components/link/DetailsLink';
 import TableData from 'web/components/table/Data';
 import {RowDetailsToggle} from 'web/entities/Row';
 import ObserverIcon from 'web/entity/icon/ObserverIcon';
+import useUserName from 'web/hooks/useUserName';
 import PropTypes from 'web/utils/PropTypes';
-import withUsername from 'web/utils/withUserName';
-
 
 const EntityNameTableData = ({
   entity,
   links = true,
   displayName,
-  username,
   type = getEntityType(entity),
   children,
   onToggleDetailsClick,
-}) => (
-  <TableData>
-    <Layout align={'space-between'} columns={2}>
-      <div>
-        {entity.isOrphan() && <b>{_('Orphan')}</b>}
-        {isDefined(onToggleDetailsClick) ? (
-          <span>
-            <RowDetailsToggle name={entity.id} onClick={onToggleDetailsClick}>
-              {entity.name}
-            </RowDetailsToggle>
-            {entity.deprecated && <b> ({_('Deprecated')})</b>}
-          </span>
-        ) : (
-          <span>
-            <DetailsLink id={entity.id} textOnly={!links} type={type}>
-              {entity.name}
-            </DetailsLink>
-            {entity.deprecated && <b> ({_('Deprecated')})</b>}
-          </span>
-        )}
-        {isDefined(entity.comment) && <Comment>({entity.comment})</Comment>}
-        {children}
-      </div>
-      <Layout>
-        <ObserverIcon
-          displayName={displayName}
-          entity={entity}
-          userName={username}
-        />
+}) => {
+  const [username] = useUserName();
+  return (
+    <TableData>
+      <Layout align={'space-between'} columns={2}>
+        <div>
+          {entity.isOrphan() && <b>{_('Orphan')}</b>}
+          {isDefined(onToggleDetailsClick) ? (
+            <span>
+              <RowDetailsToggle name={entity.id} onClick={onToggleDetailsClick}>
+                {entity.name}
+              </RowDetailsToggle>
+              {entity.deprecated && <b> ({_('Deprecated')})</b>}
+            </span>
+          ) : (
+            <span>
+              <DetailsLink id={entity.id} textOnly={!links} type={type}>
+                {entity.name}
+              </DetailsLink>
+              {entity.deprecated && <b> ({_('Deprecated')})</b>}
+            </span>
+          )}
+          {isDefined(entity.comment) && <Comment>({entity.comment})</Comment>}
+          {children}
+        </div>
+        <Layout>
+          <ObserverIcon
+            displayName={displayName}
+            entity={entity}
+            userName={username}
+          />
+        </Layout>
       </Layout>
-    </Layout>
-  </TableData>
-);
+    </TableData>
+  );
+};
 
 EntityNameTableData.propTypes = {
   children: PropTypes.node,
@@ -65,8 +66,7 @@ EntityNameTableData.propTypes = {
   entity: PropTypes.model.isRequired,
   links: PropTypes.bool,
   type: PropTypes.string,
-  username: PropTypes.string.isRequired,
   onToggleDetailsClick: PropTypes.func,
 };
 
-export default withUsername(EntityNameTableData);
+export default EntityNameTableData;
diff --git a/src/web/pages/audits/Row.jsx b/src/web/pages/audits/Row.jsx
index fdd77dc599..6cee98eb3e 100644
--- a/src/web/pages/audits/Row.jsx
+++ b/src/web/pages/audits/Row.jsx
@@ -20,11 +20,10 @@ import TableData from 'web/components/table/Data';
 import TableRow from 'web/components/table/Row';
 import {RowDetailsToggle} from 'web/entities/Row';
 import ObserverIcon from 'web/entity/icon/ObserverIcon';
+import useUserName from 'web/hooks/useUserName';
 import Actions from 'web/pages/audits/Actions';
 import AuditStatus from 'web/pages/tasks/Status';
 import PropTypes from 'web/utils/PropTypes';
-import withUserName from 'web/utils/withUserName';
-
 
 const renderAuditReport = (report, links) => {
   if (!isDefined(report)) {
@@ -65,10 +64,10 @@ const Row = ({
   actionsComponent: ActionsComponent = Actions,
   entity,
   links = true,
-  username,
   onToggleDetailsClick,
   ...props
 }) => {
+  const [username] = useUserName();
   const {scanner, observers} = entity;
   const obs = [];
 
@@ -148,8 +147,7 @@ Row.propTypes = {
   actionsComponent: PropTypes.component,
   entity: PropTypes.model.isRequired,
   links: PropTypes.bool,
-  username: PropTypes.string.isRequired,
   onToggleDetailsClick: PropTypes.func.isRequired,
 };
 
-export default withUserName(Row);
+export default Row;