mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-19 01:21:30 +03:00
parent
c26a7fda9a
commit
e2822ed095
@ -1,11 +1,9 @@
|
|||||||
import { ReactElement } from 'react';
|
import { ReactElement } from 'react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import { useRecoilValue } from 'recoil';
|
|
||||||
|
|
||||||
import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
|
import { useAddToHotkeysScopeStack } from '@/hotkeys/hooks/useAddToHotkeysScopeStack';
|
||||||
import { HotkeysScopeStackItem } from '@/hotkeys/types/internal/HotkeysScopeStackItems';
|
import { HotkeysScopeStackItem } from '@/hotkeys/types/internal/HotkeysScopeStackItems';
|
||||||
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
|
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
|
||||||
import { isSoftFocusActiveState } from '@/ui/tables/states/isSoftFocusActiveState';
|
|
||||||
|
|
||||||
import { useEditableCell } from './hooks/useCloseEditableCell';
|
import { useEditableCell } from './hooks/useCloseEditableCell';
|
||||||
import { useCurrentCellEditMode } from './hooks/useCurrentCellEditMode';
|
import { useCurrentCellEditMode } from './hooks/useCurrentCellEditMode';
|
||||||
@ -47,7 +45,7 @@ export function EditableCell({
|
|||||||
|
|
||||||
const { openEditableCell } = useEditableCell();
|
const { openEditableCell } = useEditableCell();
|
||||||
|
|
||||||
const isSoftFocusActive = useRecoilValue(isSoftFocusActiveState);
|
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
|
||||||
|
|
||||||
const addToHotkeysScopeStack = useAddToHotkeysScopeStack();
|
const addToHotkeysScopeStack = useAddToHotkeysScopeStack();
|
||||||
|
|
||||||
@ -59,7 +57,7 @@ export function EditableCell({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isSoftFocusActive) {
|
if (hasSoftFocus) {
|
||||||
openEditableCell();
|
openEditableCell();
|
||||||
addToHotkeysScopeStack(
|
addToHotkeysScopeStack(
|
||||||
editHotkeysScope ?? {
|
editHotkeysScope ?? {
|
||||||
@ -71,8 +69,6 @@ export function EditableCell({
|
|||||||
setSoftFocusOnCurrentCell();
|
setSoftFocusOnCurrentCell();
|
||||||
}
|
}
|
||||||
|
|
||||||
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CellBaseContainer onClick={handleOnClick}>
|
<CellBaseContainer onClick={handleOnClick}>
|
||||||
{isCurrentCellInEditMode ? (
|
{isCurrentCellInEditMode ? (
|
||||||
|
@ -73,7 +73,9 @@ export const FilterByAccountOwner: Story = {
|
|||||||
|
|
||||||
await userEvent.click(accountOwnerFilterButton);
|
await userEvent.click(accountOwnerFilterButton);
|
||||||
|
|
||||||
const accountOwnerNameInput = canvas.getByPlaceholderText('Account owner');
|
const accountOwnerNameInput = await canvas.findByPlaceholderText(
|
||||||
|
'Account owner',
|
||||||
|
);
|
||||||
await userEvent.type(accountOwnerNameInput, 'Char', {
|
await userEvent.type(accountOwnerNameInput, 'Char', {
|
||||||
delay: 200,
|
delay: 200,
|
||||||
});
|
});
|
||||||
|
@ -30,13 +30,9 @@ export const InteractWithManyRows: Story = {
|
|||||||
play: async ({ canvasElement }) => {
|
play: async ({ canvasElement }) => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
const firstRowEmailCell = await canvas.findByText(
|
let firstRowEmailCell = await canvas.findByText(mockedPeopleData[0].email);
|
||||||
mockedPeopleData[0].email,
|
|
||||||
);
|
|
||||||
|
|
||||||
const secondRowEmailCell = await canvas.findByText(
|
let secondRowEmailCell = await canvas.findByText(mockedPeopleData[1].email);
|
||||||
mockedPeopleData[1].email,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
canvas.queryByTestId('editable-cell-edit-mode-container'),
|
canvas.queryByTestId('editable-cell-edit-mode-container'),
|
||||||
@ -44,10 +40,18 @@ export const InteractWithManyRows: Story = {
|
|||||||
|
|
||||||
await userEvent.click(firstRowEmailCell);
|
await userEvent.click(firstRowEmailCell);
|
||||||
|
|
||||||
|
await sleep(100);
|
||||||
|
firstRowEmailCell = await canvas.findByText(mockedPeopleData[0].email);
|
||||||
|
await userEvent.click(firstRowEmailCell);
|
||||||
|
await sleep(100);
|
||||||
|
firstRowEmailCell = await canvas.findByText(mockedPeopleData[0].email);
|
||||||
|
await userEvent.click(firstRowEmailCell);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
canvas.queryByTestId('editable-cell-edit-mode-container'),
|
canvas.queryByTestId('editable-cell-edit-mode-container'),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
|
secondRowEmailCell = await canvas.findByText(mockedPeopleData[1].email);
|
||||||
await userEvent.click(secondRowEmailCell);
|
await userEvent.click(secondRowEmailCell);
|
||||||
|
|
||||||
await sleep(25);
|
await sleep(25);
|
||||||
@ -190,11 +194,17 @@ export const EditRelation: Story = {
|
|||||||
play: async ({ canvasElement }) => {
|
play: async ({ canvasElement }) => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
const firstRowCompanyCell = await canvas.findByText(
|
let secondRowCompanyCell = await canvas.findByText(
|
||||||
mockedPeopleData[1].company.name,
|
mockedPeopleData[1].company.name,
|
||||||
);
|
);
|
||||||
|
|
||||||
await userEvent.click(firstRowCompanyCell);
|
await userEvent.click(secondRowCompanyCell);
|
||||||
|
|
||||||
|
secondRowCompanyCell = await canvas.findByText(
|
||||||
|
mockedPeopleData[1].company.name,
|
||||||
|
);
|
||||||
|
|
||||||
|
await userEvent.click(secondRowCompanyCell);
|
||||||
|
|
||||||
const relationInput = await canvas.findByPlaceholderText('Search');
|
const relationInput = await canvas.findByPlaceholderText('Search');
|
||||||
|
|
||||||
@ -227,11 +237,15 @@ export const SelectRelationWithKeys: Story = {
|
|||||||
play: async ({ canvasElement }) => {
|
play: async ({ canvasElement }) => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
const thirdRowCompanyCell = await canvas.findByText(
|
let firstRowCompanyCell = await canvas.findByText(
|
||||||
mockedPeopleData[0].company.name,
|
mockedPeopleData[0].company.name,
|
||||||
);
|
);
|
||||||
|
|
||||||
await userEvent.click(thirdRowCompanyCell);
|
await userEvent.click(firstRowCompanyCell);
|
||||||
|
firstRowCompanyCell = await canvas.findByText(
|
||||||
|
mockedPeopleData[0].company.name,
|
||||||
|
);
|
||||||
|
await userEvent.click(firstRowCompanyCell);
|
||||||
|
|
||||||
const relationInput = await canvas.findByPlaceholderText('Search');
|
const relationInput = await canvas.findByPlaceholderText('Search');
|
||||||
|
|
||||||
|
@ -1,13 +1,16 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { HotkeysProvider } from 'react-hotkeys-hook';
|
||||||
import { MemoryRouter } from 'react-router-dom';
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
import { ApolloProvider } from '@apollo/client';
|
import { ApolloProvider } from '@apollo/client';
|
||||||
import { RecoilRoot } from 'recoil';
|
import { RecoilRoot } from 'recoil';
|
||||||
|
|
||||||
|
import { INITIAL_HOTKEYS_SCOPES } from '@/hotkeys/constants';
|
||||||
import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
|
import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
|
||||||
import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
|
import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
|
||||||
import { DefaultLayout } from '@/ui/layout/DefaultLayout';
|
import { DefaultLayout } from '@/ui/layout/DefaultLayout';
|
||||||
import { TableContext } from '@/ui/tables/states/TableContext';
|
import { TableContext } from '@/ui/tables/states/TableContext';
|
||||||
import { companiesFilters } from '~/pages/companies/companies-filters';
|
import { companiesFilters } from '~/pages/companies/companies-filters';
|
||||||
|
import { ClientConfigProvider } from '~/providers/client-config/ClientConfigProvider';
|
||||||
import { UserProvider } from '~/providers/user/UserProvider';
|
import { UserProvider } from '~/providers/user/UserProvider';
|
||||||
|
|
||||||
import { mockedCompaniesData } from './mock-data/companies';
|
import { mockedCompaniesData } from './mock-data/companies';
|
||||||
@ -24,11 +27,15 @@ export function getRenderWrapperForPage(
|
|||||||
<RecoilRoot>
|
<RecoilRoot>
|
||||||
<ApolloProvider client={mockedClient}>
|
<ApolloProvider client={mockedClient}>
|
||||||
<UserProvider>
|
<UserProvider>
|
||||||
<MemoryRouter initialEntries={[currentPath]}>
|
<ClientConfigProvider>
|
||||||
<FullHeightStorybookLayout>
|
<HotkeysProvider initiallyActiveScopes={INITIAL_HOTKEYS_SCOPES}>
|
||||||
<DefaultLayout>{children}</DefaultLayout>
|
<MemoryRouter initialEntries={[currentPath]}>
|
||||||
</FullHeightStorybookLayout>
|
<FullHeightStorybookLayout>
|
||||||
</MemoryRouter>
|
<DefaultLayout>{children}</DefaultLayout>
|
||||||
|
</FullHeightStorybookLayout>
|
||||||
|
</MemoryRouter>
|
||||||
|
</HotkeysProvider>
|
||||||
|
</ClientConfigProvider>
|
||||||
</UserProvider>
|
</UserProvider>
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
</RecoilRoot>
|
</RecoilRoot>
|
||||||
|
Loading…
Reference in New Issue
Block a user