pastilhas
5e032898f8
Applies the rule added to docs/localization.md in 91b9bec9: a label quoted from
another product's interface is an identifier, so the prose around it is translated
and the label itself is left in English and NOT keyed.
Gives that decision a name in the code. <Untranslated reason="foreign-ui-label">
states it at each of the ~30 call sites, where whoever next edits the sentence will
see it, and gives the scanner something exact to skip -- without which labels that
MUST stay English count as debt forever and the area can never be held at zero. That
is the same trap as counting new Error() messages. `reason` is a closed union so a
second excuse has to be argued for rather than smuggled in as free text.
The sentences needed rephrasing, not just splitting. "Go to the [New Project] page."
decomposes into "Go to the" + link + "page." -- and the Portuguese value of that
second key is "." A key that holds a full stop is the fragmentation smell, so the
English now puts the label at a clause boundary ("Open the project creation page:"
then the link), which reads naturally in both languages and needs no node-level
interpolation. Worth knowing for phase 3: sentences with an inline link are the one
shape this catalog format cannot express, and rephrasing is the cheap way out.
Scanner: the existing SCREAMING_CONSTANT rule now allows . and - so Google's
client-secret prefix example GOCSPX-... falls under it. Same rule, wider class.
101 lines
3.4 KiB
TypeScript
101 lines
3.4 KiB
TypeScript
import type { FormEvent } from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useClient } from 'hooks/useClient';
|
|
import { useTranslation } from '@/lib/i18n';
|
|
|
|
type ApifyConfigData = {
|
|
apiToken: string;
|
|
};
|
|
|
|
type ApifyStatus = {
|
|
configured: boolean;
|
|
};
|
|
|
|
export const ApifyConfig = () => {
|
|
const { t } = useTranslation();
|
|
const client = useClient();
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [apiToken, setApiToken] = useState('');
|
|
const [status, setStatus] = useState<ApifyStatus | null>(null);
|
|
|
|
useEffect(() => {
|
|
Promise.all([
|
|
client.get<ApifyConfigData>('/integrations/apify/config').then((data) => {
|
|
if (data?.apiToken) setApiToken(data.apiToken);
|
|
}),
|
|
client.get<ApifyStatus>('/integrations/apify/status').then(setStatus),
|
|
])
|
|
.catch(() => {})
|
|
.finally(() => setIsLoading(false));
|
|
}, []);
|
|
|
|
const handleSave = async (ev?: FormEvent) => {
|
|
ev?.preventDefault();
|
|
if (isSaving) return;
|
|
setIsSaving(true);
|
|
try {
|
|
await client.put('/integrations/apify/config', { apiToken: apiToken.trim() });
|
|
toast.success(t('settings.apify.saved'));
|
|
setStatus({ configured: !!apiToken.trim() });
|
|
} catch {
|
|
toast.error(t('settings.apify.saveFailed'));
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading) return null;
|
|
|
|
return (
|
|
<div className="grid gap-5">
|
|
{status && (
|
|
<div className="flex items-center gap-2 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-3">
|
|
<div
|
|
className={`h-2.5 w-2.5 rounded-full shrink-0 ${status.configured ? 'bg-success' : 'bg-duck-dark/20 dark:bg-foreground/20'}`}
|
|
/>
|
|
<span className="text-sm text-duck-dark dark:text-foreground">
|
|
{status.configured ? 'API token configured' : 'Not configured'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSave} className="grid gap-5">
|
|
<Label className="grid gap-2">
|
|
<span className="text-duck-dark/70 dark:text-foreground/70">{t('settings.apify.token')}</span>
|
|
<Input
|
|
className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
|
|
type="password"
|
|
value={apiToken}
|
|
onChange={(ev) => setApiToken(ev.target.value)}
|
|
placeholder="apify_api_..."
|
|
/>
|
|
<span className="text-xs text-duck-dark/40 dark:text-foreground/40">
|
|
Get your token at{' '}
|
|
<a
|
|
href="https://console.apify.com/account/integrations"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-duck-teal underline"
|
|
>
|
|
console.apify.com/account/integrations
|
|
</a>
|
|
</span>
|
|
</Label>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSaving || !apiToken.trim()}
|
|
className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
|
|
>
|
|
{isSaving ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|