Add About dialog to sidebar with license compliance tests (#971)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>

app/src/components/Sidebar/DetailsTab.tsx

@@ -1,12 +1,12 @@
 import * as q from '../../../../backend/src/Model'
 import React, { useCallback } from 'react'
-import { Box, Typography, IconButton, Chip, Tooltip } from '@mui/material'
+import { Box, Typography, IconButton, Chip, Tooltip, Button } from '@mui/material'
 import { Theme } from '@mui/material/styles'
 import { withStyles } from '@mui/styles'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { sidebarActions } from '../../actions'
+import { sidebarActions, globalActions } from '../../actions'
 import Copy from '../helper/Copy'
 import Save from '../helper/Save'
 import DateFormatter from '../helper/DateFormatter'
@@ -17,6 +17,7 @@ import DeleteSelectedTopicButton from './ValueRenderer/DeleteSelectedTopicButton
 import { useDecoder } from '../hooks/useDecoder'
 import DeleteIcon from '@mui/icons-material/Delete'
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'
+import Info from '@mui/icons-material/Info'
 import SimpleBreadcrumb from './SimpleBreadcrumb'
 
 interface Props {
@@ -24,6 +25,7 @@ interface Props {
   classes: any
   compareMessage?: q.Message
   sidebarActions: typeof sidebarActions
+  globalActions: typeof globalActions
 }
 
 function DetailsTab(props: Props) {
@@ -67,6 +69,19 @@ function DetailsTab(props: Props) {
         <Typography variant="body2" color="textSecondary" align="center">
           Select a topic to view details
         </Typography>
+        
+        {/* About Button - always show even when no topic selected */}
+        <Box className={classes.aboutSection}>
+          <Button
+            variant="outlined"
+            size="small"
+            startIcon={<Info />}
+            onClick={() => props.globalActions.toggleAboutDialogVisibility()}
+            fullWidth
+          >
+            About MQTT Explorer
+          </Button>
+        </Box>
       </Box>
     )
   }
@@ -180,6 +195,19 @@ function DetailsTab(props: Props) {
           </Box>
         </Box>
       )}
+      
+      {/* About Section - always visible at bottom */}
+      <Box className={classes.aboutSection}>
+        <Button
+          variant="outlined"
+          size="small"
+          startIcon={<Info />}
+          onClick={() => props.globalActions.toggleAboutDialogVisibility()}
+          fullWidth
+        >
+          About MQTT Explorer
+        </Button>
+      </Box>
     </Box>
   )
 }
@@ -195,10 +223,17 @@ const styles = (theme: Theme) => ({
   },
   emptyState: {
     display: 'flex',
+    flexDirection: 'column' as 'column',
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: '200px',
     padding: theme.spacing(3),
+    gap: theme.spacing(3),
+  },
+  aboutSection: {
+    marginTop: theme.spacing(3),
+    paddingTop: theme.spacing(2),
+    borderTop: `1px solid ${theme.palette.divider}`,
   },
   // Topic section
   topicSection: {
@@ -321,6 +356,7 @@ const mapStateToProps = (state: AppState) => {
 const mapDispatchToProps = (dispatch: any) => {
   return {
     sidebarActions: bindActionCreators(sidebarActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
   }
 }
 

app/src/components/Sidebar/Sidebar.tsx

@@ -1,16 +1,24 @@
 import * as q from '../../../../backend/src/Model'
 import React, { useState, useEffect, useCallback } from 'react'
 import { AppState } from '../../reducers'
+<<<<<<< HEAD
+import { AccordionDetails, Button } from '@mui/material'
+=======
+>>>>>>> origin/master
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { settingsActions, sidebarActions } from '../../actions'
+import { globalActions, settingsActions, sidebarActions } from '../../actions'
 import { Theme } from '@mui/material/styles'
 import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
+<<<<<<< HEAD
+import Info from '@mui/icons-material/Info'
+=======
 import { Tabs, Tab, Box, useMediaQuery, useTheme } from '@mui/material'
 import DetailsTab from './DetailsTab'
 import PublishTab from './PublishTab'
+>>>>>>> origin/master
 
 const throttle = require('lodash.throttle')
 
@@ -18,6 +26,7 @@ interface Props {
   nodePath?: string
   tree?: q.Tree<TopicViewModel>
   actions: typeof sidebarActions
+  globalActions: typeof globalActions
   settingsActions: typeof settingsActions
   classes: any
   connectionId?: string
@@ -52,6 +61,37 @@ function SidebarNew(props: Props) {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 
+<<<<<<< HEAD
+  return (
+    <div id="Sidebar" className={classes.drawer}>
+      <div>
+        <TopicPanel node={node} />
+        <ValuePanelAny lastUpdate={node ? node.lastUpdate : 0} />
+        <Panel>
+          <span>Publish</span>
+          <Publish connectionId={props.connectionId} />
+        </Panel>
+        <Panel detailsHidden={!node}>
+          <span>Stats</span>
+          <AccordionDetails className={classes.details}>
+            <NodeStats node={node} />
+          </AccordionDetails>
+        </Panel>
+        <Panel>
+          <span>About</span>
+          <AccordionDetails className={classes.details}>
+            <Button
+              variant="text"
+              size="small"
+              startIcon={<Info />}
+              onClick={() => props.globalActions.toggleAboutDialogVisibility()}
+              fullWidth
+            >
+              About MQTT Explorer
+            </Button>
+          </AccordionDetails>
+        </Panel>
+=======
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue)
   }
@@ -64,6 +104,7 @@ function SidebarNew(props: Props) {
         <Box className={classes.mobileContent}>
           <DetailsTab node={node} />
         </Box>
+>>>>>>> origin/master
       </div>
     )
   }
@@ -108,6 +149,7 @@ const mapStateToProps = (state: AppState) => {
 const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: bindActionCreators(sidebarActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
     settingsActions: bindActionCreators(settingsActions, dispatch),
   }
 }