From 4fa29948b6a3513615c99b033207ed7874a5668a Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 16 Apr 2020 12:17:05 +0200
Subject: [PATCH] use the child components

---
 .../account/messages/messages_en.properties      |  5 ++---
 .../content/my-resources-page/ResourcesTable.tsx | 16 ++++++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/themes/src/main/resources/theme/keycloak-preview/account/messages/messages_en.properties b/themes/src/main/resources/theme/keycloak-preview/account/messages/messages_en.properties
index 9a6aae99ae..9e8936c1d0 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/messages/messages_en.properties
+++ b/themes/src/main/resources/theme/keycloak-preview/account/messages/messages_en.properties
@@ -35,9 +35,8 @@ resourceName=Resource Name
 nextPage=Next
 previousPage=Previous
 firstPage=First Page
-resourceSharedWith=Resource is shared with
-and=and
-otherUsers=other users
+resourceSharedWith=Resource is shared with {0}
+and= and {0} other users
 add=Add
 shareSuccess=Resource successfully shared.
 resourceAlreadyShared=Resource is already shared with this user.
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/ResourcesTable.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/ResourcesTable.tsx
index 1b30d375ec..831804424d 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/ResourcesTable.tsx
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/ResourcesTable.tsx
@@ -98,12 +98,16 @@ export class ResourcesTable extends React.Component<ResourcesTableProps, Resourc
     public sharedWithUsersMessage(row: number): React.ReactNode {
         if (!this.hasPermissions(row)) return (<React.Fragment><Msg msgKey='resourceNotShared'/></React.Fragment>);
 
-        // TODO: Not using a parameterized message because I want to use <strong> tag.  Need to figure out a good solution to this.
-        if (this.numOthers(row) > 0) {
-            return (<React.Fragment><Msg msgKey='resourceSharedWith'/> <strong>{this.firstUser(row)}</strong> <Msg msgKey='and'/> <strong>{this.numOthers(row)}</strong> <Msg msgKey='otherUsers'/>.</React.Fragment>)
-        } else {
-            return (<React.Fragment><Msg msgKey='resourceSharedWith'/> <strong>{this.firstUser(row)}</strong>.</React.Fragment>)
-        }
+        return (
+            <React.Fragment>
+                    <Msg msgKey='resourceSharedWith'>
+                        <strong>{this.firstUser(row)}</strong>
+                    </Msg>
+                    {this.numOthers(row) > 0 && <Msg msgKey='and'>
+                        <strong>{this.numOthers(row)}</strong>
+                    </Msg>}.
+            </React.Fragment>
+        );
     }
 
     public render(): React.ReactNode {