rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add react i18next to console

Browse Source 
Signed-off-by: Jonathan <contact@grafikart.fr>
This commit is contained in:
Jonathan
2026-07-21 16:09:41 +02:00
committed by Bryan Frimin
parent 1b7b2594eb
commit a7ff5f07bc
420 changed files with 10251 additions and 6825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/compliance-portal/package.json
View File

@@ -20,7 +20,7 @@
"pdfjs-dist": "^5.4.296",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-i18next": "^17.0.8",
"react-i18next": "^17.0.10",
"react-pdf": "^10.3.0",
"react-relay": "^21.0.1",
"react-router": "^8.1.0",

1
apps/console/.gitignore vendored
View File

@@ -11,6 +11,7 @@ lerna-debug.log*
node_modules
dist
dist-ssr
scripts
*.local
# Editor directories and files

2
apps/console/package.json
View File

@@ -22,11 +22,13 @@
"@probo/ui": "1.0.0",
"@tanstack/react-query": "^5.76.1",
"clsx": "^2.1.1",
"i18next": "^26.3.6",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-dropzone": "^15.0.0",
"react-error-boundary": "^6.0.0",
"react-hook-form": "^7.56.4",
"react-i18next": "^17.0.10",
"react-pdf": "^10.3.0",
"react-relay": "^21.0.1",
"react-router": "^8.1.0",

2469
apps/console/src/_locales/en-US.json Normal file
View File

File diff suppressed because it is too large Load Diff

20
apps/console/src/components/PageError.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
ErrorDetailMessage,
@@ -26,6 +25,7 @@ import {
ErrorLayout,
} from "@probo/ui";
import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { Link, useLocation, useRouteError } from "react-router";
type Props = {
@@ -36,7 +36,7 @@ type Props = {
export function PageError({ resetErrorBoundary, error: propsError }: Props) {
const routeError = useRouteError();
const error = routeError ?? propsError;
const { __ } = useTranslate();
const { t } = useTranslation();
const location = useLocation();
const baseLocation = useRef(location);
@@ -56,7 +56,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
const actions = (
<Button asChild>
<Link to="/">{__("Go home")}</Link>
<Link to="/">{t("pageError.actions.goHome")}</Link>
</Button>
);
@@ -70,8 +70,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
return (
<ErrorLayout
{...layoutProps}
title={__("Page not found")}
description={__("The page you are looking for does not exist.")}
title={t("pageError.notFound.title")}
description={t("pageError.notFound.description")}
/>
);
}
@@ -80,8 +80,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
return (
<ErrorLayout
{...layoutProps}
title={__("Page not found")}
description={__("The page you are looking for does not exist.")}
title={t("pageError.notFound.title")}
description={t("pageError.notFound.description")}
/>
);
}
@@ -89,11 +89,11 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
return (
<ErrorLayout
{...layoutProps}
title={__("Something went wrong")}
description={__("We hit an unexpected error. Head back home to continue.")}
title={t("pageError.unexpected.title")}
description={t("pageError.unexpected.description")}
>
{error instanceof Error && (
<ErrorDetails summary={__("Technical details")}>
<ErrorDetails summary={t("pageError.technicalDetails")}>
<ErrorDetailMessage>{error.message}</ErrorDetailMessage>
</ErrorDetails>
)}

6
apps/console/src/components/SortableTable.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
IconChevronDown,
@@ -35,6 +34,7 @@ import {
useContext,
useState,
} from "react";
import { useTranslation } from "react-i18next";
import type { LoadMoreFn } from "react-relay";
import type { OperationType } from "relay-runtime";
@@ -75,7 +75,7 @@ export function SortableTable({
isLoadingNext?: boolean;
pageSize?: number;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [order, setOrder] = useState(defaultOrder);
const changeOrder = (o: Order) => {
startTransition(() => {
@@ -95,7 +95,7 @@ export function SortableTable({
disabled={isLoadingNext}
icon={isLoadingNext ? Spinner : IconChevronDown}
>
{__("Show more")}
{t("sortableTable.actions.showMore")}
</Button>
)}
</div>

38
apps/console/src/components/assets/AssetsTable.tsx
View File

@@ -21,9 +21,7 @@
import {
getAssetTypeVariant,
promisifyMutation,
sprintf,
} from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
ActionDropdown,
Badge,
@@ -34,6 +32,7 @@ import {
TextCell,
useConfirm,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import type { usePaginationFragmentHookType } from "react-relay/relay-hooks/usePaginationFragment";
import { Link } from "react-router";
@@ -90,7 +89,7 @@ export function AssetsTable(props: Props) {
const { connectionId, pagination, assets } = props;
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
const deleteAsset = useDeleteAsset(connectionId);
return (
@@ -100,17 +99,17 @@ export function AssetsTable(props: Props) {
pagination={pagination}
items={assets}
columns={[
__("Name"),
__("Type"),
__("Data Types stored"),
__("Amount"),
__("Owner"),
__("Third parties"),
t("assetsTable.columns.name"),
t("assetsTable.columns.type"),
t("assetsTable.columns.dataTypesStored"),
t("assetsTable.columns.amount"),
t("assetsTable.columns.owner"),
t("assetsTable.columns.thirdParties"),
]}
schema={schema}
updateMutation={updateAssetMutation}
createMutation={createAssetMutation}
addLabel={__("Add a new asset")}
addLabel={t("assetsTable.actions.add")}
defaultValue={{
...defaultValue,
organizationId,
@@ -120,7 +119,7 @@ export function AssetsTable(props: Props) {
<DropdownItem asChild>
<Link to={`/organizations/${organizationId}/assets/${item.id}`}>
<IconPencil size={16} />
{__("Edit")}
{t("assetsTable.actions.edit")}
</Link>
</DropdownItem>
<DropdownItem
@@ -128,7 +127,7 @@ export function AssetsTable(props: Props) {
variant="danger"
icon={IconTrashCan}
>
{__("Delete")}
{t("assetsTable.actions.delete")}
</DropdownItem>
</ActionDropdown>
)}
@@ -140,7 +139,9 @@ export function AssetsTable(props: Props) {
items={["VIRTUAL", "PHYSICAL"]}
itemRenderer={({ item }) => (
<Badge variant={getAssetTypeVariant(item ?? "VIRTUAL")}>
{item === "PHYSICAL" ? __("Physical") : __("Virtual")}
{item === "PHYSICAL"
? t("assetsTable.assetTypes.physical")
: t("assetsTable.assetTypes.virtual")}
</Badge>
)}
defaultValue={item?.assetType ?? defaultValue.assetType}
@@ -174,11 +175,11 @@ export function AssetsTable(props: Props) {
const useDeleteAsset = (connectionId: string) => {
const [mutate] = useMutation<AssetGraphDeleteMutation>(deleteAssetMutation);
const confirm = useConfirm();
const { __ } = useTranslate();
const { t } = useTranslation();
return (asset: { id: string; name: string }) => {
if (!asset.id || !asset.name) {
return alert(__("Failed to delete asset: missing id or name"));
return alert(t("assetsTable.delete.missingIdOrName"));
}
confirm(
() =>
@@ -191,12 +192,7 @@ const useDeleteAsset = (connectionId: string) => {
},
}),
{
message: sprintf(
__(
"This will permanently delete \"%s\". This action cannot be undone.",
),
asset.name,
),
message: t("assetsTable.delete.confirmation", { name: asset.name }),
},
);
};

24
apps/console/src/components/assets/ReadOnlyAssetsTable.tsx
View File

@@ -19,8 +19,8 @@
// SOFTWARE.
import { faviconUrl, getAssetTypeVariant } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Avatar, Badge, Tbody, Td, Th, Thead, Tr } from "@probo/ui";
import { useTranslation } from "react-i18next";
import type { usePaginationFragmentHookType } from "react-relay/relay-hooks/usePaginationFragment";
import type { OperationType } from "relay-runtime";
@@ -46,17 +46,17 @@ type Props = {
export function ReadOnlyAssetsTable(props: Props) {
const { pagination, assets } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<SortableTable {...pagination} pageSize={10}>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Type")}</Th>
<Th>{__("Amount")}</Th>
<Th>{__("Owner")}</Th>
<Th>{__("Third parties")}</Th>
<Th>{t("readOnlyAssetsTable.columns.name")}</Th>
<Th>{t("readOnlyAssetsTable.columns.type")}</Th>
<Th>{t("readOnlyAssetsTable.columns.amount")}</Th>
<Th>{t("readOnlyAssetsTable.columns.owner")}</Th>
<Th>{t("readOnlyAssetsTable.columns.thirdParties")}</Th>
</Tr>
</Thead>
<Tbody>
@@ -70,7 +70,7 @@ export function ReadOnlyAssetsTable(props: Props) {
function AssetRow({ entry }: { entry: AssetEntry }) {
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
const thirdParties = entry.thirdParties?.edges.map(edge => edge.node) ?? [];
return (
@@ -78,11 +78,13 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
<Td>{entry.name}</Td>
<Td>
<Badge variant={getAssetTypeVariant(entry.assetType)}>
{entry.assetType === "PHYSICAL" ? __("Physical") : __("Virtual")}
{entry.assetType === "PHYSICAL"
? t("readOnlyAssetsTable.assetTypes.physical")
: t("readOnlyAssetsTable.assetTypes.virtual")}
</Badge>
</Td>
<Td>{entry.amount}</Td>
<Td>{entry.owner?.fullName ?? __("Unassigned")}</Td>
<Td>{entry.owner?.fullName ?? t("readOnlyAssetsTable.unassigned")}</Td>
<Td>
{thirdParties.length > 0
? (
@@ -110,7 +112,7 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
</div>
)
: (
<span className="text-txt-secondary text-sm">{__("None")}</span>
<span className="text-txt-secondary text-sm">{t("readOnlyAssetsTable.none")}</span>
)}
</Td>
</Tr>

26
apps/console/src/components/audits/LinkedAuditsCard.tsx
View File

@@ -18,8 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { getAuditStateVariant, sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { getAuditStateVariant } from "@probo/helpers";
import {
Badge,
Button,
@@ -37,6 +36,7 @@ import {
} from "@probo/ui";
import { clsx } from "clsx";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -78,7 +78,7 @@ type Props<Params> = {
};
export function LinkedAuditsCard<Params>(props: Props<Params>) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [limit, setLimit] = useState<number | null>(4);
const audits = useMemo(() => {
return limit ? props.audits.slice(0, limit) : props.audits;
@@ -116,7 +116,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
<Wrapper padded className="space-y-[10px]">
{variant === "card" && (
<div className="flex justify-between">
<div className="text-lg font-semibold">{__("Audits")}</div>
<div className="text-lg font-semibold">{t("linkedAuditsCard.title")}</div>
{!props.readOnly && (
<LinkedAuditsDialog
disabled={props.disabled}
@@ -125,7 +125,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<Button variant="tertiary" icon={IconPlusLarge}>
{__("Link audit")}
{t("linkedAuditsCard.actions.link")}
</Button>
</LinkedAuditsDialog>
)}
@@ -134,8 +134,8 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
<Table className={clsx(variant === "card" && "bg-invert")}>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("State")}</Th>
<Th>{t("linkedAuditsCard.columns.name")}</Th>
<Th>{t("linkedAuditsCard.columns.state")}</Th>
{!props.readOnly && <Th></Th>}
</Tr>
</Thead>
@@ -146,7 +146,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
colSpan={props.readOnly ? 2 : 3}
className="text-center text-txt-secondary"
>
{__("No audits linked")}
{t("linkedAuditsCard.empty")}
</Td>
</Tr>
)}
@@ -166,7 +166,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<TrButton colspan={3} icon={IconPlusLarge}>
{__("Link audit")}
{t("linkedAuditsCard.actions.link")}
</TrButton>
</LinkedAuditsDialog>
)}
@@ -179,7 +179,9 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
className="mt-3 mx-auto"
icon={IconChevronDown}
>
{sprintf(__("Show %s more"), props.audits.length - limit)}
{t("linkedAuditsCard.actions.showMore", {
count: props.audits.length - limit,
})}
</Button>
)}
</Wrapper>
@@ -193,7 +195,7 @@ function AuditRow(props: {
}) {
const audit = useFragment(linkedAuditFragment, props.audit);
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Tr to={`/organizations/${organizationId}/audits/${audit.id}`}>
@@ -217,7 +219,7 @@ function AuditRow(props: {
onClick={() => props.onClick(audit.id)}
icon={IconTrashCan}
>
{__("Unlink")}
{t("linkedAuditsCard.actions.unlink")}
</Button>
</Td>
)}

18
apps/console/src/components/audits/LinkedAuditsDialog.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { getAuditStateVariant } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -34,6 +33,7 @@ import {
Spinner,
} from "@probo/ui";
import { type ReactNode, Suspense, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -98,16 +98,16 @@ type Props = {
};
export function LinkedAuditsDialog({ children, ...props }: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Dialog trigger={children} title={__("Link audits")}>
<Dialog trigger={children} title={t("linkedAuditsDialog.title")}>
<DialogContent>
<Suspense fallback={<Spinner centered />}>
<LinkedAuditsDialogContent {...props} />
</Suspense>
</DialogContent>
<DialogFooter exitLabel={__("Close")} />
<DialogFooter exitLabel={t("linkedAuditsDialog.actions.close")} />
</Dialog>
);
}
@@ -122,7 +122,7 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
auditsFragment,
query.organization as LinkedAuditsDialogFragment$key,
);
const { __ } = useTranslate();
const { t } = useTranslation();
const [search, setSearch] = useState("");
const audits = useMemo(
() => data.audits?.edges?.map(edge => edge.node) ?? [],
@@ -143,7 +143,7 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
<div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search audits...")}
placeholder={t("linkedAuditsDialog.searchPlaceholder")}
onValueChange={setSearch}
/>
</div>
@@ -180,7 +180,7 @@ type RowProps = {
};
function AuditRow(props: RowProps) {
const { __ } = useTranslate();
const { t } = useTranslation();
const isLinked = props.linkedAudits.has(props.audit.id);
const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -209,7 +209,9 @@ function AuditRow(props: RowProps) {
<span>
<IconComponent size={16} />
{" "}
{isLinked ? __("Unlink") : __("Link")}
{isLinked
? t("linkedAuditsDialog.actions.unlink")
: t("linkedAuditsDialog.actions.link")}
</span>
</Button>
</button>

36
apps/console/src/components/compliancePage/CompliancePageReferenceDialog.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { acceptImage } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
@@ -32,6 +31,7 @@ import {
useDialogRef,
} from "@probo/ui";
import { forwardRef, type ReactNode, useImperativeHandle, useState } from "react";
import { useTranslation } from "react-i18next";
import { z } from "zod";
import type { CompliancePageReferenceListItemFragment$data } from "#/__generated__/core/CompliancePageReferenceListItemFragment.graphql";
@@ -57,7 +57,7 @@ export type CompliancePageReferenceDialogRef = {
export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceDialogRef, { children?: ReactNode }>(
function CompliancePageReferenceDialog({ children }, ref) {
const { __ } = useTranslate();
const { t } = useTranslation();
const dialogRef = useDialogRef();
const [mode, setMode] = useState<"create" | "edit">("create");
const [compliancePageId, setCompliancePageId] = useState<string>("");
@@ -182,7 +182,7 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
};
const isSubmitting = isCreating || isUpdating;
const title = mode === "create" ? __("Add Reference") : __("Edit Reference");
const title = mode === "create" ? t("trustCenterReferenceDialog.actions.add") : t("trustCenterReferenceDialog.actions.edit");
return (
<>
@@ -202,45 +202,45 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
<DialogContent padded className="space-y-6">
<Field
{...register("name")}
label={__("Reference Name")}
label={t("trustCenterReferenceDialog.fields.name.label")}
type="text"
required
error={errors.name?.message}
placeholder={__("Company or organization name")}
placeholder={t("trustCenterReferenceDialog.fields.name.placeholder")}
/>
<Field label={__("Description")} error={errors.description?.message}>
<Field label={t("trustCenterReferenceDialog.fields.description.label")} error={errors.description?.message}>
<Textarea
{...register("description")}
placeholder={__("Brief description of the reference")}
placeholder={t("trustCenterReferenceDialog.fields.description.placeholder")}
rows={3}
/>
</Field>
<Field
{...register("websiteUrl")}
label={__("Website URL")}
label={t("trustCenterReferenceDialog.fields.websiteUrl.label")}
type="url"
required
error={errors.websiteUrl?.message}
placeholder={__("https://example.com")}
placeholder={t("trustCenterReferenceDialog.fields.websiteUrl.placeholder")}
/>
{mode === "edit" && (
<Field
{...register("rank", { valueAsNumber: true })}
label={__("Rank")}
label={t("trustCenterReferenceDialog.fields.rank.label")}
type="number"
min={1}
error={errors.rank?.message}
placeholder={__("Display order (1, 2, 3...)")}
help={__("Lower numbers appear first")}
placeholder={t("trustCenterReferenceDialog.fields.rank.placeholder")}
help={t("trustCenterReferenceDialog.fields.rank.help")}
/>
)}
<Field label={__("Logo")}>
<Field label={t("trustCenterReferenceDialog.fields.logo.label")}>
<Dropzone
description={__("Upload logo image (PNG, JPG, WEBP, SVG up to 5MB)")}
description={t("trustCenterReferenceDialog.fields.logo.description")}
isUploading={isSubmitting}
onDrop={handleDrop}
accept={acceptImage}
@@ -249,7 +249,7 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
{uploadedFile && (
<div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
<p className="text-sm font-medium">
{__("Selected file")}
{t("trustCenterReferenceDialog.fields.logo.selectedFile")}
:
</p>
<p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
@@ -258,14 +258,14 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
{mode === "edit" && !uploadedFile && (
<div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
<p className="text-sm text-txt-secondary">
{__("Current logo will be kept if no new file is uploaded")}
{t("trustCenterReferenceDialog.fields.logo.keepCurrent")}
</p>
</div>
)}
{mode === "create" && !uploadedFile && (
<div className="mt-2 p-3 bg-warning-subtle rounded-lg">
<p className="text-sm">
{__("Logo is required for new references")}
{t("trustCenterReferenceDialog.fields.logo.required")}
</p>
</div>
)}
@@ -278,7 +278,7 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
disabled={isSubmitting || (mode === "create" && !uploadedFile)}
icon={isSubmitting ? Spinner : undefined}
>
{mode === "create" ? __("Add Reference") : __("Update Reference")}
{mode === "create" ? t("trustCenterReferenceDialog.actions.add") : t("trustCenterReferenceDialog.actions.update")}
</Button>
</DialogFooter>
</form>

16
apps/console/src/components/compliancePage/DeleteCompliancePageReferenceDialog.tsx
View File

@@ -18,8 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
@@ -29,6 +27,7 @@ import {
Spinner,
useDialogRef,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useDeleteCompliancePageReferenceMutation } from "#/pages/organizations/compliance-page/_lib/compliancePageReferenceMutations";
@@ -47,7 +46,7 @@ export function DeleteCompliancePageReferenceDialog({
connectionId,
onSuccess,
}: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
const ref = useDialogRef();
const [deleteReference, isDeleting] = useDeleteCompliancePageReferenceMutation();
@@ -70,18 +69,15 @@ export function DeleteCompliancePageReferenceDialog({
<Dialog
ref={ref}
trigger={children}
title={__("Delete Reference")}
title={t("deleteTrustCenterReferenceDialog.title")}
className="max-w-md"
>
<DialogContent padded>
<p className="text-txt-secondary">
{sprintf(
__("Are you sure you want to delete the reference \"%s\"?"),
referenceName,
)}
{t("deleteTrustCenterReferenceDialog.description", { referenceName })}
</p>
<p className="text-txt-secondary mt-2">
{__("This action cannot be undone.")}
{t("deleteTrustCenterReferenceDialog.warning")}
</p>
</DialogContent>
@@ -92,7 +88,7 @@ export function DeleteCompliancePageReferenceDialog({
disabled={isDeleting}
icon={isDeleting ? Spinner : IconTrashCan}
>
{isDeleting ? __("Deleting...") : __("Delete")}
{isDeleting ? t("deleteTrustCenterReferenceDialog.actions.deleting") : t("deleteTrustCenterReferenceDialog.actions.delete")}
</Button>
</DialogFooter>
</Dialog>

16
apps/console/src/components/controls/LinkedControlsCard.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -31,6 +30,7 @@ import {
TrButton,
} from "@probo/ui";
import type { ComponentProps } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -84,7 +84,7 @@ type Props<Params> = {
* Reusable component that displays a list of linked controls
*/
export function LinkedControlsCard<Params>(props: Props<Params>) {
const { __ } = useTranslate();
const { t } = useTranslation();
const controls = props.controls;
const onDetach = (controlId: string) => {
@@ -118,8 +118,8 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
<SortableTable refetch={props.refetch}>
<Thead>
<Tr>
<SortableTh field="SECTION_TITLE">{__("Reference")}</SortableTh>
<Th>{__("Name")}</Th>
<SortableTh field="SECTION_TITLE">{t("linkedControlsCard.columns.reference")}</SortableTh>
<Th>{t("linkedControlsCard.columns.name")}</Th>
{!props.readOnly && <Th></Th>}
</Tr>
</Thead>
@@ -130,7 +130,7 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
colSpan={props.readOnly ? 2 : 3}
className="text-center text-txt-secondary"
>
{__("No controls linked")}
{t("linkedControlsCard.empty")}
</Td>
</Tr>
)}
@@ -151,7 +151,7 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
onLink={onAttach}
onUnlink={onDetach}
>
<TrButton colspan={3}>{__("Link control")}</TrButton>
<TrButton colspan={3}>{t("linkedControlsCard.actions.link")}</TrButton>
</LinkedControlsDialog>
)}
</Tbody>
@@ -167,7 +167,7 @@ function ControlRow(props: {
}) {
const control = useFragment(linkedControlFragment, props.control);
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Tr
@@ -188,7 +188,7 @@ function ControlRow(props: {
onClick={() => props.onClick(control.id)}
icon={IconTrashCan}
>
{__("Unlink")}
{t("linkedControlsCard.actions.unlink")}
</Button>
</Td>
)}

14
apps/console/src/components/controls/LinkedControlsDialog.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -40,6 +39,7 @@ import {
useRef,
useState,
} from "react";
import { useTranslation } from "react-i18next";
import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
import { graphql } from "relay-runtime";
import { useDebounceCallback } from "usehooks-ts";
@@ -107,7 +107,7 @@ type Props = {
type SearchRef = RefObject<{ search: (v: string) => void } | null>;
export function LinkedControlsDialog(props: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
const searchRef: SearchRef = useRef(null);
const contentRef = useRef<HTMLDivElement>(null);
const [minHeight, setMinHeight] = useState(0);
@@ -116,12 +116,12 @@ export function LinkedControlsDialog(props: Props) {
searchRef.current?.search(v);
};
return (
<Dialog trigger={props.children} title={__("Link controls")}>
<Dialog trigger={props.children} title={t("linkedControlsDialog.title")}>
<DialogContent>
<div className="flex items-center gap-2 sticky top-0 py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search controls...")}
placeholder={t("linkedControlsDialog.searchPlaceholder")}
onValueChange={onSearch}
/>
</div>
@@ -202,7 +202,7 @@ function ControlRow(
controlIds: Set<string>;
} & Props,
) {
const { __ } = useTranslate();
const { t } = useTranslation();
const isLinked = props.controlIds.has(props.control.id);
const onClick = isLinked ? props.onUnlink : props.onLink;
const IconComponent = isLinked ? IconTrashCan : IconPlusLarge;
@@ -225,7 +225,9 @@ function ControlRow(
<span>
<IconComponent size={16} />
{" "}
{isLinked ? __("Unlink") : __("Link")}
{isLinked
? t("linkedControlsDialog.actions.unlink")
: t("linkedControlsDialog.actions.link")}
</span>
</Button>
</button>

25
apps/console/src/components/documents/BulkExportDialog.tsx
View File

@@ -18,8 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Checkbox,
@@ -31,6 +29,7 @@ import {
useDialogRef,
} from "@probo/ui";
import { forwardRef, type ReactNode, useImperativeHandle } from "react";
import { useTranslation } from "react-i18next";
import { z } from "zod";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
@@ -69,7 +68,7 @@ export type BulkExportDialogRef = {
export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
({ children, onExport, isLoading = false, defaultEmail, selectedCount }, ref) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const dialogRef = useDialogRef();
const { register, handleSubmit, formState, watch, setValue } = useFormWithSchema(
@@ -106,7 +105,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
<Dialog
className="max-w-md"
ref={dialogRef}
title={sprintf(__("Export %s Documents"), selectedCount)}
title={t("bulkExportDialog.title", { count: selectedCount })}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent className="space-y-4" padded>
@@ -118,10 +117,10 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
/>
<div className="flex-1">
<label className="text-sm font-medium text-txt-primary cursor-pointer">
{__("Include signatures")}
{t("bulkExportDialog.includeSignatures.label")}
</label>
<p className="text-xs text-txt-secondary mt-1">
{__("Show signature information and approval details in the PDFs")}
{t("bulkExportDialog.includeSignatures.description")}
</p>
</div>
</div>
@@ -133,10 +132,10 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
/>
<div className="flex-1">
<label className="text-sm font-medium text-txt-primary cursor-pointer">
{__("Add watermark")}
{t("bulkExportDialog.watermark.label")}
</label>
<p className="text-xs text-txt-secondary mt-1">
{__("Add confidential watermark with email and timestamp to all PDFs")}
{t("bulkExportDialog.watermark.description")}
</p>
</div>
</div>
@@ -144,10 +143,10 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
{watchWatermark && (
<div className="ml-6">
<Field
label={__("Watermark email")}
label={t("bulkExportDialog.watermark.emailLabel")}
{...register("watermarkEmail")}
type="email"
placeholder={__("Enter email address")}
placeholder={t("bulkExportDialog.watermark.emailPlaceholder")}
error={formState.errors.watermarkEmail?.message}
autoComplete="off"
required
@@ -158,7 +157,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
<div className="bg-level-1 p-3 rounded-lg border border-border-subtle">
<p className="text-sm text-txt-secondary">
{__("The documents will be exported as individual PDFs in a ZIP file. You will receive an email when the export is ready for download.")}
{t("bulkExportDialog.notice")}
</p>
</div>
</DialogContent>
@@ -171,11 +170,11 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
? (
<>
<Spinner size={16} />
{__("Exporting...")}
{t("bulkExportDialog.actions.exporting")}
</>
)
: (
__("Export Documents")
t("bulkExportDialog.actions.export")
)}
</Button>
</DialogFooter>

27
apps/console/src/components/documents/LinkedDocumentsCard.tsx
View File

@@ -18,8 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Card,
@@ -38,6 +36,7 @@ import {
} from "@probo/ui";
import { clsx } from "clsx";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -92,7 +91,7 @@ type Props<Params> = {
* Reusable component that displays a list of linked documents
*/
export function LinkedDocumentsCard<Params>(props: Props<Params>) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [limit, setLimit] = useState<number | null>(4);
const documents = useMemo(() => {
return limit ? props.documents.slice(0, limit) : props.documents;
@@ -130,7 +129,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
<Wrapper padded className="space-y-[10px]">
{variant === "card" && (
<div className="flex justify-between">
<div className="text-lg font-semibold">{__("Documents")}</div>
<div className="text-lg font-semibold">{t("linkedDocumentsCard.title")}</div>
{!props.readOnly && (
<LinkedDocumentDialog
connectionId={props.connectionId}
@@ -140,7 +139,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<Button variant="tertiary" icon={IconPlusLarge}>
{__("Link document")}
{t("linkedDocumentsCard.actions.link")}
</Button>
</LinkedDocumentDialog>
)}
@@ -149,9 +148,9 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
<Table className={clsx(variant === "card" && "bg-invert")}>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Type")}</Th>
<Th>{__("State")}</Th>
<Th>{t("linkedDocumentsCard.columns.name")}</Th>
<Th>{t("linkedDocumentsCard.columns.type")}</Th>
<Th>{t("linkedDocumentsCard.columns.state")}</Th>
{!props.readOnly && <Th></Th>}
</Tr>
</Thead>
@@ -162,7 +161,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
colSpan={props.readOnly ? 3 : 4}
className="text-center text-txt-secondary"
>
{__("No documents linked")}
{t("linkedDocumentsCard.empty")}
</Td>
</Tr>
)}
@@ -183,7 +182,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<TrButton colspan={4} icon={IconPlusLarge}>
{__("Link document")}
{t("linkedDocumentsCard.actions.link")}
</TrButton>
</LinkedDocumentDialog>
)}
@@ -196,7 +195,9 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
className="mt-3 mx-auto"
icon={IconChevronDown}
>
{sprintf(__("Show %s more"), props.documents.length - limit)}
{t("linkedDocumentsCard.actions.showMore", {
count: props.documents.length - limit,
})}
</Button>
)}
</Wrapper>
@@ -210,7 +211,7 @@ function DocumentRow(props: {
}) {
const document = useFragment(linkedDocumentFragment, props.document);
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Tr to={`/organizations/${organizationId}/documents/${document.id}`}>
@@ -239,7 +240,7 @@ function DocumentRow(props: {
onClick={() => props.onClick(document.id)}
icon={IconTrashCan}
>
{__("Unlink")}
{t("linkedDocumentsCard.actions.unlink")}
</Button>
</Td>
)}

18
apps/console/src/components/documents/LinkedDocumentsDialog.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
@@ -33,6 +32,7 @@ import {
Spinner,
} from "@probo/ui";
import { type ReactNode, Suspense, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -101,16 +101,16 @@ type Props = {
};
export function LinkedDocumentDialog({ children, ...props }: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Dialog trigger={children} title={__("Link documents")}>
<Dialog trigger={children} title={t("linkedDocumentsDialog.title")}>
<DialogContent>
<Suspense fallback={<Spinner centered />}>
<LinkedDocumentsDialogContent {...props} />
</Suspense>
</DialogContent>
<DialogFooter exitLabel={__("Close")} />
<DialogFooter exitLabel={t("linkedDocumentsDialog.actions.close")} />
</Dialog>
);
}
@@ -129,7 +129,7 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
documentsFragment,
query.organization as LinkedDocumentsDialogFragment$key,
);
const { __ } = useTranslate();
const { t } = useTranslation();
const [search, setSearch] = useState("");
const documents = useMemo(
() => data.documents?.edges?.map(edge => edge.node) ?? [],
@@ -150,7 +150,7 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
<div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search documents...")}
placeholder={t("linkedDocumentsDialog.searchPlaceholder")}
onValueChange={setSearch}
/>
</div>
@@ -187,7 +187,7 @@ type RowProps = {
};
function DocumentRow(props: RowProps) {
const { __ } = useTranslate();
const { t } = useTranslation();
const isLinked = props.linkedDocuments.has(props.document.id);
const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -209,7 +209,9 @@ function DocumentRow(props: RowProps) {
<span>
<IconComponent size={16} />
{" "}
{isLinked ? __("Unlink") : __("Link")}
{isLinked
? t("linkedDocumentsDialog.actions.unlink")
: t("linkedDocumentsDialog.actions.link")}
</span>
</Button>
</button>

26
apps/console/src/components/documents/PdfDownloadDialog.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
Checkbox,
@@ -30,6 +29,7 @@ import {
useDialogRef,
} from "@probo/ui";
import { forwardRef, type ReactNode, useImperativeHandle } from "react";
import { useTranslation } from "react-i18next";
import { z } from "zod";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
@@ -60,7 +60,7 @@ export type PdfDownloadDialogRef = {
export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
({ children, onDownload, isLoading = false, defaultEmail }, ref) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const dialogRef = useDialogRef();
const { register, handleSubmit, formState, watch, setValue }
@@ -95,7 +95,7 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
<Dialog
className="max-w-md"
ref={dialogRef}
title={__("Download PDF Options")}
title={t("pdfDownloadDialog.title")}
>
<form onSubmit={e => void handleSubmit(onSubmit)(e)}>
<DialogContent className="space-y-4" padded>
@@ -107,12 +107,10 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
/>
<div className="flex-1">
<label className="text-sm font-medium text-txt-primary cursor-pointer">
{__("Include signatures")}
{t("pdfDownloadDialog.includeSignatures.label")}
</label>
<p className="text-xs text-txt-secondary mt-1">
{__(
"Show signature information and approval details in the PDF",
)}
{t("pdfDownloadDialog.includeSignatures.description")}
</p>
</div>
</div>
@@ -124,12 +122,10 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
/>
<div className="flex-1">
<label className="text-sm font-medium text-txt-primary cursor-pointer">
{__("Add watermark")}
{t("pdfDownloadDialog.watermark.label")}
</label>
<p className="text-xs text-txt-secondary mt-1">
{__(
"Add confidential watermark with email and timestamp",
)}
{t("pdfDownloadDialog.watermark.description")}
</p>
</div>
</div>
@@ -137,10 +133,10 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
{watchWatermark && (
<div className="ml-6">
<Field
label={__("Watermark email")}
label={t("pdfDownloadDialog.watermark.emailLabel")}
{...register("watermarkEmail")}
type="email"
placeholder={__("Enter email address")}
placeholder={t("pdfDownloadDialog.watermark.emailPlaceholder")}
error={formState.errors.watermarkEmail?.message}
autoComplete="off"
required
@@ -155,11 +151,11 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
? (
<>
<Spinner size={16} />
{__("Downloading...")}
{t("pdfDownloadDialog.actions.downloading")}
</>
)
: (
__("Download PDF")
t("pdfDownloadDialog.actions.download")
)}
</Button>
</DialogFooter>

10
apps/console/src/components/form/AuditSelectField.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { getAuditStateLabel, getAuditStateVariant } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Badge, Field, Option, Select } from "@probo/ui";
import { type ComponentProps, Suspense } from "react";
import {
@@ -28,6 +27,7 @@ import {
type FieldValues,
type Path,
} from "react-hook-form";
import { useTranslation } from "react-i18next";
import { graphql, useLazyLoadQuery } from "react-relay";
import type { AuditSelectFieldQuery } from "#/__generated__/core/AuditSelectFieldQuery.graphql";
@@ -86,7 +86,7 @@ export function AuditSelectField<T extends FieldValues = FieldValues>({
function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled">,
) {
const { __ } = useTranslate();
const { t } = useTranslation();
const { name, organizationId, control } = props;
const data = useLazyLoadQuery<AuditSelectFieldQuery>(
auditsQuery,
@@ -109,7 +109,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
disabled={props.disabled}
id={name}
variant="editor"
placeholder={__("Select an audit")}
placeholder={t("auditSelectField.placeholder")}
onValueChange={value =>
field.onChange(value === NONE_VALUE ? "" : value)}
key={audits?.length.toString() ?? "0"}
@@ -118,7 +118,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
value={field.value || NONE_VALUE}
>
<Option value={NONE_VALUE}>
<span className="text-txt-tertiary">{__("None")}</span>
<span className="text-txt-tertiary">{t("auditSelectField.none")}</span>
</Option>
{audits?.map(audit => (
<Option key={audit.id} value={audit.id}>
@@ -130,7 +130,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
</span>
<div className="ml-3">
<Badge variant={getAuditStateVariant(audit.state)}>
{getAuditStateLabel(__, audit.state)}
{getAuditStateLabel(t, audit.state)}
</Badge>
</div>
</div>

11
apps/console/src/components/form/ControlMaturityLevelOptions.tsx
View File

@@ -18,21 +18,18 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import {
controlMaturityLevels,
getControlMaturityLevelLabel,
} from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { controlMaturityLevels } from "@probo/helpers";
import { Option } from "@probo/ui";
import { useTranslation } from "react-i18next";
export function ControlMaturityLevelOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<>
{controlMaturityLevels.map(level => (
<Option key={level} value={level}>
{getControlMaturityLevelLabel(__, level)}
{t(`controlMaturityLevelOptions.levels.${level}`)}
</Option>
))}
</>

39
apps/console/src/components/form/CountriesField.tsx
View File

@@ -18,12 +18,17 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { countries, type CountryCode, getCountryName, getCountryOptions } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { countries, type CountryCode, getCountryName } from "@probo/helpers";
import { Badge, IconCrossLargeX, Input } from "@probo/ui";
import { clsx } from "clsx";
import { useEffect, useState } from "react";
import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
import {
type Control,
Controller,
type FieldPath,
type FieldValues,
} from "react-hook-form";
import { useTranslation } from "react-i18next";
type Props<T extends FieldValues = FieldValues> = {
control: Control<T>;
@@ -31,7 +36,11 @@ type Props<T extends FieldValues = FieldValues> = {
disabled?: boolean;
};
export function CountriesField<T extends FieldValues = FieldValues>({ control, name, disabled }: Props<T>) {
export function CountriesField<T extends FieldValues = FieldValues>({
control,
name,
disabled,
}: Props<T>) {
return (
<Controller
control={control}
@@ -54,7 +63,7 @@ type CountriesFieldInputProps = {
};
function CountriesFieldInput(props: CountriesFieldInputProps) {
const { __ } = useTranslate();
const { i18n } = useTranslation();
const [animateBadge, setAnimateBadge] = useState(false);
const addCountry = (code: string) => {
@@ -85,7 +94,7 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
&& "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent",
)}
>
{getCountryName(__, countryCode as CountryCode)}
{getCountryName(i18n.language, countryCode as CountryCode)}
<div className="w-0 overflow-hidden group-hover:w-4 duration-200">
<IconCrossLargeX size={12} />
</div>
@@ -113,10 +122,13 @@ type CountryInputProps = {
};
function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
const { __ } = useTranslate();
const { t, i18n } = useTranslation();
const [search, setSearch] = useState("");
const [isOpen, setIsOpen] = useState(false);
const countryOptions = getCountryOptions(__);
const countryOptions = availableCountries.map(code => ({
value: code,
label: getCountryName(i18n.language, code),
}));
useEffect(() => {
document.body.style.overflow = isOpen ? "hidden" : "";
@@ -126,7 +138,9 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
}, [isOpen]);
const filteredCountries = countryOptions
.filter((option: { value: string; label: string }) => availableCountries.includes(option.value as CountryCode))
.filter((option: { value: string; label: string }) =>
availableCountries.includes(option.value as CountryCode),
)
.filter((option: { value: string; label: string }) =>
option.label.toLowerCase().includes(search.toLowerCase()),
);
@@ -145,7 +159,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
value={search}
onChange={e => setSearch(e.target.value)}
onFocus={() => setIsOpen(true)}
placeholder={__("Search and add countries...")}
placeholder={t("countriesField.searchPlaceholder")}
className="w-full pr-8"
/>
<button
@@ -186,10 +200,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
)}
{isOpen && (
<div
className="fixed inset-0 z-40"
onClick={() => setIsOpen(false)}
/>
<div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
)}
</div>
);

11
apps/console/src/components/form/DocumentClassificationOptions.tsx
View File

@@ -18,21 +18,18 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import {
documentClassifications,
getDocumentClassificationLabel,
} from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { documentClassifications } from "@probo/helpers";
import { Option } from "@probo/ui";
import { useTranslation } from "react-i18next";
export function DocumentClassificationOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<>
{documentClassifications.map(classification => (
<Option key={classification} value={classification}>
{getDocumentClassificationLabel(__, classification)}
{t(`documentClassificationOptions.classifications.${classification}`)}
</Option>
))}
</>

8
apps/console/src/components/form/DocumentTypeOptions.tsx
View File

@@ -18,18 +18,18 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { documentTypes, getDocumentTypeLabel } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { documentTypes } from "@probo/helpers";
import { Option } from "@probo/ui";
import { useTranslation } from "react-i18next";
export function DocumentTypeOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<>
{documentTypes.map(type => (
<Option key={type} value={type}>
{getDocumentTypeLabel(__, type)}
{t(`documentTypeOptions.types.${type}`)}
</Option>
))}
</>

29
apps/console/src/components/form/EmailsField.tsx
View File

@@ -18,10 +18,17 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Button, IconPlusLarge, IconTrashCan, Input, Label } from "@probo/ui";
import type { ArrayPath, Control, FieldValue, FieldValues, Path, UseFormRegister } from "react-hook-form";
import type {
ArrayPath,
Control,
FieldValue,
FieldValues,
Path,
UseFormRegister,
} from "react-hook-form";
import { useFieldArray } from "react-hook-form";
import { useTranslation } from "react-i18next";
type Props<TFieldValues extends FieldValues = FieldValues> = {
disabled: boolean;
@@ -32,10 +39,12 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
/**
* A field to handle multiple emails
*/
export function EmailsField<
TFieldValues extends FieldValues = FieldValues,
>({ control, register, disabled }: Props<TFieldValues>) {
const { __ } = useTranslate();
export function EmailsField<TFieldValues extends FieldValues = FieldValues>({
control,
register,
disabled,
}: Props<TFieldValues>) {
const { t } = useTranslation();
const { fields, append, remove } = useFieldArray({
name: "additionalEmailAddresses" as ArrayPath<TFieldValues>,
control,
@@ -43,12 +52,14 @@ export function EmailsField<
return (
<fieldset className="space-y-2">
{fields.length > 0 && <Label>{__("Additional emails")}</Label>}
{fields.length > 0 && <Label>{t("emailsField.additionalEmails")}</Label>}
{fields.map((field, index) => (
<div key={field.id} className="flex items-stretch">
<Input
className="w-full"
{...register(`additionalEmailAddresses.${index}` as Path<TFieldValues>)}
{...register(
`additionalEmailAddresses.${index}` as Path<TFieldValues>,
)}
type="email"
disabled={disabled}
/>
@@ -67,7 +78,7 @@ export function EmailsField<
onClick={() => append("" as FieldValue<TFieldValues>)}
disabled={disabled}
>
{__("Add email")}
{t("emailsField.actions.add")}
</Button>
</fieldset>
);

38
apps/console/src/components/form/MeasureSelectField.tsx
View File

@@ -18,10 +18,15 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Combobox, ComboboxItem, Field } from "@probo/ui";
import { type ComponentProps, Suspense, useMemo, useState } from "react";
import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
import {
type Control,
Controller,
type FieldPath,
type FieldValues,
} from "react-hook-form";
import { useTranslation } from "react-i18next";
import { usePaginatedMeasures } from "#/hooks/graph/usePaginatedMeasures";
@@ -38,7 +43,9 @@ type Props<
optional?: boolean;
} & ComponentProps<typeof Field>;
export function MeasureSelectField<TFieldValues extends FieldValues = FieldValues>({
export function MeasureSelectField<
TFieldValues extends FieldValues = FieldValues,
>({
organizationId,
control,
disabled,
@@ -48,7 +55,11 @@ export function MeasureSelectField<TFieldValues extends FieldValues = FieldValue
return (
<Field {...props}>
<Suspense
fallback={<Combobox onSearch={() => {}} placeholder="Loading..." disabled><div /></Combobox>}
fallback={(
<Combobox onSearch={() => {}} placeholder="Loading..." disabled>
<div />
</Combobox>
)}
>
<MeasureSelectWithQuery<TFieldValues>
organizationId={organizationId}
@@ -63,9 +74,12 @@ export function MeasureSelectField<TFieldValues extends FieldValues = FieldValue
}
function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
props: Pick<Props<TFieldValues>, "organizationId" | "control" | "name" | "disabled" | "optional">,
props: Pick<
Props<TFieldValues>,
"organizationId" | "control" | "name" | "disabled" | "optional"
>,
) {
const { __ } = useTranslate();
const { t } = useTranslation();
const { name, organizationId, control, disabled, optional } = props;
const { data } = usePaginatedMeasures(organizationId);
const [search, setSearch] = useState("");
@@ -91,12 +105,14 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
control={control}
name={name}
render={({ field }) => {
const selectedMeasure = field.value ? allMeasures?.find(m => m.id === field.value) : null;
const selectedMeasure = field.value
? allMeasures?.find(m => m.id === field.value)
: null;
return (
<Combobox
id={name}
placeholder={__("Select a measure")}
placeholder={t("measureSelectField.placeholder")}
value={selectedMeasure ? selectedMeasure.name : search}
onSearch={setSearch}
disabled={disabled}
@@ -108,7 +124,7 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
setSearch("");
}}
>
{__("None")}
{t("measureSelectField.none")}
</ComboboxItem>
)}
{measures?.map(m => (
@@ -123,7 +139,9 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
<div className="max-w-75 ellipsis overflow-hidden whitespace-pre-wrap">
{m.name}
</div>
<div className="text-sm text-txt-secondary">{m.category}</div>
<div className="text-sm text-txt-secondary">
{m.category}
</div>
</div>
</ComboboxItem>
))}

72
apps/console/src/components/form/PeopleMultiSelectField.tsx
View File

@@ -18,10 +18,22 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Badge, Button, Field, IconCrossLargeX, Option, Select } from "@probo/ui";
import {
Badge,
Button,
Field,
IconCrossLargeX,
Option,
Select,
} from "@probo/ui";
import { type ComponentProps, Suspense, useState } from "react";
import { type Control, Controller, type FieldValues, type Path } from "react-hook-form";
import {
type Control,
Controller,
type FieldValues,
type Path,
} from "react-hook-form";
import { useTranslation } from "react-i18next";
import { usePeople } from "#/hooks/graph/PeopleGraph";
@@ -67,10 +79,24 @@ export function PeopleMultiSelectField<T extends FieldValues = FieldValues>({
}
function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople" | "placeholder">,
props: Pick<
Props<T>,
| "organizationId"
| "control"
| "name"
| "disabled"
| "selectedPeople"
| "placeholder"
>,
) {
const { __ } = useTranslate();
const { name, organizationId, control, selectedPeople = [], placeholder } = props;
const { t } = useTranslation();
const {
name,
organizationId,
control,
selectedPeople = [],
placeholder,
} = props;
const people = usePeople(organizationId, { contractEnded: false });
const [isOpen, setIsOpen] = useState(false);
@@ -91,10 +117,16 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
control={control}
name={name as Path<T>}
render={({ field }) => {
const selectedPeopleIds = (Array.isArray(field.value) ? field.value : []) as string[];
const selectedPeopleIds = (
Array.isArray(field.value) ? field.value : []
) as string[];
const selectedPeople = allPeople.filter(p => selectedPeopleIds.includes(p.id));
const availablePeople = allPeople.filter(p => !selectedPeopleIds.includes(p.id));
const selectedPeople = allPeople.filter(p =>
selectedPeopleIds.includes(p.id),
);
const availablePeople = allPeople.filter(
p => !selectedPeopleIds.includes(p.id),
);
const handleAddPerson = (personId: string) => {
const newValue = [...selectedPeopleIds, personId];
@@ -103,7 +135,9 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
};
const handleRemovePerson = (personId: string) => {
const newValue = selectedPeopleIds.filter((id: string) => id !== personId);
const newValue = selectedPeopleIds.filter(
(id: string) => id !== personId,
);
field.onChange(newValue);
};
@@ -114,7 +148,9 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
disabled={props.disabled}
id={name}
variant="editor"
placeholder={placeholder ?? __("Add people...")}
placeholder={
placeholder ?? t("peopleMultiSelectField.addPlaceholder")
}
onValueChange={handleAddPerson}
key={`${selectedPeopleIds.length}-${people.length}`}
className="w-full"
@@ -123,7 +159,11 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
onOpenChange={setIsOpen}
>
{availablePeople.map(person => (
<Option key={person.id} value={person.id} className="flex gap-2">
<Option
key={person.id}
value={person.id}
className="flex gap-2"
>
<div className="flex flex-col">
<span>{person.fullName}</span>
{person.emailAddress && (
@@ -140,7 +180,11 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
{selectedPeople.length > 0 && (
<div className="flex flex-wrap gap-2">
{selectedPeople.map(person => (
<Badge key={person.id} variant="neutral" className="flex items-center gap-2">
<Badge
key={person.id}
variant="neutral"
className="flex items-center gap-2"
>
<span>{person.fullName}</span>
{!props.disabled && (
<Button
@@ -158,7 +202,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
{selectedPeople.length === 0 && availablePeople.length === 0 && (
<div className="text-sm text-txt-secondary py-2">
{__("No people available")}
{t("peopleMultiSelectField.empty")}
</div>
)}
</div>

14
apps/console/src/components/form/PeopleSelectField.tsx
View File

@@ -18,12 +18,12 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Avatar, Field, Option, Select } from "@probo/ui";
import { type ComponentProps, Suspense } from "react";
import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
import { usePeople } from "#/hooks/graph/PeopleGraph";
import { useTranslation } from "react-i18next";
type Props<
TFieldValues extends FieldValues = FieldValues,
@@ -42,7 +42,7 @@ export function PeopleSelectField<TFieldValues extends FieldValues = FieldValues
control,
...props
}: Props<TFieldValues>) {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Field {...props}>
@@ -51,7 +51,7 @@ export function PeopleSelectField<TFieldValues extends FieldValues = FieldValues
<Select
variant="editor"
loading
placeholder={__("Select an owner")}
placeholder={t("peopleSelectField.placeholder")}
className="w-full"
/>
)}
@@ -74,7 +74,7 @@ function PeopleSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
"organizationId" | "control" | "name" | "disabled" | "optional"
>,
) {
const { __ } = useTranslate();
const { t } = useTranslation();
const { name, organizationId, control } = props;
const people = usePeople(organizationId, { contractEnded: false });
@@ -87,14 +87,16 @@ function PeopleSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
disabled={props.disabled}
id={name}
variant="editor"
placeholder={__("Select an owner")}
placeholder={t("peopleSelectField.placeholder")}
onValueChange={value =>
field.onChange(value === "__NONE__" ? null : value)}
{...field}
className="w-full"
value={field.value ?? (props.optional ? "__NONE__" : "")}
>
{props.optional && <Option value="__NONE__">{__("None")}</Option>}
{props.optional && (
<Option value="__NONE__">{t("peopleSelectField.none")}</Option>
)}
{people?.map(p => (
<Option key={p.id} value={p.id} className="flex gap-2">
<Avatar name={p.fullName} />

166
apps/console/src/components/form/ProcessingActivityEnumOptions.tsx
View File

@@ -18,8 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Option } from "@probo/ui";
import { useTranslation } from "react-i18next";
import type {
ProcessingActivityDataProtectionImpactAssessment,
@@ -28,16 +28,27 @@ import type {
ProcessingActivityTransferImpactAssessment,
} from "#/__generated__/core/ProcessingActivityGraphCreateMutation.graphql";
type Translator = (key: string) => string;
export function SpecialOrCriminalDataOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
const options: Array<{
value: ProcessingActivitySpecialOrCriminalDatum;
label: string;
}> = [
{ value: "YES", label: __("Yes") },
{ value: "NO", label: __("No") },
{ value: "POSSIBLE", label: __("Possible") },
{
value: "YES",
label: t("processingActivityEnumOptions.specialOrCriminalData.yes"),
},
{
value: "NO",
label: t("processingActivityEnumOptions.specialOrCriminalData.no"),
},
{
value: "POSSIBLE",
label: t("processingActivityEnumOptions.specialOrCriminalData.possible"),
},
];
return (
@@ -52,18 +63,38 @@ export function SpecialOrCriminalDataOptions() {
}
export function LawfulBasisOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
const options: Array<{
value: ProcessingActivityLawfulBasis;
label: string;
}> = [
{ value: "CONSENT", label: __("Consent") },
{ value: "CONTRACTUAL_NECESSITY", label: __("Contractual Necessity") },
{ value: "LEGAL_OBLIGATION", label: __("Legal Obligation") },
{ value: "LEGITIMATE_INTEREST", label: __("Legitimate Interest") },
{ value: "PUBLIC_TASK", label: __("Public Task") },
{ value: "VITAL_INTERESTS", label: __("Vital Interests") },
{
value: "CONSENT",
label: t("processingActivityEnumOptions.lawfulBasis.consent"),
},
{
value: "CONTRACTUAL_NECESSITY",
label: t(
"processingActivityEnumOptions.lawfulBasis.contractualNecessity",
),
},
{
value: "LEGAL_OBLIGATION",
label: t("processingActivityEnumOptions.lawfulBasis.legalObligation"),
},
{
value: "LEGITIMATE_INTEREST",
label: t("processingActivityEnumOptions.lawfulBasis.legitimateInterest"),
},
{
value: "PUBLIC_TASK",
label: t("processingActivityEnumOptions.lawfulBasis.publicTask"),
},
{
value: "VITAL_INTERESTS",
label: t("processingActivityEnumOptions.lawfulBasis.vitalInterests"),
},
];
return (
@@ -79,17 +110,23 @@ export function LawfulBasisOptions() {
export function getLawfulBasisLabel(
value: ProcessingActivityLawfulBasis | null | undefined,
__: (key: string) => string,
t: Translator,
): string {
if (!value) return "-";
const labels = {
CONSENT: __("Consent"),
CONTRACTUAL_NECESSITY: __("Contractual Necessity"),
LEGAL_OBLIGATION: __("Legal Obligation"),
LEGITIMATE_INTEREST: __("Legitimate Interest"),
PUBLIC_TASK: __("Public Task"),
VITAL_INTERESTS: __("Vital Interests"),
CONSENT:
t("processingActivityEnumOptions.lawfulBasis.consent"),
CONTRACTUAL_NECESSITY:
t("processingActivityEnumOptions.lawfulBasis.contractualNecessity"),
LEGAL_OBLIGATION:
t("processingActivityEnumOptions.lawfulBasis.legalObligation"),
LEGITIMATE_INTEREST:
t("processingActivityEnumOptions.lawfulBasis.legitimateInterest"),
PUBLIC_TASK:
t("processingActivityEnumOptions.lawfulBasis.publicTask"),
VITAL_INTERESTS:
t("processingActivityEnumOptions.lawfulBasis.vitalInterests"),
};
return labels[value] || value;
@@ -97,38 +134,63 @@ export function getLawfulBasisLabel(
export function getResidualRiskLabel(
value: "LOW" | "MEDIUM" | "HIGH" | null | undefined,
__: (key: string) => string,
t: Translator,
): string {
if (!value) return "-";
const labels = {
LOW: __("Low"),
MEDIUM: __("Medium"),
HIGH: __("High"),
LOW: t("processingActivityEnumOptions.residualRisk.low") || "Low",
MEDIUM: t("processingActivityEnumOptions.residualRisk.medium") || "Medium",
HIGH: t("processingActivityEnumOptions.residualRisk.high") || "High",
};
return labels[value] || value;
}
export function TransferSafeguardsOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
const options: Array<{
value: string;
label: string;
}> = [
{ value: "__NONE__", label: __("None") },
{
value: "__NONE__",
label: t("processingActivityEnumOptions.transferSafeguards.none"),
},
{
value: "STANDARD_CONTRACTUAL_CLAUSES",
label: __("Standard Contractual Clauses"),
label: t(
"processingActivityEnumOptions.transferSafeguards.standardContractualClauses",
),
},
{
value: "BINDING_CORPORATE_RULES",
label: t(
"processingActivityEnumOptions.transferSafeguards.bindingCorporateRules",
),
},
{
value: "ADEQUACY_DECISION",
label: t(
"processingActivityEnumOptions.transferSafeguards.adequacyDecision",
),
},
{
value: "DEROGATIONS",
label: t("processingActivityEnumOptions.transferSafeguards.derogations"),
},
{
value: "CODES_OF_CONDUCT",
label: t(
"processingActivityEnumOptions.transferSafeguards.codesOfConduct",
),
},
{ value: "BINDING_CORPORATE_RULES", label: __("Binding Corporate Rules") },
{ value: "ADEQUACY_DECISION", label: __("Adequacy Decision") },
{ value: "DEROGATIONS", label: __("Derogations") },
{ value: "CODES_OF_CONDUCT", label: __("Codes of Conduct") },
{
value: "CERTIFICATION_MECHANISMS",
label: __("Certification Mechanisms"),
label: t(
"processingActivityEnumOptions.transferSafeguards.certificationMechanisms",
),
},
];
@@ -144,14 +206,24 @@ export function TransferSafeguardsOptions() {
}
export function DataProtectionImpactAssessmentOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
const options: Array<{
value: ProcessingActivityDataProtectionImpactAssessment;
label: string;
}> = [
{ value: "NEEDED", label: __("Needed") },
{ value: "NOT_NEEDED", label: __("Not Needed") },
{
value: "NEEDED",
label: t(
"processingActivityEnumOptions.dataProtectionImpactAssessment.needed",
),
},
{
value: "NOT_NEEDED",
label: t(
"processingActivityEnumOptions.dataProtectionImpactAssessment.notNeeded",
),
},
];
return (
@@ -166,14 +238,22 @@ export function DataProtectionImpactAssessmentOptions() {
}
export function TransferImpactAssessmentOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
const options: Array<{
value: ProcessingActivityTransferImpactAssessment;
label: string;
}> = [
{ value: "NEEDED", label: __("Needed") },
{ value: "NOT_NEEDED", label: __("Not Needed") },
{
value: "NEEDED",
label: t("processingActivityEnumOptions.transferImpactAssessment.needed"),
},
{
value: "NOT_NEEDED",
label: t(
"processingActivityEnumOptions.transferImpactAssessment.notNeeded",
),
},
];
return (
@@ -188,14 +268,20 @@ export function TransferImpactAssessmentOptions() {
}
export function RoleOptions() {
const { __ } = useTranslate();
const { t } = useTranslation();
const options: Array<{
value: "CONTROLLER" | "PROCESSOR";
label: string;
}> = [
{ value: "CONTROLLER", label: __("Controller") },
{ value: "PROCESSOR", label: __("Processor") },
{
value: "CONTROLLER",
label: t("processingActivityEnumOptions.roles.controller"),
},
{
value: "PROCESSOR",
label: t("processingActivityEnumOptions.roles.processor"),
},
];
return (

89
apps/console/src/components/form/ThirdPartiesMultiSelectField.tsx
View File

@@ -19,11 +19,28 @@
// SOFTWARE.
import { faviconUrl } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Avatar, Badge, Button, Field, IconCrossLargeX, Option, Select } from "@probo/ui";
import {
Avatar,
Badge,
Button,
Field,
IconCrossLargeX,
Option,
Select,
} from "@probo/ui";
import { type ComponentProps, Suspense, useEffect, useState } from "react";
import { type Control, Controller, type FieldValues, type Path } from "react-hook-form";
import { type PreloadedQuery, usePreloadedQuery, useQueryLoader } from "react-relay";
import {
type Control,
Controller,
type FieldValues,
type Path,
} from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
type PreloadedQuery,
usePreloadedQuery,
useQueryLoader,
} from "react-relay";
import { graphql } from "relay-runtime";
import type { ThirdPartiesMultiSelectFieldQuery } from "#/__generated__/core/ThirdPartiesMultiSelectFieldQuery.graphql";
@@ -32,10 +49,7 @@ const thirdPartiesQuery = graphql`
query ThirdPartiesMultiSelectFieldQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
... on Organization {
thirdParties(
first: 100
orderBy: { direction: ASC, field: NAME }
) {
thirdParties(first: 100, orderBy: { direction: ASC, field: NAME }) {
edges {
node {
id
@@ -64,12 +78,9 @@ type Props<T extends FieldValues = FieldValues> = {
selectedThirdParties?: ThirdParty[];
} & ComponentProps<typeof Field>;
export function ThirdPartiesMultiSelectField<T extends FieldValues = FieldValues>({
organizationId,
control,
selectedThirdParties = [],
...props
}: Props<T>) {
export function ThirdPartiesMultiSelectField<
T extends FieldValues = FieldValues,
>({ organizationId, control, selectedThirdParties = [], ...props }: Props<T>) {
const [queryRef, loadQuery]
= useQueryLoader<ThirdPartiesMultiSelectFieldQuery>(thirdPartiesQuery);
@@ -103,14 +114,21 @@ export function ThirdPartiesMultiSelectField<T extends FieldValues = FieldValues
}
function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
props: Pick<Props<T>, "control" | "name" | "disabled" | "selectedThirdParties"> & {
props: Pick<
Props<T>,
"control" | "name" | "disabled" | "selectedThirdParties"
> & {
queryRef: PreloadedQuery<ThirdPartiesMultiSelectFieldQuery>;
},
) {
const { __ } = useTranslate();
const { t } = useTranslation();
const { name, control, selectedThirdParties = [] } = props;
const data = usePreloadedQuery<ThirdPartiesMultiSelectFieldQuery>(thirdPartiesQuery, props.queryRef);
const thirdParties = data.organization?.thirdParties?.edges.map(edge => edge.node) ?? [];
const data = usePreloadedQuery<ThirdPartiesMultiSelectFieldQuery>(
thirdPartiesQuery,
props.queryRef,
);
const thirdParties
= data.organization?.thirdParties?.edges.map(edge => edge.node) ?? [];
const [isOpen, setIsOpen] = useState(false);
const allThirdParties: ThirdParty[] = [...thirdParties];
@@ -128,10 +146,16 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
control={control}
name={name as Path<T>}
render={({ field }) => {
const selectedThirdPartyIds = (Array.isArray(field.value) ? field.value : []) as string[];
const selectedThirdPartyIds = (
Array.isArray(field.value) ? field.value : []
) as string[];
const selectedThirdParties = allThirdParties.filter(v => selectedThirdPartyIds.includes(v.id));
const availableThirdParties = allThirdParties.filter(v => !selectedThirdPartyIds.includes(v.id));
const selectedThirdParties = allThirdParties.filter(v =>
selectedThirdPartyIds.includes(v.id),
);
const availableThirdParties = allThirdParties.filter(
v => !selectedThirdPartyIds.includes(v.id),
);
const handleAddThirdParty = (thirdPartyId: string) => {
const newValue = [...selectedThirdPartyIds, thirdPartyId];
@@ -140,7 +164,9 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
};
const handleRemoveThirdParty = (thirdPartyId: string) => {
const newValue = selectedThirdPartyIds.filter((id: string) => id !== thirdPartyId);
const newValue = selectedThirdPartyIds.filter(
(id: string) => id !== thirdPartyId,
);
field.onChange(newValue);
};
@@ -151,7 +177,7 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
disabled={props.disabled}
id={name}
variant="editor"
placeholder={__("Add third parties...")}
placeholder={t("thirdPartiesMultiSelectField.addPlaceholder")}
onValueChange={handleAddThirdParty}
key={`${selectedThirdPartyIds.length}-${thirdParties.length}`}
className="w-full"
@@ -160,7 +186,11 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
onOpenChange={setIsOpen}
>
{availableThirdParties.map(thirdParty => (
<Option key={thirdParty.id} value={thirdParty.id} className="flex gap-2">
<Option
key={thirdParty.id}
value={thirdParty.id}
className="flex gap-2"
>
<Avatar
name={thirdParty.name}
src={faviconUrl(thirdParty.websiteUrl)}
@@ -182,7 +212,11 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
{selectedThirdParties.length > 0 && (
<div className="flex flex-wrap gap-2">
{selectedThirdParties.map(thirdParty => (
<Badge key={thirdParty.id} variant="neutral" className="flex items-center gap-2">
<Badge
key={thirdParty.id}
variant="neutral"
className="flex items-center gap-2"
>
<Avatar
name={thirdParty.name}
src={faviconUrl(thirdParty.websiteUrl)}
@@ -202,9 +236,10 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
</div>
)}
{selectedThirdParties.length === 0 && availableThirdParties.length === 0 && (
{selectedThirdParties.length === 0
&& availableThirdParties.length === 0 && (
<div className="text-sm text-txt-secondary py-2">
{__("No third parties available")}
{t("thirdPartiesMultiSelectField.empty")}
</div>
)}
</div>

27
apps/console/src/components/measures/LinkedMeasuresCard.tsx
View File

@@ -18,8 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Card,
@@ -37,6 +35,7 @@ import {
import { MeasureBadge } from "@probo/ui/src/Molecules/Badge/MeasureBadge";
import { clsx } from "clsx";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -83,7 +82,7 @@ type Props<Params> = {
* Reusable component that displays a list of linked measures
*/
export function LinkedMeasuresCard<Params>(props: Props<Params>) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [limit, setLimit] = useState<number | null>(
props.variant === "card" ? 4 : null,
);
@@ -123,7 +122,9 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
<Wrapper padded className="space-y-[10px]">
{variant === "card" && (
<div className="flex justify-between">
<div className="text-lg font-semibold">{__("Measures")}</div>
<div className="text-lg font-semibold">
{t("linkedMeasuresCard.title")}
</div>
{!props.readOnly && (
<LinkedMeasureDialog
connectionId={props.connectionId}
@@ -133,7 +134,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<Button variant="tertiary" icon={IconPlusLarge}>
{__("Link measure")}
{t("linkedMeasuresCard.actions.link")}
</Button>
</LinkedMeasureDialog>
)}
@@ -142,8 +143,8 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
<Table className={clsx(variant === "card" && "bg-invert")}>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("State")}</Th>
<Th>{t("linkedMeasuresCard.columns.name")}</Th>
<Th>{t("linkedMeasuresCard.columns.state")}</Th>
{!props.readOnly && <Th></Th>}
</Tr>
</Thead>
@@ -154,7 +155,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
colSpan={props.readOnly ? 2 : 3}
className="text-center text-txt-secondary"
>
{__("No measures linked")}
{t("linkedMeasuresCard.empty")}
</Td>
</Tr>
)}
@@ -175,7 +176,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<TrButton colspan={3} icon={IconPlusLarge}>
{__("Link measure")}
{t("linkedMeasuresCard.actions.link")}
</TrButton>
</LinkedMeasureDialog>
)}
@@ -188,7 +189,9 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
className="mt-3 mx-auto"
icon={IconChevronDown}
>
{sprintf(__("Show %s more"), props.measures.length - limit)}
{t("linkedMeasuresCard.actions.showMore", {
count: props.measures.length - limit,
})}
</Button>
)}
</Wrapper>
@@ -202,7 +205,7 @@ function MeasureRow(props: {
}) {
const measure = useFragment(linkedMeasureFragment, props.measure);
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Tr to={`/organizations/${organizationId}/measures/${measure.id}`}>
@@ -217,7 +220,7 @@ function MeasureRow(props: {
onClick={() => props.onClick(measure.id)}
icon={IconTrashCan}
>
{__("Unlink")}
{t("linkedMeasuresCard.actions.unlink")}
</Button>
</Td>
)}

25
apps/console/src/components/measures/LinkedMeasuresDialog.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -35,6 +34,7 @@ import {
Spinner,
} from "@probo/ui";
import { type ReactNode, Suspense, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { usePaginatedMeasures } from "#/hooks/graph/usePaginatedMeasures";
import { useOrganizationId } from "#/hooks/useOrganizationId";
@@ -49,16 +49,16 @@ type Props = {
};
export function LinkedMeasureDialog({ children, ...props }: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Dialog trigger={children} title={__("Link measures")}>
<Dialog trigger={children} title={t("linkedMeasuresDialog.title")}>
<DialogContent>
<Suspense fallback={<Spinner centered />}>
<LinkedMeasuresDialogContent {...props} />
</Suspense>
</DialogContent>
<DialogFooter exitLabel={__("Close")} />
<DialogFooter exitLabel={t("linkedMeasuresDialog.actions.close")} />
</Dialog>
);
}
@@ -67,10 +67,13 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
const organizationId = useOrganizationId();
const { data, loadNext, hasNext, isLoadingNext }
= usePaginatedMeasures(organizationId);
const { __ } = useTranslate();
const { t } = useTranslation();
const [search, setSearch] = useState("");
const [category, setCategory] = useState<string | null>(null);
const measures = useMemo(() => data.measures?.edges?.map(edge => edge.node) ?? [], [data.measures]);
const measures = useMemo(
() => data.measures?.edges?.map(edge => edge.node) ?? [],
[data.measures],
);
const linkedIds = useMemo(() => {
return new Set(props.linkedMeasures?.map(m => m.id) ?? []);
}, [props.linkedMeasures]);
@@ -94,12 +97,12 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
<div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search measures...")}
placeholder={t("linkedMeasuresDialog.searchPlaceholder")}
onValueChange={setSearch}
/>
<Select
value={category ?? ""}
placeholder={__("All categories")}
placeholder={t("linkedMeasuresDialog.allCategories")}
onValueChange={setCategory}
className="max-w-[180px]"
>
@@ -141,7 +144,7 @@ type RowProps = {
};
function MeasureRow(props: RowProps) {
const { __ } = useTranslate();
const { t } = useTranslation();
const isLinked = props.linkedMeasures.has(props.measure.id);
const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -163,7 +166,9 @@ function MeasureRow(props: RowProps) {
<span>
<IconComponent size={16} />
{" "}
{isLinked ? __("Unlink") : __("Link")}
{isLinked
? t("linkedMeasuresDialog.actions.unlink")
: t("linkedMeasuresDialog.actions.link")}
</span>
</Button>
</button>

39
apps/console/src/components/obligations/LinkedObligationsCard.tsx
View File

@@ -21,9 +21,7 @@
import {
getObligationStatusLabel,
getObligationStatusVariant,
sprintf,
} from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -41,6 +39,7 @@ import {
} from "@probo/ui";
import { clsx } from "clsx";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -84,7 +83,7 @@ type Props<Params> = {
};
export function LinkedObligationsCard<Params>(props: Props<Params>) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [limit, setLimit] = useState<number | null>(
props.variant === "card" ? 4 : null,
);
@@ -126,7 +125,9 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
<Wrapper padded className="space-y-[10px]">
{variant === "card" && (
<div className="flex justify-between">
<div className="text-lg font-semibold">{__("Obligations")}</div>
<div className="text-lg font-semibold">
{t("linkedObligationsCard.title")}
</div>
{!props.readOnly && (
<LinkedObligationDialog
connectionId={props.connectionId}
@@ -136,7 +137,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<Button variant="tertiary" icon={IconPlusLarge}>
{__("Link obligation")}
{t("linkedObligationsCard.actions.link")}
</Button>
</LinkedObligationDialog>
)}
@@ -145,10 +146,10 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
<Table className={clsx(variant === "card" && "bg-invert")}>
<Thead>
<Tr>
<Th>{__("Area")}</Th>
<Th>{__("Source")}</Th>
<Th>{__("Status")}</Th>
<Th>{__("Owner")}</Th>
<Th>{t("linkedObligationsCard.columns.area")}</Th>
<Th>{t("linkedObligationsCard.columns.source")}</Th>
<Th>{t("linkedObligationsCard.columns.status")}</Th>
<Th>{t("linkedObligationsCard.columns.owner")}</Th>
{!props.readOnly && <Th></Th>}
</Tr>
</Thead>
@@ -159,7 +160,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
colSpan={props.readOnly ? 4 : 5}
className="text-center text-txt-secondary"
>
{__("No obligations linked")}
{t("linkedObligationsCard.empty")}
</Td>
</Tr>
)}
@@ -180,7 +181,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
onUnlink={onDetach}
>
<TrButton colspan={5} icon={IconPlusLarge}>
{__("Link obligation")}
{t("linkedObligationsCard.actions.link")}
</TrButton>
</LinkedObligationDialog>
)}
@@ -193,7 +194,9 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
className="mt-3 mx-auto"
icon={IconChevronDown}
>
{sprintf(__("Show %s more"), props.obligations.length - limit)}
{t("linkedObligationsCard.actions.showMore", {
count: props.obligations.length - limit,
})}
</Button>
)}
</Wrapper>
@@ -205,7 +208,7 @@ function ObligationRow(props: {
onClick: (obligationId: string) => void;
readOnly?: boolean;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const obligation = useFragment(linkedObligationFragment, props.obligation);
const organizationId = useOrganizationId();
@@ -217,18 +220,20 @@ function ObligationRow(props: {
return (
<Tr to={detailsUrl}>
<Td>{obligation.area || __("No area specified")}</Td>
<Td>{obligation.source || __("No source specified")}</Td>
<Td>{obligation.area || t("linkedObligationsCard.noArea")}</Td>
<Td>{obligation.source || t("linkedObligationsCard.noSource")}</Td>
<Td>
<Badge variant={getObligationStatusVariant(obligation.status)}>
{getObligationStatusLabel(obligation.status)}
</Badge>
</Td>
<Td>{obligation.owner?.fullName || __("Unassigned")}</Td>
<Td>
{obligation.owner?.fullName || t("linkedObligationsCard.unassigned")}
</Td>
{!props.readOnly && (
<Td noLink width={50} className="text-end">
<Button variant="secondary" icon={IconTrashCan} onClick={onDetach}>
{__("Unlink")}
{t("linkedObligationsCard.actions.unlink")}
</Button>
</Td>
)}

37
apps/console/src/components/obligations/LinkedObligationsDialog.tsx
View File

@@ -22,7 +22,6 @@ import {
getObligationStatusLabel,
getObligationStatusVariant,
} from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -37,6 +36,7 @@ import {
Spinner,
} from "@probo/ui";
import { type ReactNode, Suspense, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -102,16 +102,16 @@ type Props = {
};
export function LinkedObligationDialog({ children, ...props }: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Dialog trigger={children} title={__("Link obligations")}>
<Dialog trigger={children} title={t("linkedObligationsDialog.title")}>
<DialogContent>
<Suspense fallback={<Spinner centered />}>
<LinkedObligationsDialogContent {...props} />
</Suspense>
</DialogContent>
<DialogFooter exitLabel={__("Close")} />
<DialogFooter exitLabel={t("linkedObligationsDialog.actions.close")} />
</Dialog>
);
}
@@ -125,12 +125,14 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
},
{ fetchPolicy: "network-only" },
);
const { data, loadNext, hasNext, isLoadingNext }
= usePaginationFragment<LinkedObligationsDialogQuery_fragment, LinkedObligationsDialogFragment$key>(
obligationsFragment,
query.organization as LinkedObligationsDialogFragment$key,
);
const { __ } = useTranslate();
const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment<
LinkedObligationsDialogQuery_fragment,
LinkedObligationsDialogFragment$key
>(
obligationsFragment,
query.organization as LinkedObligationsDialogFragment$key,
);
const { t } = useTranslation();
const [search, setSearch] = useState("");
const obligations = useMemo(
() => data.obligations?.edges?.map(edge => edge.node) ?? [],
@@ -156,7 +158,7 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
<div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search obligations...")}
placeholder={t("linkedObligationsDialog.searchPlaceholder")}
onValueChange={setSearch}
/>
</div>
@@ -191,7 +193,7 @@ function ObligationRow(props: {
onUnlink: (obligationId: string) => void;
disabled?: boolean;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const isLinked = props.linkedObligations.has(props.obligation.id);
const onToggle = () => {
@@ -208,11 +210,12 @@ function ObligationRow(props: {
<div className="flex items-center gap-3">
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-txt-primary truncate">
{props.obligation.area || __("No area specified")}
{props.obligation.source || __("No source specified")}
{props.obligation.area || t("linkedObligationsDialog.noArea")}
{props.obligation.source || t("linkedObligationsDialog.noSource")}
</div>
<div className="text-xs text-txt-secondary">
{props.obligation.owner?.fullName || __("Unassigned")}
{props.obligation.owner?.fullName
|| t("linkedObligationsDialog.unassigned")}
</div>
</div>
<Badge variant={getObligationStatusVariant(props.obligation.status)}>
@@ -227,7 +230,9 @@ function ObligationRow(props: {
disabled={props.disabled}
className="ml-6"
>
{isLinked ? __("Unlink") : __("Link")}
{isLinked
? t("linkedObligationsDialog.actions.unlink")
: t("linkedObligationsDialog.actions.link")}
</Button>
</div>
);

23
apps/console/src/components/organizations/DeleteOrganizationDialog.tsx
View File

@@ -18,8 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
@@ -30,6 +28,7 @@ import {
useDialogRef,
} from "@probo/ui";
import { useState } from "react";
import { useTranslation } from "react-i18next";
type DeleteOrganizationDialogProps = {
children: React.ReactNode;
@@ -44,7 +43,7 @@ export function DeleteOrganizationDialog({
onConfirm,
isDeleting = false,
}: DeleteOrganizationDialogProps) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [inputValue, setInputValue] = useState("");
const dialogRef = useDialogRef();
const isConfirmDisabled = inputValue !== organizationName || isDeleting;
@@ -61,25 +60,21 @@ export function DeleteOrganizationDialog({
className="max-w-lg"
ref={dialogRef}
trigger={children}
title={__("Delete Organization")}
title={t("deleteOrganizationDialog.title")}
>
<DialogContent padded className="space-y-4">
<p className="text-txt-secondary text-sm">
{sprintf(
__("This will permanently delete the organization %s and all its data."),
organizationName,
)}
{t("deleteOrganizationDialog.description", { organizationName })}
</p>
<p className="text-red-600 text-sm font-medium">
{__("This action cannot be undone.")}
{t("deleteOrganizationDialog.warning")}
</p>
<Field
label={sprintf(
__("To confirm deletion, type \"%s\" below:"),
label={t("deleteOrganizationDialog.confirmationLabel", {
organizationName,
)}
})}
type="text"
value={inputValue}
onChange={e => setInputValue(e.target.value)}
@@ -96,7 +91,9 @@ export function DeleteOrganizationDialog({
onClick={handleConfirm}
disabled={isConfirmDisabled}
>
{isDeleting ? __("Deleting...") : __("Delete Organization")}
{isDeleting
? t("deleteOrganizationDialog.actions.deleting")
: t("deleteOrganizationDialog.actions.delete")}
</Button>
</DialogFooter>
</Dialog>

20
apps/console/src/components/risks/LinkedRisksCard.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
IconTrashCan,
@@ -31,6 +30,7 @@ import {
Tr,
TrButton,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -77,7 +77,7 @@ type Props<Params> = {
* Reusable component that displays a list of linked risks
*/
export function LinkedRisksCard<Params>(props: Props<Params>) {
const { __ } = useTranslate();
const { t } = useTranslation();
const onAttach = (riskId: string) => {
props.onAttach({
@@ -108,9 +108,9 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
<Table>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Initial Risk")}</Th>
<Th>{__("Residual Risk")}</Th>
<Th>{t("linkedRisksCard.columns.name")}</Th>
<Th>{t("linkedRisksCard.columns.initialRisk")}</Th>
<Th>{t("linkedRisksCard.columns.residualRisk")}</Th>
{!props.readOnly && <Th></Th>}
</Tr>
</Thead>
@@ -121,7 +121,7 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
colSpan={props.readOnly ? 3 : 4}
className="text-center text-txt-secondary"
>
{__("No risks linked")}
{t("linkedRisksCard.empty")}
</Td>
</Tr>
)}
@@ -141,7 +141,9 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
onLink={onAttach}
onUnlink={onDetach}
>
<TrButton colspan={4}>{__("Link risk")}</TrButton>
<TrButton colspan={4}>
{t("linkedRisksCard.actions.link")}
</TrButton>
</LinkedRisksDialog>
)}
</Tbody>
@@ -157,7 +159,7 @@ function RiskRow(props: {
}) {
const risk = useFragment(linkedRiskFragment, props.risk);
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Tr to={`/organizations/${organizationId}/risks/${risk.id}`}>
@@ -175,7 +177,7 @@ function RiskRow(props: {
onClick={() => props.onClick(risk.id)}
icon={IconTrashCan}
>
{__("Unlink")}
{t("linkedRisksCard.actions.unlink")}
</Button>
</Td>
)}

20
apps/console/src/components/risks/LinkedRisksDialog.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -34,6 +33,7 @@ import {
Spinner,
} from "@probo/ui";
import { type ReactNode, Suspense, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLazyLoadQuery } from "react-relay";
import { graphql } from "relay-runtime";
@@ -70,16 +70,16 @@ type Props = {
};
export function LinkedRisksDialog({ children, ...props }: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Dialog trigger={children} title={__("Link risks")}>
<Dialog trigger={children} title={t("linkedRisksDialog.title")}>
<DialogContent>
<Suspense fallback={<Spinner centered />}>
<LinkedRisksDialogContent {...props} />
</Suspense>
</DialogContent>
<DialogFooter exitLabel={__("Close")} />
<DialogFooter exitLabel={t("linkedRisksDialog.actions.close")} />
</Dialog>
);
}
@@ -89,7 +89,7 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
const data = useLazyLoadQuery<LinkedRisksDialogQuery>(risksQuery, {
organizationId,
});
const { __ } = useTranslate();
const { t } = useTranslation();
const [search, setSearch] = useState("");
const [category, setCategory] = useState<string | null>(null);
const risks = useMemo(
@@ -119,12 +119,12 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
<div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search risks...")}
placeholder={t("linkedRisksDialog.searchPlaceholder")}
onValueChange={setSearch}
/>
<Select
value={category ?? ""}
placeholder={__("All categories")}
placeholder={t("linkedRisksDialog.allCategories")}
onValueChange={setCategory}
className="max-w-[180px]"
>
@@ -165,7 +165,7 @@ type RowProps = {
};
function RiskRow(props: RowProps) {
const { __ } = useTranslate();
const { t } = useTranslation();
const isLinked = props.linkedRisks.has(props.risk.id);
const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -187,7 +187,9 @@ function RiskRow(props: RowProps) {
<span>
<IconComponent size={16} />
{" "}
{isLinked ? __("Unlink") : __("Link")}
{isLinked
? t("linkedRisksDialog.actions.unlink")
: t("linkedRisksDialog.actions.link")}
</span>
</Button>
</button>

6
apps/console/src/components/skeletons/ControlSkeleton.tsx
View File

@@ -18,21 +18,21 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { ActionDropdown, Button, IconPencil, Skeleton } from "@probo/ui";
import { useTranslation } from "react-i18next";
/**
* Skeleton state for the framework control panel
*/
export function ControlSkeleton() {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<div className="space-y-6">
<div className="flex justify-between">
<Skeleton style={{ width: 72, height: 34 }} className="mb-3" />
<div className="flex gap-2">
<Button icon={IconPencil} variant="secondary" disabled>
{__("Edit control")}
{t("controlSkeleton.actions.edit")}
</Button>
<ActionDropdown variant="secondary" />
</div>

8
apps/console/src/components/skeletons/RisksPageSkeleton.tsx
View File

@@ -18,16 +18,16 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Button, IconPlusLarge, PageHeader, Skeleton } from "@probo/ui";
import { useTranslation } from "react-i18next";
export function RisksPageSkeleton() {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<div className="space-y-6">
<PageHeader title={__("Risks")}>
<PageHeader title={t("risksPageSkeleton.title")}>
<Button icon={IconPlusLarge} disabled>
{__("New Risk")}
{t("risksPageSkeleton.actions.create")}
</Button>
</PageHeader>
<div className="grid grid-cols-2 gap-4">

74
apps/console/src/components/statements-of-applicability/LinkedStatementsOfApplicabilityCard.tsx
View File

@@ -18,8 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -37,6 +35,7 @@ import {
} from "@probo/ui";
import { clsx } from "clsx";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -46,18 +45,18 @@ import { useOrganizationId } from "#/hooks/useOrganizationId";
import { LinkedStatementsOfApplicabilityDialog } from "./LinkedStatementsOfApplicabilityDialog";
const linkedStatementOfApplicabilityFragment = graphql`
fragment LinkedStatementsOfApplicabilityCardFragment on ApplicabilityStatement {
id
statementOfApplicability {
id
name
}
control {
id
}
applicability
justification
fragment LinkedStatementsOfApplicabilityCardFragment on ApplicabilityStatement {
id
statementOfApplicability {
id
name
}
control {
id
}
applicability
justification
}
`;
type AttachMutation<Params> = (p: {
@@ -94,8 +93,10 @@ type Props<Params> = {
readOnly?: boolean;
};
export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>) {
const { __ } = useTranslate();
export function LinkedStatementsOfApplicabilityCard<Params>(
props: Props<Params>,
) {
const { t } = useTranslation();
const [limit, setLimit] = useState<number | null>(
props.variant === "card" ? 4 : null,
@@ -171,7 +172,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
{variant === "card" && (
<div className="flex justify-between">
<div className="text-lg font-semibold">
{__("Statements of Applicability")}
{t("linkedStatementsOfApplicabilityCard.title")}
</div>
{!props.readOnly && (
<LinkedStatementsOfApplicabilityDialog
@@ -182,7 +183,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
onUnlink={onDetach}
>
<Button variant="tertiary" icon={IconPlusLarge}>
{__("Link statement of applicability")}
{t("linkedStatementsOfApplicabilityCard.actions.link")}
</Button>
</LinkedStatementsOfApplicabilityDialog>
)}
@@ -191,9 +192,13 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
<Table className={clsx(variant === "card" && "bg-invert")}>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Applicability")}</Th>
<Th>{__("Justification")}</Th>
<Th>{t("linkedStatementsOfApplicabilityCard.columns.name")}</Th>
<Th>
{t("linkedStatementsOfApplicabilityCard.columns.applicability")}
</Th>
<Th>
{t("linkedStatementsOfApplicabilityCard.columns.justification")}
</Th>
{!props.readOnly && <Th></Th>}
</Tr>
</Thead>
@@ -204,7 +209,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
colSpan={props.readOnly ? 3 : 4}
className="text-center text-txt-secondary"
>
{__("No statements of applicability linked")}
{t("linkedStatementsOfApplicabilityCard.empty")}
</Td>
</Tr>
)}
@@ -225,7 +230,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
onUnlink={onDetach}
>
<TrButton colspan={4} icon={IconPlusLarge}>
{__("Link statement of applicability")}
{t("linkedStatementsOfApplicabilityCard.actions.link")}
</TrButton>
</LinkedStatementsOfApplicabilityDialog>
)}
@@ -237,10 +242,9 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
icon={IconChevronDown}
onClick={() => setLimit(null)}
>
{sprintf(
__("Show %d more"),
props.statementsOfApplicability.length - limit,
)}
{t("linkedStatementsOfApplicabilityCard.actions.showMore", {
count: props.statementsOfApplicability.length - limit,
})}
</Button>
)}
</Wrapper>
@@ -256,10 +260,7 @@ function LinkedInfoExtractor(props: {
}) {
const { onExtracted, fragment } = props;
const data = useFragment(
linkedStatementOfApplicabilityFragment,
fragment,
);
const data = useFragment(linkedStatementOfApplicabilityFragment, fragment);
useEffect(() => {
onExtracted({
@@ -283,7 +284,7 @@ function StatementOfApplicabilityRow(props: {
props.statementOfApplicability,
);
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Tr
@@ -293,8 +294,8 @@ function StatementOfApplicabilityRow(props: {
<Td>
<Badge variant={soa.applicability ? "success" : "danger"}>
{soa.applicability
? __("Applicable")
: __("Not Applicable")}
? t("linkedStatementsOfApplicabilityCard.applicable")
: t("linkedStatementsOfApplicabilityCard.notApplicable")}
</Badge>
</Td>
<Td>{soa.justification || "-"}</Td>
@@ -303,13 +304,10 @@ function StatementOfApplicabilityRow(props: {
<Button
variant="secondary"
onClick={() =>
props.onClick(
soa.statementOfApplicability.id,
soa.control.id,
)}
props.onClick(soa.statementOfApplicability.id, soa.control.id)}
icon={IconTrashCan}
>
{__("Unlink")}
{t("linkedStatementsOfApplicabilityCard.actions.unlink")}
</Button>
</Td>
)}

35
apps/console/src/components/statements-of-applicability/LinkedStatementsOfApplicabilityDialog.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Badge,
Button,
@@ -30,6 +29,7 @@ import {
} from "@probo/ui";
import type { ReactNode } from "react";
import { Suspense, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLazyLoadQuery } from "react-relay";
import { graphql } from "relay-runtime";
@@ -75,13 +75,14 @@ export function LinkedStatementsOfApplicabilityDialog({
children,
...props
}: Props) {
const { t } = useTranslation();
const dialogRef = useRef<{ open: () => void; close: () => void }>(null);
return (
<Dialog
ref={dialogRef}
trigger={children}
title="Link Statement of Applicability"
title={t("linkedStatementsOfApplicabilityDialog.title")}
>
<Suspense fallback={<div>Loading...</div>}>
<LinkedStatementsOfApplicabilityDialogContent
@@ -96,7 +97,7 @@ export function LinkedStatementsOfApplicabilityDialog({
function LinkedStatementsOfApplicabilityDialogContent(
props: Omit<Props, "children"> & { onClose: () => void },
) {
const { __ } = useTranslate();
const { t } = useTranslation();
const organizationId = useOrganizationId();
const [selectedSOA, setSelectedSOA] = useState<{
id: string;
@@ -163,12 +164,10 @@ function LinkedStatementsOfApplicabilityDialogContent(
? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<div className="text-txt-secondary text-base mb-2">
{__("No statements of applicability available")}
{t("linkedStatementsOfApplicabilityDialog.empty.title")}
</div>
<div className="text-txt-tertiary text-sm">
{__(
"Create a statement of applicability first to link it to this control",
)}
{t("linkedStatementsOfApplicabilityDialog.empty.description")}
</div>
</div>
)
@@ -176,7 +175,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
? (
<div className="space-y-2">
<div className="text-sm font-medium mb-2">
{__("Select a statement of applicability:")}
{t("linkedStatementsOfApplicabilityDialog.select")}
</div>
{statementsOfApplicability.map((soa) => {
const isLinked = linkedSOAIds.has(soa.id);
@@ -197,7 +196,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
onClick={e => e.stopPropagation()}
>
<Badge variant="success">
{__("Linked")}
{t("linkedStatementsOfApplicabilityDialog.linked")}
</Badge>
<Button
variant="danger"
@@ -205,7 +204,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
handleUnlink(soa.id)}
disabled={props.disabled}
>
{__("Unlink")}
{t("linkedStatementsOfApplicabilityDialog.actions.unlink")}
</Button>
</div>
)
@@ -220,7 +219,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
<div className="flex items-center justify-between">
<div>
<div className="text-sm text-txt-secondary mb-1">
{__("Selected:")}
{t("linkedStatementsOfApplicabilityDialog.selected")}
</div>
<div className="text-lg font-medium">
{selectedSOA.name}
@@ -230,7 +229,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
variant="tertiary"
onClick={() => setSelectedSOA(null)}
>
{__("Change")}
{t("linkedStatementsOfApplicabilityDialog.actions.change")}
</Button>
</div>
@@ -242,16 +241,16 @@ function LinkedStatementsOfApplicabilityDialogContent(
setApplicability(checked)}
/>
<span className="font-medium">
{__("Applicable")}
{t("linkedStatementsOfApplicabilityDialog.applicable")}
</span>
</label>
<div>
<label className="text-sm font-medium mb-1 block">
{__("Justification (optional)")}
{t("linkedStatementsOfApplicabilityDialog.justification.label")}
</label>
<Textarea
placeholder={__("Add a justification...")}
placeholder={t("linkedStatementsOfApplicabilityDialog.justification.placeholder")}
value={justification}
onChange={e =>
setJustification(e.target.value)}
@@ -262,7 +261,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
</div>
)}
</DialogContent>
<DialogFooter exitLabel={__("Close")}>
<DialogFooter exitLabel={t("linkedStatementsOfApplicabilityDialog.actions.close")}>
{selectedSOA
? (
<>
@@ -270,14 +269,14 @@ function LinkedStatementsOfApplicabilityDialogContent(
variant="secondary"
onClick={() => setSelectedSOA(null)}
>
{__("Back")}
{t("linkedStatementsOfApplicabilityDialog.actions.back")}
</Button>
<Button
variant="primary"
onClick={handleLink}
disabled={props.disabled}
>
{__("Link")}
{t("linkedStatementsOfApplicabilityDialog.actions.link")}
</Button>
</>
)

21
apps/console/src/components/table/GraphQLCell.tsx
View File

@@ -19,13 +19,13 @@
// SOFTWARE.
import { useStateWithRef } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { EditableCell, selectCell, SelectValue, Spinner } from "@probo/ui";
import { useEditableCellRef } from "@probo/ui/src/Molecules/Table/EditableCell";
import { useEditableRowContext } from "@probo/ui/src/Molecules/Table/EditableRow";
import { getKey } from "@probo/ui/src/Molecules/Table/utils";
import { Command } from "cmdk";
import { type ReactNode, Suspense } from "react";
import { useTranslation } from "react-i18next";
import { useLazyLoadQuery } from "react-relay";
import type {
GraphQLTaggedNode,
@@ -44,14 +44,23 @@ type Props<Q extends OperationType, T> = {
| { defaultValue: T[]; multiple: true }
);
export function GraphQLCell<Q extends OperationType, T extends NonNullable<unknown>>(props: Props<Q, T>) {
export function GraphQLCell<
Q extends OperationType,
T extends NonNullable<unknown>,
>(props: Props<Q, T>) {
const [value, setValue, valueRef] = useStateWithRef<T | T[] | undefined>(
props.defaultValue,
);
const cellRef = useEditableCellRef();
const { __ } = useTranslate();
const filteredValue = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : [];
const usedKeys = new Set<string>(filteredValue.map(getKey).filter(Boolean) as string[]);
const { t } = useTranslation();
const filteredValue = Array.isArray(value)
? value.filter(Boolean)
: value
? [value]
: [];
const usedKeys = new Set<string>(
filteredValue.map(getKey).filter(Boolean) as string[],
);
const { onUpdate } = useEditableRowContext();
const onSelect = (item: T) => {
@@ -104,7 +113,7 @@ export function GraphQLCell<Q extends OperationType, T extends NonNullable<unkno
{props.multiple && (
<Command.Input
className={classNames.input()}
placeholder={__("Search")}
placeholder={t("graphQLCell.searchPlaceholder")}
/>
)}
<Command.List>

6
apps/console/src/components/table/SortableDataTable.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
CellHead,
@@ -35,6 +34,7 @@ import {
useContext,
useState,
} from "react";
import { useTranslation } from "react-i18next";
import type { LoadMoreFn } from "react-relay";
import type { OperationType } from "relay-runtime";
@@ -75,7 +75,7 @@ export function SortableDataTable({
isLoadingNext?: boolean;
pageSize?: number;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [order, setOrder] = useState(defaultOrder);
const onOrderChange = (o: Order) => {
startTransition(() => {
@@ -95,7 +95,7 @@ export function SortableDataTable({
disabled={isLoadingNext}
icon={isLoadingNext ? Spinner : IconChevronDown}
>
{__("Show more")}
{t("sortableDataTable.actions.showMore")}
</Button>
)}
</div>

44
apps/console/src/components/tasks/TaskFormDialog.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { formatDatetime } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
@@ -40,6 +39,7 @@ import {
import { Breadcrumb } from "@probo/ui";
import { type ReactNode, useEffect } from "react";
import { Controller } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useFragment, useRelayEnvironment } from "react-relay";
import { graphql } from "relay-runtime";
import { z } from "zod";
@@ -143,7 +143,7 @@ type Props = {
export default function TaskFormDialog(props: Props) {
const { children, connection, ref, task: taskKey, measureId, onCompleted } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const newRef = useDialogRef();
const dialogRef = ref ?? newRef;
const organizationId = useOrganizationId();
@@ -152,8 +152,8 @@ export default function TaskFormDialog(props: Props) {
const [mutate] = useMutationWithToasts(
task ? taskUpdateMutation : taskCreateMutation,
{
successMessage: __(`Task ${task ? "updated" : "created"} successfully.`),
errorMessage: __(`Failed to ${task ? "update" : "create"} task`),
successMessage: t(task ? "taskFormDialog.messages.updated" : "taskFormDialog.messages.created"),
errorMessage: t(task ? "taskFormDialog.errors.update" : "taskFormDialog.errors.create"),
},
);
@@ -246,7 +246,7 @@ export default function TaskFormDialog(props: Props) {
trigger={children}
title={(
<Breadcrumb
items={[__("Tasks"), isUpdating ? __("Edit Task") : __("New Task")]}
items={[t("taskFormDialog.breadcrumb.tasks"), isUpdating ? t("taskFormDialog.breadcrumb.edit") : t("taskFormDialog.breadcrumb.new")]}
/>
)}
>
@@ -257,23 +257,23 @@ export default function TaskFormDialog(props: Props) {
id="title"
required
variant="title"
placeholder={__("Task title")}
placeholder={t("taskFormDialog.fields.title.placeholder")}
{...register("name")}
/>
<Textarea
id="content"
variant="ghost"
autogrow
placeholder={__("Add description")}
placeholder={t("taskFormDialog.fields.description.placeholder")}
{...register("description")}
/>
</div>
{/* Properties form */}
<div className="py-5 px-6 bg-subtle">
<Label>{__("Properties")}</Label>
<Label>{t("taskFormDialog.properties")}</Label>
{isUpdating && (
<PropertyRow
label={__("State")}
label={t("taskFormDialog.fields.state.label")}
error={"state" in formState.errors ? formState.errors.state?.message : undefined}
>
<Controller
@@ -287,19 +287,19 @@ export default function TaskFormDialog(props: Props) {
<Option value="TODO">
<span className="flex items-center gap-2">
<TaskStateIcon state="TODO" />
{__("To do")}
{t("taskFormDialog.states.todo")}
</span>
</Option>
<Option value="IN_PROGRESS">
<span className="flex items-center gap-2">
<TaskStateIcon state="IN_PROGRESS" />
{__("In progress")}
{t("taskFormDialog.states.inProgress")}
</span>
</Option>
<Option value="DONE">
<span className="flex items-center gap-2">
<TaskStateIcon state="DONE" />
{__("Done")}
{t("taskFormDialog.states.done")}
</span>
</Option>
</Select>
@@ -308,7 +308,7 @@ export default function TaskFormDialog(props: Props) {
</PropertyRow>
)}
<PropertyRow
label={__("Priority")}
label={t("taskFormDialog.fields.priority.label")}
error={formState.errors.priority?.message}
>
<Controller
@@ -322,25 +322,25 @@ export default function TaskFormDialog(props: Props) {
<Option value="URGENT">
<span className="flex items-center gap-2">
<PriorityLevel level="URGENT" />
{__("Urgent")}
{t("taskFormDialog.priorities.urgent")}
</span>
</Option>
<Option value="HIGH">
<span className="flex items-center gap-2">
<PriorityLevel level="HIGH" />
{__("High")}
{t("taskFormDialog.priorities.high")}
</span>
</Option>
<Option value="MEDIUM">
<span className="flex items-center gap-2">
<PriorityLevel level="MEDIUM" />
{__("Medium")}
{t("taskFormDialog.priorities.medium")}
</span>
</Option>
<Option value="LOW">
<span className="flex items-center gap-2">
<PriorityLevel level="LOW" />
{__("Low")}
{t("taskFormDialog.priorities.low")}
</span>
</Option>
</Select>
@@ -348,7 +348,7 @@ export default function TaskFormDialog(props: Props) {
/>
</PropertyRow>
<PropertyRow
label={__("Assigned to")}
label={t("taskFormDialog.fields.assignedTo.label")}
error={formState.errors.assignedToId?.message}
>
<PeopleSelectField
@@ -360,7 +360,7 @@ export default function TaskFormDialog(props: Props) {
</PropertyRow>
{showMeasure && (
<PropertyRow
label={__("Measure")}
label={t("taskFormDialog.fields.measure.label")}
error={formState.errors.measureId?.message}
>
<MeasureSelectField
@@ -372,7 +372,7 @@ export default function TaskFormDialog(props: Props) {
</PropertyRow>
)}
<PropertyRow
label={__("Time estimate")}
label={t("taskFormDialog.fields.timeEstimate.label")}
error={formState.errors.timeEstimate?.message}
>
<Controller
@@ -388,7 +388,7 @@ export default function TaskFormDialog(props: Props) {
/>
</PropertyRow>
<PropertyRow
label={__("Deadline")}
label={t("taskFormDialog.fields.deadline.label")}
error={formState.errors.deadline?.message}
>
<Input id="deadline" type="date" {...register("deadline")} />
@@ -397,7 +397,7 @@ export default function TaskFormDialog(props: Props) {
</DialogContent>
<DialogFooter>
<Button type="submit">
{isUpdating ? __("Update task") : __("Create task")}
{isUpdating ? t("taskFormDialog.actions.update") : t("taskFormDialog.actions.create")}
</Button>
</DialogFooter>
</form>

43
apps/console/src/components/tasks/TasksCard.tsx
View File

@@ -18,8 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { formatDate, formatDuration, formatError, promisifyMutation } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { formatError, promisifyMutation } from "@probo/helpers";
import { dateFormat, formatDuration } from "@probo/i18n";
import {
Button,
Card,
@@ -38,6 +38,7 @@ import {
useToast,
} from "@probo/ui";
import { Fragment, type ReactNode, useRef, useState, useTransition } from "react";
import { useTranslation } from "react-i18next";
import {
graphql,
readInlineData,
@@ -185,7 +186,7 @@ const updateRankMutation = graphql`
`;
export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
const hash = useLocation().hash.replace("#", "");
const [, startTransition] = useTransition();
@@ -205,13 +206,13 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
};
const stateHashes = [
{ hash: "todo", label: __("To do"), state: "TODO" },
{ hash: "in-progress", label: __("In progress"), state: "IN_PROGRESS" },
{ hash: "done", label: __("Done"), state: "DONE" },
{ hash: "todo", label: t("tasksCard.states.todo"), state: "TODO" },
{ hash: "in-progress", label: t("tasksCard.states.inProgress"), state: "IN_PROGRESS" },
{ hash: "done", label: t("tasksCard.states.done"), state: "DONE" },
] as const;
const hashes = [
{ hash: "", label: __("All"), state: null },
{ hash: "", label: t("tasksCard.states.all"), state: null },
...stateHashes,
] as const;
@@ -346,8 +347,8 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
onCompleted: (_, errors) => {
if (errors?.length) {
toast({
title: __("Error"),
description: formatError(__("Failed to reorder task."), errors),
title: t("tasksCard.error.title"),
description: formatError(t("tasksCard.error.reorder"), errors),
variant: "error",
});
}
@@ -365,7 +366,7 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
onError: () => {
droppedRef.current = false;
resetDragState();
toast({ title: __("Error"), description: __("Failed to reorder task."), variant: "error" });
toast({ title: t("tasksCard.error.title"), description: t("tasksCard.error.reorder"), variant: "error" });
},
});
};
@@ -413,7 +414,7 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
<div className="space-y-6">
{tasks.length === 0
? (
<p className="text-center py-6 text-txt-secondary">{__("No tasks")}</p>
<p className="text-center py-6 text-txt-secondary">{t("tasksCard.empty")}</p>
)
: (
<Card>
@@ -463,8 +464,8 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
{canDrag && filteredTasks.length > 1 && (
<p className="text-sm text-txt-tertiary">
{hash === ""
? __("Drag and drop to reorder tasks or move them between states")
: __("Drag and drop to reorder tasks")}
? t("tasksCard.dragInstructions.all")
: t("tasksCard.dragInstructions.state")}
</p>
)}
</div>
@@ -521,7 +522,7 @@ const deleteMutation = graphql`
function TaskRow(props: TaskRowProps) {
const organizationId = useOrganizationId();
const dialogRef = useDialogRef();
const { __ } = useTranslate();
const { t, i18n } = useTranslation();
const confirm = useConfirm();
const [deleteTask] = useMutation<TasksCardDeleteMutation>(deleteMutation);
const params = useParams<{ measureId?: string }>();
@@ -542,8 +543,8 @@ function TaskRow(props: TaskRowProps) {
icon: typeof IconCircleProgress;
className: string;
}> = {
TODO: { state: "IN_PROGRESS", label: __("Move to In progress"), icon: IconCircleProgress, className: "text-txt-warning" },
IN_PROGRESS: { state: "DONE", label: __("Move to Done"), icon: IconCircleCheck, className: "text-txt-accent" },
TODO: { state: "IN_PROGRESS", label: t("tasksCard.actions.moveToInProgress"), icon: IconCircleProgress, className: "text-txt-warning" },
IN_PROGRESS: { state: "DONE", label: t("tasksCard.actions.moveToDone"), icon: IconCircleCheck, className: "text-txt-accent" },
};
const onAdvance = async () => {
@@ -581,7 +582,7 @@ function TaskRow(props: TaskRowProps) {
},
}),
{
message: "Are you sure you want to delete this task?",
message: t("tasksCard.deleteConfirmation"),
},
);
};
@@ -642,11 +643,11 @@ function TaskRow(props: TaskRowProps) {
</span>
)}
{task.timeEstimate && (
<span>{formatDuration(task.timeEstimate, __)}</span>
<span>{formatDuration(task.timeEstimate, t)}</span>
)}
{task.deadline && (
<time dateTime={task.deadline}>
{formatDate(task.deadline)}
{dateFormat(i18n.language, task.deadline)}
</time>
)}
</div>
@@ -677,7 +678,7 @@ function TaskRow(props: TaskRowProps) {
<Button
variant="secondary"
icon={IconPencil}
title={__("Edit")}
title={t("tasksCard.actions.edit")}
onClick={() => dialogRef.current?.open()}
/>
)}
@@ -685,7 +686,7 @@ function TaskRow(props: TaskRowProps) {
<Button
variant="danger"
icon={IconTrashCan}
title={__("Delete")}
title={t("tasksCard.actions.delete")}
onClick={onDelete}
/>
)}

8
apps/console/src/hooks/forms/useThirdPartyForm.tsx
View File

@@ -18,8 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
import { z } from "zod";
@@ -88,11 +88,11 @@ const thirdPartyUpdateQuery = graphql`
export function useThirdPartyForm(thirdPartyKey: useThirdPartyFormFragment$key) {
const thirdParty = useFragment(thirdPartyFormFragment, thirdPartyKey);
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(thirdPartyUpdateQuery, {
successMessage: __("Third party updated successfully."),
errorMessage: __("Failed to update third party"),
successMessage: t("thirdPartyForm.messages.updated"),
errorMessage: t("thirdPartyForm.messages.updateError"),
});
const defaultValues = useMemo(

31
apps/console/src/hooks/graph/AssetGraph.ts
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { promisifyMutation, sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { promisifyMutation } from "@probo/helpers";
import { useConfirm } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -163,11 +163,11 @@ export const useDeleteAsset = (
) => {
const [mutate] = useMutation<AssetGraphDeleteMutation>(deleteAssetMutation);
const confirm = useConfirm();
const { __ } = useTranslate();
const { t } = useTranslation();
return () => {
if (!asset.id || !asset.name) {
return alert(__("Failed to delete asset: missing id or name"));
return alert(t("assetGraph.errors.deleteMissingIdOrName"));
}
confirm(
() =>
@@ -180,12 +180,7 @@ export const useDeleteAsset = (
},
}),
{
message: sprintf(
__(
"This will permanently delete \"%s\". This action cannot be undone.",
),
asset.name,
),
message: t("assetGraph.deleteConfirmation", { name: asset.name }),
},
);
};
@@ -193,7 +188,7 @@ export const useDeleteAsset = (
export const useCreateAsset = (connectionId: string) => {
const [mutate, isMutating] = useMutation<AssetGraphCreateMutation>(createAssetMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return [
(input: {
@@ -206,18 +201,16 @@ export const useCreateAsset = (connectionId: string) => {
dataTypesStored: string;
}) => {
if (!input.name?.trim()) {
return alert(__("Failed to create asset: name is required"));
return alert(t("assetGraph.errors.createNameRequired"));
}
if (!input.ownerId) {
return alert(__("Failed to create asset: owner is required"));
return alert(t("assetGraph.errors.createOwnerRequired"));
}
if (!input.organizationId) {
return alert(__("Failed to create asset: organization is required"));
return alert(t("assetGraph.errors.createOrganizationRequired"));
}
if (!input.dataTypesStored) {
return alert(
__("Failed to create asset: data types stored is required"),
);
return alert(t("assetGraph.errors.createDataTypesStoredRequired"));
}
return promisifyMutation(mutate)({
@@ -240,7 +233,7 @@ export const useCreateAsset = (connectionId: string) => {
};
export const useUpdateAsset = () => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutation<AssetGraphUpdateMutation>(updateAssetMutation);
return (input: {
@@ -253,7 +246,7 @@ export const useUpdateAsset = () => {
thirdPartyIds?: string[];
}) => {
if (!input.id) {
return alert(__("Failed to update asset: asset ID is required"));
return alert(t("assetGraph.errors.updateIdRequired"));
}
return promisifyMutation(mutate)({

41
apps/console/src/hooks/graph/AuditGraph.ts
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { promisifyMutation, sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { promisifyMutation } from "@probo/helpers";
import { useConfirm } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -148,10 +148,10 @@ export const useDeleteAudit = (
connectionId: string,
onSuccess?: () => void,
) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(deleteAuditMutation, {
successMessage: __("Audit deleted successfully"),
errorMessage: __("Failed to delete audit"),
successMessage: t("auditGraph.messages.deleted"),
errorMessage: t("auditGraph.errors.delete"),
});
const confirm = useConfirm();
@@ -169,12 +169,7 @@ export const useDeleteAudit = (
onSuccess?.();
},
{
message: sprintf(
__(
"This will permanently delete the audit for %s. This action cannot be undone.",
),
audit.framework?.name ?? "",
),
message: t("auditGraph.deleteConfirmation", { frameworkName: audit.framework?.name ?? "" }),
},
);
};
@@ -183,7 +178,7 @@ export const useDeleteAudit = (
export const useCreateAudit = (connectionId: string) => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(createAuditMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
organizationId: string;
@@ -196,10 +191,10 @@ export const useCreateAudit = (connectionId: string) => {
file?: File | null;
}) => {
if (!input.organizationId) {
return alert(__("Failed to create audit: organization is required"));
return alert(t("auditGraph.errors.createOrganizationRequired"));
}
if (!input.frameworkId) {
return alert(__("Failed to create audit: framework is required"));
return alert(t("auditGraph.errors.createFrameworkRequired"));
}
return promisifyMutation(mutate)({
@@ -224,7 +219,7 @@ export const useCreateAudit = (connectionId: string) => {
export const useUpdateAudit = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(updateAuditMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
id: string;
@@ -234,7 +229,7 @@ export const useUpdateAudit = () => {
state?: string;
}) => {
if (!input.id) {
return alert(__("Failed to update audit: audit ID is required"));
return alert(t("auditGraph.errors.updateIdRequired"));
}
return promisifyMutation(mutate)({
@@ -263,15 +258,15 @@ export const uploadAuditReportMutation = graphql`
`;
export const useUploadAuditReport = () => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate, isLoading] = useMutationWithToasts(uploadAuditReportMutation, {
successMessage: __("Audit report uploaded successfully"),
errorMessage: __("Failed to upload audit report"),
successMessage: t("auditGraph.messages.reportUploaded"),
errorMessage: t("auditGraph.errors.uploadReport"),
});
const uploadAuditReport = (input: { auditId: string; file: File }) => {
if (!input.auditId) {
return alert(__("Failed to upload report: audit ID is required"));
return alert(t("auditGraph.errors.uploadReportIdRequired"));
}
return mutate({
@@ -308,10 +303,10 @@ export const deleteAuditReportMutation = graphql`
`;
export const useDeleteAuditReport = () => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(deleteAuditReportMutation, {
successMessage: __("Audit report deleted successfully"),
errorMessage: __("Failed to delete audit report"),
successMessage: t("auditGraph.messages.reportDeleted"),
errorMessage: t("auditGraph.errors.deleteReport"),
});
return (input: { auditId: string }) => {

27
apps/console/src/hooks/graph/DatumGraph.ts
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { promisifyMutation, sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { promisifyMutation } from "@probo/helpers";
import { useConfirm } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -154,11 +154,11 @@ export const useDeleteDatum = (
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(deleteDatumMutation);
const confirm = useConfirm();
const { __ } = useTranslate();
const { t } = useTranslation();
return () => {
if (!datum.id || !datum.name) {
return alert(__("Failed to delete data: missing id or name"));
return alert(t("datumGraph.errors.deleteMissingIdOrName"));
}
confirm(
() =>
@@ -171,12 +171,7 @@ export const useDeleteDatum = (
},
}),
{
message: sprintf(
__(
"This will permanently delete \"%s\". This action cannot be undone.",
),
datum.name,
),
message: t("datumGraph.deleteConfirmation", { name: datum.name }),
},
);
};
@@ -185,7 +180,7 @@ export const useDeleteDatum = (
export const useCreateDatum = (connectionId: string) => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(createDatumMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
name: string;
@@ -195,13 +190,13 @@ export const useCreateDatum = (connectionId: string) => {
thirdPartyIds?: string[];
}) => {
if (!input.name?.trim()) {
return alert(__("Failed to create data: name is required"));
return alert(t("datumGraph.errors.createNameRequired"));
}
if (!input.ownerId) {
return alert(__("Failed to create data: owner is required"));
return alert(t("datumGraph.errors.createOwnerRequired"));
}
if (!input.organizationId) {
return alert(__("Failed to create data: organization is required"));
return alert(t("datumGraph.errors.createOrganizationRequired"));
}
return promisifyMutation(mutate)({
@@ -216,7 +211,7 @@ export const useCreateDatum = (connectionId: string) => {
export const useUpdateDatum = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(updateDatumMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
id: string;
@@ -226,7 +221,7 @@ export const useUpdateDatum = () => {
thirdPartyIds?: string[];
}) => {
if (!input.id) {
return alert(__("Failed to update data: missing id"));
return alert(t("datumGraph.errors.updateMissingId"));
}
return promisifyMutation(mutate)({

22
apps/console/src/hooks/graph/DocumentGraph.ts
View File

@@ -18,7 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { useTranslation } from "react-i18next";
import { graphql } from "relay-runtime";
import type { DocumentGraphBulkExportDocumentsMutation } from "#/__generated__/core/DocumentGraphBulkExportDocumentsMutation.graphql";
@@ -40,13 +40,13 @@ const deleteDocumentMutation = graphql`
`;
export function useDeleteDocumentMutation() {
const { __ } = useTranslate();
const { t } = useTranslation();
return useMutationWithToasts<DocumentGraphDeleteMutation>(
deleteDocumentMutation,
{
successMessage: __("Document deleted successfully."),
errorMessage: __("Failed to delete document"),
successMessage: t("documentGraph.messages.deleted"),
errorMessage: t("documentGraph.errors.delete"),
},
);
}
@@ -62,11 +62,11 @@ const bulkDeleteDocumentsMutation = graphql`
`;
export function useBulkDeleteDocumentsMutation() {
const { __ } = useTranslate();
const { t } = useTranslation();
return useMutationWithToasts(bulkDeleteDocumentsMutation, {
successMessage: __("Documents deleted successfully."),
errorMessage: __("Failed to delete documents"),
successMessage: t("documentGraph.messages.bulkDeleted"),
errorMessage: t("documentGraph.errors.bulkDelete"),
});
}
@@ -81,15 +81,13 @@ const bulkExportDocumentsMutation = graphql`
`;
export function useBulkExportDocumentsMutation() {
const { __ } = useTranslate();
const { t } = useTranslation();
return useMutationWithToasts<DocumentGraphBulkExportDocumentsMutation>(
bulkExportDocumentsMutation,
{
successMessage: __(
"Document export started successfully. You will receive an email when the export is ready.",
),
errorMessage: __("Failed to start document export"),
successMessage: t("documentGraph.messages.exportStarted"),
errorMessage: t("documentGraph.errors.export"),
},
);
}

20
apps/console/src/hooks/graph/FrameworkGraph.ts
View File

@@ -18,10 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { useConfirm } from "@probo/ui";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { graphql } from "relay-runtime";
import { useMutationWithToasts } from "../useMutationWithToasts";
@@ -68,12 +67,12 @@ export const useDeleteFrameworkMutation = (
framework: { id: string; name: string },
connectionId: string,
) => {
const { t } = useTranslation();
const [commitDelete] = useMutationWithToasts(deleteFrameworkMutation, {
errorMessage: "Failed to delete framework",
successMessage: "Framework deleted successfully",
errorMessage: t("frameworkGraph.errors.delete"),
successMessage: t("frameworkGraph.messages.deleted"),
});
const confirm = useConfirm();
const { __ } = useTranslate();
return useCallback(
(options?: { onSuccess?: () => void }) => {
@@ -90,16 +89,13 @@ export const useDeleteFrameworkMutation = (
});
},
{
message: sprintf(
__(
"This will permanently delete framework \"%s\". This action cannot be undone.",
),
framework.name,
),
message: t("frameworkGraph.deleteConfirmation", {
name: framework.name,
}),
},
);
},
[framework, connectionId, commitDelete, confirm, __],
[framework, connectionId, commitDelete, confirm, t],
);
};

14
apps/console/src/hooks/graph/MeasureGraph.ts
View File

@@ -18,7 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { useTranslation } from "react-i18next";
import { graphql } from "relay-runtime";
import type { MeasureGraphDeleteMutation } from "#/__generated__/core/MeasureGraphDeleteMutation.graphql";
@@ -39,13 +39,13 @@ const deleteMeasureMutation = graphql`
`;
export function useDeleteMeasureMutation() {
const { __ } = useTranslate();
const { t } = useTranslation();
return useMutationWithToasts<MeasureGraphDeleteMutation>(
deleteMeasureMutation,
{
successMessage: __("Measure deleted successfully."),
errorMessage: __("Failed to delete measure"),
successMessage: t("measureGraph.messages.deleted"),
errorMessage: t("measureGraph.errors.delete"),
},
);
}
@@ -61,10 +61,10 @@ const measureUpdateMutation = graphql`
`;
export const useUpdateMeasure = () => {
const { __ } = useTranslate();
const { t } = useTranslation();
return useMutationWithToasts(measureUpdateMutation, {
successMessage: __("Measure updated successfully."),
errorMessage: __("Failed to update measure"),
successMessage: t("measureGraph.messages.updated"),
errorMessage: t("measureGraph.errors.update"),
});
};

22
apps/console/src/hooks/graph/ObligationGraph.ts
View File

@@ -19,8 +19,8 @@
// SOFTWARE.
import { promisifyMutation } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { useConfirm } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -149,10 +149,10 @@ export const useDeleteObligation = (
obligation: { id: string },
connectionId: string,
) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(deleteObligationMutation, {
successMessage: __("Obligation deleted successfully"),
errorMessage: __("Failed to delete obligation"),
successMessage: t("obligationGraph.messages.deleted"),
errorMessage: t("obligationGraph.errors.delete"),
});
const confirm = useConfirm();
@@ -168,9 +168,7 @@ export const useDeleteObligation = (
},
}),
{
message: __(
"This will permanently delete this obligation. This action cannot be undone.",
),
message: t("obligationGraph.deleteConfirmation"),
},
);
};
@@ -179,7 +177,7 @@ export const useDeleteObligation = (
export const useCreateObligation = (connectionId: string) => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(createObligationMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
organizationId: string;
@@ -195,10 +193,10 @@ export const useCreateObligation = (connectionId: string) => {
status: string;
}) => {
if (!input.organizationId) {
return alert(__("Failed to create obligation: organization is required"));
return alert(t("obligationGraph.errors.createOrganizationRequired"));
}
if (!input.ownerId) {
return alert(__("Failed to create obligation: owner is required"));
return alert(t("obligationGraph.errors.createOwnerRequired"));
}
return promisifyMutation(mutate)({
@@ -225,7 +223,7 @@ export const useCreateObligation = (connectionId: string) => {
export const useUpdateObligation = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(updateObligationMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
id: string;
@@ -241,7 +239,7 @@ export const useUpdateObligation = () => {
status?: string;
}) => {
if (!input.id) {
return alert(__("Failed to update obligation: ID is required"));
return alert(t("obligationGraph.errors.updateIdRequired"));
}
return promisifyMutation(mutate)({

65
apps/console/src/hooks/graph/ProcessingActivityGraph.ts
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { promisifyMutation, sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { promisifyMutation } from "@probo/helpers";
import { useConfirm } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -272,10 +272,10 @@ export const useDeleteProcessingActivity = (
processingActivity: { id: string; name: string },
connectionId: string,
) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(deleteProcessingActivityMutation, {
successMessage: __("Processing activity deleted successfully"),
errorMessage: __("Failed to delete processing activity"),
successMessage: t("processingActivityGraph.messages.deleted"),
errorMessage: t("processingActivityGraph.errors.delete"),
});
const confirm = useConfirm();
@@ -291,12 +291,9 @@ export const useDeleteProcessingActivity = (
},
}),
{
message: sprintf(
__(
"This will permanently delete the processing activity %s. This action cannot be undone.",
),
processingActivity.name,
),
message: t("processingActivityGraph.deleteConfirmation", {
name: processingActivity.name,
}),
},
);
};
@@ -305,7 +302,7 @@ export const useDeleteProcessingActivity = (
export const useCreateProcessingActivity = (connectionId?: string) => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(createProcessingActivityMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
organizationId: string;
@@ -332,12 +329,12 @@ export const useCreateProcessingActivity = (connectionId?: string) => {
}) => {
if (!input.organizationId) {
return alert(
__("Failed to create processing activity: organization is required"),
t("processingActivityGraph.errors.createOrganizationRequired"),
);
}
if (!input.name) {
return alert(
__("Failed to create processing activity: name is required"),
t("processingActivityGraph.errors.createNameRequired"),
);
}
@@ -376,7 +373,7 @@ export const useCreateProcessingActivity = (connectionId?: string) => {
export const useUpdateProcessingActivity = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(updateProcessingActivityMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
id: string;
@@ -402,7 +399,7 @@ export const useUpdateProcessingActivity = () => {
thirdPartyIds?: string[];
}) => {
if (!input.id) {
return alert(__("Failed to update processing activity: ID is required"));
return alert(t("processingActivityGraph.errors.updateIdRequired"));
}
return promisifyMutation(mutate)({
@@ -489,7 +486,7 @@ export const deleteDataProtectionImpactAssessmentMutation = graphql`
export const useCreateDataProtectionImpactAssessment = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(createDataProtectionImpactAssessmentMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
processingActivityId: string;
@@ -501,7 +498,7 @@ export const useCreateDataProtectionImpactAssessment = () => {
}) => {
if (!input.processingActivityId) {
return alert(
__("Failed to create DPIA: Processing Activity ID is required"),
t("processingActivityGraph.errors.createDpiaProcessingActivityIdRequired"),
);
}
@@ -516,7 +513,7 @@ export const useCreateDataProtectionImpactAssessment = () => {
export const useUpdateDataProtectionImpactAssessment = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(updateDataProtectionImpactAssessmentMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
id: string;
@@ -527,7 +524,7 @@ export const useUpdateDataProtectionImpactAssessment = () => {
residualRisk?: ProcessingActivityDPIAResidualRisk;
}) => {
if (!input.id) {
return alert(__("Failed to update DPIA: ID is required"));
return alert(t("processingActivityGraph.errors.updateDpiaIdRequired"));
}
return promisifyMutation(mutate)({
@@ -542,12 +539,12 @@ export const useDeleteDataProtectionImpactAssessment = (
dpia: { id: string },
options?: { onSuccess?: () => void },
) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(
deleteDataProtectionImpactAssessmentMutation,
{
successMessage: __("DPIA deleted successfully"),
errorMessage: __("Failed to delete DPIA"),
successMessage: t("processingActivityGraph.messages.dpiaDeleted"),
errorMessage: t("processingActivityGraph.errors.deleteDpia"),
},
);
const confirm = useConfirm();
@@ -564,9 +561,7 @@ export const useDeleteDataProtectionImpactAssessment = (
onSuccess: options?.onSuccess,
}),
{
message: __(
"This will permanently delete this Data Protection Impact Assessment. This action cannot be undone.",
),
message: t("processingActivityGraph.dpiaDeleteConfirmation"),
},
);
};
@@ -648,7 +643,7 @@ export const deleteTransferImpactAssessmentMutation = graphql`
export const useCreateTransferImpactAssessment = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(createTransferImpactAssessmentMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
processingActivityId: string;
@@ -660,7 +655,7 @@ export const useCreateTransferImpactAssessment = () => {
}) => {
if (!input.processingActivityId) {
return alert(
__("Failed to create TIA: Processing Activity ID is required"),
t("processingActivityGraph.errors.createTiaProcessingActivityIdRequired"),
);
}
@@ -675,7 +670,7 @@ export const useCreateTransferImpactAssessment = () => {
export const useUpdateTransferImpactAssessment = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(updateTransferImpactAssessmentMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
id: string;
@@ -686,7 +681,7 @@ export const useUpdateTransferImpactAssessment = () => {
supplementaryMeasures?: string;
}) => {
if (!input.id) {
return alert(__("Failed to update TIA: ID is required"));
return alert(t("processingActivityGraph.errors.updateTiaIdRequired"));
}
return promisifyMutation(mutate)({
@@ -701,12 +696,12 @@ export const useDeleteTransferImpactAssessment = (
tia: { id: string },
options?: { onSuccess?: () => void },
) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(
deleteTransferImpactAssessmentMutation,
{
successMessage: __("TIA deleted successfully"),
errorMessage: __("Failed to delete TIA"),
successMessage: t("processingActivityGraph.messages.tiaDeleted"),
errorMessage: t("processingActivityGraph.errors.deleteTia"),
},
);
const confirm = useConfirm();
@@ -723,9 +718,7 @@ export const useDeleteTransferImpactAssessment = (
onSuccess: options?.onSuccess,
}),
{
message: __(
"This will permanently delete this Transfer Impact Assessment. This action cannot be undone.",
),
message: t("processingActivityGraph.tiaDeleteConfirmation"),
},
);
};

28
apps/console/src/hooks/graph/RightsRequestGraph.ts
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { promisifyMutation, sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { promisifyMutation } from "@probo/helpers";
import { useConfirm } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -126,10 +126,10 @@ export const useDeleteRightsRequest = (
request: { id: string },
connectionId: string,
) => {
const { __ } = useTranslate();
const { t } = useTranslation();
const [mutate] = useMutationWithToasts(deleteRightsRequestMutation, {
successMessage: __("Rights request deleted successfully"),
errorMessage: __("Failed to delete rights request"),
successMessage: t("rightsRequestGraph.messages.deleted"),
errorMessage: t("rightsRequestGraph.errors.delete"),
});
const confirm = useConfirm();
@@ -145,11 +145,7 @@ export const useDeleteRightsRequest = (
},
}),
{
message: sprintf(
__(
"This will permanently delete the rights request. This action cannot be undone.",
),
),
message: t("rightsRequestGraph.deleteConfirmation"),
},
);
};
@@ -158,7 +154,7 @@ export const useDeleteRightsRequest = (
export const useCreateRightsRequest = (connectionId: string) => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(createRightsRequestMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
organizationId: string;
@@ -172,17 +168,17 @@ export const useCreateRightsRequest = (connectionId: string) => {
}) => {
if (!input.organizationId) {
return alert(
__("Failed to create rights request: organization is required"),
t("rightsRequestGraph.errors.createOrganizationRequired"),
);
}
if (!input.requestType) {
return alert(
__("Failed to create rights request: request type is required"),
t("rightsRequestGraph.errors.createRequestTypeRequired"),
);
}
if (!input.requestState) {
return alert(
__("Failed to create rights request: request state is required"),
t("rightsRequestGraph.errors.createRequestStateRequired"),
);
}
@@ -207,7 +203,7 @@ export const useCreateRightsRequest = (connectionId: string) => {
export const useUpdateRightsRequest = () => {
// eslint-disable-next-line relay/generated-typescript-types
const [mutate] = useMutation(updateRightsRequestMutation);
const { __ } = useTranslate();
const { t } = useTranslation();
return (input: {
id: string;
@@ -220,7 +216,7 @@ export const useUpdateRightsRequest = () => {
actionTaken?: string;
}) => {
if (!input.id) {
return alert(__("Failed to update rights request: ID is required"));
return alert(t("rightsRequestGraph.errors.updateIdRequired"));
}
return promisifyMutation(mutate)({

14
apps/console/src/hooks/useMutationWithIncrement.ts
View File

@@ -19,9 +19,9 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { useToast } from "@probo/ui";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import {
useMutation,
type UseMutationConfig,
@@ -55,7 +55,7 @@ export function useMutationWithIncrement<T extends MutationParameters>(
const [mutate, isLoading] = useMutation<T>(query);
const relayEnv = useRelayEnvironment();
const { toast } = useToast();
const { __ } = useTranslate();
const { t } = useTranslation();
const options = { ...defaultOptions, ...baseOptions };
const mutateAndIncrement = useCallback(
(queryOptions: UseMutationConfig<T>) => {
@@ -63,9 +63,9 @@ export function useMutationWithIncrement<T extends MutationParameters>(
...queryOptions,
onCompleted: (response, error) => {
if (error) {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(errorTitle, error),
variant: "error",
});
@@ -81,9 +81,9 @@ export function useMutationWithIncrement<T extends MutationParameters>(
queryOptions.onCompleted?.(response, error);
},
onError: (error) => {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(errorTitle, error),
variant: "error",
});
@@ -91,7 +91,7 @@ export function useMutationWithIncrement<T extends MutationParameters>(
},
});
},
[mutate, options.id, options.node, options.field, options.value, options.errorMessage, relayEnv, toast, __],
[mutate, options.id, options.node, options.field, options.value, options.errorMessage, relayEnv, toast, t],
);
return [mutateAndIncrement, isLoading] as const;

18
apps/console/src/hooks/useMutationWithToasts.ts
View File

@@ -19,9 +19,9 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { useToast } from "@probo/ui";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { useMutation, type UseMutationConfig } from "react-relay";
import type { GraphQLTaggedNode, MutationParameters } from "relay-runtime";
@@ -37,7 +37,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
) {
const [mutate, isLoading] = useMutation<T>(query);
const { toast } = useToast();
const { __ } = useTranslate();
const { t } = useTranslation();
const mutateWithToast = useCallback(
(
queryOptions: UseMutationConfig<T> & {
@@ -53,9 +53,9 @@ export function useMutationWithToasts<T extends MutationParameters>(
onCompleted: (response, error) => {
options.onCompleted?.(response, error);
if (error) {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(errorTitle, error),
variant: "error",
});
@@ -67,19 +67,19 @@ export function useMutationWithToasts<T extends MutationParameters>(
: options.successMessage;
toast({
title: __("Success"),
title: t("common.success"),
description:
successMessage
?? __("Operation completed successfully"),
?? t("mutation.messages.completed"),
variant: "success",
});
options.onSuccess?.();
resolve();
},
onError: (error) => {
const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(errorTitle, error),
variant: "error",
});
@@ -88,7 +88,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
}),
);
},
[mutate, toast, __, baseOptions],
[mutate, toast, t, baseOptions],
);
return [mutateWithToast, isLoading] as const;

84
apps/console/src/lib/i18n/backend.ts Normal file
View File

@@ -0,0 +1,84 @@
// 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.
import type { BackendModule, ReadCallback, ResourceKey } from "i18next";
// The default namespace for app-wide chrome strings, sourced from src/_locales/.
export const DEFAULT_NAMESPACE = "app";
type CatalogModule = { default: ResourceKey };
// Vite turns each translation JSON into its own lazily-imported chunk. The keys
// are project-root-absolute paths, e.g.
// "/src/pages/organizations/measures/_locales/en-US.json".
const catalogs = import.meta.glob<CatalogModule>("/src/**/_locales/*.json");
const CATALOG_PATH = /^\/src\/(.*)_locales\/([^/]+)\.json$/;
// Map "<namespace>\u0000<language>" -> lazy importer for that catalog chunk.
function buildLookup(): Map<string, () => Promise<CatalogModule>> {
const lookup = new Map<string, () => Promise<CatalogModule>>();
for (const [path, importer] of Object.entries(catalogs)) {
const match = CATALOG_PATH.exec(path);
if (!match) {
continue;
}
const [, prefix, language] = match;
// prefix is the path between "src/" and "_locales/", e.g. "pages/foo/".
// Drop the leading "pages/" and trailing slash; an empty prefix (src/_locales)
// is the app-wide default namespace.
const namespace
= prefix.replace(/^pages\//, "").replace(/\/$/, "") || DEFAULT_NAMESPACE;
lookup.set(catalogKey(namespace, language), importer);
}
return lookup;
}
function catalogKey(namespace: string, language: string): string {
return `${namespace}\u0000${language}`;
}
const lookup = buildLookup();
// Custom i18next backend that resolves a (language, namespace) pair to its lazy
// JSON chunk. A missing catalog resolves to an empty resource so i18next falls
// through to fallbackLng rather than treating it as a hard load error.
export const globBackend: BackendModule = {
type: "backend",
init() {},
read(language: string, namespace: string, callback: ReadCallback) {
const importer = lookup.get(catalogKey(namespace, language));
if (!importer) {
callback(null, {});
return;
}
importer().then(
module => callback(null, module.default),
(error: unknown) =>
callback(error instanceof Error ? error : new Error(String(error)), null),
);
},
};

47
apps/console/src/lib/i18n/i18n.ts Normal file
View File

@@ -0,0 +1,47 @@
// 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.
import { createInstance } from "i18next";
import { initReactI18next } from "react-i18next";
import { DEFAULT_NAMESPACE, globBackend } from "./backend";
import { resolveLanguage, SUPPORTED_LANGUAGES } from "./resolveLanguage";
// Build a dedicated instance rather than mutating i18next's global singleton.
// Initializing it through initReactI18next still registers it as the instance
// react-i18next's hooks read from, so no I18nextProvider is required.
const i18n = createInstance();
void i18n
.use(globBackend)
.use(initReactI18next)
.init({
lng: resolveLanguage(),
fallbackLng: "en-US",
supportedLngs: SUPPORTED_LANGUAGES,
load: "currentOnly",
defaultNS: DEFAULT_NAMESPACE,
fallbackNS: DEFAULT_NAMESPACE,
ns: [DEFAULT_NAMESPACE],
interpolation: { escapeValue: false },
react: { useSuspense: true },
});
export { i18n };

76
apps/console/src/lib/i18n/resolveLanguage.ts Normal file
View File

@@ -0,0 +1,76 @@
// 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.
export const SUPPORTED_LANGUAGES = [
"en-US",
"fr-FR",
"de-DE",
"es-ES",
"id-ID",
"it-IT",
"ja-JP",
"ko-KR",
"pl-PL",
"pt-PT",
"tr-TR",
"uk-UA",
"zh-CN",
] as const;
export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
// Maps a two-letter language prefix (lowercased) to its canonical supported
// tag, e.g. any "de*" browser tag resolves to "de-DE".
const PREFIX_TO_LANGUAGE: Record<string, SupportedLanguage> = {
en: "en-US",
fr: "fr-FR",
de: "de-DE",
es: "es-ES",
id: "id-ID",
it: "it-IT",
ja: "ja-JP",
ko: "ko-KR",
pl: "pl-PL",
pt: "pt-PT",
tr: "tr-TR",
uk: "uk-UA",
zh: "zh-CN",
};
// Collapse the browser's preferred languages to one of our supported locales
// by matching the two-letter language prefix (e.g. any "fr*" tag maps to
// fr-FR). en-US is the ultimate fallback when nothing matches. Resolving to a
// canonical supported tag here means i18next is never asked to load an
// unsupported locale; fallbackLng only has to cover individual missing keys.
export function resolveLanguage(): SupportedLanguage {
const candidates = navigator.languages?.length
? navigator.languages
: [navigator.language];
for (const tag of candidates) {
const prefix = tag.toLowerCase().split("-")[0];
const language = PREFIX_TO_LANGUAGE[prefix];
if (language) {
return language;
}
}
return "en-US";
}

8
apps/console/src/lib/relay/useMutation.ts
View File

@@ -13,10 +13,10 @@
// PERFORMANCE OF THIS SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { createUseMutation, type MutationNotifier } from "@probo/relay";
import { useToast } from "@probo/ui";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
/**
* Binds the shared awaitable useMutation (`@probo/relay`) to this app's
@@ -28,7 +28,7 @@ import { useMemo } from "react";
*/
function useMutationNotifier(): MutationNotifier {
const { toast } = useToast();
const { __ } = useTranslate();
const { t } = useTranslation();
return useMemo<MutationNotifier>(
() => ({
@@ -36,7 +36,7 @@ function useMutationNotifier(): MutationNotifier {
toast({ title, description: "", variant: "success" });
},
notifyError: (error, title) => {
const finalTitle = title ?? __("Error");
const finalTitle = title ?? t("common.error");
toast({
title: finalTitle,
description: formatError(finalTitle, error),
@@ -44,7 +44,7 @@ function useMutationNotifier(): MutationNotifier {
});
},
}),
[toast, __],
[toast, t],
);
}

6
apps/console/src/main.tsx
View File

@@ -24,7 +24,7 @@ import { createRoot } from "react-dom/client";
import "./index.css";
import { App } from "./App";
import { TranslatorProvider } from "./providers/TranslatorProvider";
import "./lib/i18n/i18n";
const queryClient = new QueryClient({
defaultOptions: {
@@ -36,8 +36,6 @@ const queryClient = new QueryClient({
createRoot(document.getElementById("root")!).render(
<QueryClientProvider client={queryClient}>
<TranslatorProvider>
<App />
</TranslatorProvider>
<App />
</QueryClientProvider>,
);

6
apps/console/src/pages/iam/apiKeys/APIKeysPage.tsx
View File

@@ -18,7 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { useTranslation } from "react-i18next";
import { graphql, type PreloadedQuery, usePreloadedQuery } from "react-relay";
import type { APIKeysPageQuery } from "#/__generated__/iam/APIKeysPageQuery.graphql";
@@ -37,13 +37,13 @@ export function APIKeysPage(props: {
queryRef: PreloadedQuery<APIKeysPageQuery>;
}) {
const { queryRef } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const data = usePreloadedQuery<APIKeysPageQuery>(apiKeysPageQuery, queryRef);
return (
<div className="space-y-6 w-full py-6">
<h1 className="text-3xl font-bold text-center">{__("API Keys")}</h1>
<h1 className="text-3xl font-bold text-center">{t("apiKeys.title")}</h1>
{data.viewer && <PersonalAPIKeyList fKey={data.viewer} />}
</div>
);

46
apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
@@ -37,6 +36,7 @@ import {
} from "@probo/ui";
import { useState } from "react";
import { Controller } from "react-hook-form";
import { useTranslation } from "react-i18next";
import {
ConnectionHandler,
graphql,
@@ -120,7 +120,7 @@ export function PersonalAPIKeyList(props: {
fKey: PersonalAPIKeyListFragment$key;
}) {
const { fKey } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const createDialogRef = useDialogRef();
const tokenDialogRef = useDialogRef();
@@ -162,8 +162,8 @@ export function PersonalAPIKeyList(props: {
},
onCompleted: (response) => {
toast({
title: __("Success"),
description: __("API key created successfully."),
title: t("common.success"),
description: t("personalApiKeyList.messages.created"),
variant: "success",
});
const newToken = response.createPersonalAPIKey?.token;
@@ -176,8 +176,8 @@ export function PersonalAPIKeyList(props: {
},
onError: (error) => {
toast({
title: __("Error"),
description: formatError(__("Failed to create API key."), error),
title: t("common.error"),
description: formatError(t("personalApiKeyList.errors.create"), error),
variant: "error",
});
},
@@ -188,9 +188,9 @@ export function PersonalAPIKeyList(props: {
<>
<div className="space-y-4">
<div className="flex justify-between items-center">
<h2 className="text-base font-medium">{__("API Keys")}</h2>
<h2 className="text-base font-medium">{t("apiKeys.title")}</h2>
<Button onClick={() => createDialogRef.current?.open()}>
{__("Create API Key")}
{t("personalApiKeyList.actions.create")}
</Button>
</div>
@@ -199,10 +199,10 @@ export function PersonalAPIKeyList(props: {
<Card padded>
<div className="text-center py-12">
<h3 className="text-lg font-medium text-gray-900 mb-2">
{__("No API keys")}
{t("personalApiKeyList.empty.title")}
</h3>
<p className="text-gray-600 mb-6">
{__("Create an API key to authenticate programmatic access.")}
{t("personalApiKeyList.empty.description")}
</p>
</div>
</Card>
@@ -219,21 +219,21 @@ export function PersonalAPIKeyList(props: {
<Dialog
ref={createDialogRef}
title={<Breadcrumb items={[__("API Keys"), __("Create")]} />}
title={<Breadcrumb items={[t("apiKeys.title"), t("common.create")]} />}
onClose={() => reset()}
>
<form onSubmit={e => void handleSubmit(handleCreate)(e)}>
<DialogContent padded className="space-y-5">
<Field error={formState.errors.name?.message}>
<Label>{__("Name")}</Label>
<Label>{t("personalApiKeyList.fields.name.label")}</Label>
<Input
{...register("name")}
placeholder={__("e.g., Production API Key")}
placeholder={t("personalApiKeyList.fields.name.placeholder")}
/>
</Field>
<Field error={formState.errors.expiresIn?.message}>
<Label>{__("Expires In")}</Label>
<Label>{t("personalApiKeyList.fields.expiresIn.label")}</Label>
<Controller
control={control}
name="expiresIn"
@@ -243,10 +243,18 @@ export function PersonalAPIKeyList(props: {
onValueChange={field.onChange}
value={field.value}
>
<Option value="1month">{__("1 Month")}</Option>
<Option value="3months">{__("3 Months")}</Option>
<Option value="6months">{__("6 Months")}</Option>
<Option value="1year">{__("1 Year")}</Option>
<Option value="1month">
{t("personalApiKeyList.expirations.month", { count: 1 })}
</Option>
<Option value="3months">
{t("personalApiKeyList.expirations.month", { count: 3 })}
</Option>
<Option value="6months">
{t("personalApiKeyList.expirations.month", { count: 6 })}
</Option>
<Option value="1year">
{t("personalApiKeyList.expirations.year", { count: 1 })}
</Option>
</Select>
)}
/>
@@ -254,7 +262,7 @@ export function PersonalAPIKeyList(props: {
</DialogContent>
<DialogFooter>
<Button type="submit" disabled={isCreating}>
{isCreating ? __("Creating...") : __("Create")}
{isCreating ? t("personalApiKeyList.actions.creating") : t("common.create")}
</Button>
</DialogFooter>
</form>

39
apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx
View File

@@ -18,11 +18,12 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { formatDate, formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { formatError } from "@probo/helpers";
import { dateFormat } from "@probo/i18n";
import { Button, Spinner, Td, Tr, useConfirm, useToast } from "@probo/ui";
import { clsx } from "clsx";
import { Suspense } from "react";
import { useTranslation } from "react-i18next";
import { useFragment, useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -61,7 +62,7 @@ export function PersonalAPIKeyRow(props: {
connectionId: string;
}) {
const { fKey, connectionId } = props;
const { __ } = useTranslate();
const { t, i18n } = useTranslation();
const confirm = useConfirm();
const { toast } = useToast();
const now = new Date();
@@ -84,28 +85,28 @@ export function PersonalAPIKeyRow(props: {
onCompleted: (_response, errors) => {
if (errors?.length) {
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(
__("Failed to revoke API key."),
t("personalApiKeyRow.errors.revoke"),
errors,
),
variant: "error",
});
reject(new Error(errors[0]?.message ?? __("Failed to revoke API key.")));
reject(new Error(errors[0]?.message ?? t("personalApiKeyRow.errors.revoke")));
return;
}
toast({
title: __("Success"),
description: __("API key revoked successfully."),
title: t("common.success"),
description: t("personalApiKeyRow.messages.revoked"),
variant: "success",
});
resolve();
},
onError: (error) => {
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(
__("Failed to revoke API key."),
t("personalApiKeyRow.errors.revoke"),
error,
),
variant: "error",
@@ -116,11 +117,9 @@ export function PersonalAPIKeyRow(props: {
});
},
{
title: __("Revoke API Key"),
message: __(
`Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`,
),
label: __("Revoke"),
title: t("personalApiKeyRow.revoke.title"),
message: t("personalApiKeyRow.revoke.confirmation", { name: key.name }),
label: t("personalApiKeyRow.actions.revoke"),
variant: "danger",
},
);
@@ -131,22 +130,22 @@ export function PersonalAPIKeyRow(props: {
<Td>
<div className="font-medium text-txt-primary">{key.name}</div>
<div className="text-xs text-txt-tertiary">
{expired ? __("Expired") : __("Active")}
{expired ? t("personalApiKeyRow.status.expired") : t("personalApiKeyRow.status.active")}
</div>
</Td>
<Td>
<span className="text-sm text-txt-secondary">
{key.lastUsedAt ? formatDate(key.lastUsedAt) : __("Never")}
{key.lastUsedAt ? dateFormat(i18n.language, key.lastUsedAt) : t("personalApiKeyRow.never")}
</span>
</Td>
<Td>
<span className="text-sm text-txt-secondary">
{formatDate(key.createdAt)}
{dateFormat(i18n.language, key.createdAt)}
</span>
</Td>
<Td>
<span className="text-sm text-txt-secondary">
{formatDate(key.expiresAt)}
{dateFormat(i18n.language, key.expiresAt)}
</span>
</Td>
<Td width={140} className="text-end">
@@ -155,7 +154,7 @@ export function PersonalAPIKeyRow(props: {
<PersonalAPIKeyTokenAction fKey={fKey} disabled={isRevoking} />
</Suspense>
<Button variant="danger" onClick={handleRevoke} disabled={isRevoking}>
{__("Revoke")}
{t("personalApiKeyRow.actions.revoke")}
</Button>
</div>
</Td>

10
apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx
View File

@@ -19,8 +19,8 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Button, useDialogRef, useToast } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useRefetchableFragment } from "react-relay";
import type { PersonalAPIKeyRowFragment$key } from "#/__generated__/iam/PersonalAPIKeyRowFragment.graphql";
@@ -34,7 +34,7 @@ export function PersonalAPIKeyTokenAction(props: {
disabled?: boolean;
}) {
const { fKey, disabled } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const dialogRef = useDialogRef();
@@ -53,9 +53,9 @@ export function PersonalAPIKeyTokenAction(props: {
onComplete: (error) => {
if (error) {
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(
__("Failed to load API key token."),
t("personalApiKeyTokenAction.errors.load"),
error,
),
variant: "error",
@@ -70,7 +70,7 @@ export function PersonalAPIKeyTokenAction(props: {
return (
<>
<Button variant="secondary" onClick={handleShow} disabled={!!disabled}>
{__("Show")}
{t("personalApiKeyTokenAction.actions.show")}
</Button>
<PersonalAPIKeyTokenDialog

10
apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenDialog.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { useCopy } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
@@ -27,6 +26,7 @@ import {
DialogContent,
DialogFooter,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
export function PersonalAPIKeyTokenDialog(props: {
dialogRef: React.RefObject<{ open: () => void; close: () => void } | null>;
@@ -34,13 +34,13 @@ export function PersonalAPIKeyTokenDialog(props: {
onDone: () => void;
}) {
const { dialogRef, token, onDone } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const [isCopied, copy] = useCopy();
return (
<Dialog
ref={dialogRef}
title={<Breadcrumb items={[__("API Keys"), __("Token")]} />}
title={<Breadcrumb items={[t("apiKeys.title"), t("personalApiKeyTokenDialog.title")]} />}
>
<DialogContent padded className="space-y-4">
<div className="bg-gray-100 p-4 rounded-lg flex items-center gap-2">
@@ -50,12 +50,12 @@ export function PersonalAPIKeyTokenDialog(props: {
onClick={() => copy(token)}
disabled={!token}
>
{isCopied ? __("Copied") : __("Copy")}
{isCopied ? t("personalApiKeyTokenDialog.actions.copied") : t("personalApiKeyTokenDialog.actions.copy")}
</Button>
</div>
</DialogContent>
<DialogFooter>
<Button onClick={onDone}>{__("Done")}</Button>
<Button onClick={onDone}>{t("personalApiKeyTokenDialog.actions.done")}</Button>
</DialogFooter>
</Dialog>
);

12
apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeysTable.tsx
View File

@@ -18,8 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Table, Tbody, Th, Thead, Tr } from "@probo/ui";
import { useTranslation } from "react-i18next";
import type { PersonalAPIKeyListFragment$data } from "#/__generated__/iam/PersonalAPIKeyListFragment.graphql";
@@ -30,16 +30,16 @@ export function PersonalAPIKeysTable(props: {
connectionId: string;
}) {
const { edges, connectionId } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Table>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Last used")}</Th>
<Th>{__("Created")}</Th>
<Th>{__("Expires")}</Th>
<Th>{t("personalApiKeysTable.columns.name")}</Th>
<Th>{t("personalApiKeysTable.columns.lastUsed")}</Th>
<Th>{t("personalApiKeysTable.columns.created")}</Th>
<Th>{t("personalApiKeysTable.columns.expires")}</Th>
<Th></Th>
</Tr>
</Thead>

26
apps/console/src/pages/iam/auth/ActivateAccountPage.tsx
View File

@@ -20,9 +20,9 @@
import { formatError, type GraphQLError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { useToast } from "@probo/ui";
import { useCallback, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { Link, useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -42,14 +42,14 @@ const activateAccountMutation = graphql`
`;
export default function ActivateAccountPage() {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const submittedRef = useRef<boolean>(false);
const safeContinueUrl = useSafeContinueUrl();
usePageTitle(__("Activate Account"));
usePageTitle(t("activateAccountPage.pageTitle"));
const [activateAccount] = useMutation<ActivateAccountPageMutation>(activateAccountMutation);
@@ -72,8 +72,8 @@ export default function ActivateAccountPage() {
}
}
toast({
title: __("Activation failed"),
description: formatError(__("Activation failed"), errors),
title: t("activateAccountPage.errors.activationFailed"),
description: formatError(t("activateAccountPage.errors.activationFailed"), errors),
variant: "error",
});
@@ -81,10 +81,8 @@ export default function ActivateAccountPage() {
}
toast({
title: __("Success"),
description: __(
"Account activated successfully.",
),
title: t("common.success"),
description: t("activateAccountPage.messages.activated"),
variant: "success",
});
@@ -125,13 +123,13 @@ export default function ActivateAccountPage() {
},
onError: (e) => {
toast({
title: __("Activation failed"),
title: t("activateAccountPage.errors.activationFailed"),
description: e.message,
variant: "error",
});
},
});
}, [__, toast, activateAccount, navigate, safeContinueUrl]);
}, [t, toast, activateAccount, navigate, safeContinueUrl]);
useEffect(() => {
const token = searchParams.get("token");
@@ -144,9 +142,9 @@ export default function ActivateAccountPage() {
return (
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Account Activation")}</h1>
<h1 className="text-3xl font-bold">{t("activateAccountPage.title")}</h1>
<p className="text-txt-tertiary">
{__("Activating your account…")}
{t("activateAccountPage.activating")}
</p>
</div>
<div className="text-center mt-6 text-sm text-txt-secondary">
@@ -154,7 +152,7 @@ export default function ActivateAccountPage() {
to="/auth/login"
className="underline hover:text-txt-primary"
>
{__("Go back")}
{t("activateAccountPage.actions.goBack")}
</Link>
</div>
</div>

72
apps/console/src/pages/iam/auth/ConsentPage.tsx
View File

@@ -20,7 +20,6 @@
import { formatError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
Button,
IconArrowsClockwise,
@@ -34,6 +33,7 @@ import {
useToast,
} from "@probo/ui";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
import { graphql } from "relay-runtime";
@@ -65,10 +65,10 @@ const approveConsentMutation = graphql`
`;
const scopeLabels: Record<string, string> = {
openid: "Verify your identity",
email: "View your email address",
profile: "View your profile information",
offline_access: "Stay signed in and access your data while you're away",
openid: "consentPage.scopes.openid",
email: "consentPage.scopes.email",
profile: "consentPage.scopes.profile",
offline_access: "consentPage.scopes.offlineAccess",
};
const scopeIcons: Record<string, React.ReactNode> = {
@@ -82,8 +82,9 @@ function scopeIcon(name: string): React.ReactNode {
return scopeIcons[name] ?? <IconKey size={18} className="shrink-0 text-txt-tertiary" />;
}
function scopeLabel(name: string): string {
return scopeLabels[name] ?? formatApiScopeLabel(name);
function scopeLabel(name: string, translate: (key: string) => string): string {
const key = scopeLabels[name];
return key ? translate(key) : formatApiScopeLabel(name);
}
function isApiScope(scope: string): boolean {
@@ -110,8 +111,7 @@ function ConsentScopeRow(props: {
translate: (label: string) => string;
nested?: boolean;
}) {
const label = scopeLabel(props.scope);
const translated = label !== props.scope ? props.translate(label) : label;
const translated = scopeLabel(props.scope, props.translate);
return (
<li
@@ -163,7 +163,7 @@ function ConsentApiScopesAccordion(props: {
export default function ConsentPage(props: {
queryRef: PreloadedQuery<ConsentPageQuery>;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const [deviceResult, setDeviceResult] = useState<"authorized" | "denied" | null>(null);
const [pendingAction, setPendingAction] = useState<"allow" | "deny" | null>(null);
@@ -173,7 +173,7 @@ export default function ConsentPage(props: {
} | null>(null);
const data = usePreloadedQuery<ConsentPageQuery>(consentPageQuery, props.queryRef);
usePageTitle(__("Authorize Application"));
usePageTitle(t("consentPage.pageTitle"));
const { node: consent } = data;
@@ -185,8 +185,8 @@ export default function ConsentPage(props: {
);
const apiScopesSummary = useMemo(
() => `${__("API access")} (${apiScopes.length})`,
[__, apiScopes.length],
() => t("consentPage.apiAccess", { count: apiScopes.length }),
[t, apiScopes.length],
);
useEffect(() => {
@@ -212,9 +212,9 @@ export default function ConsentPage(props: {
if (errors) {
setPendingAction(null);
toast({
title: __("Authorization failed"),
title: t("consentPage.errors.authorizationFailed"),
description: formatError(
__("Something went wrong. Please try again."),
t("consentPage.errors.generic"),
errors,
),
variant: "error",
@@ -225,8 +225,8 @@ export default function ConsentPage(props: {
if (!response.approveConsent) {
setPendingAction(null);
toast({
title: __("Authorization failed"),
description: __("Something went wrong. Please try again."),
title: t("consentPage.errors.authorizationFailed"),
description: t("consentPage.errors.generic"),
variant: "error",
});
return;
@@ -247,23 +247,23 @@ export default function ConsentPage(props: {
onError: (err) => {
setPendingAction(null);
toast({
title: __("Error"),
title: t("common.error"),
description:
err.message || __("Something went wrong. Please try again."),
err.message || t("consentPage.errors.generic"),
variant: "error",
});
},
});
},
[consent, approveConsent, __, toast, pendingAction],
[consent, approveConsent, t, toast, pendingAction],
);
if (!consent.application || !consent.scopes) {
return (
<div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
<h1 className="text-2xl font-bold">{__("Invalid Request")}</h1>
<h1 className="text-2xl font-bold">{t("consentPage.invalidRequest.title")}</h1>
<p className="text-txt-tertiary">
{__("This consent request is invalid or has expired.")}
{t("consentPage.invalidRequest.description")}
</p>
</div>
);
@@ -272,9 +272,9 @@ export default function ConsentPage(props: {
if (deviceResult === "authorized") {
return (
<div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
<h1 className="text-2xl font-bold">{__("Device Authorized")}</h1>
<h1 className="text-2xl font-bold">{t("consentPage.deviceAuthorized.title")}</h1>
<p className="text-txt-tertiary">
{__("Your device has been successfully authorized. You can close this window and return to your device.")}
{t("consentPage.deviceAuthorized.description")}
</p>
</div>
);
@@ -283,9 +283,9 @@ export default function ConsentPage(props: {
if (deviceResult === "denied") {
return (
<div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
<h1 className="text-2xl font-bold">{__("Access Denied")}</h1>
<h1 className="text-2xl font-bold">{t("consentPage.accessDenied.title")}</h1>
<p className="text-txt-tertiary">
{__("You have denied the authorization request. You can close this window.")}
{t("consentPage.accessDenied.description")}
</p>
</div>
);
@@ -297,10 +297,10 @@ export default function ConsentPage(props: {
<Spinner size={24} centered className="text-txt-tertiary" />
<div className="space-y-2">
<h1 className="text-2xl font-bold">
{redirectState.approved ? __("Authorization Complete") : __("Access Denied")}
{redirectState.approved ? t("consentPage.authorizationComplete") : t("consentPage.accessDenied.title")}
</h1>
<p className="text-txt-tertiary">
{__("You will be redirected to")}
{t("consentPage.redirectingTo")}
{" "}
<span className="font-medium text-txt-secondary">
{consent.application.name}
@@ -321,14 +321,12 @@ export default function ConsentPage(props: {
</div>
</div>
<h1 className="text-2xl font-bold">
{__("Authorize")}
{t("consentPage.authorize")}
{" "}
<span className="font-bold">{consent.application.name}</span>
</h1>
<p className="text-txt-tertiary text-sm">
{__(
"This application is requesting access to your account with the following permissions:",
)}
{t("consentPage.description")}
</p>
</div>
@@ -339,7 +337,7 @@ export default function ConsentPage(props: {
<ConsentScopeRow
key={scope}
scope={scope}
translate={__}
translate={t}
/>
))}
</ul>
@@ -347,7 +345,7 @@ export default function ConsentPage(props: {
<ConsentApiScopesAccordion
scopes={apiScopes}
translate={__}
translate={t}
summaryLabel={apiScopesSummary}
/>
</div>
@@ -360,7 +358,7 @@ export default function ConsentPage(props: {
icon={pendingAction === "deny" ? Spinner : undefined}
onClick={() => handleAction(false)}
>
{__("Deny")}
{t("consentPage.actions.deny")}
</Button>
<Button
className="flex-1 h-10"
@@ -368,12 +366,12 @@ export default function ConsentPage(props: {
icon={pendingAction === "allow" ? Spinner : undefined}
onClick={() => handleAction(true)}
>
{__("Allow")}
{t("consentPage.actions.allow")}
</Button>
</div>
<p className="text-center text-xs text-txt-tertiary">
{__("You can revoke access at any time from your account settings.")}
{t("consentPage.revokeNotice")}
</p>
</div>
);

8
apps/console/src/pages/iam/auth/ConsentPageLoader.tsx
View File

@@ -18,8 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Component, type ReactNode, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useQueryLoader } from "react-relay";
import { useSearchParams } from "react-router";
@@ -61,13 +61,13 @@ class ConsentErrorBoundary extends Component<
}
function ConsentErrorFallback() {
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
<h1 className="text-2xl font-bold">{__("Invalid Request")}</h1>
<h1 className="text-2xl font-bold">{t("consentPage.invalidRequest.title")}</h1>
<p className="text-txt-tertiary">
{__("This consent request is invalid or has expired.")}
{t("consentPage.invalidRequest.description")}
</p>
</div>
);

28
apps/console/src/pages/iam/auth/CreatePasswordPage.tsx
View File

@@ -20,8 +20,8 @@
import { formatError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button, Field, useToast } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { Link, useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -43,12 +43,12 @@ const schema = z.object({
});
export default function CreatePasswordPage() {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const [searchParams] = useSearchParams();
const navigate = useNavigate();
usePageTitle(__("Create Password"));
usePageTitle(t("createPasswordPage.pageTitle"));
const { register, handleSubmit, formState } = useFormWithSchema(schema, {
defaultValues: {
@@ -69,16 +69,16 @@ export default function CreatePasswordPage() {
onCompleted: (_, e) => {
if (e) {
toast({
title: __("Password creation failed"),
description: formatError(__("Password creation failed"), e),
title: t("createPasswordPage.errors.creationFailed"),
description: formatError(t("createPasswordPage.errors.creationFailed"), e),
variant: "error",
});
return;
}
toast({
title: __("Success"),
description: __("Account created successfully"),
title: t("common.success"),
description: t("createPasswordPage.messages.created"),
variant: "success",
});
@@ -92,7 +92,7 @@ export default function CreatePasswordPage() {
},
onError: (e) => {
toast({
title: __("Password creation failed"),
title: t("createPasswordPage.errors.creationFailed"),
description: e.message,
variant: "error",
});
@@ -103,15 +103,15 @@ export default function CreatePasswordPage() {
return (
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Create a password")}</h1>
<h1 className="text-3xl font-bold">{t("createPasswordPage.title")}</h1>
<p className="text-txt-tertiary">
{__("Set a password for your account, with at least 8 characters")}
{t("createPasswordPage.description")}
</p>
</div>
<form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
<Field
label={__("Password")}
label={t("createPasswordPage.fields.password")}
type="password"
placeholder="••••••••"
{...register("password")}
@@ -120,19 +120,19 @@ export default function CreatePasswordPage() {
/>
<Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading || isCreatingPassword}>
{__("Save")}
{t("createPasswordPage.actions.save")}
</Button>
</form>
<div className="text-center">
<p className="text-sm text-txt-tertiary">
{__("Already have an account?")}
{t("createPasswordPage.alreadyHaveAccount")}
{" "}
<Link
to="/auth/login"
className="underline text-txt-primary hover:text-txt-secondary"
>
{__("Log in here")}
{t("createPasswordPage.actions.logIn")}
</Link>
</p>
</div>

30
apps/console/src/pages/iam/auth/DeviceActivationPage.tsx
View File

@@ -20,7 +20,6 @@
import { formatError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button, useToast } from "@probo/ui";
import {
type ClipboardEvent,
@@ -29,6 +28,7 @@ import {
useRef,
useState,
} from "react";
import { useTranslation } from "react-i18next";
import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
import { useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -56,13 +56,13 @@ const authorizeDeviceMutation = graphql`
export default function DeviceActivationPage(props: {
queryRef: PreloadedQuery<DeviceActivationPageQuery>;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
usePreloadedQuery<DeviceActivationPageQuery>(deviceActivationPageQuery, props.queryRef);
usePageTitle(__("Device Activation"));
usePageTitle(t("deviceActivationPage.pageTitle"));
const preset = (searchParams.get("user_code") ?? "").replace(/-/g, "");
const [values, setValues] = useState<string[]>(() => {
@@ -132,9 +132,9 @@ export default function DeviceActivationPage(props: {
onCompleted: (response, errors) => {
if (errors) {
toast({
title: __("Authorization failed"),
title: t("deviceActivationPage.errors.authorizationFailed"),
description: formatError(
__("The code is invalid or has expired."),
t("deviceActivationPage.errors.invalidCode"),
errors,
),
variant: "error",
@@ -153,14 +153,14 @@ export default function DeviceActivationPage(props: {
},
onError: (err) => {
toast({
title: __("Error"),
description: err.message || __("Something went wrong. Please try again."),
title: t("common.error"),
description: err.message || t("deviceActivationPage.errors.generic"),
variant: "error",
});
},
});
},
[values, authorizeDevice, __, toast, navigate],
[values, authorizeDevice, t, toast, navigate],
);
const isFilled = values.every(v => v.length === 1);
@@ -168,9 +168,9 @@ export default function DeviceActivationPage(props: {
if (status === "success") {
return (
<div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
<h1 className="text-2xl font-bold">{__("Device Authorized")}</h1>
<h1 className="text-2xl font-bold">{t("deviceActivationPage.authorized.title")}</h1>
<p className="text-txt-tertiary">
{__("Your device has been successfully authorized. You can close this window and return to your device.")}
{t("deviceActivationPage.authorized.description")}
</p>
</div>
);
@@ -179,9 +179,9 @@ export default function DeviceActivationPage(props: {
return (
<div className="w-full max-w-md mx-auto pt-8 space-y-6">
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold">{__("Device Activation")}</h1>
<h1 className="text-2xl font-bold">{t("deviceActivationPage.title")}</h1>
<p className="text-txt-tertiary">
{__("Enter the code displayed on your device")}
{t("deviceActivationPage.description")}
</p>
</div>
@@ -206,7 +206,7 @@ export default function DeviceActivationPage(props: {
autoCapitalize="characters"
spellCheck={false}
autoFocus={idx === 0}
aria-label={`${__("Code character")} ${idx + 1}`}
aria-label={t("deviceActivationPage.codeCharacter", { count: idx + 1 })}
className="w-11 h-13 text-center text-lg font-mono font-medium uppercase rounded-lg border border-border-mid bg-level-1 text-txt-primary outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
/>
</div>
@@ -218,12 +218,12 @@ export default function DeviceActivationPage(props: {
className="w-full h-10"
disabled={!isFilled || isInFlight}
>
{isInFlight ? __("Authorizing...") : __("Continue")}
{isInFlight ? t("deviceActivationPage.actions.authorizing") : t("deviceActivationPage.actions.continue")}
</Button>
</form>
<p className="text-center text-sm text-txt-tertiary">
{__("Make sure this code matches the one on your device.")}
{t("deviceActivationPage.notice")}
</p>
</div>
);

46
apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
View File

@@ -20,9 +20,9 @@
import { formatError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button, Field, useToast } from "@probo/ui";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { Link } from "react-router";
import { graphql } from "relay-runtime";
@@ -45,9 +45,9 @@ const schema = z.object({
export default function ForgotPasswordPage() {
const { toast } = useToast();
const { __ } = useTranslate();
const { t } = useTranslation();
usePageTitle(__("Forgot Password"));
usePageTitle(t("forgotPasswordPage.pageTitle"));
const [instructionsSent, setInstructionsSent] = useState<boolean>();
const { register, handleSubmit, formState } = useFormWithSchema(schema, {
@@ -67,7 +67,7 @@ export default function ForgotPasswordPage() {
},
onError: (e: Error) => {
toast({
title: __("Request failed"),
title: t("forgotPasswordPage.errors.requestFailed"),
description: e.message,
variant: "error",
});
@@ -75,9 +75,9 @@ export default function ForgotPasswordPage() {
onCompleted: (_, e) => {
if (e) {
toast({
title: __("Request failed"),
title: t("forgotPasswordPage.errors.requestFailed"),
description: formatError(
__("Failed to send reset instructions"),
t("forgotPasswordPage.errors.sendInstructions"),
e,
),
variant: "error",
@@ -86,8 +86,8 @@ export default function ForgotPasswordPage() {
}
toast({
title: __("Success"),
description: __("Password reset instructions sent to your email"),
title: t("common.success"),
description: t("forgotPasswordPage.messages.instructionsSent"),
variant: "success",
});
setInstructionsSent(true);
@@ -99,34 +99,34 @@ export default function ForgotPasswordPage() {
? (
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Check your email")}</h1>
<h1 className="text-3xl font-bold">{t("forgotPasswordPage.sent.title")}</h1>
<p className="text-txt-tertiary">
{__("We've sent password reset instructions to your email address")}
{t("forgotPasswordPage.sent.description")}
</p>
</div>
<div className="text-center">
<p className="text-sm text-txt-tertiary">
{__("Didn't receive the email?")}
{t("forgotPasswordPage.sent.didNotReceive")}
{" "}
<button
onClick={() => setInstructionsSent(false)}
className="underline text-txt-primary hover:text-txt-secondary"
>
{__("Try again")}
{t("forgotPasswordPage.actions.tryAgain")}
</button>
</p>
</div>
<div className="text-center">
<p className="text-sm text-txt-tertiary">
{__("Remember your password?")}
{t("forgotPasswordPage.rememberPassword")}
{" "}
<Link
to="/auth/login"
className="underline text-txt-primary hover:text-txt-secondary"
>
{__("Back to login")}
{t("forgotPasswordPage.actions.backToLogin")}
</Link>
</p>
</div>
@@ -135,19 +135,17 @@ export default function ForgotPasswordPage() {
: (
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Forgot Password")}</h1>
<h1 className="text-3xl font-bold">{t("forgotPasswordPage.title")}</h1>
<p className="text-txt-tertiary">
{__(
"Enter your email address and we'll send you instructions to reset your password",
)}
{t("forgotPasswordPage.description")}
</p>
</div>
<form onSubmit={e => void onSubmit(e)} className="space-y-4">
<Field
label={__("Email")}
label={t("forgotPasswordPage.fields.email")}
type="email"
placeholder={__("name@example.com")}
placeholder={t("forgotPasswordPage.fields.emailPlaceholder")}
{...register("email")}
required
error={formState.errors.email?.message}
@@ -159,20 +157,20 @@ export default function ForgotPasswordPage() {
disabled={formState.isSubmitting}
>
{formState.isSubmitting
? __("Sending instructions...")
: __("Send reset instructions")}
? t("forgotPasswordPage.actions.sendingInstructions")
: t("forgotPasswordPage.actions.sendInstructions")}
</Button>
</form>
<div className="text-center">
<p className="text-sm text-txt-tertiary">
{__("Remember your password?")}
{t("forgotPasswordPage.rememberPassword")}
{" "}
<Link
to="/auth/login"
className="underline text-txt-primary hover:text-txt-secondary"
>
{__("Back to login")}
{t("forgotPasswordPage.actions.backToLogin")}
</Link>
</p>
</div>

36
apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
View File

@@ -20,8 +20,8 @@
import { formatError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button, Field, useToast } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { Link, useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -49,13 +49,13 @@ const schema = z
});
export default function ResetPasswordPage() {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const token = searchParams.get("token");
usePageTitle(__("Reset password"));
usePageTitle(t("resetPasswordPage.pageTitle"));
const { register, handleSubmit, formState } = useFormWithSchema(schema, {
defaultValues: {
@@ -71,8 +71,8 @@ export default function ResetPasswordPage() {
const onSubmit = handleSubmit((data) => {
if (!token) {
toast({
title: __("Reset failed"),
description: __("Invalid or missing reset token"),
title: t("resetPasswordPage.errors.resetFailed"),
description: t("resetPasswordPage.errors.invalidToken"),
variant: "error",
});
return;
@@ -87,7 +87,7 @@ export default function ResetPasswordPage() {
},
onError: (e: Error) => {
toast({
title: __("Reset failed"),
title: t("resetPasswordPage.errors.resetFailed"),
description: e.message,
variant: "error",
});
@@ -95,9 +95,9 @@ export default function ResetPasswordPage() {
onCompleted: (_, e) => {
if (e) {
toast({
title: __("Reset failed"),
title: t("resetPasswordPage.errors.resetFailed"),
description: formatError(
__("Password reset failed"),
t("resetPasswordPage.errors.reset"),
e,
),
variant: "error",
@@ -105,8 +105,8 @@ export default function ResetPasswordPage() {
return;
}
toast({
title: __("Success"),
description: __("Password reset successfully"),
title: t("common.success"),
description: t("resetPasswordPage.messages.reset"),
variant: "success",
});
void navigate("/auth/login", { replace: true });
@@ -117,15 +117,15 @@ export default function ResetPasswordPage() {
return (
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Reset password")}</h1>
<h1 className="text-3xl font-bold">{t("resetPasswordPage.title")}</h1>
<p className="text-txt-tertiary">
{__("Enter your new password to reset your account")}
{t("resetPasswordPage.description")}
</p>
</div>
<form onSubmit={e => void onSubmit(e)} className="space-y-4">
<Field
label={__("New Password")}
label={t("resetPasswordPage.fields.newPassword")}
type="password"
placeholder="••••••••"
{...register("password")}
@@ -134,7 +134,7 @@ export default function ResetPasswordPage() {
/>
<Field
label={__("Confirm Password")}
label={t("resetPasswordPage.fields.confirmPassword")}
type="password"
placeholder="••••••••"
{...register("confirmPassword")}
@@ -144,20 +144,20 @@ export default function ResetPasswordPage() {
<Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
{formState.isLoading
? __("Resetting password...")
: __("Reset password")}
? t("resetPasswordPage.actions.resetting")
: t("resetPasswordPage.actions.reset")}
</Button>
</form>
<div className="text-center">
<p className="text-sm text-txt-tertiary">
{__("Remember your password?")}
{t("resetPasswordPage.rememberPassword")}
{" "}
<Link
to="/auth/login"
className="underline text-txt-primary hover:text-txt-secondary"
>
{__("Log in here")}
{t("resetPasswordPage.actions.logIn")}
</Link>
</p>
</div>

43
apps/console/src/pages/iam/auth/SignUpPage.tsx
View File

@@ -20,9 +20,9 @@
import { formatError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button, Field, useToast } from "@probo/ui";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useMutation, usePreloadedQuery, useQueryLoader } from "react-relay";
import { Link, useNavigate } from "react-router";
import { graphql } from "relay-runtime";
@@ -57,11 +57,11 @@ const schema = z.object({
type FormData = z.infer<typeof schema>;
function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQueryLoader<SignUpPageQuery>>[0]> }) {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const navigate = useNavigate();
usePageTitle(__("Sign up"));
usePageTitle(t("signUpPage.pageTitle"));
const data = usePreloadedQuery<SignUpPageQuery>(signUpPageQuery, props.queryRef);
@@ -87,23 +87,22 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
onCompleted: (_, e) => {
if (e) {
toast({
title: __("Sign up failed"),
description: formatError(__("Sign up failed"), e),
title: t("signUpPage.errors.failed"),
description: formatError(t("signUpPage.errors.failed"), e),
variant: "error",
});
return;
}
toast({
title: __("Success"),
description: __("Account created successfully"),
title: t("common.success"), description: t("signUpPage.messages.created"),
variant: "success",
});
void navigate("/", { replace: true });
},
onError: (e) => {
toast({
title: __("Sign up failed"),
title: t("signUpPage.errors.failed"),
description: e.message,
variant: "error",
});
@@ -115,9 +114,9 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
return (
<div className="space-y-6 w-full max-w-md mx-auto pt-8 text-center">
<div className="space-y-2">
<h1 className="text-3xl font-bold">{__("Registration unavailable")}</h1>
<h1 className="text-3xl font-bold">{t("signUpPage.unavailable.title")}</h1>
<p className="text-txt-tertiary">
{__("New account registration is currently disabled. Please contact your administrator or reach out to Probo for assistance.")}
{t("signUpPage.unavailable.description")}
</p>
</div>
@@ -127,7 +126,7 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
className="w-xs h-10 mx-auto"
to="/auth/login"
>
{__("Back to login")}
{t("signUpPage.actions.backToLogin")}
</Button>
</div>
</div>
@@ -137,33 +136,33 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
return (
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Sign up")}</h1>
<h1 className="text-3xl font-bold">{t("signUpPage.title")}</h1>
<p className="text-txt-tertiary">
{__("Enter your information to create an account")}
{t("signUpPage.description")}
</p>
</div>
<form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
<Field
label={__("Full Name")}
label={t("signUpPage.fields.fullName")}
type="text"
placeholder={__("John Doe")}
placeholder={t("signUpPage.fields.fullNamePlaceholder")}
{...register("fullName")}
required
error={formState.errors.fullName?.message}
/>
<Field
label={__("Email")}
label={t("signUpPage.fields.email")}
type="email"
placeholder={__("name@example.com")}
placeholder={t("signUpPage.fields.emailPlaceholder")}
{...register("email")}
required
error={formState.errors.email?.message}
/>
<Field
label={__("Password")}
label={t("signUpPage.fields.password")}
type="password"
placeholder="••••••••"
{...register("password")}
@@ -173,20 +172,20 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
<Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
{formState.isLoading
? __("Creating account...")
: __("Sign up with email")}
? t("signUpPage.actions.creating")
: t("signUpPage.actions.signUpWithEmail")}
</Button>
</form>
<div className="text-center">
<p className="text-sm text-txt-tertiary">
{__("Already have an account?")}
{t("signUpPage.alreadyHaveAccount")}
{" "}
<Link
to="/auth/login"
className="underline text-txt-primary hover:text-txt-secondary"
>
{__("Log in here")}
{t("signUpPage.actions.logIn")}
</Link>
</p>
</div>

37
apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
View File

@@ -20,9 +20,9 @@
import { formatError } from "@probo/helpers";
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button, Field, useToast } from "@probo/ui";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { Link, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -44,11 +44,11 @@ const confirmEmailSchema = z.object({
});
export default function VerifyEmailPage() {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const [searchParams] = useSearchParams();
usePageTitle(__("Confirm Email"));
usePageTitle(t("verifyEmailPage.pageTitle"));
const [isConfirmed, setIsConfirmed] = useState(false);
@@ -71,8 +71,7 @@ export default function VerifyEmailPage() {
onCompleted: (_, errors) => {
if (errors) {
toast({
title: __("Error"),
description: formatError(__("Failed to confirm email"), errors),
title: t("common.error"), description: formatError(t("verifyEmailPage.errors.confirm"), errors),
variant: "error",
});
return;
@@ -80,15 +79,13 @@ export default function VerifyEmailPage() {
setIsConfirmed(true);
toast({
title: __("Success"),
description: __("Your email has been confirmed successfully"),
title: t("common.success"), description: t("verifyEmailPage.messages.confirmed"),
variant: "success",
});
},
onError: (err) => {
toast({
title: __("Error"),
description: err.message || __("Failed to confirm email"),
title: t("common.error"), description: err.message || t("verifyEmailPage.errors.confirm"),
variant: "error",
});
},
@@ -98,9 +95,9 @@ export default function VerifyEmailPage() {
return (
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
<h1 className="text-3xl font-bold">{t("verifyEmailPage.title")}</h1>
<p className="text-txt-tertiary">
{__("Confirm your email address to complete registration")}
{t("verifyEmailPage.description")}
</p>
</div>
@@ -108,25 +105,23 @@ export default function VerifyEmailPage() {
? (
<div className="space-y-4 text-center">
<p className="text-green-600 dark:text-green-400">
{__("Your email has been confirmed successfully!")}
{t("verifyEmailPage.messages.confirmedWithExclamation")}
</p>
<Button to="/auth/login" className="w-full">
{__("Proceed to Login")}
{t("verifyEmailPage.actions.proceedToLogin")}
</Button>
</div>
)
: (
<form onSubmit={e => void handleSubmit(e)} className="space-y-4">
<Field
label={__("Confirmation Token")}
label={t("verifyEmailPage.fields.token")}
type="text"
placeholder={__("Enter your confirmation token")}
placeholder={t("verifyEmailPage.fields.tokenPlaceholder")}
{...form.register("token")}
error={form.formState.errors.token?.message}
disabled={form.formState.isSubmitting}
help={__(
"The token has been automatically filled from the URL if available",
)}
help={t("verifyEmailPage.fields.tokenHelp")}
/>
<Button
@@ -135,8 +130,8 @@ export default function VerifyEmailPage() {
disabled={form.formState.isSubmitting}
>
{form.formState.isSubmitting
? __("Confirming...")
: __("Confirm Email")}
? t("verifyEmailPage.actions.confirming")
: t("verifyEmailPage.actions.confirm")}
</Button>
</form>
)}
@@ -148,7 +143,7 @@ export default function VerifyEmailPage() {
to="/auth/login"
className="underline text-txt-primary hover:text-txt-secondary"
>
{__("Back to Login")}
{t("verifyEmailPage.actions.backToLogin")}
</Link>
</p>
)}

34
apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
View File

@@ -19,9 +19,9 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Button, Field, IconChevronLeft, useToast } from "@probo/ui";
import type { FormEventHandler } from "react";
import { useTranslation } from "react-i18next";
import { useMutation } from "react-relay";
import { Link, matchPath, useLocation } from "react-router";
import { graphql } from "relay-runtime";
@@ -43,7 +43,7 @@ export default function PasswordSignInPage() {
const location = useLocation();
const postAuthRedirectUrl = usePostAuthRedirectUrl();
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const [signIn, isSigningIn]
@@ -74,9 +74,9 @@ export default function PasswordSignInPage() {
onCompleted: (_, error) => {
if (error) {
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(
__("Failed to login"),
t("passwordSignInPage.errors.login"),
error,
),
variant: "error",
@@ -88,7 +88,7 @@ export default function PasswordSignInPage() {
},
onError: (e) => {
toast({
title: __("Error"),
title: t("common.error"),
description: e.message,
variant: "error",
});
@@ -103,55 +103,55 @@ export default function PasswordSignInPage() {
className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
>
<IconChevronLeft size={20} />
<span className="text-sm">{__("Back")}</span>
<span className="text-sm">{t("passwordSignInPage.actions.back")}</span>
</Link>
<h1 className="text-center text-2xl font-bold">
{__("Sign in with password")}
{t("passwordSignInPage.title")}
</h1>
<p className="text-center text-txt-tertiary mt-1 mb-6">
{__("Enter your email and password")}
{t("passwordSignInPage.description")}
</p>
<div className="space-y-4">
<Field
required
placeholder={__("Email")}
placeholder={t("passwordSignInPage.fields.email")}
name="email"
type="email"
label={__("Email")}
label={t("passwordSignInPage.fields.email")}
autoFocus
/>
<Field
required
placeholder={__("Password")}
placeholder={t("passwordSignInPage.fields.password")}
name="password"
type="password"
label={__("Password")}
label={t("passwordSignInPage.fields.password")}
/>
</div>
<Button className="w-xs h-10 mx-auto mt-6" disabled={isSigningIn}>
{isSigningIn ? __("Logging in...") : __("Login")}
{isSigningIn ? t("passwordSignInPage.actions.loggingIn") : t("passwordSignInPage.actions.login")}
</Button>
<div className="text-center mt-6 text-sm text-txt-secondary">
{__("Don't have an account ?")}
{t("passwordSignInPage.noAccount")}
{" "}
<Link to={{ pathname: "/auth/register", search: location.search }} className="underline hover:text-txt-primary">
{__("Register")}
{t("passwordSignInPage.actions.register")}
</Link>
</div>
<div className="text-center text-sm text-txt-secondary">
{__("Forgot password?")}
{t("passwordSignInPage.forgotPassword")}
{" "}
<Link
to="/auth/forgot-password"
className="underline hover:text-txt-primary"
>
{__("Reset password")}
{t("passwordSignInPage.actions.resetPassword")}
</Link>
</div>
</form>

31
apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Button, Field, IconChevronLeft, useToast } from "@probo/ui";
import { type FormEventHandler, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
type PreloadedQuery,
usePreloadedQuery,
@@ -40,7 +40,7 @@ const ssoAvailabilityQuery = graphql`
export default function SSOSignInPage() {
const location = useLocation();
const { __ } = useTranslate();
const { t } = useTranslation();
const [queryRef, loadQuery]
= useQueryLoader<SSOSignInPageQuery>(ssoAvailabilityQuery);
@@ -65,37 +65,37 @@ export default function SSOSignInPage() {
className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
>
<IconChevronLeft size={20} />
<span className="text-sm">{__("Back")}</span>
<span className="text-sm">{t("ssoSignInPage.actions.back")}</span>
</Link>
<h1 className="text-center text-2xl font-bold">
{__("Login with SSO")}
{t("ssoSignInPage.title")}
</h1>
<p className="text-center text-txt-tertiary mt-1 mb-6">
{__("Enter your work email to continue with SSO")}
{t("ssoSignInPage.description")}
</p>
<Field
required
placeholder={__("Work Email")}
placeholder={t("ssoSignInPage.fields.workEmail")}
name="email"
type="email"
label={__("Work Email")}
label={t("ssoSignInPage.fields.workEmail")}
autoFocus
/>
<Button className="w-xs h-10 mx-auto mt-6" disabled={checking}>
{checking ? __("Checking...") : __("Continue with SSO")}
{checking ? t("ssoSignInPage.actions.checking") : t("ssoSignInPage.actions.continue")}
</Button>
<div className="text-center mt-6 text-sm text-txt-secondary">
{__("Don't have an account ?")}
{t("ssoSignInPage.noAccount")}
{" "}
<Link
to={{ pathname: "/auth/register", search: location.search }}
className="underline hover:text-txt-primary"
>
{__("Register")}
{t("ssoSignInPage.actions.register")}
</Link>
</div>
</form>
@@ -118,7 +118,7 @@ function NavigateToSSOLoginURL(props: {
}) {
const { queryRef, loginSearch } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const [searchParams] = useSearchParams();
const navigate = useNavigate();
@@ -132,11 +132,11 @@ function NavigateToSSOLoginURL(props: {
useEffect(() => {
if (!ssoLoginURL.ok) {
toast({
title: __("Error"),
title: t("common.error"),
description:
ssoLoginURL.errors[0] instanceof Error
? ssoLoginURL.errors[0].message
: __("SSO not available for this email domain"),
: t("ssoSignInPage.errors.unavailable"),
variant: "error",
});
@@ -146,8 +146,7 @@ function NavigateToSSOLoginURL(props: {
if (!ssoLoginURL.value) {
toast({
title: __("Error"),
description: __("SSO not available for this email domain"),
title: t("common.error"), description: t("ssoSignInPage.errors.unavailable"),
variant: "error",
});
return;
@@ -162,7 +161,7 @@ function NavigateToSSOLoginURL(props: {
}
window.location.href = url.toString();
}, [__, loginSearch, navigate, postAuthRedirectUrl, searchParams, ssoLoginURL, toast]);
}, [t, loginSearch, navigate, postAuthRedirectUrl, searchParams, ssoLoginURL, toast]);
return null;
}

30
apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
View File

@@ -19,8 +19,8 @@
// SOFTWARE.
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { Button } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { Link, useLocation, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -52,7 +52,7 @@ type Props = {
};
export default function SignInPage(props: Props) {
const { __ } = useTranslate();
const { t } = useTranslation();
const location = useLocation();
const [searchParams] = useSearchParams();
const postAuthRedirectUrl = usePostAuthRedirectUrl();
@@ -64,15 +64,15 @@ export default function SignInPage(props: Props) {
const clientBranding = data.oauthClientBranding;
const authorizeHeading = clientBranding?.name
? __("Sign in")
: __("Sign in to continue");
? t("auth.actions.signIn")
: t("signInPage.authorize.title");
usePageTitle(
isAuthorizeFlow
? clientBranding?.name
? `${__("Sign in to")} ${clientBranding.name}`
? t("signInPage.authorize.titleWithClient", { name: clientBranding.name })
: authorizeHeading
: __("Sign in to your account"),
: t("signInPage.title"),
);
const oidcContinueURL = isAuthorizeFlow ? postAuthRedirectUrl : undefined;
@@ -94,11 +94,11 @@ export default function SignInPage(props: Props) {
<h1 className="text-2xl font-bold">
{isAuthorizeFlow
? authorizeHeading
: __("Sign in to your account")}
: t("signInPage.title")}
</h1>
{isAuthorizeFlow && (
<p className="text-txt-tertiary">
{__("Use your email or a connected account to continue")}
{t("signInPage.authorize.description")}
</p>
)}
</div>
@@ -114,33 +114,35 @@ export default function SignInPage(props: Props) {
<MagicLinkForm />
<Divider>{__("Or")}</Divider>
<Divider>{t("signInPage.or")}</Divider>
<Button
variant="secondary"
className="w-full h-10"
to={{ pathname: "/auth/sso-login", search: location.search }}
>
{__("Sign in with SSO")}
{t("signInPage.actions.signInWithSso")}
</Button>
<Divider>{t("signInPage.or")}</Divider>
<Button
variant="secondary"
className="w-full h-10"
to={{ pathname: "/auth/password-login", search: location.search }}
>
{__("Sign in with password")}
{t("signInPage.actions.signInWithEmail")}
</Button>
</div>
<p className="text-center text-sm text-txt-secondary">
{__("New to Probo?")}
<p className="mt-8 text-center text-sm text-txt-secondary">
{t("signInPage.newToProbo")}
{" "}
<Link
to={{ pathname: "/auth/register", search: location.search }}
className="underline hover:text-txt-primary"
>
{__("Create account")}
{t("signInPage.actions.createAccount")}
</Link>
</p>
</div>

28
apps/console/src/pages/iam/auth/sign-in/_components/MagicLinkForm.tsx
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Button, Field, useToast } from "@probo/ui";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { z } from "zod";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
@@ -35,7 +35,7 @@ type FormData = z.infer<typeof schema>;
const timerDurationSeconds = 60;
export function MagicLinkForm() {
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const postAuthRedirectUrl = usePostAuthRedirectUrl();
@@ -83,8 +83,8 @@ export function MagicLinkForm() {
});
} catch {
toast({
title: __("Error"),
description: __("Cannot send magic link"),
title: t("common.error"),
description: t("magicLinkForm.errors.send"),
variant: "error",
});
return;
@@ -92,16 +92,16 @@ export function MagicLinkForm() {
if (!response.ok) {
toast({
title: __("Error"),
description: __("Cannot send magic link"),
title: t("common.error"),
description: t("magicLinkForm.errors.send"),
variant: "error",
});
return;
}
toast({
title: __("Success"),
description: __("Magic link sent!"),
title: t("common.success"),
description: t("magicLinkForm.messages.sent"),
variant: "success",
});
setTimer(timerDurationSeconds);
@@ -111,7 +111,7 @@ export function MagicLinkForm() {
return (
<form onSubmit={e => void handleSubmit(e)} className="space-y-4">
<Field
label={__("Email")}
label={t("magicLinkForm.fields.email")}
placeholder="john.doe@acme.com"
{...register("email")}
type="email"
@@ -121,9 +121,7 @@ export function MagicLinkForm() {
{magicLinkSent && (
<p className="text-txt-primary text-sm">
{__(
"Magic link sent! Check your email and use the link to continue.",
)}
{t("magicLinkForm.sentDescription")}
</p>
)}
@@ -134,9 +132,9 @@ export function MagicLinkForm() {
>
{magicLinkSent
? timer === 0
? __("Resend Link")
: `${__("Resend Link in")} ${timer}s`
: __("Send Magic Link")}
? t("magicLinkForm.actions.resend")
: t("magicLinkForm.actions.resendIn", { count: timer })
: t("magicLinkForm.actions.send")}
</Button>
</form>
);

8
apps/console/src/pages/iam/auth/sign-in/_components/OIDCButton.tsx
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Button, Google, Microsoft } from "@probo/ui";
import type { ComponentProps } from "react";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -50,7 +50,7 @@ export function OIDCButton({
providerRef: OIDCButtonFragment$key;
continueURL?: string;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [searchParams] = useSearchParams();
const safeContinueUrl = useSafeContinueUrl();
const provider = useFragment(fragment, providerRef);
@@ -74,7 +74,9 @@ export function OIDCButton({
>
<span className="flex items-center gap-2">
{Icon && <Icon width={18} height={18} />}
{__(`Sign in with ${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`)}
{t("oidcButton.signInWith", {
provider: provider.name.charAt(0).toUpperCase() + provider.name.slice(1),
})}
</span>
</Button>
);

22
apps/console/src/pages/iam/memberships/MembershipsPage.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
Button,
Card,
@@ -28,6 +27,7 @@ import {
Input,
} from "@probo/ui";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { graphql, type PreloadedQuery, usePreloadedQuery } from "react-relay";
import type { MembershipsPageQuery } from "#/__generated__/iam/MembershipsPageQuery.graphql";
@@ -67,10 +67,10 @@ export const membershipsPageQuery = graphql`
export function MembershipsPage(props: {
queryRef: PreloadedQuery<MembershipsPageQuery>;
}) {
const { __ } = useTranslate();
const { t } = useTranslation();
const [search, setSearch] = useState("");
usePageTitle(__("Select an organization"));
usePageTitle(t("membershipsPage.pageTitle"));
const { queryRef } = props;
const {
@@ -93,13 +93,13 @@ export function MembershipsPage(props: {
<>
<div className="space-y-6 w-full py-6">
<h1 className="text-3xl font-bold text-center">
{__("Select an organization")}
{t("membershipsPage.title")}
</h1>
<div className="space-y-4 w-full">
{invitingOrganizations.length > 0 && (
<div className="space-y-3">
<h2 className="text-xl font-semibold">
{__("Pending invitations")}
{t("membershipsPage.pendingInvitations")}
</h2>
{invitingOrganizations.map(organization => (
<InvitingOrganizationCard key={organization.id} fKey={organization} />
@@ -109,12 +109,12 @@ export function MembershipsPage(props: {
{initialProfiles.length > 0 && (
<div className="space-y-3">
<h2 className="text-xl font-semibold">
{__("Your organizations")}
{t("membershipsPage.yourOrganizations")}
</h2>
<div className="w-full">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search organizations...")}
placeholder={t("membershipsPage.searchPlaceholder")}
value={search}
onValueChange={setSearch}
/>
@@ -122,7 +122,7 @@ export function MembershipsPage(props: {
{profiles.length === 0
? (
<div className="text-center text-txt-secondary py-4">
{__("No organizations found")}
{t("membershipsPage.empty")}
</div>
)
: (
@@ -138,10 +138,10 @@ export function MembershipsPage(props: {
)}
<Card padded>
<h2 className="text-xl font-semibold mb-1">
{__("Create an organization")}
{t("membershipsPage.createOrganization.title")}
</h2>
<p className="text-txt-tertiary mb-4">
{__("Add a new organization to your account")}
{t("membershipsPage.createOrganization.description")}
</p>
<Button
to="/organizations/new"
@@ -149,7 +149,7 @@ export function MembershipsPage(props: {
icon={IconPlusLarge}
className="w-full"
>
{__("Create organization")}
{t("membershipsPage.createOrganization.action")}
</Button>
</Card>
</div>

6
apps/console/src/pages/iam/memberships/_components/InvitingOrganizationCard.tsx
View File

@@ -18,8 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Badge, Card, IconMail } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -37,7 +37,7 @@ interface InvitingOrganizationCardProps {
export function InvitingOrganizationCard(props: InvitingOrganizationCardProps) {
const { fKey } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const organization = useFragment<InvitingOrganizationCardFragment$key>(
fragment,
@@ -50,7 +50,7 @@ export function InvitingOrganizationCard(props: InvitingOrganizationCardProps) {
<h2 className="font-semibold text-xl">{organization.name}</h2>
<Badge variant="neutral" className="flex items-center gap-1">
<IconMail size={14} />
{__("Check your email")}
{t("invitingOrganizationCard.checkEmail")}
</Badge>
</div>
</Card>

16
apps/console/src/pages/iam/memberships/_components/MembershipCard.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { parseDate } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Avatar,
Badge,
@@ -29,6 +28,7 @@ import {
IconClock,
IconLock,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { Link } from "react-router";
import { graphql } from "relay-runtime";
@@ -65,7 +65,7 @@ interface MembershipCardProps {
export function MembershipCard(props: MembershipCardProps) {
const { fKey, organizationFragmentRef } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const { membership, ...user } = useFragment<MembershipCardFragment$key>(
fragment,
@@ -84,21 +84,21 @@ export function MembershipCard(props: MembershipCardProps) {
return (
<Badge variant="success" className="flex items-center gap-1">
<IconCheckmark1 size={14} />
{__("Authenticated")}
{t("membershipCard.status.authenticated")}
</Badge>
);
} else if (isExpired) {
return (
<Badge variant="warning" className="flex items-center gap-1">
<IconClock size={14} />
{__("Session expired")}
{t("membershipCard.status.sessionExpired")}
</Badge>
);
} else {
return (
<Badge variant="neutral" className="flex items-center gap-1">
<IconLock size={14} />
{__("Authentication required")}
{t("membershipCard.status.authenticationRequired")}
</Badge>
);
}
@@ -123,12 +123,12 @@ export function MembershipCard(props: MembershipCardProps) {
? (
<Link to={`/organizations/${organization.id}`}>
{isAssuming
? <Button variant="secondary">{__("Start")}</Button>
: <Button>{__("Login")}</Button>}
? <Button variant="secondary">{t("membershipCard.actions.start")}</Button>
: <Button>{t("membershipCard.actions.login")}</Button>}
</Link>
)
: (
<Button variant="secondary" disabled>{__("Account deactivated")}</Button>
<Button variant="secondary" disabled>{t("membershipCard.accountDeactivated")}</Button>
)}
</div>
</div>

18
apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
DropdownSeparator,
IconArrowBoxLeft,
@@ -29,6 +28,7 @@ import {
UserDropdownItem,
useToast,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useFragment, useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -55,7 +55,7 @@ const signOutMutation = graphql`
export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
const { fKey } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const { canListAPIKeys, canListOAuth2AccessTokens, email, fullName }
@@ -70,8 +70,8 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
onCompleted: (_, e) => {
if (e) {
toast({
title: __("Request failed"),
description: formatError(__("Cannot sign out"), e),
title: t("viewerDropdown.errors.requestFailed"),
description: formatError(t("viewerDropdown.errors.cannotSignOut"), e),
variant: "error",
});
return;
@@ -80,7 +80,7 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
},
onError: (e) => {
toast({
title: __("Error"),
title: t("common.error"),
description: e.message,
variant: "error",
});
@@ -94,27 +94,27 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
<UserDropdownItem
to="/me/api-keys"
icon={IconKey}
label={__("API Keys")}
label={t("apiKeys.title")}
/>
)}
{canListOAuth2AccessTokens && (
<UserDropdownItem
to="/me/oauth-tokens"
icon={IconKey}
label={__("OAuth tokens")}
label={t("viewerDropdown.actions.oauthTokens")}
/>
)}
<UserDropdownItem
to="mailto:support@probo.com"
icon={IconCircleQuestionmark}
label={__("Help")}
label={t("viewerDropdown.actions.help")}
/>
<DropdownSeparator />
<UserDropdownItem
variant="danger"
to="/logout"
icon={IconArrowBoxLeft}
label="Logout"
label={t("viewerDropdown.actions.logout")}
onClick={handleLogout}
/>
</UserDropdown>

40
apps/console/src/pages/iam/oauthTokens/NewOAuthTokenPage.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
@@ -35,6 +34,7 @@ import {
} from "@probo/ui";
import { useMemo, useState } from "react";
import { Controller } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { ConnectionHandler, useLazyLoadQuery } from "react-relay";
import { Link, useNavigate } from "react-router";
import { graphql } from "relay-runtime";
@@ -106,12 +106,12 @@ function computeExpiresAt(expiresIn: CreateFormData["expiresIn"]) {
}
export function NewOAuthTokenPage() {
const { __ } = useTranslate();
const { t } = useTranslation();
const navigate = useNavigate();
const tokenDialogRef = useDialogRef();
const [token, setToken] = useState("");
usePageTitle(__("New OAuth token"));
usePageTitle(t("newOAuthTokenPage.pageTitle"));
const data = useLazyLoadQuery<NewOAuthTokenPageQuery>(pageQuery, {});
@@ -136,8 +136,8 @@ export function NewOAuthTokenPage() {
const [create, isCreating] = useMutationWithToasts<NewOAuthTokenPageCreateMutation>(
createMutation,
{
successMessage: "OAuth token created successfully.",
errorMessage: "Failed to create OAuth token",
successMessage: t("newOAuthTokenPage.messages.created"),
errorMessage: t("newOAuthTokenPage.errors.create"),
},
);
@@ -202,25 +202,23 @@ export function NewOAuthTokenPage() {
<Breadcrumb
items={[
{
label: __("OAuth tokens"),
label: t("oauthTokensPage.title"),
to: "/me/oauth-tokens",
},
{ label: __("New token") },
{ label: t("newOAuthTokenPage.breadcrumb") },
]}
/>
<PageHeader
title={__("New OAuth token")}
description={__(
"Create a bearer token with scoped access to the Probo API.",
)}
title={t("newOAuthTokenPage.title")}
description={t("newOAuthTokenPage.description")}
/>
<Card padded>
<form className="space-y-6" onSubmit={e => void handleSubmit(handleCreate)(e)}>
<div className="max-w-xl space-y-6">
<Field>
<Label htmlFor="name">{__("Name")}</Label>
<Label htmlFor="name">{t("newOAuthTokenPage.fields.name")}</Label>
<Input id="name" {...register("name")} />
{formState.errors.name && (
<p className="text-sm text-danger mt-1">
@@ -230,7 +228,7 @@ export function NewOAuthTokenPage() {
</Field>
<Field>
<Label htmlFor="expiresIn">{__("Expiration")}</Label>
<Label htmlFor="expiresIn">{t("newOAuthTokenPage.fields.expiration")}</Label>
<Controller
name="expiresIn"
control={control}
@@ -240,10 +238,10 @@ export function NewOAuthTokenPage() {
value={field.value}
onValueChange={field.onChange}
>
<Option value="1month">{__("1 month")}</Option>
<Option value="3months">{__("3 months")}</Option>
<Option value="6months">{__("6 months")}</Option>
<Option value="1year">{__("1 year")}</Option>
<Option value="1month">{t("newOAuthTokenPage.expirations.month", { count: 1 })}</Option>
<Option value="3months">{t("newOAuthTokenPage.expirations.month", { count: 3 })}</Option>
<Option value="6months">{t("newOAuthTokenPage.expirations.month", { count: 6 })}</Option>
<Option value="1year">{t("newOAuthTokenPage.expirations.year", { count: 1 })}</Option>
</Select>
)}
/>
@@ -251,7 +249,7 @@ export function NewOAuthTokenPage() {
</div>
<Field>
<Label>{__("Scopes")}</Label>
<Label>{t("newOAuthTokenPage.fields.scopes")}</Label>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mt-2">
{supportedScopes.map(scope => (
<label key={scope} className="flex items-start gap-2">
@@ -279,18 +277,18 @@ export function NewOAuthTokenPage() {
<div className="flex gap-3 max-w-xl">
<Button type="submit" disabled={isCreating}>
{__("Create token")}
{t("newOAuthTokenPage.actions.create")}
</Button>
<Button
type="button"
variant="secondary"
onClick={toggleAllScopes}
>
{allScopesSelected ? __("Deselect all") : __("Select all")}
{allScopesSelected ? t("newOAuthTokenPage.actions.deselectAll") : t("newOAuthTokenPage.actions.selectAll")}
</Button>
<Button variant="secondary" asChild>
<Link to="/me/oauth-tokens">
{__("Cancel")}
{t("newOAuthTokenPage.actions.cancel")}
</Link>
</Button>
</div>

32
apps/console/src/pages/iam/oauthTokens/OAuthTokensPage.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { usePageTitle } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
Button,
Card,
@@ -32,6 +31,7 @@ import {
Thead,
Tr,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import {
graphql,
type PreloadedQuery,
@@ -87,9 +87,9 @@ export function OAuthTokensPage(props: {
queryRef: PreloadedQuery<OAuthTokensPageQuery>;
}) {
const { queryRef } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
usePageTitle(__("OAuth tokens"));
usePageTitle(t("oauthTokensPage.pageTitle"));
const { viewer } = usePreloadedQuery<OAuthTokensPageQuery>(
oauthTokensPageQuery,
@@ -106,15 +106,13 @@ export function OAuthTokensPage(props: {
return (
<div className="space-y-6 w-full py-6">
<PageHeader
title={__("OAuth tokens")}
description={__(
"Create bearer tokens with scoped API access for your account.",
)}
title={t("oauthTokensPage.title")}
description={t("oauthTokensPage.description")}
>
{viewer.canCreateOAuth2AccessToken && (
<Button asChild>
<Link to="/me/oauth-tokens/new">
{__("Create token")}
{t("oauthTokensPage.actions.create")}
</Link>
</Button>
)}
@@ -125,12 +123,10 @@ export function OAuthTokensPage(props: {
<Card padded>
<div className="text-center py-12">
<h3 className="text-lg font-medium text-gray-900 mb-2">
{__("No OAuth tokens")}
{t("oauthTokensPage.empty.title")}
</h3>
<p className="text-gray-600">
{__(
"Create a token to authenticate API requests on your behalf.",
)}
{t("oauthTokensPage.empty.description")}
</p>
</div>
</Card>
@@ -139,16 +135,16 @@ export function OAuthTokensPage(props: {
<Card padded className="space-y-4">
{totalCount > tokens.length && (
<p className="text-sm text-txt-tertiary">
{`${__("Showing")} ${tokens.length} ${__("of")} ${totalCount}`}
{t("oauthTokensPage.showing", { shown: tokens.length, total: totalCount })}
</p>
)}
<Table>
<Thead>
<Tr>
<Th>{__("Name")}</Th>
<Th>{__("Scopes")}</Th>
<Th>{__("Created")}</Th>
<Th>{__("Expires")}</Th>
<Th>{t("oauthTokensPage.columns.name")}</Th>
<Th>{t("oauthTokensPage.columns.scopes")}</Th>
<Th>{t("oauthTokensPage.columns.created")}</Th>
<Th>{t("oauthTokensPage.columns.expires")}</Th>
<Th className="w-0" />
</Tr>
</Thead>
@@ -170,7 +166,7 @@ export function OAuthTokensPage(props: {
disabled={isLoadingNext}
icon={isLoadingNext ? Spinner : IconChevronDown}
>
{__("Show more")}
{t("oauthTokensPage.actions.showMore")}
</Button>
)}
</Card>

16
apps/console/src/pages/iam/oauthTokens/_components/OAuthTokenCredentialsDialog.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { useCopy } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import {
Breadcrumb,
Button,
@@ -31,6 +30,7 @@ import {
IconWarning,
} from "@probo/ui";
import { clsx } from "clsx";
import { useTranslation } from "react-i18next";
export function OAuthTokenCredentialsDialog(props: {
dialogRef: React.RefObject<{ open: () => void; close: () => void } | null>;
@@ -38,21 +38,19 @@ export function OAuthTokenCredentialsDialog(props: {
onDone: () => void;
}) {
const { dialogRef, token, onDone } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const [isCopied, copy] = useCopy();
return (
<Dialog
ref={dialogRef}
title={<Breadcrumb items={[__("OAuth tokens"), __("Token")]} />}
title={<Breadcrumb items={[t("oauthTokensPage.title"), t("oauthTokenCredentialsDialog.title")]} />}
>
<DialogContent padded className="space-y-4">
<div className="flex items-start gap-2 rounded-lg border border-border-danger bg-danger px-4 py-3 text-sm text-txt-danger">
<IconWarning size={16} className="shrink-0 mt-0.5" />
<p>
{__(
"Copy this bearer token now. You will not be able to see it again.",
)}
{t("oauthTokenCredentialsDialog.description")}
</p>
</div>
<code className="flex items-start gap-2 rounded-lg bg-subtle p-4 font-mono text-sm">
@@ -65,8 +63,8 @@ export function OAuthTokenCredentialsDialog(props: {
)}
onClick={() => copy(token)}
disabled={!token}
aria-label={isCopied ? __("Copied") : __("Copy")}
title={isCopied ? __("Copied") : __("Copy")}
aria-label={isCopied ? t("oauthTokenCredentialsDialog.actions.copied") : t("oauthTokenCredentialsDialog.actions.copy")}
title={isCopied ? t("oauthTokenCredentialsDialog.actions.copied") : t("oauthTokenCredentialsDialog.actions.copy")}
>
{isCopied
? <IconCheckmark1 size={16} />
@@ -75,7 +73,7 @@ export function OAuthTokenCredentialsDialog(props: {
</code>
</DialogContent>
<DialogFooter>
<Button onClick={onDone}>{__("Done")}</Button>
<Button onClick={onDone}>{t("oauthTokenCredentialsDialog.actions.done")}</Button>
</DialogFooter>
</Dialog>
);

30
apps/console/src/pages/iam/oauthTokens/_components/OAuthTokenRow.tsx
View File

@@ -18,8 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { formatDate, formatError } from "@probo/helpers";
import {
Badge,
Button,
@@ -31,6 +30,7 @@ import {
useToast,
} from "@probo/ui";
import * as Popover from "@radix-ui/react-popover";
import { useTranslation } from "react-i18next";
import { ConnectionHandler, graphql, useFragment, useMutation } from "react-relay";
import type { OAuthTokenRowFragment$key } from "#/__generated__/iam/OAuthTokenRowFragment.graphql";
@@ -67,7 +67,7 @@ export function OAuthTokenRow(props: {
identityId: string;
}) {
const { tokenKey, identityId } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const { toast } = useToast();
const token = useFragment(fragment, tokenKey);
@@ -90,9 +90,9 @@ export function OAuthTokenRow(props: {
onCompleted: (_response, errors) => {
if (errors?.length) {
toast({
title: __("Error"),
title: t("common.error"),
description: formatError(
__("Failed to revoke OAuth token."),
t("oauthTokenRow.errors.revoke"),
errors,
),
variant: "error",
@@ -100,15 +100,13 @@ export function OAuthTokenRow(props: {
return;
}
toast({
title: __("Success"),
description: __("OAuth token revoked."),
title: t("common.success"), description: t("oauthTokenRow.messages.revoked"),
variant: "success",
});
},
onError: (error) => {
toast({
title: __("Error"),
description: formatError(__("Failed to revoke OAuth token."), error),
title: t("common.error"), description: formatError(t("oauthTokenRow.errors.revoke"), error),
variant: "error",
});
},
@@ -154,28 +152,26 @@ export function OAuthTokenRow(props: {
)}
</div>
</Td>
<Td>{new Date(token.createdAt).toLocaleDateString()}</Td>
<Td>{new Date(token.expiresAt).toLocaleDateString()}</Td>
<Td>{formatDate(token.createdAt)}</Td>
<Td>{formatDate(token.expiresAt)}</Td>
<Td>
{token.canDelete && (
<Dialog
title={__("Revoke OAuth token")}
title={t("oauthTokenRow.revoke.title")}
trigger={(
<Button variant="danger" disabled={isRevoking}>
{__("Revoke")}
{t("oauthTokenRow.actions.revoke")}
</Button>
)}
>
<DialogContent padded>
<p>
{__(
"This token will stop working immediately. This action cannot be undone.",
)}
{t("oauthTokenRow.revoke.description")}
</p>
</DialogContent>
<DialogFooter>
<Button variant="danger" onClick={handleRevoke} disabled={isRevoking}>
{__("Revoke token")}
{t("oauthTokenRow.actions.revokeToken")}
</Button>
</DialogFooter>
</Dialog>

8
apps/console/src/pages/iam/organizations/AssumePage.tsx
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { UnAuthenticatedError } from "@probo/relay";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
import { useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
@@ -67,7 +67,7 @@ export function AssumePage(props: { queryRef: PreloadedQuery<AssumePageQuery> })
const organizationId = useOrganizationId();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { __ } = useTranslate();
const { t } = useTranslation();
const safeContinueUrl = useSafeContinueUrl(`/organizations/${organizationId}`);
@@ -126,9 +126,9 @@ export function AssumePage(props: { queryRef: PreloadedQuery<AssumePageQuery> })
<AuthLayout>
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">{__("Sign in Redirection")}</h1>
<h1 className="text-3xl font-bold">{t("assumePage.title")}</h1>
<p className="text-txt-tertiary">
{__("Redirecting you to your authentication URL…")}
{t("assumePage.description")}
</p>
</div>
</div>

37
apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Button,
Card,
@@ -29,6 +28,7 @@ import {
useToast,
} from "@probo/ui";
import type { FormEventHandler } from "react";
import { useTranslation } from "react-i18next";
import { graphql, useMutation } from "react-relay";
import { Link, useLocation, useNavigate } from "react-router";
@@ -50,7 +50,7 @@ function NewOrganizationPageInner() {
const location = useLocation();
const navigate = useNavigate();
const { toast } = useToast();
const { __ } = useTranslate();
const { t } = useTranslation();
const [createOrganization, isCreating]
= useMutation<NewOrganizationPageMutation>(createOrganizationMutation);
@@ -61,8 +61,7 @@ function NewOrganizationPageInner() {
const name = formData.get("name") ? (formData.get("name") as string).toString() : "";
if (!name) {
toast({
title: __("Error"),
description: __("Name is required"),
title: t("common.error"), description: t("newOrganizationPage.errors.nameRequired"),
variant: "error",
});
return;
@@ -77,8 +76,7 @@ function NewOrganizationPageInner() {
onCompleted: (r, e) => {
if (e) {
toast({
title: __("Error"),
description: formatError(__("Failed to create organization"), e),
title: t("common.error"), description: formatError(t("newOrganizationPage.errors.create"), e),
variant: "error",
});
return;
@@ -87,14 +85,13 @@ function NewOrganizationPageInner() {
const org = r.createOrganization!.organization;
void navigate(`/organizations/${org!.id}`);
toast({
title: __("Success"),
description: __("Organization has been created successfully"),
title: t("common.success"), description: t("newOrganizationPage.messages.created"),
variant: "success",
});
},
onError: (e) => {
toast({
title: __("Error"),
title: t("common.error"),
description: e.message,
variant: "error",
});
@@ -109,34 +106,30 @@ function NewOrganizationPageInner() {
className="mb-4 inline-flex gap-2 items-center"
>
<IconChevronLeft size={16} />
{__("Back")}
{t("newOrganizationPage.actions.back")}
</Link>
<PageHeader
title={__("Create Organization")}
description={__(
"Create a new organization to manage your compliance and security needs.",
)}
title={t("newOrganizationPage.title")}
description={t("newOrganizationPage.description")}
/>
<Card padded asChild>
<form onSubmit={e => void handleSubmit(e)} className="space-y-4">
<h2 className="text-xl font-semibold mb-1">
{__("Organization Details")}
{t("newOrganizationPage.details")}
</h2>
<p className="text-txt-tertiary text-sm mb-4">
{__("Enter the basic information about your organization.")}
{t("newOrganizationPage.detailsDescription")}
</p>
<Field
required
name="name"
type="text"
placeholder={__("Organization name")}
label={__("Organization name")}
help={__(
"The name of your organization as it will appear throughout the platform.",
)}
placeholder={t("newOrganizationPage.fields.name")}
label={t("newOrganizationPage.fields.name")}
help={t("newOrganizationPage.fields.nameHelp")}
/>
<Button disabled={isCreating} type="submit" className="w-full">
{__("Create Organization")}
{t("newOrganizationPage.actions.create")}
</Button>
</form>
</Card>

10
apps/console/src/pages/iam/organizations/_components/MembershipsDropdown.tsx
View File

@@ -18,7 +18,6 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import {
Button,
Dropdown,
@@ -30,6 +29,7 @@ import {
Input,
} from "@probo/ui";
import { Suspense, useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { useFragment, useQueryLoader } from "react-relay";
import { Link, useLocation } from "react-router";
import { graphql } from "relay-runtime";
@@ -54,7 +54,7 @@ export function MembershipsDropdown(props: {
const { organizationFKey } = props;
const location = useLocation();
const { __ } = useTranslate();
const { t } = useTranslation();
const [search, setSearch] = useState("");
const currentOrganization
@@ -90,7 +90,7 @@ export function MembershipsDropdown(props: {
<div className="px-3 py-2">
<Input
icon={IconMagnifyingGlass}
placeholder={__("Search organizations...")}
placeholder={t("membershipsDropdown.searchPlaceholder")}
value={search}
onValueChange={setSearch}
onKeyDown={(e) => {
@@ -104,7 +104,7 @@ export function MembershipsDropdown(props: {
<Suspense
fallback={(
<div className="px-3 py-2 text-gray-500">
{__("Loading organizations...")}
{t("membershipsDropdown.loading")}
</div>
)}
>
@@ -116,7 +116,7 @@ export function MembershipsDropdown(props: {
<DropdownItem asChild>
<Link to="/organizations/new" state={{ from: location.pathname }}>
<IconPlusLarge size={16} />
{__("Add organization")}
{t("membershipsDropdown.addOrganization")}
</Link>
</DropdownItem>
</Dropdown>

6
apps/console/src/pages/iam/organizations/_components/MembershipsDropdownInvitingItem.tsx
View File

@@ -18,8 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { IconMail } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -35,7 +35,7 @@ export function MembershipsDropdownInvitingItem(props: {
fKey: MembershipsDropdownInvitingItemFragment$key;
}) {
const { fKey } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const organization = useFragment<MembershipsDropdownInvitingItemFragment$key>(
fragment,
@@ -45,7 +45,7 @@ export function MembershipsDropdownInvitingItem(props: {
return (
<div
className="text-txt-primary flex items-center gap-2 p-2 cursor-default"
title={__("Check your email to accept the invitation")}
title={t("membershipsDropdownInvitingItem.title")}
>
<div className="bg-border-mid text-txt-invert! rounded-full size-6 flex items-center justify-center flex-none">
<IconMail size={16} />

6
apps/console/src/pages/iam/organizations/_components/MembershipsDropdownMenu.tsx
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { DropdownSeparator } from "@probo/ui";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { graphql, type PreloadedQuery, usePreloadedQuery } from "react-relay";
import type { MembershipsDropdownMenuQuery } from "#/__generated__/iam/MembershipsDropdownMenuQuery.graphql";
@@ -65,7 +65,7 @@ interface MembershipsDropdownMenuProps {
export function MembershipsDropdownMenu(props: MembershipsDropdownMenuProps) {
const { queryRef, search } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const {
viewer: {
@@ -102,7 +102,7 @@ export function MembershipsDropdownMenu(props: MembershipsDropdownMenuProps) {
{invitingOrganizations.length > 0 && (
<>
<div className="px-3 py-1 text-xs text-txt-tertiary uppercase">
{__("Pending invitations")}
{t("membershipsDropdownMenu.pendingInvitations")}
</div>
{invitingOrganizations.map(organization => (
<MembershipsDropdownInvitingItem key={organization.id} fKey={organization} />

46
apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { CookieIcon, LaptopIcon } from "@phosphor-icons/react";
import { useTranslate } from "@probo/i18n";
import {
IconBank,
IconBook,
@@ -42,6 +41,7 @@ import {
IconTodo,
SidebarItem,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -84,7 +84,7 @@ const fragment = graphql`
export function Sidebar(props: { fKey: SidebarFragment$key }) {
const { fKey } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const organizationId = useOrganizationId();
const organization = useFragment<SidebarFragment$key>(fragment, fKey);
@@ -95,28 +95,28 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) {
<ul className="space-y-[2px]">
{organization.canGetContext && (
<SidebarItem
label={__("Context")}
label={t("sidebar.context")}
icon={IconPageTextSolid}
to={`${prefix}/context`}
/>
)}
{organization.canListTasks && (
<SidebarItem
label={__("Tasks")}
label={t("sidebar.tasks")}
icon={IconInboxEmpty}
to={`${prefix}/tasks`}
/>
)}
{organization.canListMeasures && (
<SidebarItem
label={__("Measures")}
label={t("sidebar.measures")}
icon={IconTodo}
to={`${prefix}/measures`}
/>
)}
{organization.canListRisks && (
<SidebarItem
label={__("Risks")}
label={t("sidebar.risks")}
icon={IconFire3}
to={`${prefix}/risks`}
/>
@@ -124,119 +124,119 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) {
{organization.canListFrameworks && (
<SidebarItem
label={__("Frameworks")}
label={t("sidebar.frameworks")}
icon={IconBank}
to={`${prefix}/frameworks`}
/>
)}
{organization.canListMembers && (
<SidebarItem
label={__("People")}
label={t("sidebar.people")}
icon={IconGroup1}
to={`${prefix}/people`}
/>
)}
{organization.canListThirdParties && (
<SidebarItem
label={__("Third parties")}
label={t("sidebar.thirdParties")}
icon={IconStore}
to={`${prefix}/third-parties`}
/>
)}
{organization.canListDocuments && (
<SidebarItem
label={__("Documents")}
label={t("sidebar.documents")}
icon={IconPageTextLine}
to={`${prefix}/documents`}
/>
)}
{organization.canListAssets && (
<SidebarItem
label={__("Assets")}
label={t("sidebar.assets")}
icon={IconBox}
to={`${prefix}/assets`}
/>
)}
{organization.canListDevices && (
<SidebarItem
label={__("Devices")}
label={t("sidebar.devices")}
icon={LaptopIcon}
to={`${prefix}/devices`}
/>
)}
{organization.canListData && (
<SidebarItem
label={__("Data")}
label={t("sidebar.data")}
icon={IconListStack}
to={`${prefix}/data`}
/>
)}
{organization.canListAudits && (
<SidebarItem
label={__("Audits")}
label={t("sidebar.audits")}
icon={IconMedal}
to={`${prefix}/audits`}
/>
)}
{organization.canListFindings && (
<SidebarItem
label={__("Findings")}
label={t("sidebar.findings")}
icon={IconMagnifyingGlass}
to={`${prefix}/findings`}
/>
)}
{organization.canListObligations && (
<SidebarItem
label={__("Obligations")}
label={t("sidebar.obligations")}
icon={IconBook}
to={`${prefix}/obligations`}
/>
)}
{organization.canListProcessingActivities && (
<SidebarItem
label={__("Processing Activities")}
label={t("sidebar.processingActivities")}
icon={IconCircleProgress}
to={`${prefix}/processing-activities`}
/>
)}
{organization.canListStatementsOfApplicability && (
<SidebarItem
label={__("Statements of Applicability")}
label={t("sidebar.statementsOfApplicability")}
icon={IconPageCheck}
to={`${prefix}/statements-of-applicability`}
/>
)}
{organization.canListRightsRequests && (
<SidebarItem
label={__("Rights Requests")}
label={t("sidebar.rightsRequests")}
icon={IconLock}
to={`${prefix}/rights-requests`}
/>
)}
{organization.canListAccessReviewCampaigns && (
<SidebarItem
label={__("Access Reviews")}
label={t("sidebar.accessReviews")}
icon={IconKey}
to={`${prefix}/access-reviews`}
/>
)}
{organization.canGetCompliancePage && (
<SidebarItem
label={__("Compliance Page")}
label={t("sidebar.compliancePage")}
icon={IconShield}
to={`${prefix}/compliance-page`}
/>
)}
{organization.canListCookieBanners && (
<SidebarItem
label={__("Cookie Banners")}
label={t("sidebar.cookieBanners")}
icon={CookieIcon}
to={`${prefix}/cookie-banners`}
/>
)}
{organization.canUpdateOrganization && (
<SidebarItem
label={__("Settings")}
label={t("sidebar.settings")}
icon={IconSettingsGear2}
to={`${prefix}/settings`}
/>

20
apps/console/src/pages/iam/organizations/_components/ViewerMembershipDropdown.tsx
View File

@@ -19,7 +19,6 @@
// SOFTWARE.
import { formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
DropdownSeparator,
IconArrowBoxLeft,
@@ -30,6 +29,7 @@ import {
UserDropdownItem,
useToast,
} from "@probo/ui";
import { useTranslation } from "react-i18next";
import { useFragment, useMutation } from "react-relay";
import { graphql } from "relay-runtime";
@@ -65,7 +65,7 @@ export function ViewerMembershipDropdown(props: {
}) {
const { fKey } = props;
const { __ } = useTranslate();
const { t } = useTranslation();
const organizationId = useOrganizationId();
const { toast } = useToast();
@@ -85,8 +85,8 @@ export function ViewerMembershipDropdown(props: {
onCompleted: (_, e) => {
if (e) {
toast({
title: __("Request failed"),
description: formatError(__("Cannot sign out"), e),
title: t("viewerMembershipDropdown.errors.requestFailed"),
description: formatError(t("viewerMembershipDropdown.errors.cannotSignOut"), e),
variant: "error",
});
return;
@@ -95,7 +95,7 @@ export function ViewerMembershipDropdown(props: {
},
onError: (e) => {
toast({
title: __("Error"),
title: t("common.error"),
description: e.message,
variant: "error",
});
@@ -109,32 +109,32 @@ export function ViewerMembershipDropdown(props: {
<UserDropdownItem
to="/me/api-keys"
icon={IconKey}
label={__("API Keys")}
label={t("viewerMembershipDropdown.actions.apiKeys")}
/>
)}
{canListOAuth2AccessTokens && (
<UserDropdownItem
to="/me/oauth-tokens"
icon={IconKey}
label={__("OAuth tokens")}
label={t("viewerMembershipDropdown.actions.oauthTokens")}
/>
)}
<UserDropdownItem
to={`/organizations/${organizationId}/employee`}
icon={IconPageTextLine}
label={__("Employee Portal")}
label={t("viewerMembershipDropdown.actions.employeePortal")}
/>
<UserDropdownItem
to="mailto:support@probo.com"
icon={IconCircleQuestionmark}
label={__("Help")}
label={t("viewerMembershipDropdown.actions.help")}
/>
<DropdownSeparator />
<UserDropdownItem
variant="danger"
to="/logout"
icon={IconArrowBoxLeft}
label="Logout"
label={t("viewerMembershipDropdown.actions.logout")}
onClick={handleLogout}
/>
</UserDropdown>

8
apps/console/src/pages/iam/organizations/people/PeoplePage.tsx
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Button, PageHeader } from "@probo/ui";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { ConnectionHandler, type DataID, graphql } from "relay-runtime";
@@ -49,7 +49,7 @@ export function PeoplePage(props: {
const { queryRef } = props;
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
const [connectionId, setConnectionId] = useState<DataID>(
ConnectionHandler.getConnectionID(
@@ -69,11 +69,11 @@ export function PeoplePage(props: {
return (
<div className="space-y-6">
<PageHeader title={__("People")}>
<PageHeader title={t("peoplePage.title")}>
{organization.canCreateUser
&& (
<AddPersonDialog connectionId={connectionId}>
<Button variant="secondary">{__("Add Person")}</Button>
<Button variant="secondary">{t("peoplePage.actions.add")}</Button>
</AddPersonDialog>
)}
</PageHeader>

29
apps/console/src/pages/iam/organizations/people/PersonPage.tsx
View File

@@ -18,9 +18,8 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { sprintf } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { ActionDropdown, Avatar, Badge, Breadcrumb, Card, DropdownItem, IconArchive, IconTrashCan, useConfirm } from "@probo/ui";
import { useTranslation } from "react-i18next";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { useNavigate } from "react-router";
import { graphql } from "relay-runtime";
@@ -73,7 +72,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
const { queryRef } = props;
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
const confirm = useConfirm();
const navigate = useNavigate();
@@ -85,15 +84,15 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
const [archiveUser, isArchiving] = useMutationWithToasts(
archiveUserMutation,
{
successMessage: __("Person archived successfully"),
errorMessage: __("Failed to archive person"),
successMessage: t("personPage.messages.archived"),
errorMessage: t("personPage.errors.archive"),
},
);
const [removeUser, isRemoving] = useMutationWithToasts(
removeUserMutation,
{
successMessage: __("Person removed successfully"),
errorMessage: __("Failed to remove person"),
successMessage: t("personPage.messages.removed"),
errorMessage: t("personPage.errors.remove"),
},
);
const isMutating = isArchiving || isRemoving;
@@ -114,10 +113,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
});
},
{
message: sprintf(
__("Are you sure you want to archive %s?"),
person.fullName,
),
message: t("personPage.confirmations.archive", { name: person.fullName }),
},
);
};
@@ -138,10 +134,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
});
},
{
message: sprintf(
__("Are you sure you want to remove %s?"),
person.fullName,
),
message: t("personPage.confirmations.remove", { name: person.fullName }),
},
);
};
@@ -154,7 +147,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
<Breadcrumb
items={[
{
label: __("People"),
label: t("personPage.breadcrumb.people"),
to: `/organizations/${organizationId}/people`,
},
{
@@ -181,7 +174,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
onClick={handleArchive}
disabled={isMutating}
>
{__("Archive")}
{t("personPage.actions.archive")}
</DropdownItem>
)}
{canRemove && (
@@ -191,7 +184,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
onClick={handleRemove}
disabled={isMutating}
>
{__("Remove")}
{t("personPage.actions.remove")}
</DropdownItem>
)}
</ActionDropdown>

6
apps/console/src/pages/iam/organizations/people/_components/AddPersonDialog.tsx
View File

@@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
import { useTranslate } from "@probo/i18n";
import { Dialog, DialogContent, useDialogRef } from "@probo/ui";
import { type PropsWithChildren } from "react";
import { useTranslation } from "react-i18next";
import type { DataID } from "relay-runtime";
import { PersonForm } from "./PersonForm";
@@ -30,11 +30,11 @@ export function AddPersonDialog(props: PropsWithChildren<{
}>) {
const { children, connectionId } = props;
const dialogRef = useDialogRef();
const { __ } = useTranslate();
const { t } = useTranslation();
return (
<Dialog
title={__("Add Person")}
title={t("addPersonDialog.title")}
trigger={children}
className="max-w-xl"
ref={dialogRef}

16
apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx
View File

@@ -19,10 +19,10 @@
// SOFTWARE.
import { getAssignableRoles } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Tbody, Td, Th, Thead, Tr } from "@probo/ui";
import type { ComponentProps } from "react";
import { use } from "react";
import { useTranslation } from "react-i18next";
import { ConnectionHandler, graphql, usePaginationFragment } from "react-relay";
import type { PeopleListFragment$key } from "#/__generated__/iam/PeopleListFragment.graphql";
@@ -72,7 +72,7 @@ export function PeopleList(props: {
const { fKey, onConnectionIdChange } = props;
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const { t } = useTranslation();
const { role } = use(CurrentUser);
const canManageRoles = getAssignableRoles(role).length > 0;
@@ -107,11 +107,11 @@ export function PeopleList(props: {
>
<Thead>
<Tr>
<SortableTh field="FULL_NAME" onOrderChange={handleOrderChange}>{__("Name")}</SortableTh>
<SortableTh field="STATE">{__("Status")}</SortableTh>
<SortableTh field="EMAIL_ADDRESS" onOrderChange={handleOrderChange}>{__("Email")}</SortableTh>
{canManageRoles && <Th>{__("Role")}</Th>}
<SortableTh field="CREATED_AT" onOrderChange={handleOrderChange}>{__("Created on")}</SortableTh>
<SortableTh field="FULL_NAME" onOrderChange={handleOrderChange}>{t("peopleList.columns.name")}</SortableTh>
<SortableTh field="STATE">{t("peopleList.columns.status")}</SortableTh>
<SortableTh field="EMAIL_ADDRESS" onOrderChange={handleOrderChange}>{t("peopleList.columns.email")}</SortableTh>
{canManageRoles && <Th>{t("peopleList.columns.role")}</Th>}
<SortableTh field="CREATED_AT" onOrderChange={handleOrderChange}>{t("peopleList.columns.createdOn")}</SortableTh>
<Th></Th>
</Tr>
</Thead>
@@ -120,7 +120,7 @@ export function PeopleList(props: {
? (
<Tr>
<Td colSpan={7} className="text-center text-txt-secondary">
{__("No people")}
{t("peopleList.empty")}
</Td>
</Tr>
)

Some files were not shown because too many files have changed in this diff Show More