From c0e5a85608ca03634ef8fff2d569d470f0bfe527 Mon Sep 17 00:00:00 2001 From: "Kasper F. Kristensen" Date: Wed, 1 Oct 2025 14:51:08 +0200 Subject: [PATCH 1/5] feat: use Experimental_AttioRecordCombobox --- .../comboboxes/companies-combobox.tsx | 51 ++- .../comboboxes/companies-options-provider.ts | 33 -- .../log-customer-request-dialog.tsx | 325 ++++++++++-------- 3 files changed, 202 insertions(+), 207 deletions(-) delete mode 100644 src/components/comboboxes/companies-options-provider.ts diff --git a/src/components/comboboxes/companies-combobox.tsx b/src/components/comboboxes/companies-combobox.tsx index 9902c67..a66d008 100644 --- a/src/components/comboboxes/companies-combobox.tsx +++ b/src/components/comboboxes/companies-combobox.tsx @@ -1,33 +1,30 @@ -import type {FormApi} from "attio/client" -import type {LogCustomerRequestFormSchema} from "../log-customer-request-dialog" -import {companiesProvider} from "./companies-options-provider" +import type { FormApi } from "attio/client"; +import type { LogCustomerRequestFormSchema } from "../log-customer-request-dialog"; export function CompaniesCombobox({ - Combobox, - companyId, + Combobox, + companyId, }: { - Combobox: FormApi["Combobox"] - companyId?: string + Combobox: FormApi["Experimental_AttioRecordCombobox"]; + companyId?: string; }) { - if (companyId) { - return ( - - ) - } + if (companyId) { return ( - - ) + + ); + } + return ( + + ); } diff --git a/src/components/comboboxes/companies-options-provider.ts b/src/components/comboboxes/companies-options-provider.ts deleted file mode 100644 index 2a9439d..0000000 --- a/src/components/comboboxes/companies-options-provider.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {type DecoratedComboboxOptionsProvider, runQuery} from "attio/client" -import GetCompanyByCompanyId from "../../graphql/get-company-by-id.graphql" -import SearchCompanies from "../../graphql/search-companies.graphql" - -export const companiesProvider: DecoratedComboboxOptionsProvider = { - async getOption(recordId) { - const result = await runQuery(GetCompanyByCompanyId, {companyId: recordId}) - return result?.company - ? result.company.logo_url - ? { - label: result.company.name || "Unnamed Company", - description: result.company.domains[0], - avatarUrl: result.company.logo_url, - } - : { - label: result.company.name || "Unnamed Company", - description: result.company.domains[0], - icon: "Company" as const, - } - : undefined - }, - - async search(query: string) { - const results = await runQuery(SearchCompanies, {query}) - - return results.experimental_searchCompanies.map((company) => ({ - label: company.name || company.domains[0] || "", - value: company.id, - description: company.domains[0], - ...(company.logo_url ? {avatarUrl: company.logo_url} : {icon: "Company"}), - })) - }, -} diff --git a/src/components/log-customer-request-dialog.tsx b/src/components/log-customer-request-dialog.tsx index 51850b1..430b327 100644 --- a/src/components/log-customer-request-dialog.tsx +++ b/src/components/log-customer-request-dialog.tsx @@ -1,168 +1,199 @@ -import {Button, Divider, Forms, Row, showToast, useForm} from "attio/client" -import getOrCreateCustomer from "../linear/customers/get-or-create-customer.server" -import createIssueServer from "../linear/issues/create-issue.server" -import type {CreateIssueInput} from "../linear/issues/schema" -import createCustomerNeedServer from "../linear/needs/create-customer-need.server" -import type {CustomerNeedCreateInput} from "../linear/needs/schema" -import {queryClient} from "../record/widgets/company-customer-request-count-widget" -import {CompaniesCombobox} from "./comboboxes/companies-combobox" -import {ProjectIssuesCombobox} from "./comboboxes/project-issues-combobox" -import {TeamsCombobox} from "./comboboxes/teams-combobox" +import { Button, Divider, Forms, Row, showToast, useForm } from "attio/client"; +import getOrCreateCustomer from "../linear/customers/get-or-create-customer.server"; +import createIssueServer from "../linear/issues/create-issue.server"; +import type { CreateIssueInput } from "../linear/issues/schema"; +import createCustomerNeedServer from "../linear/needs/create-customer-need.server"; +import type { CustomerNeedCreateInput } from "../linear/needs/schema"; +import { queryClient } from "../record/widgets/company-customer-request-count-widget"; +import { CompaniesCombobox } from "./comboboxes/companies-combobox"; +import { ProjectIssuesCombobox } from "./comboboxes/project-issues-combobox"; +import { TeamsCombobox } from "./comboboxes/teams-combobox"; -const NEW_ISSUE_OPTION = "NEW" +const NEW_ISSUE_OPTION = "NEW"; const formSchema = { - team: Forms.string(), - title: Forms.string(), - addTo: Forms.string(), - description: Forms.string().optional(), - companyRecordId: Forms.string(), - attachmentUrl: Forms.string().optional().url(), -} + team: Forms.string(), + title: Forms.string(), + addTo: Forms.string(), + description: Forms.string().optional(), + companyRecord: Forms.attioRecord().objectSlug("companies"), + attachmentUrl: Forms.string().optional().url(), +}; -export type LogCustomerRequestFormSchema = typeof formSchema +export type LogCustomerRequestFormSchema = typeof formSchema; export function LogCustomerRequestDialog({ - companyRecordId, - onDone, - description = "", - attachmentUrl = "", + companyRecordId, + onDone, + description = "", + attachmentUrl = "", }: { - companyRecordId?: string - description?: string - attachmentUrl?: string - onDone: () => void + companyRecordId?: string; + description?: string; + attachmentUrl?: string; + onDone: () => void; }) { - const {Form, TextInput, SubmitButton, Combobox, Experimental_RichTextInput, WithState} = - useForm(formSchema, { - companyRecordId, - description, - addTo: "", - title: "", - team: "", - attachmentUrl, - }) - return ( -
{ - try { - if (values.addTo.startsWith("project")) { - const projectId = values.addTo.split(":")[1] - await createCustomerNeed({ - body: values.description || "", - companyRecordId: values.companyRecordId, - projectId, - attachmentUrl: values.attachmentUrl || undefined, - }) - } else if (values.addTo.startsWith("issue")) { - const issueId = values.addTo.split(":")[1] - await createCustomerNeed({ - body: values.description || "", - companyRecordId: values.companyRecordId, - issueId, - attachmentUrl: values.attachmentUrl || undefined, - }) - } else { - const issue = await createIssue({ - title: values.title, - teamId: values.team, - }) - await createCustomerNeed({ - body: values.description || "", - companyRecordId: values.companyRecordId, - issueId: issue.id, - attachmentUrl: values.attachmentUrl || undefined, - }) - } - if (values.companyRecordId) { - queryClient.invalidateQueries({ - queryKey: ["company-customer-request-count", values.companyRecordId], - }) - } - onDone() - } catch (error) { - showToast({ - variant: "error", - title: "Error logging customer request", - text: error instanceof Error ? error.message : undefined, - }) - } - }} - > - + const { + Form, + TextInput, + SubmitButton, + Combobox, + Experimental_AttioRecordCombobox, + Experimental_RichTextInput, + WithState, + } = useForm(formSchema, { + companyRecord: companyRecordId + ? { recordId: companyRecordId, objectSlug: "companies" } + : undefined, + description, + addTo: "", + title: "", + team: "", + attachmentUrl, + }); + return ( + { + try { + if (values.addTo.startsWith("project")) { + const projectId = values.addTo.split(":")[1]; + await createCustomerNeed({ + body: values.description || "", + companyRecordId: values.companyRecord.recordId, + projectId, + attachmentUrl: values.attachmentUrl || undefined, + }); + } else if (values.addTo.startsWith("issue")) { + const issueId = values.addTo.split(":")[1]; + await createCustomerNeed({ + body: values.description || "", + companyRecordId: values.companyRecord.recordId, + issueId, + attachmentUrl: values.attachmentUrl || undefined, + }); + } else { + const issue = await createIssue({ + title: values.title, + teamId: values.team, + }); + await createCustomerNeed({ + body: values.description || "", + companyRecordId: values.companyRecord.recordId, + issueId: issue.id, + attachmentUrl: values.attachmentUrl || undefined, + }); + } + if (values.companyRecord.recordId) { + queryClient.invalidateQueries({ + queryKey: [ + "company-customer-request-count", + values.companyRecord.recordId, + ], + }); + } + onDone(); + } catch (error) { + showToast({ + variant: "error", + title: "Error logging customer request", + text: error instanceof Error ? error.message : undefined, + }); + } + }} + > + - - - - - - {({values}: {values: {addTo: string}}) => - values.addTo === NEW_ISSUE_OPTION ? ( - - - - - ) : ( - // biome-ignore lint/complexity/noUselessFragments: WithState requires JSX.Element, cannot return null - <> - ) - } - -