Merge pull request #24 from fleetbase/feature-intl

feature: Internationalize
fleetbase · Jan 24, 2024 · 5027f12 · 5027f12
2 parents 59cc8ef + 2882c81
commit 5027f12
Show file tree

Hide file tree

Showing 37 changed files with 534 additions and 221 deletions.
diff --git a/addon/components/api-event/data.hbs b/addon/components/api-event/data.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Event data" @open={{true}} @pad={{true}} @panelTitleClass="text-sm" @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-event.data.title"}} @open={{true}} @pad={{true}} @panelTitleClass="text-sm" @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiEvent.data}}
         <CodeBlock @code={{or @apiEvent.dataJson ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-600">
-                No event data
+                {{t "developers.component.api-event.data.no-data"}}
             </span>
         </div>
     {{/if}}

diff --git a/addon/components/api-event/details.hbs b/addon/components/api-event/details.hbs
@@ -1,25 +1,25 @@
-<ContentPanel @prefixTitle="Event" @title={{@apiEvent.event}} @prefixTitleRight={{@apiEvent.public_id}} @titleContainerClass="flex-col" @panelTitleClass="text-sm" @prefixTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel @prefixTitle={{t "developers.component.api-event.details.prefixTitle"}} @title={{@apiEvent.event}} @prefixTitleRight={{@apiEvent.public_id}} @titleContainerClass="flex-col" @panelTitleClass="text-sm" @prefixTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>
                 <td class="w-40">
-                    Date
+                    {{t "developers.common.date"}}
                 </td>
                 <td>
                     {{@apiEvent.createdAt}}
                 </td>
             </tr>
             <tr>
                 <td>
-                    Source
+                    {{t "developers.common.source"}}
                 </td>
                 <td>
                     {{@apiEvent.source}}
                 </td>
             </tr>
             <tr>
                 <td>
-                    Description
+                    {{t "developers.common.description"}}
                 </td>
                 <td>
                     {{@apiEvent.description}}

diff --git a/addon/components/api-request-log/details.hbs b/addon/components/api-request-log/details.hbs
@@ -1,41 +1,41 @@
-<ContentPanel @prefixTitle="Request" @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @prefixTitleRight={{@apiRequest.public_id}} @titleContainerClass="flex-col" @panelTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleClass="text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel @prefixTitle={{t "developers.component.api-request-log.details.prefixTitle"}} @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @prefixTitleRight={{@apiRequest.public_id}} @titleContainerClass="flex-col" @panelTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleClass="text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>
                 <td class="w-40">
-                    Time
+                    {{t "developers.common.time"}}
                 </td>
                 <td>
                     {{@apiRequest.createdAt}}
                 </td>
             </tr>
             <tr>
                 <td class="w-40">
-                    Duration
+                    {{t "developers.component.api-request-log.details.duration"}}
                 </td>
                 <td>
                     {{format-milliseconds @apiRequest.duration}}
                 </td>
             </tr>
             <tr>
                 <td>
-                    IP Address
+                    {{t "developers.component.api-request-log.details.ip-address"}}
                 </td>
                 <td>
                     {{@apiRequest.ip_address}}
                 </td>
             </tr>
             <tr>
                 <td>
-                    Version
+                    {{t "developers.common.version"}}
                 </td>
                 <td>
                     {{@apiRequest.version}}
                 </td>
             </tr>
             <tr>
                 <td>
-                    Source
+                    {{t "developers.common.source"}}
                 </td>
                 <td>
                     {{@apiRequest.source}}

diff --git a/addon/components/api-request-log/query-params.hbs b/addon/components/api-request-log/query-params.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Request query parameters" @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-request-log.query-params.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.query_params}}
         <CodeBlock @code={{or (json-stringify @apiRequest.query_params) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No query parameters
+                {{t "developers.component.api-request-log.query-params.no-parameters"}}
             </span>
         </div>
     {{/if}}

diff --git a/addon/components/api-request-log/request-body.hbs b/addon/components/api-request-log/request-body.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title={{concat "Request " @apiRequest.method " body"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{concat (t "developers.component.api-request-log.request-body.title") @apiRequest.method (t "developers.component.api-request-log.request-body.title-second-part")}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.request_body}}
         <CodeBlock @code={{or (json-stringify @apiRequest.request_body) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No request {{@apiRequest.method}} body
+                {{t "developers.component.api-request-log.request-body.no-request-body" htmlSafe=true method=@apiRequest.method}}
             </span>
         </div>
     {{/if}}

diff --git a/addon/components/api-request-log/request-headers.hbs b/addon/components/api-request-log/request-headers.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Request headers" @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-request-log.request-headers.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.request_headers}}
         <CodeBlock @code={{or (json-stringify @apiRequest.request_headers) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No request HEADERS
+                {{t "developers.component.api-request-log.request-headers.no-headers"}}
             </span>
         </div>
     {{/if}}

diff --git a/addon/components/api-request-log/response-body.hbs b/addon/components/api-request-log/response-body.hbs
@@ -1,10 +1,10 @@
-<ContentPanel @title="Response body" @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel @title={{t "developers.component.api-request-log.response-body.title"}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
     {{#if @apiRequest.response_body}}
         <CodeBlock @code={{or (json-stringify @apiRequest.response_body) ""}} @language="json" class="line-numbers" />
     {{else}}
         <div class="flex items-center justify-center h-24">
             <span class="text-sm text-gray-400">
-                No response body
+                {{t "developers.component.api-request-log.response-body.no-response-body"}}
             </span>
         </div>
     {{/if}}

diff --git a/addon/components/modals/api-key-form.hbs b/addon/components/modals/api-key-form.hbs
@@ -2,16 +2,16 @@
     <div class="modal-body-container">
         <div class="input-group">
             <label>
-                Name
+                {{t "developers.common.name"}}
             </label>
-            <Input @value={{options.apiKey.name}} @type="text" aria-label="API Key Name" class="w-full form-input" placeholder="Enter a nickname or environment name for API Key" />
+            <Input @value={{options.apiKey.name}} @type="text" aria-label={{t "developers.component.modals.api-key-form.api-name-aria-label"}} class="w-full form-input" placeholder={{t "developers.component.modals.api-key-form.name-placeholder"}} />
         </div>
         <div class="input-group">
-            <InputLabel @labelText="Expiration" @helpText="Optionally set an expiry date for this api key." />
+            <InputLabel @labelText={{t "developers.component.modals.api-key-form.expiration-label"}} @helpText={{t "developers.component.modals.api-key-form.expiration-help-text"}} />
 
-            <select class="w-full mb-1 form-select" aria-label="API Key Expiration Date" {{on "change" @options.setExpiration}}>
+            <select class="w-full mb-1 form-select" aria-label={{t "developers.component.modals.api-key-form.api-expiration-aria-label"}} {{on "change" @options.setExpiration}}>
                 <option selected disabled>
-                    Select an expiration date...
+                    {{t "developers.component.modals.api-key-form.select-expiration-date"}}
                 </option>
                 {{#each @options.expirationOptions as |opt|}}
                     <option value={{opt}}>
@@ -20,30 +20,30 @@
                 {{/each}}
             </select>
             <p class="text-xs dark:text-gray-100">
-                Once this key expires, you can't perform any actions with it.
+                {{t "developers.component.modals.api-key-form.key-expires"}}
             </p>
         </div>
 
         <div class="input-group">
-            <ArrayInput @data={{@options.apiKey.browser_origins}} @placeholder="Enter domain" @onDataChanged={{fn (mut @options.apiKey.browser_origins)}}>
-                <InputLabel @labelText="Allowed Browser Origins" @helpText="Input domains that will dictate the CORS policy for browser request from this api key." />
+            <ArrayInput @data={{@options.apiKey.browser_origins}} @placeholder={{t "developers.component.modals.api-key-form.enter-domain-placeholder"}} @onDataChanged={{fn (mut @options.apiKey.browser_origins)}}>
+                <InputLabel @labelText={{t "developers.component.modals.api-key-form.allowed-browser-label"}} @helpText={{t "developers.component.modals.api-key-form.allowed-browser-help-text"}} />
             </ArrayInput>
         </div>
 
         <div class="flex flex-col input-group">
             {{#if @options.testMode}}
                 <Badge @status="test">
-                    Test Key
+                    {{t "developers.component.modals.api-key-form.test-key"}}
                 </Badge>
                 <p class="block my-2 text-sm text-blue-500 dark:text-blue-300">
-                    You are creating a test environment key, use this for testing environments.
+                    {{t "developers.component.modals.api-key-form.testing-environments"}}
                 </p>
             {{else}}
                 <Badge @status="live">
-                    Live Key
+                    {{t "developers.component.modals.api-key-form.live-key"}}
                 </Badge>
                 <p class="block my-2 text-sm text-blue-500 dark:text-blue-300">
-                    You are creating a live environment key, use this for production environments.
+                    {{t "developers.component.modals.api-key-form.production-environments"}}
                 </p>
             {{/if}}
         </div>

diff --git a/addon/components/modals/listen-custom-channel.hbs b/addon/components/modals/listen-custom-channel.hbs
@@ -1,5 +1,5 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="modal-body-container">
-        <InputGroup @name="Event channel ID" @value={{@options.channelId}} @helpText="Input the socket channel identifier you want to listen on" />
+        <InputGroup @name={{t "developers.component.modals.listen-custom-channel.name"}} @value={{@options.channelId}} @helpText={{t "developers.component.modals.listen-custom-channel.name-help-text"}} />
     </div>
 </Modal::Default>
diff --git a/addon/components/modals/rename-api-key-form.hbs b/addon/components/modals/rename-api-key-form.hbs
@@ -2,9 +2,9 @@
     <div class="modal-body-container">
         <div class="input-group">
             <label>
-                Name
+                {{t "developers.common.name"}}
             </label>
-            <Input @value={{options.apiKey.name}} @type="text" aria-label="API Key Name" class="w-full form-input" placeholder="Enter a nickname or environment name for API Key" />
+            <Input @value={{options.apiKey.name}} @type="text" aria-label={{t "developers.component.modals.rename-api-key-form.api-key-label"}} class="w-full form-input" placeholder={{t "developers.component.modals.rename-api-key-form.api-key-placeholder"}} />
         </div>
     </div>
 </Modal::Default>
diff --git a/addon/components/modals/roll-api-key-form.hbs b/addon/components/modals/roll-api-key-form.hbs
@@ -3,14 +3,14 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    Key
+                    {{t "developers.common.key"}}
                 </span>
             </div>
             <div class="w-3/4">
                 <div class="mb-2 dark:text-gray-100">
                     {{@options.apiKey.key}}
                 </div>
-                <Button @text="View logs" @size="xs" @icon="arrow-right" @onClick={{fn @options.viewRequestLogs @options.apiKey}} />
+                <Button @text={{t "developers.component.modals.roll-api-key-form.view-button-text"}} @size="xs" @icon="arrow-right" @onClick={{fn @options.viewRequestLogs @options.apiKey}} />
             </div>
         </div>
     </div>
@@ -19,7 +19,7 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    Last used
+                    {{t "developers.component.modals.roll-api-key-form.last-used"}}
                 </span>
             </div>
             <div class="w-3/4 dark:text-gray-100">
@@ -32,13 +32,13 @@
         <div class="flex">
             <div class="w-1/4">
                 <span class="font-semibold dark:text-gray-100">
-                    Expiration
+                    {{t "developers.component.modals.roll-api-key-form.expiration"}}
                 </span>
             </div>
             <div class="w-3/4">
-                <select class="w-full mb-2 form-select form-input-sm" aria-label="API Key Expiration" {{on "change" @options.setExpiration}}>
+                <select class="w-full mb-2 form-select form-input-sm" aria-label={{t "developers.component.modals.roll-api-key-form.api-key-expiration-label"}} {{on "change" @options.setExpiration}}>
                     <option selected disabled>
-                        Select an expiration date...
+                        {{t "developers.component.modals.roll-api-key-form.select-date"}}
                     </option>
                     {{#each @options.expirationOptions as |opt|}}
                         <option value={{opt}}>
@@ -47,7 +47,7 @@
                     {{/each}}
                 </select>
                 <p class="dark:text-gray-100">
-                    Once this key expires, you can't perform any actions with it.
+                    {{t "developers.component.modals.roll-api-key-form.key-expires"}}
                 </p>
             </div>
         </div>
@@ -56,25 +56,25 @@
     <div class="px-5 py-4 border-t border-gray-200 dark:border-gray-800">
         <div class="mt-2 mb-7">
             <div class="font-semibold dark:text-gray-100">
-                Additional authentication required
+                {{t "developers.component.modals.roll-api-key-form.additional-required"}}
             </div>
             <p class="dark:text-white">
-                To continue, please enter your password.
+                {{t "developers.component.modals.roll-api-key-form.enter-password"}}
             </p>
         </div>
 
         <div class="input-group">
             <label>
-                Email
+                {{t "developers.common.email"}}
             </label>
-            <Input @type="email" @value={{@options.user.email}} aria-label="User Email" class="w-full form-input" disabled="true" />
+            <Input @type="email" @value={{@options.user.email}} aria-label={{t "developers.component.modals.roll-api-key-form.user-email"}} class="w-full form-input" disabled="true" />
         </div>
 
         <div class="input-group">
             <label>
-                Password
+                {{t "developers.common.password"}}
             </label>
-            <Input @type="password" @value={{@options.password}} aria-label="User Password" placeholder="Authenticate request using your password" class="w-full form-input" />
+            <Input @type="password" @value={{@options.password}} aria-label={{t "developers.component.modals.roll-api-key-form.user-password"}} placeholder={{t "developers.component.modals.roll-api-key-form.user-password-placeholder"}} class="w-full form-input" />
         </div>
     </div>
 </Modal::Default>