feat(about): add version info component (#1037)

Author: NoamGaash

src/locale/en.json

@@ -253,5 +253,7 @@
         "description": "Wikipedia - In public transport, bus bunching is a phenomenon whereby two or more transit vehicles that were scheduled at regular intervals along a common route instead bunch together and form a platoon. This occurs when leading vehicles are unable to keep their schedule and fall behind to such an extent that trailing vehicles catch up to them."
       }
     ]
-  }
+  },
+  "version": "Current version identifier",
+  "failedToFetchVersion": "Failed to fetch current version identifier"
 }

src/locale/he.json

@@ -272,5 +272,8 @@
         "description": "ויקיפדיה - בתחבורה ציבורית, התקבצות אוטובוסים (באנגלית: Bus Bunching) היא מצב שבו שני אוטובוסים או יותר שהיו אמורים להגיע לתחנה בזמנים שונים, מגיעים אליה יחד. מצב זה מתרחש כשמתרחשת חריגה מלוח הזמנים והאוטובוס שהיה אמור להגיע שני משתווה לראשון."
       }
     ]
-  }
+  },
+  "loading": "טוען...",
+  "version": "מזהה גרסה",
+  "failedToFetchVersion": "נכשל בטעינת מידע אודות מזהה הגרסה הנוכחית"
 }

src/pages/about/index.tsx

@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'
 import './About.scss'
 import { useQuery } from '@tanstack/react-query'
 import SlackIcon from '../../resources/slack-icon.svg'
+import { VersionInfo } from './version/VersionInfo'
 import Widget from 'src/shared/Widget'
 
 const pageName = 'aboutPage'
@@ -24,8 +25,9 @@ const About = () => {
         <Questions />
         <Funding />
         <Attributions />
+        <VersionInfo />
+        <Contributors />
       </Stack>
-      <Contributors />
     </AboutStyle>
   )
 }

src/pages/about/version/VersionInfo.scss

@@ -0,0 +1,5 @@
+.version {
+    font-family: monospace;
+    font-size: 0.8em;
+    color: #666;
+}

src/pages/about/version/VersionInfo.stories.tsx

@@ -0,0 +1,16 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { VersionInfo } from './VersionInfo'
+
+export default {
+  title: 'About/VersionInfo',
+  component: VersionInfo,
+}
+
+const queryClient = new QueryClient()
+queryClient.setQueryData(['version'], '1.2.3')
+
+export const Default = () => (
+  <QueryClientProvider client={queryClient}>
+    <VersionInfo />
+  </QueryClientProvider>
+)

src/pages/about/version/VersionInfo.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next'
+import { useQuery } from '@tanstack/react-query'
+import Widget from 'src/shared/Widget'
+
+import './VersionInfo.scss'
+
+const versionUrl = 'https://open-bus-map-search.hasadna.org.il/hash.txt'
+
+export const VersionInfo = () => {
+  const { t } = useTranslation()
+  const {
+    data: version,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['version'],
+    queryFn: () => fetch(versionUrl).then((response) => response.text()),
+  })
+  return (
+    <Widget>
+      <h2>{t('version')}</h2>
+      {isLoading && <p>{t('loading')}</p>}
+      {isError && <p>{t('failedToFetchVersion')}</p>}
+      {version && <p className="version">{version}</p>}
+    </Widget>
+  )
+}

tests/version-info.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test'
+import { test } from './utils'
+
+const versionUrl = 'https://open-bus-map-search.hasadna.org.il/hash.txt'
+
+test.describe('Version info tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route(/google-analytics\.com|googletagmanager\.com/, (route) => route.abort())
+    await page.route(/github.com/, (route) => route.abort())
+    await page.goto('/about')
+  })
+  test('should see loading state', async ({ page }) => {
+    await page.route(versionUrl, () => void 0)
+    await expect(page.getByRole('heading', { name: 'גרסה' })).toBeVisible()
+    await expect(page.getByText('טוען...')).toBeVisible()
+    await page.getByLabel('English').click()
+    await expect(page.getByText('Loading')).toBeVisible()
+  })
+  test('should see version', async ({ page }) => {
+    await page.route(versionUrl, (route) => route.fulfill({ body: 'my version' }))
+    await expect(page.getByText('my version')).toBeVisible()
+  })
+  test('should see error message', async ({ page }) => {
+    await page.route(versionUrl, (route) => route.abort())
+    await expect(page.getByText('נכשל בטעינת מידע')).toBeVisible({ timeout: 15_000 })
+    await page.getByLabel('English').click()
+    await expect(page.getByText('Failed to fetch current version identifier')).toBeVisible()
+  })
+})