feat: unified floating actions with route-based help

Author: hemanandr

ThingConnect.Pulse.Server/Infrastructure/ApplicationUserClaimsPrincipalFactory.cs

@@ -0,0 +1,33 @@
+using System.Security.Claims;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.Extensions.Options;
+using ThingConnect.Pulse.Server.Data;
+
+namespace ThingConnect.Pulse.Server.Infrastructure;
+
+/// <summary>
+/// Custom claims principal factory to add role claims from ApplicationUser.Role property
+/// </summary>
+public sealed class ApplicationUserClaimsPrincipalFactory : UserClaimsPrincipalFactory<ApplicationUser, IdentityRole>
+{
+    public ApplicationUserClaimsPrincipalFactory(
+        UserManager<ApplicationUser> userManager,
+        RoleManager<IdentityRole> roleManager,
+        IOptions<IdentityOptions> optionsAccessor)
+        : base(userManager, roleManager, optionsAccessor)
+    {
+    }
+
+    protected override async Task<ClaimsIdentity> GenerateClaimsAsync(ApplicationUser user)
+    {
+        var identity = await base.GenerateClaimsAsync(user);
+        
+        // Add the role claim from the custom Role property
+        if (!string.IsNullOrEmpty(user.Role))
+        {
+            identity.AddClaim(new Claim(ClaimTypes.Role, user.Role));
+        }
+
+        return identity;
+    }
+}

ThingConnect.Pulse.Server/Program.cs

@@ -70,7 +70,8 @@ public static async Task Main(string[] args)
                 options.SignIn.RequireConfirmedEmail = false;
             })
             .AddEntityFrameworkStores<PulseDbContext>()
-            .AddDefaultTokenProviders();
+            .AddDefaultTokenProviders()
+            .AddClaimsPrincipalFactory<ApplicationUserClaimsPrincipalFactory>();
 
             // Configure cookie authentication to override Identity defaults
             builder.Services.ConfigureApplicationCookie(options =>

marketing/content/blog-posts/category-1-getting-started/installing-thingconnect-pulse-5-minute-guide.md

@@ -40,7 +40,7 @@ Before we dive into installation, let's ensure your system meets the minimal req
 
 <!-- IMAGE NEEDED: Screenshot of download page highlighting the Windows installer -->
 
-1. Navigate to [pulse.thingconnect.com/download](pulse.thingconnect.com/download)
+1. Navigate to [pulse.thingconnect.io/download](pulse.thingconnect.io/download)
 2. Click "Download for Windows" 
 3. Save the installer file (ThingConnectPulse-Setup.exe) to your Downloads folder
 
@@ -199,9 +199,9 @@ ThingConnect Pulse's 5-minute installation means you can:
 
 ThingConnect Pulse provides enterprise-grade monitoring capabilities without the enterprise price tag. Our 5-minute installation is just the beginning - you now have access to the same network visibility that manufacturing facilities pay thousands of dollars annually to achieve.
 
-**Ready to start monitoring?** Download ThingConnect Pulse free at [pulse.thingconnect.com](pulse.thingconnect.com) and join hundreds of manufacturing facilities who've eliminated network-related production delays.
+**Ready to start monitoring?** Download ThingConnect Pulse free at [pulse.thingconnect.io](pulse.thingconnect.io) and join hundreds of manufacturing facilities who've eliminated network-related production delays.
 
-**Questions about installation or setup?** Our manufacturing network monitoring experts are here to help. Contact us at [support@thingconnect.com](mailto:support@thingconnect.com) or join our community forum for peer-to-peer assistance.
+**Questions about installation or setup?** Our manufacturing network monitoring experts are here to help. Contact us at [support@thingconnect.io](mailto:support@thingconnect.io) or join our community forum for peer-to-peer assistance.
 
 ---
 

marketing/content/blog-posts/category-1-getting-started/migrating-from-prtg-complete-guide.md

@@ -111,7 +111,7 @@ Before beginning your migration, take time to audit your current PRTG deployment
 
 ### Install ThingConnect Pulse:
 
-1. **Download** from [pulse.thingconnect.com](pulse.thingconnect.com)
+1. **Download** from [pulse.thingconnect.io](pulse.thingconnect.io)
 2. **Install** using administrator privileges
 3. **Access dashboard** at http://localhost:8080
 4. **Complete initial configuration** wizard

thingconnect.pulse.client/src/components/config/ConfigurationVersions.tsx

@@ -20,6 +20,7 @@ export function ConfigurationVersions({ refreshTrigger }: ConfigurationVersionsP
       setIsLoading(true);
       setError(null);
       const data = await configurationService.getVersions();
+      // Sort by applied timestamp descending (most recent first)
       const sortedVersions = data.sort(
         (a, b) => new Date(b.appliedTs).getTime() - new Date(a.appliedTs).getTime()
       );

thingconnect.pulse.client/src/components/layout/AppShell.tsx

@@ -1,16 +1,14 @@
 import { Outlet } from 'react-router-dom';
-import { Box, Flex, useBreakpointValue, IconButton } from '@chakra-ui/react';
+import { Box, Flex, useBreakpointValue } from '@chakra-ui/react';
 import { useState } from 'react';
 import { Navigation } from './Navigation';
 import { Footer } from './Footer';
-import { Moon, Sun } from 'lucide-react';
-import { useColorMode } from '../ui/color-mode';
+import { FloatingActions } from './FloatingActions';
 
 export function AppShell() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const sidebarWidth = useBreakpointValue({ base: '100%', md: '250px' });
   const isMobile = useBreakpointValue({ base: true, md: false });
-  const { colorMode, toggleColorMode } = useColorMode();
 
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
@@ -65,20 +63,8 @@ export function AppShell() {
       {/* Footer */}
       <Footer />
 
-      {/* Floating Toggle Button */}
-      <IconButton
-        data-testid='theme-toggle'
-        aria-label='Toggle color mode'
-        variant='ghost'
-        size='sm'
-        position='fixed'
-        top='16px'
-        right='16px'
-        zIndex={1100}
-        onClick={toggleColorMode}
-      >
-        {colorMode === 'light' ? <Moon size={18} /> : <Sun size={18} />}
-      </IconButton>
+      {/* Floating Actions (Theme Toggle + Help Button) */}
+      <FloatingActions />
     </Flex>
   );
 }

thingconnect.pulse.client/src/components/layout/FloatingActions.tsx

@@ -0,0 +1,68 @@
+import { HStack, IconButton } from '@chakra-ui/react';
+import { Moon, Sun, HelpCircle } from 'lucide-react';
+import { useLocation } from 'react-router-dom';
+import { useColorMode } from '../ui/color-mode';
+import { Tooltip } from '../ui/tooltip';
+
+// Route-to-help URL mapping
+const ROUTE_HELP_URLS: Record<string, string> = {
+  '/': 'https://docs.thingconnect.io/pulse/user-guide/dashboard',
+  '/configuration': 'https://docs.thingconnect.io/pulse/user-guide/configuration',
+  '/history': 'https://docs.thingconnect.io/pulse/user-guide/viewing-history',
+  '/settings': 'https://docs.thingconnect.io/pulse/user-guide/settings',
+  '/about': 'https://docs.thingconnect.io/pulse/about',
+};
+
+export function FloatingActions() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const location = useLocation();
+  
+  const helpUrl = ROUTE_HELP_URLS[location.pathname];
+  
+  const handleHelpClick = () => {
+    if (helpUrl) {
+      window.open(helpUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  return (
+    <HStack
+      position="fixed"
+      top="16px"
+      right="16px"
+      zIndex={1100}
+      gap={1}
+      data-testid="floating-actions"
+    >
+      {/* Help Button - only show if help URL exists for current route */}
+      {helpUrl && (
+        <Tooltip content="View Help">
+          <IconButton
+            data-testid="help-button"
+            aria-label="View Help"
+            variant="ghost"
+            size="sm"
+            onClick={handleHelpClick}
+            _hover={{ bg: 'blue.50', _dark: { bg: 'blue.900' } }}
+          >
+            <HelpCircle size={18} />
+          </IconButton>
+        </Tooltip>
+      )}
+      
+      {/* Theme Toggle */}
+      <Tooltip content="Toggle color mode">
+        <IconButton
+          data-testid="theme-toggle"
+          aria-label="Toggle color mode"
+          variant="ghost"
+          size="sm"
+          onClick={toggleColorMode}
+          _hover={{ bg: 'gray.50', _dark: { bg: 'gray.800' } }}
+        >
+          {colorMode === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+        </IconButton>
+      </Tooltip>
+    </HStack>
+  );
+}

thingconnect.pulse.client/src/components/layout/Footer.tsx

@@ -24,7 +24,7 @@ export function Footer() {
           <Text>•</Text>
           <Link
             data-testid='thingconnect-link'
-            href='https://thingconnect.com'
+            href='https://thingconnect.io'
             target='_blank'
             rel='noopener noreferrer'
             color='blue.600'

thingconnect.pulse.client/src/components/layout/Navigation.tsx

@@ -2,7 +2,7 @@ import { Box, VStack, Text, Icon, Image, HStack, Badge, Button } from '@chakra-u
 import { Link as RouterLink, useLocation } from 'react-router-dom';
 import { Wifi, Activity, LogOut } from 'lucide-react';
 import thingConnectIcon from '@/assets/ThingConnectPulseLogo.svg';
-import { Clock, Wrench, Settings, Info, Dashboard } from '@/icons';
+import { Clock, Wrench, Settings, Info, Dashboard, Help } from '@/icons';
 import { useAuth } from '@/features/auth/context/AuthContext';
 interface NavigationProps {
   onItemClick?: () => void;

thingconnect.pulse.client/src/pages/About.tsx

@@ -302,14 +302,14 @@ export default function About() {
                 </Text>
                 <HStack gap={4} justify='center'>
                   <Link
-                    href='https://thingconnect.com'
+                    href='https://thingconnect.io'
                     target='_blank'
                     rel='noopener noreferrer'
                     _hover={{ textDecoration: 'none' }}
                   >
                     <Button size='sm' variant='outline'>
                       <ExternalLink size={14} />
-                      Visit ThingConnect.com
+                      Visit ThingConnect.io
                     </Button>
                   </Link>
                 </HStack>