Allow linking controls

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-06-10 13:40:24 +02:00
committed by Sacha Al Himdani
parent 93aeedf1e1
commit ab077c385e
32 changed files with 2841 additions and 193 deletions

View File

@@ -3,17 +3,20 @@ import {
Button,
Tr,
Td,
Table,
Thead,
Tbody,
Th,
IconTrashCan,
Badge,
TrButton,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import type { LinkedControlsCardFragment$key } from "./__generated__/LinkedControlsCardFragment.graphql";
import { useFragment } from "react-relay";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { LinkedControlsDialog } from "./LinkedControlsDialog";
import { SortableTable, SortableTh } from "../SortableTable";
import type { ComponentProps } from "react";
const linkedControlFragment = graphql`
fragment LinkedControlsCardFragment on Control {
@@ -46,6 +49,10 @@ type Props<Params> = {
connectionId: string;
// Mutation to detach a control (will receive {controlId, ...params})
onDetach: Mutation<Params>;
// Mutation to attach a control (will receive {controlId, ...params})
onAttach?: Mutation<Params>;
// Allow sorting in the table
refetch: Pick<ComponentProps<typeof SortableTable>, "refetch">;
};
/**
@@ -67,11 +74,26 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
});
};
const onAttach = (controlId: string) => {
if (!props.onAttach) {
return;
}
props.onAttach({
variables: {
input: {
controlId,
...props.params,
},
connections: [props.connectionId],
},
});
};
return (
<Table>
<SortableTable refetch={props.refetch as any}>
<Thead>
<Tr>
<Th>{__("Reference")}</Th>
<SortableTh field="SECTION_TITLE">{__("Reference")}</SortableTh>
<Th>{__("Name")}</Th>
<Th></Th>
</Tr>
@@ -85,16 +107,31 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
</Tr>
)}
{controls.map((control) => (
<ControlRow key={control.id} control={control} onClick={onDetach} />
<ControlRow
key={control.id}
control={control}
onClick={onDetach}
onAttach={onAttach}
/>
))}
<LinkedControlsDialog
connectionId={props.connectionId}
disabled={props.disabled}
linkedControls={controls}
onLink={onAttach}
onUnlink={onDetach}
>
<TrButton colspan={3}>{__("Link control")}</TrButton>
</LinkedControlsDialog>
</Tbody>
</Table>
</SortableTable>
);
}
function ControlRow(props: {
control: LinkedControlsCardFragment$key & { id: string };
onClick: (controlId: string) => void;
onAttach?: (controlId: string) => void;
}) {
const control = useFragment(linkedControlFragment, props.control);
const organizationId = useOrganizationId();

View File

@@ -0,0 +1,185 @@
import {
Badge,
Button,
Dialog,
DialogContent,
IconMagnifyingGlass,
IconPlusLarge,
IconTrashCan,
InfiniteScrollTrigger,
Input,
Spinner,
} from "@probo/ui";
import {
Suspense,
useMemo,
useRef,
type ReactNode,
type RefObject,
} from "react";
import { useTranslate } from "@probo/i18n";
import { graphql } from "relay-runtime";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
import type { LinkedControlsDialogQuery } from "./__generated__/LinkedControlsDialogQuery.graphql";
import type {
LinkedControlsDialogFragment$data,
LinkedControlsDialogFragment$key,
} from "./__generated__/LinkedControlsDialogFragment.graphql";
import type { NodeOf } from "/types";
import { useDebounceCallback } from "usehooks-ts";
const query = graphql`
query LinkedControlsDialogQuery($organizationId: ID!) {
organization: node(id: $organizationId) {
id
...LinkedControlsDialogFragment
}
}
`;
const controlsFragment = graphql`
fragment LinkedControlsDialogFragment on Organization
@argumentDefinitions(
first: { type: "Int", defaultValue: 1 }
after: { type: "CursorKey" }
last: { type: "Int", defaultValue: null }
before: { type: "CursorKey", defaultValue: null }
order: { type: "ControlOrder", defaultValue: null }
filter: { type: "ControlFilter", defaultValue: null }
)
@refetchable(queryName: "LinkedControlsDialogControlsQuery") {
controls(
first: $first
after: $after
last: $last
before: $before
orderBy: $order
filter: $filter
) @connection(key: "LinkedControlsDialogControlsQuery_controls") {
edges {
node {
id
name
sectionTitle
}
}
}
}
`;
type Props = {
children: ReactNode;
connectionId: string;
disabled?: boolean;
linkedControls?: { id: string }[];
onLink: (controlId: string) => void;
onUnlink: (controlId: string) => void;
};
type SearchRef = RefObject<{ search: (v: string) => void } | null>;
export function LinkedControlsDialog(props: Props) {
const { __ } = useTranslate();
const searchRef: SearchRef = useRef(null);
const onSearch = (v: string) => {
searchRef.current?.search(v);
};
return (
<Dialog trigger={props.children} title={__("Link controls")}>
<DialogContent>
<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...")}
onValueChange={onSearch}
/>
</div>
<Suspense fallback={<Spinner centered />}>
<LinkedControlsDialogContent {...props} ref={searchRef} />
</Suspense>
</DialogContent>
</Dialog>
);
}
function LinkedControlsDialogContent(props: Props & { ref: SearchRef }) {
const organizationId = useOrganizationId();
const mainData = useLazyLoadQuery<LinkedControlsDialogQuery>(query, {
organizationId,
});
const { data, loadNext, hasNext, isLoadingNext, refetch } =
usePaginationFragment(
controlsFragment,
mainData.organization as LinkedControlsDialogFragment$key
);
const controls = data.controls?.edges?.map((edge) => edge.node) ?? [];
const controlIds = useMemo(() => {
return new Set(props.linkedControls?.map((c) => c.id) ?? []);
}, [props.linkedControls]);
props.ref.current = {
search: useDebounceCallback((v: string) => {
refetch({
first: 20,
filter: {
query: v,
},
});
}, 500),
};
return (
<>
<div className="divide-y divide-border-low">
{controls.map((control) => (
<ControlRow
key={control.id}
control={control}
controlIds={controlIds}
{...props}
/>
))}
{hasNext && (
<InfiniteScrollTrigger
loading={isLoadingNext}
onView={() => loadNext(20)}
/>
)}
</div>
</>
);
}
function ControlRow(
props: {
control: NodeOf<LinkedControlsDialogFragment$data["controls"]>;
controlIds: Set<string>;
} & Props
) {
const { __ } = useTranslate();
const isLinked = props.controlIds.has(props.control.id);
const onClick = isLinked ? props.onUnlink : props.onLink;
const IconComponent = isLinked ? IconTrashCan : IconPlusLarge;
return (
<button
className="py-4 flex items-center gap-4 hover:bg-subtle cursor-pointer px-6 w-full text-start"
onClick={() => onClick(props.control.id)}
>
<Badge size="md">{props.control.sectionTitle}</Badge>
{props.control.name}
<Button
disabled={props.disabled}
className="ml-auto"
variant={isLinked ? "secondary" : "primary"}
asChild
>
<span>
<IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
</span>
</Button>
</button>
);
}

View File

@@ -0,0 +1,337 @@
/**
* @generated SignedSource<<abe97be0de1c878a30ced882c0d22fee>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type ControlOrderField = "CREATED_AT" | "SECTION_TITLE";
export type OrderDirection = "ASC" | "DESC";
export type ControlFilter = {
query?: string | null | undefined;
};
export type ControlOrder = {
direction: OrderDirection;
field: ControlOrderField;
};
export type LinkedControlsDialogControlsQuery$variables = {
after?: any | null | undefined;
before?: any | null | undefined;
filter?: ControlFilter | null | undefined;
first?: number | null | undefined;
id: string;
last?: number | null | undefined;
order?: ControlOrder | null | undefined;
};
export type LinkedControlsDialogControlsQuery$data = {
readonly node: {
readonly " $fragmentSpreads": FragmentRefs<"LinkedControlsDialogFragment">;
};
};
export type LinkedControlsDialogControlsQuery = {
response: LinkedControlsDialogControlsQuery$data;
variables: LinkedControlsDialogControlsQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "after"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "before"
},
v2 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "filter"
},
v3 = {
"defaultValue": 1,
"kind": "LocalArgument",
"name": "first"
},
v4 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "id"
},
v5 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "last"
},
v6 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "order"
},
v7 = [
{
"kind": "Variable",
"name": "id",
"variableName": "id"
}
],
v8 = {
"kind": "Variable",
"name": "after",
"variableName": "after"
},
v9 = {
"kind": "Variable",
"name": "before",
"variableName": "before"
},
v10 = {
"kind": "Variable",
"name": "filter",
"variableName": "filter"
},
v11 = {
"kind": "Variable",
"name": "first",
"variableName": "first"
},
v12 = {
"kind": "Variable",
"name": "last",
"variableName": "last"
},
v13 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v14 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v15 = [
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/),
(v12/*: any*/),
{
"kind": "Variable",
"name": "orderBy",
"variableName": "order"
}
];
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/),
(v2/*: any*/),
(v3/*: any*/),
(v4/*: any*/),
(v5/*: any*/),
(v6/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "LinkedControlsDialogControlsQuery",
"selections": [
{
"alias": null,
"args": (v7/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"args": [
(v8/*: any*/),
(v9/*: any*/),
(v10/*: any*/),
(v11/*: any*/),
(v12/*: any*/),
{
"kind": "Variable",
"name": "order",
"variableName": "order"
}
],
"kind": "FragmentSpread",
"name": "LinkedControlsDialogFragment"
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/),
(v2/*: any*/),
(v3/*: any*/),
(v5/*: any*/),
(v6/*: any*/),
(v4/*: any*/)
],
"kind": "Operation",
"name": "LinkedControlsDialogControlsQuery",
"selections": [
{
"alias": null,
"args": (v7/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v13/*: any*/),
(v14/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v15/*: any*/),
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v14/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sectionTitle",
"storageKey": null
},
(v13/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": (v15/*: any*/),
"filters": [
"orderBy",
"filter"
],
"handle": "connection",
"key": "LinkedControlsDialogControlsQuery_controls",
"kind": "LinkedHandle",
"name": "controls"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "ececbd47b66b771cf95244ee81dae1f7",
"id": null,
"metadata": {},
"name": "LinkedControlsDialogControlsQuery",
"operationKind": "query",
"text": "query LinkedControlsDialogControlsQuery(\n $after: CursorKey\n $before: CursorKey = null\n $filter: ControlFilter = null\n $first: Int = 1\n $last: Int = null\n $order: ControlOrder = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...LinkedControlsDialogFragment_4cFWzS\n id\n }\n}\n\nfragment LinkedControlsDialogFragment_4cFWzS on Organization {\n controls(first: $first, after: $after, last: $last, before: $before, orderBy: $order, filter: $filter) {\n edges {\n node {\n id\n name\n sectionTitle\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
}
};
})();
(node as any).hash = "b4dbf5c3271581e4317726870476da8d";
export default node;

View File

@@ -0,0 +1,232 @@
/**
* @generated SignedSource<<0be68327d7fa04dbceb53404ed1d5df4>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type LinkedControlsDialogFragment$data = {
readonly controls: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly name: string;
readonly sectionTitle: string;
};
}>;
};
readonly id: string;
readonly " $fragmentType": "LinkedControlsDialogFragment";
};
export type LinkedControlsDialogFragment$key = {
readonly " $data"?: LinkedControlsDialogFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"LinkedControlsDialogFragment">;
};
import LinkedControlsDialogControlsQuery_graphql from './LinkedControlsDialogControlsQuery.graphql';
const node: ReaderFragment = (function(){
var v0 = [
"controls"
],
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
};
return {
"argumentDefinitions": [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "after"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "before"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "filter"
},
{
"defaultValue": 1,
"kind": "LocalArgument",
"name": "first"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "last"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "order"
}
],
"kind": "Fragment",
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "bidirectional",
"path": (v0/*: any*/)
}
],
"refetch": {
"connection": {
"forward": {
"count": "first",
"cursor": "after"
},
"backward": {
"count": "last",
"cursor": "before"
},
"path": (v0/*: any*/)
},
"fragmentPathInResult": [
"node"
],
"operation": LinkedControlsDialogControlsQuery_graphql,
"identifierInfo": {
"identifierField": "id",
"identifierQueryVariableName": "id"
}
}
},
"name": "LinkedControlsDialogFragment",
"selections": [
{
"alias": "controls",
"args": [
{
"kind": "Variable",
"name": "filter",
"variableName": "filter"
},
{
"kind": "Variable",
"name": "orderBy",
"variableName": "order"
}
],
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "__LinkedControlsDialogControlsQuery_controls_connection",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sectionTitle",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
},
(v1/*: any*/)
],
"type": "Organization",
"abstractKey": null
};
})();
(node as any).hash = "b4dbf5c3271581e4317726870476da8d";
export default node;

View File

@@ -0,0 +1,239 @@
/**
* @generated SignedSource<<ed40a9cdded98d98bf3d626f9d645d54>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type LinkedControlsDialogQuery$variables = {
organizationId: string;
};
export type LinkedControlsDialogQuery$data = {
readonly organization: {
readonly id: string;
readonly " $fragmentSpreads": FragmentRefs<"LinkedControlsDialogFragment">;
};
};
export type LinkedControlsDialogQuery = {
response: LinkedControlsDialogQuery$data;
variables: LinkedControlsDialogQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "organizationId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v4 = [
{
"kind": "Literal",
"name": "first",
"value": 1
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "LinkedControlsDialogQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"args": null,
"kind": "FragmentSpread",
"name": "LinkedControlsDialogFragment"
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "LinkedControlsDialogQuery",
"selections": [
{
"alias": "organization",
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v4/*: any*/),
"concreteType": "ControlConnection",
"kind": "LinkedField",
"name": "controls",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ControlEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Control",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "sectionTitle",
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "controls(first:1)"
},
{
"alias": null,
"args": (v4/*: any*/),
"filters": [
"orderBy",
"filter"
],
"handle": "connection",
"key": "LinkedControlsDialogControlsQuery_controls",
"kind": "LinkedHandle",
"name": "controls"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "1b0f918add0dcf173a84255896a3b46c",
"id": null,
"metadata": {},
"name": "LinkedControlsDialogQuery",
"operationKind": "query",
"text": "query LinkedControlsDialogQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n id\n ...LinkedControlsDialogFragment\n }\n}\n\nfragment LinkedControlsDialogFragment on Organization {\n controls(first: 1) {\n edges {\n node {\n id\n name\n sectionTitle\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n"
}
};
})();
(node as any).hash = "1be60a2dc1efbd8992472862ca32910e";
export default node;