Fix interface when locale is something other than English

app/javascript/overview/keywords/KeywordsDisplay.jsx

@@ -23,18 +23,21 @@ const KeywordsDisplay = ({ tags }: Props) => (
         .map(({ name, displayName }) => (
           <CategoryTag
             key={name}
-            category={displayName}
+            category={name}
+            label={displayName}
             href={categoryQueryPath(name)}
           />
         ))}
     </div>
 
     <div className="pt-dark">
-      {tags.filter(tag => !tag.category).map(({ name, displayName }) => (
-        <KeywordTag key={name} href={categoryQueryPath(name)}>
-          {displayName}
-        </KeywordTag>
-      ))}
+      {tags
+        .filter(tag => !tag.category)
+        .map(({ name, displayName }) => (
+          <KeywordTag key={name} href={categoryQueryPath(name)}>
+            {displayName}
+          </KeywordTag>
+        ))}
     </div>
   </>
 )
@@ -52,7 +55,7 @@ const CategoryTag = styled.a.attrs({ className: 'pt-tag pt-large' })`
   padding: 0.5em 1em !important;
 
   &::before {
-    content: '${p => p.category}';
+    content: '${p => p.name}';
     text-transform: capitalize;
   }
 

app/javascript/packs/billboard.entry.jsx

@@ -33,7 +33,7 @@ Promise.all([
   import(`react-intl/locale-data/${locale.substring(0, 2)}`),
   loadMessages(locale),
 ]).then(([localeData, messages]) => {
-  addLocaleData(localeData)
+  addLocaleData(localeData.default)
 
   if (container != null) {
     ReactDOM.render(

app/javascript/packs/case.entry.jsx

@@ -34,7 +34,7 @@ Promise.all([
   import(`react-intl/locale-data/${locale.substring(0, 2)}`),
   loadMessages(locale),
 ]).then(([localeData, messages]) => {
-  addLocaleData(localeData)
+  addLocaleData(localeData.default)
   ReactDOM.render(
     <ErrorBoundary>
       <Provider store={store}>

app/javascript/packs/catalog.entry.jsx

@@ -21,7 +21,7 @@ Promise.all([
   import(`react-intl/locale-data/${locale.substring(0, 2)}`),
   loadMessages(locale),
 ]).then(([localeData, messages]) => {
-  addLocaleData(localeData)
+  addLocaleData(localeData.default)
   ReactDOM.render(
     <ErrorBoundary>
       <IntlProvider locale={locale} messages={messages}>

app/javascript/packs/deployment.entry.jsx

@@ -20,7 +20,7 @@ Promise.all([
   import(`react-intl/locale-data/${locale.substring(0, 2)}`),
   loadMessages(locale),
 ]).then(([localeData, messages]) => {
-  addLocaleData(localeData)
+  addLocaleData(localeData.default)
   ReactDOM.render(
     <IntlProvider locale={locale} messages={messages}>
       <ThemeProvider theme={theme}>

app/javascript/packs/main-menu.entry.jsx

@@ -17,7 +17,7 @@ Promise.all([
   import(`react-intl/locale-data/${locale.substring(0, 2)}`),
   loadMessages(locale),
 ]).then(([localeData, messages]) => {
-  addLocaleData(localeData)
+  addLocaleData(localeData.default)
   ReactDOM.render(
     <IntlProvider locale={locale} messages={messages}>
       <MainMenu />

app/javascript/shared/MainMenu.jsx

@@ -53,12 +53,12 @@ class MainMenu extends React.Component<{ intl: IntlShape }, Reader> {
             </Menu>
           }
         >
-          <Row
+          <ButtonRow
             aria-label={formatMessage({ id: 'readers.form.accountOptions' })}
           >
             <Identicon reader={reader} />
             <CaretDown />
-          </Row>
+          </ButtonRow>
         </Popover>
       </Row>
     ) : (
@@ -96,12 +96,13 @@ const CaretDown = styled.span.attrs({
   margin-left: 8px;
   color: rgba(255, 255, 255, 0.5);
 `
-const Row = styled.div.attrs({
-  role: 'button',
-  tabIndex: '0',
-  onKeyPress: () => acceptKeyboardClick,
-})`
+const Row = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
 `
+const ButtonRow = styled(Row).attrs({
+  role: 'button',
+  tabindex: '0',
+  onKeyPress: () => acceptKeyboardClick,
+})``

config/initializers/i18n.rb

@@ -8,6 +8,8 @@
                       .map { |fname| File.basename fname, '.yml' }
                       .map(&:to_sym)
   config.i18n.available_locales = ([:en] + available_locales).uniq
+
+  config.i18n.fallbacks = %i[en]
 end
 
 module Translation

spec/features/using_a_non_english_locale_spec.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+feature 'Using a non-English locale' do
+  scenario 'the catalog and case pages load' do
+    reader = create :reader, locale: :fr, password: 'secret'
+    case_study = create :case_with_elements
+    case_study.tag 'water'
+
+    login_as reader
+
+    click_on case_study.title
+    expect(page).to have_content 'TABLE DES MATIÈRES'
+
+    click_on case_study.pages.first.title
+    expect(page).to have_button 'Retour au résumé'
+
+    # Somehow, not doing this leaves the interface in French for later tests
+    reader.update locale: :en
+    logout
+  end
+end

spec/support/integration/authentication.rb

@@ -11,10 +11,14 @@ def login_as(reader)
           click_button 'Sign in'
         end
 
-        def logout
+        def logout(locale: :en)
           visit root_path
-          find('#reader-icon').click
-          click_link 'Sign out'
+
+          options = I18n.t('readers.form.account_options', locale: locale)
+          find("[aria-label='#{options}']").click
+
+          click_on I18n.t('devise.sessions.destroy.sign_out',
+                          locale: locale)
         end
       end
     end