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

Fix issue with fragment read inline

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-05-11 19:41:02 +04:00
parent f7dd08d432
commit 6383457e6b
2 changed files with 58 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/console/src/pages/organizations/vendors/dialogs/CommonThirdPartyCombobox.tsx vendored
View File

@@ -15,30 +15,51 @@
import { Avatar, ComboboxItem } from "@probo/ui";
import type { PreloadedQuery } from "react-relay";
import { graphql, usePreloadedQuery } from "react-relay";
import { readInlineData } from "relay-runtime";
import type {
CommonThirdPartyComboboxQuery$data,
CommonThirdPartyComboboxQuery,
} from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql";
CommonThirdPartyCombobox_commonThirdParty$data,
CommonThirdPartyCombobox_commonThirdParty$key,
} from "#/__generated__/core/CommonThirdPartyCombobox_commonThirdParty.graphql";
import type { CommonThirdPartyComboboxQuery } from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql";
import type { CreateVendorInput } from "#/__generated__/core/VendorGraphCreateMutation.graphql";
export type CommonThirdPartyRef
= CommonThirdPartyComboboxQuery$data["commonThirdParties"][number];
= CommonThirdPartyCombobox_commonThirdParty$data;
const commonThirdPartyFragment = graphql`
fragment CommonThirdPartyCombobox_commonThirdParty on CommonThirdParty @inline {
name
logoUrl
category
websiteUrl
headquarterAddress
legalName
privacyPolicyUrl
serviceLevelAgreementUrl
dataProcessingAgreementUrl
certifications
securityPageUrl
trustPageUrl
statusPageUrl
termsOfServiceUrl
}
`;
export const commonThirdPartiesQuery = graphql`
query CommonThirdPartyComboboxQuery($name: String!) {
commonThirdParties(name: $name) {
id
name
websiteUrl
logoUrl
...CreateVendorDialog_commonThirdParty
...CommonThirdPartyCombobox_commonThirdParty
}
}
`;
interface CommonThirdPartyComboboxProps {
queryRef: PreloadedQuery<CommonThirdPartyComboboxQuery>;
onSelect: (thirdPartyRef: CommonThirdPartyRef) => void;
onSelect: (thridParty: Omit<CreateVendorInput, "organizationId">) => void;
}
export function CommonThirdPartyCombobox({
@@ -52,7 +73,27 @@ export function CommonThirdPartyCombobox({
{data.commonThirdParties.map(thirdParty => (
<ComboboxItem
key={thirdParty.id}
onClick={() => onSelect(thirdParty)}
onClick={() => {
const tp = readInlineData<CommonThirdPartyCombobox_commonThirdParty$key>(
commonThirdPartyFragment,
thirdParty,
);
onSelect({
name: tp.name,
headquarterAddress: tp.headquarterAddress,
legalName: tp.legalName,
websiteUrl: tp.websiteUrl,
category: tp.category,
privacyPolicyUrl: tp.privacyPolicyUrl,
serviceLevelAgreementUrl: tp.serviceLevelAgreementUrl,
dataProcessingAgreementUrl: tp.dataProcessingAgreementUrl,
certifications: tp.certifications,
securityPageUrl: tp.securityPageUrl,
trustPageUrl: tp.trustPageUrl,
statusPageUrl: tp.statusPageUrl,
termsOfServiceUrl: tp.termsOfServiceUrl,
});
}}
>
<Avatar
name={thirdParty.name}

58
apps/console/src/pages/organizations/vendors/dialogs/CreateVendorDialog.tsx vendored
View File

@@ -22,39 +22,19 @@ import {
IconPlusLarge,
useDialogRef,
} from "@probo/ui";
import { type ReactNode, Suspense, useEffect, useRef, useState, useCallback } from "react";
import { type ReactNode, Suspense, useCallback, useState } from "react";
import { useQueryLoader } from "react-relay";
import { graphql, readInlineData } from "relay-runtime";
import { useDebounceCallback } from "usehooks-ts";
import type { CommonThirdPartyComboboxQuery } from "#/__generated__/core/CommonThirdPartyComboboxQuery.graphql";
import type { CreateVendorDialog_commonThirdParty$key } from "#/__generated__/core/CreateVendorDialog_commonThirdParty.graphql";
import type { CreateVendorInput } from "#/__generated__/core/VendorGraphCreateMutation.graphql";
import { useCreateVendorMutation } from "#/hooks/graph/VendorGraph";
import {
commonThirdPartiesQuery,
CommonThirdPartyCombobox,
type CommonThirdPartyRef,
} from "./CommonThirdPartyCombobox";
const commonThirdPartyFragment = graphql`
fragment CreateVendorDialog_commonThirdParty on CommonThirdParty @inline {
name
category
websiteUrl
headquarterAddress
legalName
privacyPolicyUrl
serviceLevelAgreementUrl
dataProcessingAgreementUrl
certifications
securityPageUrl
trustPageUrl
statusPageUrl
termsOfServiceUrl
}
`;
type Props = {
children: ReactNode;
organizationId: string;
@@ -73,38 +53,18 @@ export function CreateVendorDialog({
const [queryRef, loadQuery]
= useQueryLoader<CommonThirdPartyComboboxQuery>(commonThirdPartiesQuery);
const onSelect = async (thirdPartyRef: CommonThirdPartyRef | string) => {
const onSelect = async (thirdParty: Omit<CreateVendorInput, "organizationId"> | string) => {
const input
= typeof thirdPartyRef === "string"
= typeof thirdParty === "string"
? {
organizationId,
name: thirdPartyRef,
name: thirdParty,
category: null,
}
: (() => {
const tp = readInlineData<CreateVendorDialog_commonThirdParty$key>(
commonThirdPartyFragment,
thirdPartyRef,
);
return {
organizationId,
name: tp.name,
headquarterAddress: tp.headquarterAddress || null,
legalName: tp.legalName || null,
websiteUrl: tp.websiteUrl || null,
category: tp.category || null,
privacyPolicyUrl: tp.privacyPolicyUrl || null,
serviceLevelAgreementUrl:
tp.serviceLevelAgreementUrl || null,
dataProcessingAgreementUrl:
tp.dataProcessingAgreementUrl || null,
certifications: tp.certifications,
securityPageUrl: tp.securityPageUrl || null,
trustPageUrl: tp.trustPageUrl || null,
statusPageUrl: tp.statusPageUrl || null,
termsOfServiceUrl: tp.termsOfServiceUrl || null,
};
})();
: {
...thirdParty,
organizationId,
};
await createVendor({
variables: {
input,