Indicate logged-in-user-email in Navigation bar.

- Conditional rendering of username in Navigation.tsx.
- New custom react hooks useIdentities and useLoggedInUser.

Signed-off-by: Nkeiruka <[email protected]>

src/components/Navigation.tsx

@@ -14,6 +14,7 @@ import NavAccordion, { AccordionNavMenu } from "./NavAccordion";
 import useEventListener from "@use-it/event-listener";
 import { enablePermissionsFeature } from "util/permissions";
 import { Location, useLocation } from "react-router-dom";
+import { useLoggedInUser } from "context/useLoggedInUser";
 
 const isSmallScreen = () => isWidthBelow(620);
 
@@ -41,6 +42,7 @@ const Navigation: FC = () => {
     project && !isLoading ? project.name : "default",
   );
   const { hasCustomVolumeIso } = useSupportedFeatures();
+  const { loggedInUserName, auth_method } = useLoggedInUser();
   const enablePermissions = enablePermissionsFeature();
   const [scroll, setScroll] = useState(false);
   const location = useLocation();
@@ -449,7 +451,7 @@ const Navigation: FC = () => {
                           <Icon
                             className="is-light p-side-navigation__icon"
                             name="profile"
-                          />{" "}
+                          />
                           Login
                         </NavLink>
                       </li>
@@ -475,7 +477,24 @@ const Navigation: FC = () => {
                       <Icon
                         className="p-side-navigation__icon"
                         name="information"
-                      />{" "}
+                      />
+                      {auth_method == "tls"
+                        ? "Connected Via TLS"
+                        : loggedInUserName}
+                    </a>
+                  </li>
+                  <li className="p-side-navigation__item">
+                    <a
+                      className="p-side-navigation__link"
+                      href={docBaseLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      title="Documentation"
+                    >
+                      <Icon
+                        className="p-side-navigation__icon"
+                        name="information"
+                      />
                       Documentation
                     </a>
                   </li>
@@ -490,7 +509,7 @@ const Navigation: FC = () => {
                       <Icon
                         className="is-light p-side-navigation__icon"
                         name="share"
-                      />{" "}
+                      />
                       Discussion
                     </a>
                   </li>
@@ -505,7 +524,7 @@ const Navigation: FC = () => {
                       <Icon
                         className="is-light p-side-navigation__icon"
                         name="code"
-                      />{" "}
+                      />
                       Report a bug
                     </a>
                   </li>

src/context/useLoggedInUser.tsx

@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import { useSettings } from "./useSettings";
+import { fetchIdentities } from "api/auth-identities";
+import { queryKeys } from "util/queryKeys";
+
+export const useIdentities = () => {
+  return useQuery({
+    queryKey: [queryKeys.identities],
+    queryFn: fetchIdentities,
+  });
+};
+
+export const useLoggedInUser = () => {
+  const { data: settings, isLoading, error } = useSettings();
+  const { data: identities = [] } = useIdentities();
+  let loggedInUserName = settings?.auth_user_name; //Temp val
+  //   const [loggedInUserName, setLoggedInUsername] = useState(
+  //     settings?.auth_user_name,
+  //   );
+
+  for (const client of identities) {
+    if (loggedInUserName == client.id) {
+      //   setLoggedInUsername(client.name);
+      loggedInUserName = client.name;
+    }
+  }
+
+  return {
+    loggedInUserName, //this should only return the username cross referenced by the auth username
+    auth_method: settings?.auth_user_method, //If connected via TLS, then display "Connected via TLS, else render username"
+    isSettingsLoading: isLoading,
+    settingsError: error,
+  };
+};