Implement continue for each file type

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-03-03 19:37:20 +04:00
parent c4b06ddc7d
commit ebfec30a14
7 changed files with 174 additions and 220 deletions

View File

@@ -1,5 +1,6 @@
import { downloadFile, formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { UnAuthenticatedError } from "@probo/relay";
import {
Breadcrumb,
Button,
@@ -13,13 +14,13 @@ import {
Table,
useToast,
} from "@probo/ui";
import { type PropsWithChildren, use, useState } from "react";
import { type PropsWithChildren, useState } from "react";
import { useFragment, useMutation } from "react-relay";
import { useLocation } from "react-router";
import { useLocation, useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
import { useMutationWithToasts } from "#/hooks/useMutationWithToast";
import { Viewer } from "#/providers/Viewer";
import { getPathPrefix } from "#/utils/pathPrefix";
import type { AuditRow_requestAccessMutation } from "./__generated__/AuditRow_requestAccessMutation.graphql";
import type { AuditRowDownloadMutation } from "./__generated__/AuditRowDownloadMutation.graphql";
@@ -63,8 +64,10 @@ const auditRowFragment = graphql`
export function AuditRow(props: { audit: AuditRowFragment$key }) {
const { __ } = useTranslate();
const viewer = use(Viewer);
const { toast } = useToast();
const [searchParams] = useSearchParams();
const location = useLocation();
const navigate = useNavigate();
const audit = useFragment(auditRowFragment, props.audit);
const [hasRequested, setHasRequested] = useState(
@@ -100,6 +103,18 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
});
},
onError: (error) => {
if (error instanceof UnAuthenticatedError) {
const pathPrefix = getPathPrefix();
searchParams.set("request-report-id", audit.report?.id ?? "");
const urlSearchParams = new URLSearchParams([[
"continue",
window.location.origin + pathPrefix + location.pathname + "?" + searchParams.toString(),
]]);
void navigate(`/connect?${urlSearchParams.toString()}`);
return;
}
toast({
title: __("Error"),
description: error.message ?? __("Cannot request access"),
@@ -143,28 +158,17 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
{downloading ? __("Downloading") : __("Download")}
</Button>
)
: viewer
? (
<Button
disabled={hasRequested || isRequestingAccess}
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
onClick={handleRequestAccess}
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)
: (
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
to="/connect"
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)}
: (
<Button
disabled={hasRequested || isRequestingAccess}
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
onClick={handleRequestAccess}
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)}
</div>
);
}

View File

@@ -1,6 +1,7 @@
import { formatError } from "@probo/helpers";
import { useSystemTheme } from "@probo/hooks";
import { useTranslate } from "@probo/i18n";
import { UnAuthenticatedError } from "@probo/relay";
import {
Button,
Card,
@@ -9,12 +10,13 @@ import {
IconMedal,
useToast,
} from "@probo/ui";
import { type PropsWithChildren, use } from "react";
import { type PropsWithChildren } from "react";
import { useMutation } from "react-relay";
import { useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
import { Viewer } from "#/providers/Viewer";
import type { TrustGraphCurrentQuery$data } from "#/queries/__generated__/TrustGraphCurrentQuery.graphql";
import { getPathPrefix } from "#/utils/pathPrefix";
import type { OrganizationSidebar_requestAllAccessesMutation } from "./__generated__/OrganizationSidebar_requestAllAccessesMutation.graphql";
import { AuditRowAvatar } from "./AuditRow";
@@ -35,9 +37,10 @@ export function OrganizationSidebar({
trustCenter: TrustGraphCurrentQuery$data["currentTrustCenter"];
}) {
const { __ } = useTranslate();
const isAuthenticated = !!use(Viewer);
const { toast } = useToast();
const theme = useSystemTheme();
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const logoFileUrl = theme === "dark" ? (trustCenter?.darkLogoFileUrl ?? trustCenter?.logoFileUrl) : trustCenter?.logoFileUrl;
@@ -65,6 +68,18 @@ export function OrganizationSidebar({
});
},
onError: (error) => {
if (error instanceof UnAuthenticatedError) {
const pathPrefix = getPathPrefix();
searchParams.set("request-all", "true");
const urlSearchParams = new URLSearchParams([[
"continue",
window.location.origin + pathPrefix + location.pathname + "?" + searchParams.toString(),
]]);
void navigate(`/connect?${urlSearchParams.toString()}`);
return;
}
toast({
title: __("Error"),
description: error.message ?? __("Cannot request access"),
@@ -159,29 +174,15 @@ export function OrganizationSidebar({
</>
)}
{/* Actions */}
{isAuthenticated
? (
<Button
disabled={isRequestingAccess}
variant="primary"
icon={IconLock}
className="w-full h-10"
onClick={handleRequestAllAccesses}
>
{__("Request access")}
</Button>
)
: (
<Button
variant="primary"
icon={IconLock}
className="w-full h-10"
to="/connect"
>
{__("Request access")}
</Button>
)}
<Button
disabled={isRequestingAccess}
variant="primary"
icon={IconLock}
className="w-full h-10"
onClick={handleRequestAllAccesses}
>
{__("Request access")}
</Button>
</div>
</Card>
);

View File

@@ -1,5 +1,6 @@
import { downloadFile, formatError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { UnAuthenticatedError } from "@probo/relay";
import {
Button,
IconArrowInbox,
@@ -8,12 +9,13 @@ import {
Spinner,
useToast,
} from "@probo/ui";
import { use, useState } from "react";
import { useState } from "react";
import { useFragment, useMutation } from "react-relay";
import { useLocation, useNavigate, useSearchParams } from "react-router";
import { graphql } from "relay-runtime";
import { useMutationWithToasts } from "#/hooks/useMutationWithToast";
import { Viewer } from "#/providers/Viewer";
import { getPathPrefix } from "#/utils/pathPrefix";
import type { TrustCenterFileRow_requestAccessMutation } from "./__generated__/TrustCenterFileRow_requestAccessMutation.graphql";
import type { TrustCenterFileRowDownloadMutation } from "./__generated__/TrustCenterFileRowDownloadMutation.graphql";
@@ -54,8 +56,10 @@ export function TrustCenterFileRow(props: {
file: TrustCenterFileRowFragment$key;
}) {
const { __ } = useTranslate();
const viewer = use(Viewer);
const { toast } = useToast();
const location = useLocation();
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const file = useFragment(trustCenterFileRowFragment, props.file);
const [hasRequested, setHasRequested] = useState(file.hasUserRequestedAccess);
@@ -91,6 +95,18 @@ export function TrustCenterFileRow(props: {
});
},
onError: (error) => {
if (error instanceof UnAuthenticatedError) {
const pathPrefix = getPathPrefix();
searchParams.set("request-file-id", file.id);
const urlSearchParams = new URLSearchParams([[
"continue",
window.location.origin + pathPrefix + location.pathname + "?" + searchParams.toString(),
]]);
void navigate(`/connect?${urlSearchParams.toString()}`);
return;
}
toast({
title: __("Error"),
description: error.message ?? __("Cannot request access"),
@@ -131,28 +147,17 @@ export function TrustCenterFileRow(props: {
{downloading ? __("Downloading") : __("Download")}
</Button>
)
: viewer
? (
<Button
disabled={hasRequested || isRequestingAccess}
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
onClick={handleRequestAccess}
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)
: (
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
to="/connect"
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)}
: (
<Button
disabled={hasRequested || isRequestingAccess}
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
onClick={handleRequestAccess}
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)}
</div>
);
}