Implement UXD feedback for Admin UI version (#1602)

* Implement UXD feedback for Admin UI version

* Align text further

src/dashboard/Dashboard.tsx

@@ -21,8 +21,8 @@ import {
   Title,
 } from "@patternfly/react-core";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import _ from "lodash";
+import { Trans, useTranslation } from "react-i18next";
+import { xor } from "lodash";
 
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
@@ -60,7 +60,7 @@ const Dashboard = () => {
   const { realm } = useRealm();
   const serverInfo = useServerInfo();
 
-  const enabledFeatures = _.xor(
+  const enabledFeatures = xor(
     serverInfo.profileInfo?.disabledFeatures,
     serverInfo.profileInfo?.experimentalFeatures,
     serverInfo.profileInfo?.previewFeatures
@@ -78,7 +78,15 @@ const Dashboard = () => {
     <>
       <PageSection variant="light">
         <TextContent className="pf-u-mr-sm">
-          <Text component="h1">{toUpperCase(realm)} realm</Text>
+          <Text component="h1">
+            {t("realmName", { name: toUpperCase(realm) })}
+          </Text>
+          <Text>
+            <Trans t={t} i18nKey="adminUiVersion">
+              <strong>Admin UI version</strong>
+              {{ version: environment.commitHash }}
+            </Trans>
+          </Text>
         </TextContent>
       </PageSection>
       <PageSection>
@@ -160,9 +168,6 @@ const Dashboard = () => {
             </Card>
           </GridItem>
         </Grid>
-        <Text className="pf-u-font-size-sm pf-u-color-200 pf-u-mt-sm">
-          {t("adminUiVersion", { version: environment.commitHash })}
-        </Text>
       </PageSection>
     </>
   );

src/dashboard/messages.ts

@@ -1,5 +1,6 @@
 export default {
   dashboard: {
+    realmName: "{{name}} realm",
     welcome: "Welcome to",
     introduction:
       "If you want to leave this page and mange this realm, please click the corresponding menu items in the left navigation bar.",
@@ -13,6 +14,6 @@ export default {
     infoEnabledFeatures: "Something about what enabled features are.",
     infoDisabledFeatures: "Something about what disabled features are.",
     disabledFeatures: "Disabled features",
-    adminUiVersion: "Admin UI version: {{version}}",
+    adminUiVersion: '<0 class="pf-u-mr-md">Admin UI version</0>{{version}}',
   },
 };