Custom object import csv (#3756)
* poc custom object import csv * fix fullname * lint * add relation Ids, fix label full name, add simple test * mock missing fields? * - fix test * validate uuid, fix key in column dropdown, don't save non set composite fields, allow only import relations where toRelationMetadata
This commit is contained in:
brendanlaschke
@ -1,124 +0,0 @@
|
||||
import { gql } from '@apollo/client';
|
||||
|
||||
export const query = gql`
|
||||
mutation CreatePeople($data: [PersonCreateInput!]!) {
|
||||
createPeople(data: $data) {
|
||||
id
|
||||
opportunities {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
xLink {
|
||||
label
|
||||
url
|
||||
}
|
||||
id
|
||||
pointOfContactForOpportunities {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
createdAt
|
||||
company {
|
||||
id
|
||||
}
|
||||
city
|
||||
email
|
||||
activityTargets {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
jobTitle
|
||||
favorites {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
attachments {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
name {
|
||||
firstName
|
||||
lastName
|
||||
}
|
||||
phone
|
||||
linkedinLink {
|
||||
label
|
||||
url
|
||||
}
|
||||
updatedAt
|
||||
avatarUrl
|
||||
companyId
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const personId = 'cb2e9f4b-20c3-4759-9315-4ffeecfaf71a';
|
||||
|
||||
export const variables = {
|
||||
data: [
|
||||
{
|
||||
id: personId,
|
||||
name: { firstName: 'Sheldon', lastName: ' Cooper' },
|
||||
email: undefined,
|
||||
jobTitle: undefined,
|
||||
phone: undefined,
|
||||
city: undefined,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const responseData = [
|
||||
{
|
||||
opportunities: {
|
||||
edges: [],
|
||||
},
|
||||
xLink: {
|
||||
label: '',
|
||||
url: '',
|
||||
},
|
||||
pointOfContactForOpportunities: {
|
||||
edges: [],
|
||||
},
|
||||
createdAt: '',
|
||||
company: {
|
||||
id: '',
|
||||
},
|
||||
city: '',
|
||||
email: '',
|
||||
activityTargets: {
|
||||
edges: [],
|
||||
},
|
||||
jobTitle: '',
|
||||
favorites: {
|
||||
edges: [],
|
||||
},
|
||||
attachments: {
|
||||
edges: [],
|
||||
},
|
||||
name: variables.data[0].name,
|
||||
phone: '',
|
||||
linkedinLink: {
|
||||
label: '',
|
||||
url: '',
|
||||
},
|
||||
updatedAt: '',
|
||||
avatarUrl: '',
|
||||
companyId: '',
|
||||
id: personId,
|
||||
},
|
||||
];
|
||||
@ -1,107 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
||||
import { RecoilRoot, useRecoilValue } from 'recoil';
|
||||
|
||||
import { spreadsheetImportState } from '@/spreadsheet-import/states/spreadsheetImportState';
|
||||
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
|
||||
|
||||
import {
|
||||
personId,
|
||||
query,
|
||||
responseData,
|
||||
variables,
|
||||
} from '../__mocks__/useSpreadsheetPersonImport';
|
||||
import { useSpreadsheetPersonImport } from '../useSpreadsheetPersonImport';
|
||||
|
||||
jest.mock('uuid', () => ({
|
||||
v4: jest.fn(() => personId),
|
||||
}));
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
request: {
|
||||
query,
|
||||
variables,
|
||||
},
|
||||
result: jest.fn(() => ({
|
||||
data: {
|
||||
createPeople: responseData,
|
||||
},
|
||||
})),
|
||||
},
|
||||
];
|
||||
|
||||
const Wrapper = ({ children }: { children: ReactNode }) => (
|
||||
<RecoilRoot>
|
||||
<MockedProvider mocks={mocks} addTypename={false}>
|
||||
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
|
||||
{children}
|
||||
</SnackBarProviderScope>
|
||||
</MockedProvider>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
const fakeCsv = () => {
|
||||
const csvContent = 'firstname, lastname\nSheldon, Cooper';
|
||||
const blob = new Blob([csvContent], { type: 'text/csv' });
|
||||
return new File([blob], 'fakeData.csv', { type: 'text/csv' });
|
||||
};
|
||||
|
||||
describe('useSpreadsheetPersonImport', () => {
|
||||
it('should work as expected', async () => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const spreadsheetImport = useRecoilValue(spreadsheetImportState);
|
||||
const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
|
||||
return { openPersonSpreadsheetImport, spreadsheetImport };
|
||||
},
|
||||
{
|
||||
wrapper: Wrapper,
|
||||
},
|
||||
);
|
||||
|
||||
const { spreadsheetImport, openPersonSpreadsheetImport } = result.current;
|
||||
|
||||
expect(spreadsheetImport.isOpen).toBe(false);
|
||||
expect(spreadsheetImport.options).toBeNull();
|
||||
|
||||
await act(async () => {
|
||||
openPersonSpreadsheetImport();
|
||||
});
|
||||
|
||||
const { spreadsheetImport: updatedImport } = result.current;
|
||||
|
||||
expect(updatedImport.isOpen).toBe(true);
|
||||
expect(updatedImport.options).toHaveProperty('onSubmit');
|
||||
expect(updatedImport.options?.onSubmit).toBeInstanceOf(Function);
|
||||
expect(updatedImport.options).toHaveProperty('fields');
|
||||
expect(Array.isArray(updatedImport.options?.fields)).toBe(true);
|
||||
|
||||
act(() => {
|
||||
updatedImport.options?.onSubmit(
|
||||
{
|
||||
validData: [
|
||||
{
|
||||
firstName: 'Sheldon',
|
||||
lastName: ' Cooper',
|
||||
},
|
||||
],
|
||||
invalidData: [],
|
||||
all: [
|
||||
{
|
||||
firstName: 'Sheldon',
|
||||
lastName: ' Cooper',
|
||||
__index: 'cbc3985f-dde9-46d1-bae2-c124141700ac',
|
||||
},
|
||||
],
|
||||
},
|
||||
fakeCsv(),
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mocks[0].result).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,77 +0,0 @@
|
||||
import { v4 } from 'uuid';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
|
||||
import { Person } from '@/people/types/Person';
|
||||
import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
|
||||
import { SpreadsheetOptions } from '@/spreadsheet-import/types';
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
|
||||
import { fieldsForPerson } from '../utils/fieldsForPerson';
|
||||
|
||||
export type FieldPersonMapping = (typeof fieldsForPerson)[number]['key'];
|
||||
|
||||
export const useSpreadsheetPersonImport = () => {
|
||||
const { openSpreadsheetImport } = useSpreadsheetImport<FieldPersonMapping>();
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
|
||||
const { createManyRecords: createManyPeople } = useCreateManyRecords<Person>({
|
||||
objectNameSingular: CoreObjectNameSingular.Person,
|
||||
});
|
||||
|
||||
const openPersonSpreadsheetImport = (
|
||||
options?: Omit<
|
||||
SpreadsheetOptions<FieldPersonMapping>,
|
||||
'fields' | 'isOpen' | 'onClose'
|
||||
>,
|
||||
) => {
|
||||
openSpreadsheetImport({
|
||||
...options,
|
||||
onSubmit: async (data) => {
|
||||
// TODO: Add better type checking in spreadsheet import later
|
||||
const createInputs = data.validData.map(
|
||||
(person) =>
|
||||
({
|
||||
id: v4(),
|
||||
name: {
|
||||
firstName: person.firstName as string | undefined,
|
||||
lastName: person.lastName as string | undefined,
|
||||
},
|
||||
email: person.email as string | undefined,
|
||||
...(person.linkedinUrl
|
||||
? {
|
||||
linkedinLink: {
|
||||
label: 'linkedinUrl',
|
||||
url: person.linkedinUrl as string | undefined,
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
...(person.xUrl
|
||||
? {
|
||||
xLink: {
|
||||
label: 'xUrl',
|
||||
url: person.xUrl as string | undefined,
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
jobTitle: person.jobTitle as string | undefined,
|
||||
phone: person.phone as string | undefined,
|
||||
city: person.city as string | undefined,
|
||||
}) as Person,
|
||||
);
|
||||
|
||||
// TODO: abstract this part for any object
|
||||
try {
|
||||
await createManyPeople(createInputs);
|
||||
} catch (error: any) {
|
||||
enqueueSnackBar(error?.message || 'Something went wrong', {
|
||||
variant: 'error',
|
||||
});
|
||||
}
|
||||
},
|
||||
fields: fieldsForPerson,
|
||||
});
|
||||
};
|
||||
|
||||
return { openPersonSpreadsheetImport };
|
||||
};
|
||||
@ -1,100 +0,0 @@
|
||||
import { isValidPhoneNumber } from 'libphonenumber-js';
|
||||
|
||||
import { Fields } from '@/spreadsheet-import/types';
|
||||
import {
|
||||
IconBrandLinkedin,
|
||||
IconBrandX,
|
||||
IconBriefcase,
|
||||
IconMail,
|
||||
IconMap,
|
||||
IconUser,
|
||||
} from '@/ui/display/icon';
|
||||
|
||||
export const fieldsForPerson = [
|
||||
{
|
||||
icon: IconUser,
|
||||
label: 'Firstname',
|
||||
key: 'firstName',
|
||||
alternateMatches: ['first name', 'first', 'firstname'],
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: 'Tim',
|
||||
},
|
||||
{
|
||||
icon: IconUser,
|
||||
label: 'Lastname',
|
||||
key: 'lastName',
|
||||
alternateMatches: ['last name', 'last', 'lastname'],
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: 'Cook',
|
||||
},
|
||||
{
|
||||
icon: IconMail,
|
||||
label: 'Email',
|
||||
key: 'email',
|
||||
alternateMatches: ['email', 'mail'],
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: 'tim@apple.dev',
|
||||
},
|
||||
{
|
||||
icon: IconBrandLinkedin,
|
||||
label: 'Linkedin URL',
|
||||
key: 'linkedinUrl',
|
||||
alternateMatches: ['linkedIn', 'linkedin', 'linkedin url'],
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: 'https://www.linkedin.com/in/timcook',
|
||||
},
|
||||
{
|
||||
icon: IconBrandX,
|
||||
label: 'X URL',
|
||||
key: 'xUrl',
|
||||
alternateMatches: ['x', 'x url'],
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: 'https://x.com/tim_cook',
|
||||
},
|
||||
{
|
||||
icon: IconBriefcase,
|
||||
label: 'Job title',
|
||||
key: 'jobTitle',
|
||||
alternateMatches: ['job', 'job title'],
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: 'CEO',
|
||||
},
|
||||
{
|
||||
icon: IconBriefcase,
|
||||
label: 'Phone',
|
||||
key: 'phone',
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: '+1234567890',
|
||||
validations: [
|
||||
{
|
||||
rule: 'function',
|
||||
isValid: (value: string) => isValidPhoneNumber(value),
|
||||
errorMessage: 'phone is not valid',
|
||||
level: 'error',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: IconMap,
|
||||
label: 'City',
|
||||
key: 'city',
|
||||
fieldType: {
|
||||
type: 'input',
|
||||
},
|
||||
example: 'Seattle',
|
||||
},
|
||||
] as Fields<string>;
|
||||
Reference in New Issue
Block a user