frontend: add TrackerResource resources page
Add configuration/resources/ page for managing tracked scripts and iframes. Includes page/loader/skeleton, TrackerResourceRow with inline edit, delete/move/exclude mutations, search + type filter, and LAST_DETECTED_AT DESC default ordering. Register route and tab. Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
@@ -0,0 +1,213 @@
|
|||||||
|
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
|
||||||
|
//
|
||||||
|
// Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
// purpose with or without fee is hereby granted, provided that the above
|
||||||
|
// copyright notice and this permission notice appear in all copies.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
// PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
Input,
|
||||||
|
Option,
|
||||||
|
Select,
|
||||||
|
Tbody,
|
||||||
|
Th,
|
||||||
|
Thead,
|
||||||
|
Tr,
|
||||||
|
} from "@probo/ui";
|
||||||
|
import { type ComponentProps, useState, useTransition } from "react";
|
||||||
|
import {
|
||||||
|
graphql,
|
||||||
|
type PreloadedQuery,
|
||||||
|
usePaginationFragment,
|
||||||
|
usePreloadedQuery,
|
||||||
|
} from "react-relay";
|
||||||
|
|
||||||
|
import type { CookieBannerResourcesPageFragment$key } from "#/__generated__/core/CookieBannerResourcesPageFragment.graphql";
|
||||||
|
import type { CookieBannerResourcesPageQuery } from "#/__generated__/core/CookieBannerResourcesPageQuery.graphql";
|
||||||
|
import type {
|
||||||
|
CookieBannerResourcesPageRefetchQuery,
|
||||||
|
TrackerResourceOrderField,
|
||||||
|
TrackerResourceType,
|
||||||
|
} from "#/__generated__/core/CookieBannerResourcesPageRefetchQuery.graphql";
|
||||||
|
import { SortableTable, SortableTh } from "#/components/SortableTable";
|
||||||
|
|
||||||
|
import { TrackerResourceRow } from "./_components/TrackerResourceRow";
|
||||||
|
|
||||||
|
export const cookieBannerResourcesPageQuery = graphql`
|
||||||
|
query CookieBannerResourcesPageQuery($cookieBannerId: ID!) {
|
||||||
|
node(id: $cookieBannerId) @required(action: THROW) {
|
||||||
|
__typename
|
||||||
|
... on CookieBanner {
|
||||||
|
...CookieBannerResourcesPageFragment
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const resourcesFragment = graphql`
|
||||||
|
fragment CookieBannerResourcesPageFragment on CookieBanner
|
||||||
|
@refetchable(queryName: "CookieBannerResourcesPageRefetchQuery")
|
||||||
|
@argumentDefinitions(
|
||||||
|
first: { type: "Int", defaultValue: 50 }
|
||||||
|
order: { type: "TrackerResourceOrder", defaultValue: { field: LAST_DETECTED_AT, direction: DESC } }
|
||||||
|
after: { type: "CursorKey", defaultValue: null }
|
||||||
|
before: { type: "CursorKey", defaultValue: null }
|
||||||
|
last: { type: "Int", defaultValue: null }
|
||||||
|
query: { type: "String", defaultValue: null }
|
||||||
|
type: { type: "TrackerResourceType", defaultValue: null }
|
||||||
|
) {
|
||||||
|
uncategorisedTrackerResources(
|
||||||
|
first: $first
|
||||||
|
after: $after
|
||||||
|
last: $last
|
||||||
|
before: $before
|
||||||
|
orderBy: $order
|
||||||
|
filter: { query: $query, type: $type }
|
||||||
|
)
|
||||||
|
@connection(
|
||||||
|
key: "CookieBannerResourcesPage_uncategorisedTrackerResources"
|
||||||
|
filters: ["filter", "orderBy"]
|
||||||
|
)
|
||||||
|
@required(action: THROW) {
|
||||||
|
__id
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
...TrackerResourceRowFragment
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
interface CookieBannerResourcesPageProps {
|
||||||
|
queryRef: PreloadedQuery<CookieBannerResourcesPageQuery>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CookieBannerResourcesPage({
|
||||||
|
queryRef,
|
||||||
|
}: CookieBannerResourcesPageProps) {
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
const data = usePreloadedQuery(cookieBannerResourcesPageQuery, queryRef);
|
||||||
|
|
||||||
|
if (data.node.__typename !== "CookieBanner") {
|
||||||
|
throw new Error("invalid type for node");
|
||||||
|
}
|
||||||
|
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
const [queryFilter, setQueryFilter] = useState("");
|
||||||
|
const [typeFilter, setTypeFilter] = useState<TrackerResourceType | null>(null);
|
||||||
|
|
||||||
|
const { data: fragmentData, ...pagination } = usePaginationFragment<
|
||||||
|
CookieBannerResourcesPageRefetchQuery,
|
||||||
|
CookieBannerResourcesPageFragment$key
|
||||||
|
>(resourcesFragment, data.node);
|
||||||
|
|
||||||
|
const connectionId = fragmentData.uncategorisedTrackerResources.__id;
|
||||||
|
const resources = fragmentData.uncategorisedTrackerResources.edges.map(edge => edge.node) ?? [];
|
||||||
|
|
||||||
|
const refetchFilters = (overrides: Record<string, unknown> = {}) => {
|
||||||
|
startTransition(() => {
|
||||||
|
pagination.refetch(
|
||||||
|
{
|
||||||
|
query: queryFilter || null,
|
||||||
|
type: typeFilter,
|
||||||
|
...overrides,
|
||||||
|
},
|
||||||
|
{ fetchPolicy: "network-only" },
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleQuerySubmit = () => {
|
||||||
|
refetchFilters({ query: queryFilter || null });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTypeFilterChange = (value: string) => {
|
||||||
|
const newType = value === "ALL" ? null : (value as TrackerResourceType);
|
||||||
|
setTypeFilter(newType);
|
||||||
|
refetchFilters({ type: newType });
|
||||||
|
};
|
||||||
|
|
||||||
|
const refetchWithFilters: ComponentProps<typeof SortableTable>["refetch"] = ({ order }) => {
|
||||||
|
pagination.refetch({
|
||||||
|
order: { direction: order.direction, field: order.field as TrackerResourceOrderField },
|
||||||
|
query: queryFilter || null,
|
||||||
|
type: typeFilter,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Input
|
||||||
|
placeholder={__("Search by origin or path...")}
|
||||||
|
value={queryFilter}
|
||||||
|
onChange={e => setQueryFilter(e.target.value)}
|
||||||
|
onKeyDown={e => e.key === "Enter" && handleQuerySubmit()}
|
||||||
|
onBlur={handleQuerySubmit}
|
||||||
|
className="w-72"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
value={typeFilter ?? "ALL"}
|
||||||
|
onValueChange={handleTypeFilterChange}
|
||||||
|
>
|
||||||
|
<Option value="ALL">{__("All types")}</Option>
|
||||||
|
<Option value="SCRIPT">{__("Script")}</Option>
|
||||||
|
<Option value="IFRAME">{__("Iframe")}</Option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={isPending ? "opacity-50 pointer-events-none transition-opacity" : ""}>
|
||||||
|
{resources.length > 0
|
||||||
|
? (
|
||||||
|
<SortableTable
|
||||||
|
{...pagination}
|
||||||
|
refetch={refetchWithFilters}
|
||||||
|
pageSize={50}
|
||||||
|
>
|
||||||
|
<Thead>
|
||||||
|
<Tr>
|
||||||
|
<Th>{__("Type")}</Th>
|
||||||
|
<SortableTh field="ORIGIN">{__("Origin")}</SortableTh>
|
||||||
|
<Th>{__("Path")}</Th>
|
||||||
|
<SortableTh field="LAST_DETECTED_AT">{__("Last Detected")}</SortableTh>
|
||||||
|
<Th className="w-28" />
|
||||||
|
</Tr>
|
||||||
|
</Thead>
|
||||||
|
<Tbody>
|
||||||
|
{resources.map(resource => (
|
||||||
|
<TrackerResourceRow
|
||||||
|
key={resource.id}
|
||||||
|
resourceKey={resource}
|
||||||
|
connectionId={connectionId}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Tbody>
|
||||||
|
</SortableTable>
|
||||||
|
)
|
||||||
|
: (
|
||||||
|
<Card padded>
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<h3 className="text-lg font-semibold mb-2">
|
||||||
|
{__("No uncategorised resources")}
|
||||||
|
</h3>
|
||||||
|
<p className="text-txt-tertiary">
|
||||||
|
{__("All detected scripts and iframes have been categorised. New resources will appear here when detected.")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
|
||||||
|
//
|
||||||
|
// Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
// purpose with or without fee is hereby granted, provided that the above
|
||||||
|
// copyright notice and this permission notice appear in all copies.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
// PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
|
||||||
|
import { Suspense, useEffect } from "react";
|
||||||
|
import { useQueryLoader } from "react-relay";
|
||||||
|
import { useParams } from "react-router";
|
||||||
|
|
||||||
|
import type { CookieBannerResourcesPageQuery } from "#/__generated__/core/CookieBannerResourcesPageQuery.graphql";
|
||||||
|
|
||||||
|
import CookieBannerResourcesPage, { cookieBannerResourcesPageQuery } from "./CookieBannerResourcesPage";
|
||||||
|
import { CookieBannerResourcesPageSkeleton } from "./CookieBannerResourcesPageSkeleton";
|
||||||
|
|
||||||
|
export default function CookieBannerResourcesPageLoader() {
|
||||||
|
const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
|
||||||
|
if (typeof cookieBannerId !== "string") {
|
||||||
|
throw new Error("Missing cookieBannerId parameter");
|
||||||
|
}
|
||||||
|
|
||||||
|
const [queryRef, loadQuery] = useQueryLoader<CookieBannerResourcesPageQuery>(
|
||||||
|
cookieBannerResourcesPageQuery,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadQuery({ cookieBannerId });
|
||||||
|
}, [loadQuery, cookieBannerId]);
|
||||||
|
|
||||||
|
if (!queryRef) {
|
||||||
|
return <CookieBannerResourcesPageSkeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<CookieBannerResourcesPageSkeleton />}>
|
||||||
|
<CookieBannerResourcesPage queryRef={queryRef} />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
|
||||||
|
//
|
||||||
|
// Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
// purpose with or without fee is hereby granted, provided that the above
|
||||||
|
// copyright notice and this permission notice appear in all copies.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
// PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
|
||||||
|
export function CookieBannerResourcesPageSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4 animate-pulse">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="h-9 w-64 rounded bg-bg-subtle" />
|
||||||
|
<div className="h-9 w-36 rounded bg-bg-subtle" />
|
||||||
|
</div>
|
||||||
|
<div className="rounded-lg border border-border-low">
|
||||||
|
<div className="h-10 border-b border-border-low bg-bg-subtle" />
|
||||||
|
{Array.from({ length: 8 }).map((_, i) => (
|
||||||
|
<div key={i} className="h-12 border-b border-border-low last:border-b-0" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,361 @@
|
|||||||
|
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
|
||||||
|
//
|
||||||
|
// Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
// purpose with or without fee is hereby granted, provided that the above
|
||||||
|
// copyright notice and this permission notice appear in all copies.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
// PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
|
||||||
|
import { Eye as IconEye, EyeSlash as IconEyeSlash } from "@phosphor-icons/react";
|
||||||
|
import { formatError, type GraphQLError } from "@probo/helpers";
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Dropdown,
|
||||||
|
IconArrowBoxLeft,
|
||||||
|
IconPencil,
|
||||||
|
IconTrashCan,
|
||||||
|
Td,
|
||||||
|
Tr,
|
||||||
|
useConfirm,
|
||||||
|
useToast,
|
||||||
|
} from "@probo/ui";
|
||||||
|
import { Suspense, useCallback, useState } from "react";
|
||||||
|
import { graphql, useFragment, useMutation, useQueryLoader } from "react-relay";
|
||||||
|
import { useParams } from "react-router";
|
||||||
|
import { ConnectionHandler } from "relay-runtime";
|
||||||
|
|
||||||
|
import type { TrackerResourceRowDeleteMutation } from "#/__generated__/core/TrackerResourceRowDeleteMutation.graphql";
|
||||||
|
import type { TrackerResourceRowFragment$key } from "#/__generated__/core/TrackerResourceRowFragment.graphql";
|
||||||
|
import type { TrackerResourceRowMoveMutation } from "#/__generated__/core/TrackerResourceRowMoveMutation.graphql";
|
||||||
|
import type { TrackerResourceRowUpdateMutation } from "#/__generated__/core/TrackerResourceRowUpdateMutation.graphql";
|
||||||
|
import type { MoveToCategoryDropdownQuery } from "#/__generated__/core/MoveToCategoryDropdownQuery.graphql";
|
||||||
|
|
||||||
|
import {
|
||||||
|
MoveToCategoryDropdown,
|
||||||
|
moveToCategoryDropdownQuery,
|
||||||
|
} from "../../trackers/_components/MoveToCategoryDropdown";
|
||||||
|
import { TrackerResourceRowEdit } from "./TrackerResourceRowEdit";
|
||||||
|
|
||||||
|
const trackerResourceFragment = graphql`
|
||||||
|
fragment TrackerResourceRowFragment on TrackerResource {
|
||||||
|
id
|
||||||
|
type
|
||||||
|
origin
|
||||||
|
path
|
||||||
|
displayName
|
||||||
|
description
|
||||||
|
excluded
|
||||||
|
lastDetectedAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const deleteResourceMutation = graphql`
|
||||||
|
mutation TrackerResourceRowDeleteMutation(
|
||||||
|
$input: DeleteTrackerResourceInput!
|
||||||
|
$connections: [ID!]!
|
||||||
|
) {
|
||||||
|
deleteTrackerResource(input: $input) {
|
||||||
|
deletedTrackerResourceId @deleteEdge(connections: $connections)
|
||||||
|
cookieBanner {
|
||||||
|
id
|
||||||
|
latestVersion {
|
||||||
|
id
|
||||||
|
version
|
||||||
|
state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const moveResourceMutation = graphql`
|
||||||
|
mutation TrackerResourceRowMoveMutation(
|
||||||
|
$input: MoveTrackerResourceToCategoryInput!
|
||||||
|
) {
|
||||||
|
moveTrackerResourceToCategory(input: $input) {
|
||||||
|
trackerResource {
|
||||||
|
id
|
||||||
|
cookieCategory {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cookieBanner {
|
||||||
|
id
|
||||||
|
latestVersion {
|
||||||
|
id
|
||||||
|
version
|
||||||
|
state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const updateResourceMutation = graphql`
|
||||||
|
mutation TrackerResourceRowUpdateMutation(
|
||||||
|
$input: UpdateTrackerResourceInput!
|
||||||
|
) {
|
||||||
|
updateTrackerResource(input: $input) {
|
||||||
|
trackerResource {
|
||||||
|
id
|
||||||
|
displayName
|
||||||
|
description
|
||||||
|
excluded
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
cookieBanner {
|
||||||
|
id
|
||||||
|
latestVersion {
|
||||||
|
id
|
||||||
|
version
|
||||||
|
state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
function resourceTypeLabel(type: string, __: (s: string) => string): string {
|
||||||
|
switch (type) {
|
||||||
|
case "SCRIPT": return __("Script");
|
||||||
|
case "IFRAME": return __("Iframe");
|
||||||
|
default: return type;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TrackerResourceRowProps {
|
||||||
|
resourceKey: TrackerResourceRowFragment$key;
|
||||||
|
connectionId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TrackerResourceRow({ resourceKey, connectionId }: TrackerResourceRowProps) {
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
const { toast } = useToast();
|
||||||
|
const confirm = useConfirm();
|
||||||
|
const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
|
||||||
|
const resource = useFragment(trackerResourceFragment, resourceKey);
|
||||||
|
|
||||||
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
|
const [categoryQueryRef, loadCategoryQuery]
|
||||||
|
= useQueryLoader<MoveToCategoryDropdownQuery>(moveToCategoryDropdownQuery);
|
||||||
|
|
||||||
|
const handleCategoryDropdownOpen = useCallback(
|
||||||
|
(open: boolean) => {
|
||||||
|
if (open && cookieBannerId) {
|
||||||
|
loadCategoryQuery({ cookieBannerId });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[loadCategoryQuery, cookieBannerId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const [deleteResource]
|
||||||
|
= useMutation<TrackerResourceRowDeleteMutation>(deleteResourceMutation);
|
||||||
|
const [moveResource]
|
||||||
|
= useMutation<TrackerResourceRowMoveMutation>(moveResourceMutation);
|
||||||
|
const [updateResource, isUpdating]
|
||||||
|
= useMutation<TrackerResourceRowUpdateMutation>(updateResourceMutation);
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
confirm(
|
||||||
|
() =>
|
||||||
|
new Promise<void>((resolve) => {
|
||||||
|
deleteResource({
|
||||||
|
variables: {
|
||||||
|
input: { trackerResourceId: resource.id },
|
||||||
|
connections: [connectionId],
|
||||||
|
},
|
||||||
|
onCompleted(_, errors) {
|
||||||
|
if (errors?.length) {
|
||||||
|
toast({ title: __("Error"), description: errors[0].message, variant: "error" });
|
||||||
|
} else {
|
||||||
|
toast({ title: __("Success"), description: __("Resource deleted"), variant: "success" });
|
||||||
|
}
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
onError(error) {
|
||||||
|
toast({ title: __("Error"), description: formatError(__("Failed to delete resource"), error as GraphQLError), variant: "error" });
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
message: __("Are you sure you want to delete \"%s\"?").replace("%s", resource.displayName),
|
||||||
|
variant: "danger",
|
||||||
|
label: __("Delete"),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMove = (targetCategoryId: string) => {
|
||||||
|
moveResource({
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
trackerResourceId: resource.id,
|
||||||
|
targetCookieCategoryId: targetCategoryId,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
updater(store) {
|
||||||
|
const payload = store.getRootField("moveTrackerResourceToCategory");
|
||||||
|
if (!payload?.getLinkedRecord("trackerResource")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const conn = store.get(connectionId);
|
||||||
|
if (conn) {
|
||||||
|
ConnectionHandler.deleteNode(conn, resource.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCompleted(_, errors) {
|
||||||
|
if (errors?.length) {
|
||||||
|
toast({ title: __("Error"), description: errors[0].message, variant: "error" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast({ title: __("Success"), description: __("Resource moved"), variant: "success" });
|
||||||
|
},
|
||||||
|
onError(error) {
|
||||||
|
toast({ title: __("Error"), description: formatError(__("Failed to move resource"), error as GraphQLError), variant: "error" });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleExcluded = () => {
|
||||||
|
updateResource({
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
trackerResourceId: resource.id,
|
||||||
|
excluded: !resource.excluded,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onCompleted(_, errors) {
|
||||||
|
if (errors?.length) {
|
||||||
|
toast({ title: __("Error"), description: errors[0].message, variant: "error" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError(error) {
|
||||||
|
toast({ title: __("Error"), description: formatError(__("Failed to update resource"), error as GraphQLError), variant: "error" });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveEdit = (data: { displayName: string; description: string }) => {
|
||||||
|
updateResource({
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
trackerResourceId: resource.id,
|
||||||
|
displayName: data.displayName,
|
||||||
|
description: data.description,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onCompleted(_, errors) {
|
||||||
|
if (errors?.length) {
|
||||||
|
toast({ title: __("Error"), description: errors[0].message, variant: "error" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast({ title: __("Success"), description: __("Resource updated"), variant: "success" });
|
||||||
|
setIsEditing(false);
|
||||||
|
},
|
||||||
|
onError(error) {
|
||||||
|
toast({ title: __("Error"), description: formatError(__("Failed to update resource"), error as GraphQLError), variant: "error" });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEditing) {
|
||||||
|
return (
|
||||||
|
<TrackerResourceRowEdit
|
||||||
|
displayName={resource.displayName}
|
||||||
|
description={resource.description}
|
||||||
|
isUpdating={isUpdating}
|
||||||
|
onSave={handleSaveEdit}
|
||||||
|
onCancel={() => setIsEditing(false)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tr className={resource.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}>
|
||||||
|
<Td>
|
||||||
|
<Badge variant={resource.type === "SCRIPT" ? "info" : "neutral"}>
|
||||||
|
{resourceTypeLabel(resource.type, __)}
|
||||||
|
</Badge>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex flex-col min-w-0">
|
||||||
|
<span className={resource.excluded ? undefined : "font-medium"}>{resource.origin}</span>
|
||||||
|
{resource.description && (
|
||||||
|
<span className="text-xs text-txt-tertiary wrap-break-word line-clamp-1">
|
||||||
|
{resource.description}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<span className="font-mono text-sm">{resource.path}</span>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
{resource.lastDetectedAt
|
||||||
|
? (
|
||||||
|
<time dateTime={resource.lastDetectedAt}>
|
||||||
|
{new Date(resource.lastDetectedAt).toLocaleString()}
|
||||||
|
</time>
|
||||||
|
)
|
||||||
|
: <span className="text-txt-tertiary">-</span>}
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsEditing(true)}
|
||||||
|
className="p-1 rounded cursor-pointer"
|
||||||
|
title={__("Edit")}
|
||||||
|
>
|
||||||
|
<IconPencil size={14} />
|
||||||
|
</button>
|
||||||
|
<Dropdown
|
||||||
|
onOpenChange={handleCategoryDropdownOpen}
|
||||||
|
toggle={(
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="p-1 rounded cursor-pointer"
|
||||||
|
title={__("Move to category")}
|
||||||
|
>
|
||||||
|
<IconArrowBoxLeft size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{categoryQueryRef && (
|
||||||
|
<Suspense>
|
||||||
|
<MoveToCategoryDropdown queryRef={categoryQueryRef} onMove={handleMove} />
|
||||||
|
</Suspense>
|
||||||
|
)}
|
||||||
|
</Dropdown>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleToggleExcluded}
|
||||||
|
className="p-1 rounded cursor-pointer"
|
||||||
|
title={resource.excluded ? __("Include") : __("Exclude")}
|
||||||
|
>
|
||||||
|
{resource.excluded ? <IconEye size={14} /> : <IconEyeSlash size={14} />}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleDelete}
|
||||||
|
className="p-1 rounded cursor-pointer text-danger-dark"
|
||||||
|
title={__("Delete")}
|
||||||
|
>
|
||||||
|
<IconTrashCan size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
|
||||||
|
//
|
||||||
|
// Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
// purpose with or without fee is hereby granted, provided that the above
|
||||||
|
// copyright notice and this permission notice appear in all copies.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||||
|
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||||
|
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||||
|
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||||
|
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||||
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
|
// PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { Button, Input, Td, Tr } from "@probo/ui";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
|
||||||
|
interface FormValues {
|
||||||
|
displayName: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TrackerResourceRowEditProps {
|
||||||
|
displayName: string;
|
||||||
|
description: string;
|
||||||
|
isUpdating: boolean;
|
||||||
|
onSave: (data: { displayName: string; description: string }) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TrackerResourceRowEdit({
|
||||||
|
displayName,
|
||||||
|
description,
|
||||||
|
isUpdating,
|
||||||
|
onSave,
|
||||||
|
onCancel,
|
||||||
|
}: TrackerResourceRowEditProps) {
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
|
||||||
|
const { register, handleSubmit } = useForm<FormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
displayName,
|
||||||
|
description,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = (data: FormValues) => {
|
||||||
|
onSave({
|
||||||
|
displayName: data.displayName,
|
||||||
|
description: data.description,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tr>
|
||||||
|
<Td />
|
||||||
|
<Td className="pr-3">
|
||||||
|
<Input
|
||||||
|
{...register("displayName")}
|
||||||
|
placeholder={__("Display name")}
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
<Td className="pr-3" colSpan={2}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Input
|
||||||
|
{...register("description")}
|
||||||
|
placeholder={__("Description")}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={() => void handleSubmit(onSubmit)()}
|
||||||
|
disabled={isUpdating}
|
||||||
|
>
|
||||||
|
{__("Save")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={onCancel}
|
||||||
|
>
|
||||||
|
{__("Cancel")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user