Translate app pages & routes

mathesar_ui/.eslintrc.cjs

@@ -91,9 +91,13 @@ module.exports = {
       },
     },
     {
-      // Temporary block, will be merged with the base svelte override
-      // when the entire app is translated
-      files: ['src/components/**/*.svelte', 'src/systems/**/*.svelte'],
+      files: ['*.svelte'],
+      excludedFiles: [
+        'src/**/__meta__/**/*.svelte',
+        // Temporary exclusion
+        // Remove this when component library i18n context is implemented
+        'src/component-library/**/*.svelte',
+      ],
       extends: ['plugin:@intlify/svelte/recommended'],
       rules: {
         '@intlify/svelte/no-raw-text': [
@@ -107,6 +111,7 @@ module.exports = {
                 'title',
                 'placeholder',
                 'ariaLabel',
+                'searchPlaceholder',
               ],
             },
             ignoreText: [
@@ -118,6 +123,10 @@ module.exports = {
               ':',
               '(',
               ')',
+              '.',
+              '...',
+              '|',
+              '%',
             ],
           },
         ],

mathesar_ui/src/App.svelte

@@ -4,27 +4,24 @@
   import AppContext from './AppContext.svelte';
   import RootRoute from './routes/RootRoute.svelte';
   import { initI18n } from './i18n';
-  import ErrorBox from './components/message-boxes/ErrorBox.svelte';
 
   const commonData = preloadCommonData();
 
   let isTranslationsLoaded = false;
   void (async () => {
-    await initI18n(commonData?.user.display_language ?? 'en');
+    await initI18n(commonData.user.display_language ?? 'en');
     isTranslationsLoaded = true;
   })();
 </script>
 
-{#if isTranslationsLoaded && commonData}
+{#if isTranslationsLoaded}
   <AppContext {commonData}>
     <RootRoute {commonData} />
   </AppContext>
 {:else if !isTranslationsLoaded}
   <div class="app-loader">
     <Spinner size="2rem" />
   </div>
-{:else}
-  <ErrorBox>This state should never occur.</ErrorBox>
 {/if}
 
 <!--

mathesar_ui/src/components/AppHeader.svelte

@@ -49,7 +49,7 @@
     'canExecuteDDL',
   );
   $: upgradable = $releaseDataStore?.value?.upgradeStatus === 'upgradable';
-  $: isNormalRoutingContext = commonData?.routing_context === 'normal';
+  $: isNormalRoutingContext = commonData.routing_context === 'normal';
 
   let isCreatingNewEmptyTable = false;
 

mathesar_ui/src/components/LiveDemoBanner.svelte

@@ -6,7 +6,7 @@
 
   const commonData = preloadCommonData();
 
-  $: liveDemo = !!commonData?.live_demo_mode;
+  $: liveDemo = !!commonData.live_demo_mode;
 </script>
 
 {#if liveDemo}

mathesar_ui/src/pages/ErrorPage.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
-  import { AnchorButton } from '@mathesar/component-library';
+  import { _ } from 'svelte-i18n';
+  import { AnchorButton } from '@mathesar-component-library';
   import LayoutWithHeader from '@mathesar/layouts/LayoutWithHeader.svelte';
 
   export let showGoToRoot = true;
 </script>
 
 <LayoutWithHeader>
   <div class="error-page-container">
-    <h1>Error</h1>
+    <h1>{$_('error')}</h1>
     <div>
       <slot />
     </div>
     {#if showGoToRoot}
-      <AnchorButton appearance="primary" href="/">Go to homepage</AnchorButton>
+      <AnchorButton appearance="primary" href="/">
+        {$_('go_to_homepage')}
+      </AnchorButton>
     {/if}
   </div>
 </LayoutWithHeader>

mathesar_ui/src/pages/admin-update/ReleaseBox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import { Button, Icon } from '@mathesar-component-library';
   import Logo from '@mathesar/components/Logo.svelte';
   import {
@@ -33,37 +34,42 @@
   <div class="type">
     {#if type === 'available-upgrade'}
       <Icon {...iconUpgradeAvailable} />
-      New Version Available
+      {$_('new_version_available')}
     {:else if type === 'currently-installed-and-latest'}
       <Icon {...iconCurrentlyInstalledVersion} />
-      You are running the latest version
+      {$_('running_latest_version')}
     {:else if type === 'current'}
       <Icon {...iconCurrentlyInstalledVersion} />
-      Currently Installed
+      {$_('currently_installed')}
     {:else if type === 'latest'}
-      Latest Available Version (not installed)
+      {$_('latest_availabe_version_not_installed')}
     {:else}
       {assertExhaustive(type)}
     {/if}
   </div>
   <div class="details">
     <div class="left">
       <div class="logo"><Logo /></div>
-      <div class="name">Mathesar</div>
+      <div class="name">{$_('mathesar')}</div>
       <div class="version">{release.tagName}</div>
     </div>
     <div class="right">
-      <div class="date">Released {dateString}</div>
+      <div class="date">
+        {$_('released_date', {
+          values: { date: dateString },
+        })}
+      </div>
       <a href={release.notesUrl} class="notes" target="_blank">
-        Release Notes <Icon {...iconExternalHyperlink} />
+        {$_('release_notes')}
+        <Icon {...iconExternalHyperlink} />
       </a>
     </div>
   </div>
   {#if type === 'available-upgrade'}
     <div class="update-action">
-      <div class="message">We can install this new version for you</div>
+      <div class="message">{$_('we_can_install_new_version')}</div>
       <Button appearance="secondary" on:click={() => modalController.open()}>
-        Upgrade...
+        {$_('upgrade')}...
       </Button>
     </div>
   {/if}

mathesar_ui/src/pages/admin-update/SoftwareUpdateContent.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import { SpinnerButton } from '@mathesar-component-library';
   import Spinner from '@mathesar/component-library/spinner/Spinner.svelte';
   import ErrorBox from '@mathesar/components/message-boxes/ErrorBox.svelte';
+  import { RichText } from '@mathesar/components/rich-text';
   import { iconRefresh } from '@mathesar/icons';
   import type { ReleaseDataStore } from '@mathesar/stores/releases';
   import { toast } from '@mathesar/stores/toast';
@@ -35,13 +37,15 @@
   {@const { current, latest } = value}
   <div class="releases">
     {#if $loading}
-      <div>Loading release data</div>
+      <div>{$_('loading_release_data')}</div>
       <div><Spinner /></div>
     {:else if !current}
       <ErrorBox>
-        The currently-installed version is
-        <strong>{timestampedReleaseData.inputHash}</strong>
-        but we were unable to load data about this release.
+        <RichText text={$_('unable_to_load_release_data')} let:slotName>
+          {#if slotName === 'version'}
+            <strong>{timestampedReleaseData.inputHash}</strong>
+          {/if}
+        </RichText>
       </ErrorBox>
       {#if latest}
         <ReleaseBox release={latest} type={'latest'} />
@@ -50,7 +54,7 @@
       <ReleaseBox release={current} type="currently-installed-and-latest" />
     {:else if !latest}
       <ReleaseBox release={current} type="current" />
-      <ErrorBox>Unable to load data about the latest release.</ErrorBox>
+      <ErrorBox>{$_('unable_to_load_data_latest_release')}</ErrorBox>
     {:else if upgradeStatus === 'upgradable'}
       <ReleaseBox release={latest} type={'available-upgrade'} />
       <ReleaseBox release={current} type={'current'} />
@@ -62,21 +66,21 @@
     {/if}
   </div>
 {:else}
-  <div>Loading release data</div>
+  <div>{$_('loading_release_data')}</div>
   <div><Spinner /></div>
 {/if}
 
 <div class="store-status">
   <div class="check-button">
     <SpinnerButton
-      label="Check for Updates"
+      label={$_('check_for_updates')}
       appearance="default"
       icon={iconRefresh}
       onClick={refresh}
     />
   </div>
   {#if lastChecked}
-    Last checked: {lastChecked}
+    {$_('last_checked')}: {lastChecked}
   {/if}
 </div>
 

mathesar_ui/src/pages/admin-update/SoftwareUpdatePage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import ErrorBox from '@mathesar/components/message-boxes/ErrorBox.svelte';
   import { makeSimplePageTitle } from '@mathesar/pages/pageTitleUtils';
   import { getReleaseDataStoreFromContext } from '@mathesar/stores/releases';
@@ -8,13 +9,13 @@
 </script>
 
 <svelte:head>
-  <title>{makeSimplePageTitle('Software Update')}</title>
+  <title>{makeSimplePageTitle($_('software_update'))}</title>
 </svelte:head>
 
-<h1>Software Update</h1>
+<h1>{$_('software_update')}</h1>
 
 {#if releaseDataStore}
   <SoftwareUpdateContent {releaseDataStore} />
 {:else}
-  <ErrorBox>Release data store not found in context.</ErrorBox>
+  <ErrorBox>{$_('release_data_store_not_found')}</ErrorBox>
 {/if}

mathesar_ui/src/pages/admin-update/upgrade-modal/UpgradeConfirm.svelte

@@ -1,54 +1,56 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import {
     CancelOrProceedButtonPair,
     portalToWindowFooter,
   } from '@mathesar-component-library';
   import { iconNextStep } from '@mathesar/icons';
   import type { Release } from '@mathesar/stores/releases';
+  import { RichText } from '@mathesar/components/rich-text';
 
   export let release: Release;
   export let onProceed: () => void;
   export let onClose: () => void;
 </script>
 
-<p>Before Upgrading</p>
+<p>{$_('before_upgrading')}</p>
 <ul>
   <li>
-    Read the
-    <a href={release.notesUrl} target="_blank">release notes</a>
-    to see if this release requires any special upgrade instructions.
+    <RichText text={$_('read_release_notes')} let:slotName let:translatedArg>
+      {#if slotName === 'releaseNotesLink'}
+        <a href={release.notesUrl} target="_blank">{translatedArg}</a>
+      {/if}
+    </RichText>
   </li>
-  <li>Prepare your users for up to five minutes of downtime.</li>
+  <li>{$_('prepare_downtime')}</li>
 </ul>
-<p>While Upgrading</p>
+<p>{$_('while_upgrading')}</p>
 <ul>
   <li>
-    This window will remain open but all features within Mathesar will be
-    unusable.
+    {$_('window_remains_open_mathesar_unusable')}
   </li>
-  <li>You will see a loading spinner but no progress bar.</li>
+  <li>{$_('loading_spinner_no_progress_bar')}</li>
 </ul>
-<p>After Upgrading</p>
+<p>{$_('after_upgrading')}</p>
 <ul>
   <li>
-    This page will automatically reload, showing the software update status
-    again.
+    {$_('page_automatic_reload_update')}
   </li>
   <li>
-    If the upgrade succeeds, you will see that you're running the latest
-    version.
+    {$_('if_upgrade_succeeds_help')}
   </li>
   <li>
-    If the upgrade fails, the update status screen will still show that an
-    upgrade is available, and you will need to refer to our
-    <a href="https://docs.mathesar.org/">documentation</a>
-    for further troubleshooting.
+    <RichText text={$_('if_upgrade_fails_help')} let:slotName let:translatedArg>
+      {#if slotName === 'documentationLink'}
+        <a href="https://docs.mathesar.org/" target="_blank">{translatedArg}</a>
+      {/if}
+    </RichText>
   </li>
 </ul>
 <div use:portalToWindowFooter>
   <CancelOrProceedButtonPair
     onCancel={onClose}
-    proceedButton={{ label: 'Continue', icon: iconNextStep }}
+    proceedButton={{ label: $_('continue'), icon: iconNextStep }}
     {onProceed}
   />
 </div>

mathesar_ui/src/pages/admin-update/upgrade-modal/UpgradeError.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import {
     CancelOrProceedButtonPair,
     portalToWindowFooter,
@@ -16,7 +17,7 @@
 <div use:portalToWindowFooter>
   <CancelOrProceedButtonPair
     onCancel={onClose}
-    proceedButton={{ label: 'Retry', icon: iconRefresh }}
+    proceedButton={{ label: $_('retry'), icon: iconRefresh }}
     onProceed={onRetry}
   />
 </div>

mathesar_ui/src/pages/admin-update/upgrade-modal/UpgradeModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import {
     ControlledModal,
     type ModalController,
@@ -28,11 +29,11 @@
   let state: State = getInitialState();
   let reloadTimeout: number | undefined;
 
-  $: version = `Mathesar ${release.tagName}`;
+  $: version = `${$_('mathesar')} ${release.tagName}`;
   $: titleMap = ((): Record<Status, string> => ({
-    confirm: `Upgrade to ${version}`,
-    processing: `Upgrading to ${version}`,
-    error: 'Error Upgrading',
+    confirm: $_('upgrade_to_version', { values: { version } }),
+    processing: $_('upgrading_to_version', { values: { version } }),
+    error: $_('error_upgrading'),
   }))();
   $: title = titleMap[state.status];
 

mathesar_ui/src/pages/admin-update/upgrade-modal/UpgradeProcessing.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
+  import { _ } from 'svelte-i18n';
   import { Spinner } from '@mathesar-component-library';
   import WarningBox from '@mathesar/components/message-boxes/WarningBox.svelte';
 </script>
 
 <WarningBox>
   <p>
-    A Mathesar upgrade is currently in progress. It is important that you do not
-    navigate away from this page until the upgrade is complete.
+    {$_('upgrade_in_progress_do_not_navigate')}
   </p>
 </WarningBox>
 <div class="upgrading">
   <div class="spinner"><Spinner /></div>
-  <div>Upgrading...</div>
+  <div>{$_('upgrading')}...</div>
 </div>
 
 <style>