Re-enable outdated version warning, remove warning when version is ch…

…anged back to latest

web/src/data-providers/MessageBannerProvider.tsx

@@ -15,11 +15,15 @@ export interface Message {
 
 interface MessageBannerState {
   showMessage: (message: Message) => void
+  clearMessages: () => void
 }
 
 export const Context = React.createContext<MessageBannerState>({
   showMessage: (): void => {
     console.warn('MessageBannerProvider not initialized')
+  },
+  clearMessages: (): void => {
+    console.warn('MessageBannerProvider not initialized')
   }
 })
 
@@ -59,8 +63,20 @@ export function MessageBannerProvider ({ children }: any): JSX.Element {
     setLastTimeout(newTimeout)
   }, [])
 
+  const clearMessages = useCallback(() => {
+    if (lastTimeout !== undefined) {
+      clearTimeout(lastTimeout)
+    }
+
+    setMessage({
+      content: undefined,
+      type: 'success',
+      showMs: 6000
+    })
+  }, [])
+
   return (
-    <Context.Provider value={{ showMessage }}>
+    <Context.Provider value={{ showMessage, clearMessages }}>
       <Banner message={message} />
       {children}
     </Context.Provider>

web/src/pages/Docs.tsx

@@ -6,11 +6,13 @@ import NotFound from './NotFound'
 import DocumentControlButtons from '../components/DocumentControlButtons'
 import IFrame from '../components/IFrame'
 import { useLocation, useParams, useSearchParams } from 'react-router-dom'
+import { useMessageBanner } from '../data-providers/MessageBannerProvider'
 
 export default function Docs (): JSX.Element {
   const params = useParams()
   const searchParams = useSearchParams()[0]
   const location = useLocation()
+  const { showMessage, clearMessages } = useMessageBanner()
 
   const [versions, setVersions] = useState<ProjectDetails[]>([])
   const [loadingFailed, setLoadingFailed] = useState<boolean>(false)
@@ -149,6 +151,26 @@ export default function Docs (): JSX.Element {
     }
   }, [location])
 
+  useEffect(() => {
+    // check every time the version changes whether the version
+    // is the latest version and if not, show a banner
+    if (versions.length === 0) {
+      return
+    }
+
+    const latestVersion = ProjectRepository.getLatestVersion(versions).name
+    if (version === latestVersion) {
+      clearMessages()
+      return
+    }
+
+    showMessage({
+      content: 'You are viewing an outdated version of the documentation.',
+      type: 'warning',
+      showMs: null
+    })
+  }, [version, versions])
+
   if (loadingFailed || project.current === '') {
     return <NotFound />
   }