Address review feedback on portal i18n

Swallow locale mutation rejections after the toast, close the
mobile drawer on locale change, escape SEO paths, share the
IAM locale list with SEO, and finish dropping /trust leftovers.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-21 18:30:45 +02:00
parent e4260d50d3
commit 418bb5a8f8
12 changed files with 88 additions and 39 deletions

View File

@@ -100,7 +100,9 @@ export function LocaleMismatchCallout({ identityKey }: LocaleMismatchCalloutProp
}; };
const adoptUrlLocale = () => { const adoptUrlLocale = () => {
void updateLocale(urlLocale).then(() => setDismissed(true)); void updateLocale(urlLocale)
.then(() => setDismissed(true))
.catch(() => {});
}; };
return ( return (

View File

@@ -36,11 +36,16 @@ import { useLocale } from "#/lib/i18n/useLocale";
interface LocaleSelectProps { interface LocaleSelectProps {
// Persist the choice on the signed-in identity when true. // Persist the choice on the signed-in identity when true.
persist?: boolean; persist?: boolean;
// Called after a locale change is requested (e.g. close the mobile drawer).
onLocaleChange?: () => void;
} }
// Compact locale control for the top bar (guest and mobile). Uses the v2 Select // Compact locale control for the top bar (guest and mobile). Uses the v2 Select
// (Figma Select / ghost + globe) rather than a custom dropdown. // (Figma Select / ghost + globe) rather than a custom dropdown.
export function LocaleSelect({ persist = false }: LocaleSelectProps) { export function LocaleSelect({
persist = false,
onLocaleChange,
}: LocaleSelectProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const locale = useLocale(); const locale = useLocale();
const [changeLocale, isChanging] = useChangeLocale(); const [changeLocale, isChanging] = useChangeLocale();
@@ -52,6 +57,7 @@ export function LocaleSelect({ persist = false }: LocaleSelectProps) {
if (value == null || value === locale) { if (value == null || value === locale) {
return; return;
} }
onLocaleChange?.();
void changeLocale(value, { persist }); void changeLocale(value, { persist });
}} }}
disabled={isChanging} disabled={isChanging}

View File

@@ -144,7 +144,10 @@ export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
<DrawerFooter> <DrawerFooter>
<div className="w-full pb-2"> <div className="w-full pb-2">
<LocaleSelect persist={identity != null} /> <LocaleSelect
persist={identity != null}
onLocaleChange={close}
/>
</div> </div>
{identity == null {identity == null
? ( ? (

View File

@@ -29,12 +29,7 @@ import {
import { resolveLanguage, SUPPORTED_LANGUAGES } from "./resolveLanguage"; import { resolveLanguage, SUPPORTED_LANGUAGES } from "./resolveLanguage";
function initialLanguage() { function initialLanguage() {
const pathname = window.location.pathname; const first = window.location.pathname.split("/").filter(Boolean)[0];
const trustMatch = pathname.match(/^\/trust\/[^/]+(\/.*)?$/);
const appPath = trustMatch
? (trustMatch[1] && trustMatch[1].length > 0 ? trustMatch[1] : "/")
: pathname;
const first = appPath.split("/").filter(Boolean)[0];
if (isUrlLocale(first)) { if (isUrlLocale(first)) {
return urlLocaleToLanguage(first); return urlLocaleToLanguage(first);
} }

View File

@@ -24,6 +24,7 @@ import {
} from "./resolveLanguage"; } from "./resolveLanguage";
// Short tags used in URL path segments (and persisted on Identity.locale). // Short tags used in URL path segments (and persisted on Identity.locale).
// Keep in sync with iam.SupportedIdentityLocales.
export const URL_LOCALES = [ export const URL_LOCALES = [
"en", "en",
"fr", "fr",

View File

@@ -18,7 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE. // SOFTWARE.
import { redirect, type LoaderFunctionArgs } from "react-router"; import { type LoaderFunctionArgs, redirect } from "react-router";
import { import {
isUrlLocale, isUrlLocale,
@@ -30,7 +30,7 @@ import {
// (/documents) and unknown two-letter tags are rewritten to a guessed locale. // (/documents) and unknown two-letter tags are rewritten to a guessed locale.
export function localeLayoutLoader({ request }: LoaderFunctionArgs) { export function localeLayoutLoader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url); const url = new URL(request.url);
const appPath = stripBasename(url.pathname); const appPath = url.pathname || "/";
const segments = appPath.split("/").filter(Boolean); const segments = appPath.split("/").filter(Boolean);
const first = segments[0]; const first = segments[0];
@@ -41,6 +41,7 @@ export function localeLayoutLoader({ request }: LoaderFunctionArgs) {
const guess = resolveUrlLocale(); const guess = resolveUrlLocale();
if (segments.length === 0) { if (segments.length === 0) {
// eslint-disable-next-line @typescript-eslint/only-throw-error -- react-router redirect
throw redirect(`/${guess}${url.search}`); throw redirect(`/${guess}${url.search}`);
} }
@@ -48,17 +49,11 @@ export function localeLayoutLoader({ request }: LoaderFunctionArgs) {
if (/^[a-z]{2}$/.test(first)) { if (/^[a-z]{2}$/.test(first)) {
const rest = segments.slice(1); const rest = segments.slice(1);
const path = rest.length === 0 ? "/" : `/${rest.join("/")}`; const path = rest.length === 0 ? "/" : `/${rest.join("/")}`;
// eslint-disable-next-line @typescript-eslint/only-throw-error -- react-router redirect
throw redirect(localizedPath(guess, path) + url.search); throw redirect(localizedPath(guess, path) + url.search);
} }
// First segment is a real route (documents, updates, …) — prefix locale. // First segment is a real route (documents, updates, …) — prefix locale.
// eslint-disable-next-line @typescript-eslint/only-throw-error -- react-router redirect
throw redirect(localizedPath(guess, appPath) + url.search); throw redirect(localizedPath(guess, appPath) + url.search);
} }
function stripBasename(pathname: string): string {
const match = pathname.match(/^\/trust\/[^/]+(\/.*)?$/);
if (match) {
return match[1] && match[1].length > 0 ? match[1] : "/";
}
return pathname || "/";
}

View File

@@ -49,7 +49,8 @@ export function useChangeLocale() {
// Identity↔URL desync that flashed the mismatch callout. // Identity↔URL desync that flashed the mismatch callout.
startTransition(() => { startTransition(() => {
if (options.persist) { if (options.persist) {
void updateLocale(locale); // Mutation notifier already toasts; swallow rejection to avoid noise.
void updateLocale(locale).catch(() => {});
} }
if (locale !== currentLocale) { if (locale !== currentLocale) {
void navigate(replaceLocaleInPathname(pathname, locale) + search); void navigate(replaceLocaleInPathname(pathname, locale) + search);

View File

@@ -25,8 +25,8 @@ import { createBrowserRouter, redirect } from "react-router";
import { PageErrorBoundary } from "#/components/errors/PageErrorBoundary"; import { PageErrorBoundary } from "#/components/errors/PageErrorBoundary";
import { RootErrorBoundary } from "#/components/errors/RootErrorBoundary"; import { RootErrorBoundary } from "#/components/errors/RootErrorBoundary";
import { localeLayoutLoader } from "#/lib/i18n/localeRedirect";
import { resolveUrlLocale } from "#/lib/i18n/locale"; import { resolveUrlLocale } from "#/lib/i18n/locale";
import { localeLayoutLoader } from "#/lib/i18n/localeRedirect";
import { authRoutes } from "#/pages/auth/routes"; import { authRoutes } from "#/pages/auth/routes";
import { documentRoutes } from "#/pages/documents/routes"; import { documentRoutes } from "#/pages/documents/routes";
import { HomePageSkeleton } from "#/pages/HomePageSkeleton"; import { HomePageSkeleton } from "#/pages/HomePageSkeleton";

View File

@@ -1,2 +1,22 @@
-- Copyright (c) 2026 Probo Inc <hello@probo.com>.
--
-- Permission is hereby granted, free of charge, to any person obtaining a copy
-- of this software and associated documentation files (the "Software"), to deal
-- in the Software without restriction, including without limitation the rights
-- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-- copies of the Software, and to permit persons to whom the Software is
-- furnished to do so, subject to the following conditions:
--
-- The above copyright notice and this permission notice shall be included in
-- all copies or substantial portions of the Software.
--
-- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-- SOFTWARE.
ALTER TABLE identities ALTER TABLE identities
ADD COLUMN locale TEXT NULL; ADD COLUMN locale TEXT NULL;

View File

@@ -68,9 +68,9 @@ type (
} }
) )
// Short URL locale tags accepted for Identity.locale (must stay in sync with // SupportedIdentityLocales are short URL locale tags accepted for
// the compliance-portal URL_LOCALES list). // Identity.locale. Keep in sync with the compliance-portal URL_LOCALES list.
var supportedIdentityLocales = []string{ var SupportedIdentityLocales = []string{
"en", "fr", "de", "es", "id", "it", "ja", "ko", "pl", "pt", "tr", "uk", "zh", "en", "fr", "de", "es", "id", "it", "ja", "ko", "pl", "pt", "tr", "uk", "zh",
} }
@@ -106,7 +106,7 @@ func (req UpdateLocaleRequest) Validate() error {
"locale", "locale",
validator.NotEmpty(), validator.NotEmpty(),
validator.MaxLen(8), validator.MaxLen(8),
validator.OneOfSlice(supportedIdentityLocales), validator.OneOfSlice(SupportedIdentityLocales),
) )
return v.Error() return v.Error()

View File

@@ -22,14 +22,11 @@ package complianceportal_v1
import ( import (
"net/http" "net/http"
"net/url"
"strings" "strings"
)
// Short locale tags used in compliance-portal URL paths. Keep in sync with the "go.probo.inc/probo/pkg/iam"
// frontend URL_LOCALES list and iam.supportedIdentityLocales. )
var compliancePortalLocales = []string{
"en", "fr", "de", "es", "id", "it", "ja", "ko", "pl", "pt", "tr", "uk", "zh",
}
const defaultCompliancePortalLocale = "en" const defaultCompliancePortalLocale = "en"
@@ -47,8 +44,9 @@ func SEOFromRequest(r *http.Request, pageBaseURL string) (htmlLang, canonical st
htmlLang = locale htmlLang = locale
canonical = localizedPageURL(pageBaseURL, locale, rest) canonical = localizedPageURL(pageBaseURL, locale, rest)
hreflang = make([]HreflangLink, 0, len(compliancePortalLocales)+1) locales := iam.SupportedIdentityLocales
for _, loc := range compliancePortalLocales { hreflang = make([]HreflangLink, 0, len(locales)+1)
for _, loc := range locales {
hreflang = append(hreflang, HreflangLink{ hreflang = append(hreflang, HreflangLink{
Lang: loc, Lang: loc,
Href: localizedPageURL(pageBaseURL, loc, rest), Href: localizedPageURL(pageBaseURL, loc, rest),
@@ -81,7 +79,7 @@ func splitLocaleFromAppPath(appPath string) (locale, rest string) {
} }
func isCompliancePortalLocale(value string) bool { func isCompliancePortalLocale(value string) bool {
for _, locale := range compliancePortalLocales { for _, locale := range iam.SupportedIdentityLocales {
if locale == value { if locale == value {
return true return true
} }
@@ -91,11 +89,22 @@ func isCompliancePortalLocale(value string) bool {
func localizedPageURL(pageBaseURL, locale, rest string) string { func localizedPageURL(pageBaseURL, locale, rest string) string {
base := strings.TrimRight(pageBaseURL, "/") base := strings.TrimRight(pageBaseURL, "/")
if rest == "/" || rest == "" { segments := []string{locale}
return base + "/" + locale if rest != "/" && rest != "" {
trimmed := strings.Trim(rest, "/")
if trimmed != "" {
segments = append(segments, strings.Split(trimmed, "/")...)
}
} }
if !strings.HasPrefix(rest, "/") {
rest = "/" + rest escaped := make([]string, len(segments))
for i, segment := range segments {
escaped[i] = url.PathEscape(segment)
} }
return base + "/" + locale + rest
joined, err := url.JoinPath(base, escaped...)
if err != nil {
return base + "/" + strings.Join(escaped, "/")
}
return joined
} }

View File

@@ -60,3 +60,20 @@ func TestSEOFromRequest(t *testing.T) {
assert.Equal(t, "https://acme.probopage.localhost/en/documents", enHref) assert.Equal(t, "https://acme.probopage.localhost/en/documents", enHref)
assert.Equal(t, enHref, xDefault) assert.Equal(t, enHref, xDefault)
} }
func TestSEOFromRequest_EscapesPathSegments(t *testing.T) {
t.Parallel()
req, err := http.NewRequest(
http.MethodGet,
"https://acme.probopage.localhost/en/docs/foo%20bar",
nil,
)
require.NoError(t, err)
_, canonical, _ := complianceportal_v1.SEOFromRequest(
req,
"https://acme.probopage.localhost",
)
assert.Equal(t, "https://acme.probopage.localhost/en/docs/foo%20bar", canonical)
}