Merge pull request #249 from sartography/feature/shortened_user_name_in_frontend

Feature/shortened user name in frontend

spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py

@@ -435,7 +435,7 @@ def _interstitial_stream(process_instance: ProcessInstanceModel) -> Generator[st
                     processor.save()  # Fixme - maybe find a way not to do this on every loop?
                 except WorkflowTaskException as wfe:
                     api_error = ApiError.from_workflow_exception(
-                        "engine_steps_error", "Failed complete an automated task.", exp=wfe
+                        "engine_steps_error", "Failed to complete an automated task.", exp=wfe
                     )
                     yield render_data("error", api_error)
                     return

spiffworkflow-frontend/src/components/ActiveUsers.tsx

@@ -42,7 +42,7 @@ export default function ActiveUsers() {
     return (
       <div
         title={`${activeUser.username} is also viewing this page`}
-        className="user-circle"
+        className="user-circle user-circle-for-list"
       >
         {activeUser.username.charAt(0).toUpperCase()}
       </div>

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -1,4 +1,8 @@
 import {
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+  Button,
   Header,
   HeaderContainer,
   HeaderMenuButton,
@@ -77,25 +81,46 @@ export default function NavigationBar() {
     return activeKey === menuItemPath;
   };
 
+  const profileToggletip = (
+    <div style={{ display: 'flex' }} id="user-profile-toggletip">
+      <Toggletip isTabTip align="bottom-right">
+        <ToggletipButton
+          aria-label="User Actions"
+          className="user-profile-toggletip-button"
+          type="button"
+        >
+          <div className="user-circle">
+            {UserService.getPreferredUsername()[0].toUpperCase()}
+          </div>
+        </ToggletipButton>
+        <ToggletipContent className="user-profile-toggletip-content">
+          <p>
+            <strong>{UserService.getPreferredUsername()}</strong>
+          </p>
+          <p>{UserService.getUserEmail()}</p>
+          <hr />
+          <Button className="button-link" onClick={handleLogout}>
+            <Logout />
+            &nbsp;&nbsp;Sign out
+          </Button>
+        </ToggletipContent>
+      </Toggletip>
+    </div>
+  );
+
   const loginAndLogoutAction = () => {
     if (UserService.isLoggedIn()) {
       return (
         <>
           {SPIFF_ENVIRONMENT ? (
-            <HeaderGlobalAction className="spiff-environment-header-text unclickable-text">
+            <HeaderGlobalAction
+              title={`The current SpiffWorkflow environment is: ${SPIFF_ENVIRONMENT}`}
+              className="spiff-environment-header-text unclickable-text"
+            >
               {SPIFF_ENVIRONMENT}
             </HeaderGlobalAction>
           ) : null}
-          <HeaderGlobalAction className="username-header-text unclickable-text">
-            {UserService.getPreferredUsername()}
-          </HeaderGlobalAction>
-          <HeaderGlobalAction
-            aria-label="Logout"
-            onClick={handleLogout}
-            data-qa="logout-button"
-          >
-            <Logout />
-          </HeaderGlobalAction>
+          {profileToggletip}
         </>
       );
     }

spiffworkflow-frontend/src/index.css

@@ -114,6 +114,12 @@ h2 {
   padding-left: 0;
 }
 
+.cds--header__global .cds--btn--primary.button-link {
+  color: #f4f4f4;
+  background-color: #393939;
+  padding-left: 0;
+}
+
 .cds--header__global .cds--btn--primary {
   background-color: #161616
 }
@@ -200,6 +206,44 @@ h1.with-icons {
   margin-bottom: 1em;
 }
 
+.user-profile-toggletip-content {
+  background-color: #393939;
+  color: #f4f4f4;
+  margin-right: 8px;
+  margin-top: -20px;
+}
+
+#user-profile-toggletip {
+  margin-top: 8px;
+  margin-right: 12px;
+}
+#user-profile-toggletip .cds--popover-content::before {
+  content: none;
+}
+
+#user-profile-toggletip .cds--popover--bottom-right .cds--popover-content {
+  bottom: 11px;
+  right: -2px;
+  border-radius: 5px;
+  border: 3px solid black;
+}
+
+#user-profile-toggletip .cds--popover-caret {
+  display: none;
+}
+
+.user-profile-toggletip-button:hover {
+  background-color: #161616;
+}
+
+#user-profile-toggletip .cds--popover--tab-tip__button::after {
+  content: none;
+}
+
+#user-profile-toggletip .cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{
+  background-color: #161616;
+}
+
 .with-top-margin {
   margin-top: 1em;
 }
@@ -471,49 +515,12 @@ svg.notification-icon {
   border-radius: 50%;
   color: #fff;
   font-weight: bold;
+}
+
+.user-circle-for-list {
   margin-right: 10px;
 }
 
-.user-circle.color-1 {
-  background-color: #8e8e8e;
-}
-
-.user-circle.color-2 {
-  background-color: #a57c63;
-}
-
-.user-circle.color-3 {
-  background-color: #8f7c7c;
-}
-
-.user-circle.color-4 {
-  background-color: #9a927f;
-}
-
-.user-circle.color-5 {
-  background-color: #5e5d5d;
-}
-
-.user-circle.color-6 {
-  background-color: #676767;
-}
-
-.user-circle.color-7 {
-  background-color: #6d7d6d;
-}
-
-.user-circle.color-8 {
-  background-color: #7a7171;
-}
-
-.user-circle.color-9 {
-  background-color: #837d63;
-}
-
-.user-circle.color-10 {
-  background-color: #686a70;
-}
-
 /* Randomize color assignment */
 .user-circle:nth-child(1) {
   background-color: #8e8e8e;