add a string directing to beta.apertium.org (#483)

**Description:**
This PR addresses issue #361 and also builds upon and supersedes the
changes proposed in PR #422.

**Changes Made:**
- Modified `config.ts` by adding `showMoreLanguagesLink` and specified
its type as `boolean` in `types.ts`. Also, added `more_languages` to
`stringReplacements`.
- Modified `AboutModal.tsx` by conditionally rendering `more_languages`
based on the value of `shouldDisplayString`, either true or false.
- In `index.test.tsx`, modified a test to check if, when the About
dialog is opened and `showMoreLanguagesLink` is set to `true`, it should
render the `more_languages`. Similarly, when `showMoreLanguagesLink` is
set to `false` and the About dialog is opened, it should not render the
`more_languages`.

Author: satti-hari-krishna-reddy

config.ts

@@ -14,5 +14,7 @@ export default {
 
   stringReplacements: {
     '{{maintainer}}': "<a href='https://wiki.apertium.org/wiki/Apertium' target='_blank' rel='noopener'>Apertium</a>",
+    '{{more_languages}}': "<a href='https://beta.apertium.org' rel='noreferrer'  target='_blank'>beta.apertium.org</a>",
   },
+  showMoreLanguagesLink: false,
 } as Config;

src/components/footer/AboutModal.tsx

@@ -3,6 +3,7 @@ import Modal, { ModalProps } from 'react-bootstrap/Modal';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
+import { ConfigContext } from '../../context';
 import { useLocalization } from '../../util/localization';
 
 import alicanteLogo from './img/logouapp.gif';
@@ -18,6 +19,7 @@ import mineturLogo from './img/logomitc120.jpg';
 import prompsitLogo from './img/prompsit150x52.png';
 
 const AboutModal = (props: ModalProps): React.ReactElement => {
+  const config = React.useContext(ConfigContext);
   const { t } = useLocalization();
 
   return (
@@ -28,6 +30,7 @@ const AboutModal = (props: ModalProps): React.ReactElement => {
       <Modal.Body>
         <p dangerouslySetInnerHTML={{ __html: t('What_Is_Apertium') }} />
         <p dangerouslySetInnerHTML={{ __html: t('Maintainer') }} />
+        {config.showMoreLanguagesLink && <p dangerouslySetInnerHTML={{ __html: t('More_Languages') }} />}
 
         <Row className="lead">
           <Col md="6">

src/components/footer/__tests__/index.test.tsx

@@ -2,19 +2,25 @@ import * as React from 'react';
 import { getAllByRole, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import Config from '../../../../config';
+import { ConfigContext } from '../../../context';
+import { Config as ConfigType } from '../../../types';
+
 import Footer from '..';
 
-const renderFooter = () => {
+const renderFooter = (config: Partial<ConfigType> = {}) => {
   const wrapRef = React.createRef<HTMLDivElement>();
   const pushRef = React.createRef<HTMLDivElement>();
 
   render(
-    <>
-      <div ref={wrapRef}>
-        <div ref={pushRef} />
-      </div>
-      <Footer pushRef={pushRef} wrapRef={wrapRef} />
-    </>,
+    <ConfigContext.Provider value={{ ...Config, ...config }}>
+      <>
+        <div ref={wrapRef}>
+          <div ref={pushRef} />
+        </div>
+        <Footer pushRef={pushRef} wrapRef={wrapRef} />
+      </>
+    </ConfigContext.Provider>,
   );
 };
 
@@ -37,8 +43,18 @@ describe('Footer', () => {
   });
 
   describe('navigation buttons', () => {
-    it('opens about dialog', () => {
-      renderFooter();
+    it('opens about dialog and display show more languages link when showMoreLanguagesLink is set to true', () => {
+      renderFooter({ showMoreLanguagesLink: true });
+
+      userEvent.click(screen.getByRole('button', { name: 'About-Default' }));
+
+      expect(screen.getByRole('dialog').textContent).toMatchInlineSnapshot(
+        `"About_Apertium-Default×CloseWhat_Is_Apertium-DefaultApertium-DefaultMore_Languages-Default"`,
+      );
+    });
+
+    it('opens about dialog and does not display show more languages link when showMoreLanguagesLink is set to false', () => {
+      renderFooter({ showMoreLanguagesLink: false });
 
       userEvent.click(screen.getByRole('button', { name: 'About-Default' }));
 

src/strings/eng.json

@@ -48,6 +48,7 @@
     "Help_Improve": "Help us improve Apertium!",
     "Contact_Us": "Feel free to contact us if you find a mistake, there's a project you would like to see us work on, or you would like to help out.",
     "Maintainer": "This website is maintained by {{maintainer}}.",
+    "More_Languages": "Looking for more languages? Try {{more_languages}}.",
     "About_Title": "About this website",
     "Enable_JS_Warning": "This site only works with JavaScript enabled, if you cannot <a href='http://www.enable-javascript.com/' target='_blank' rel='noopener'>enable Javascript</a>, then try the <a href='http://traductor.prompsit.com' target='_blank' rel='noopener'>translators at Prompsit</a>.",
     "Not_Found_Error": "<b>404 Error:</b> Sorry, that page doesn't exist anymore!",

src/types.ts

@@ -23,4 +23,5 @@ export type Config = {
 
   subtitle?: string;
   subtitleColor?: string;
+  showMoreLanguagesLink: boolean;
 };