admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix front end (#1678)

Browse Source 
* Fix front

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Fix according to PR

* Fix tests

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-20 20:46:40 +01:00
committed by GitHub
parent a20ca95f32
commit 78b666f457
6 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/.storybook/test-runner-jest.js
View File

@ -9,5 +9,5 @@ module.exports = {
/** Add your own overrides below /** Add your own overrides below
* @see https://jestjs.io/docs/configuration * @see https://jestjs.io/docs/configuration
*/ */
testTimeout: process.env.STORYBOOK_STORIES_FOLDER === 'pages' ? 30000 : 15000, testTimeout: process.env.STORYBOOK_STORIES_FOLDER === 'pages' ? 60000 : 15000,
}; };

1
front/src/modules/ui/dropdown/hooks/useDropdownButton.ts
View File

@ -25,6 +25,7 @@ export const useDropdownButton = ({ dropdownId }: { dropdownId: string }) => {
); );
const closeDropdownButton = () => { const closeDropdownButton = () => {
console.log('closeDropdownButton', dropdownId);
goBackToPreviousHotkeyScope(); goBackToPreviousHotkeyScope();
setIsDropdownButtonOpen(false); setIsDropdownButtonOpen(false);
}; };

3
front/src/modules/ui/table/components/ColumnHead.tsx
View File

@ -4,7 +4,6 @@ import styled from '@emotion/styled';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton'; import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
import { ColumnDefinition } from '../types/ColumnDefinition'; import { ColumnDefinition } from '../types/ColumnDefinition';
import { EntityTableHeaderOptions } from './EntityTableHeaderOptions'; import { EntityTableHeaderOptions } from './EntityTableHeaderOptions';
@ -49,7 +48,7 @@ export const ColumnHead = ({
const theme = useTheme(); const theme = useTheme();
const { openDropdownButton } = useDropdownButton({ const { openDropdownButton } = useDropdownButton({
dropdownId: ColumnHeadDropdownId, dropdownId: column.key + '-header',
}); });
return ( return (

30
front/src/modules/ui/table/components/EntityTableHeader.tsx
View File

@ -164,18 +164,17 @@ export const EntityTableHeader = () => {
> >
<SelectAllCheckbox /> <SelectAllCheckbox />
</th> </th>
<RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
{visibleTableColumns.map((column, index) => ( {visibleTableColumns.map((column, index) => (
<StyledColumnHeaderCell <StyledColumnHeaderCell
key={column.key} key={column.key}
isResizing={resizedFieldKey === column.key} isResizing={resizedFieldKey === column.key}
columnWidth={Math.max( columnWidth={Math.max(
tableColumnsByKey[column.key].size + tableColumnsByKey[column.key].size +
(resizedFieldKey === column.key ? resizeFieldOffset : 0), (resizedFieldKey === column.key ? resizeFieldOffset : 0),
COLUMN_MIN_WIDTH, COLUMN_MIN_WIDTH,
)} )}
> >
<RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
<ColumnHead <ColumnHead
column={column} column={column}
isFirstColumn={index === 0} isFirstColumn={index === 0}
@ -189,9 +188,10 @@ export const EntityTableHeader = () => {
setResizedFieldKey(column.key); setResizedFieldKey(column.key);
}} }}
/> />
</RecoilScope> </StyledColumnHeaderCell>
</StyledColumnHeaderCell> ))}
))} </RecoilScope>
<th> <th>
{hiddenTableColumns.length > 0 && ( {hiddenTableColumns.length > 0 && (
<StyledAddIconButtonWrapper> <StyledAddIconButtonWrapper>

6
front/src/modules/ui/table/components/EntityTableHeaderOptions.tsx
View File

@ -8,7 +8,6 @@ import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon'; import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
import { MenuItem } from '@/ui/menu-item/components/MenuItem'; import { MenuItem } from '@/ui/menu-item/components/MenuItem';
import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
import { useTableColumns } from '../hooks/useTableColumns'; import { useTableColumns } from '../hooks/useTableColumns';
import { ColumnDefinition } from '../types/ColumnDefinition'; import { ColumnDefinition } from '../types/ColumnDefinition';
@ -35,7 +34,7 @@ export const EntityTableHeaderOptions = ({
} = useTableColumns(); } = useTableColumns();
const { closeDropdownButton } = useDropdownButton({ const { closeDropdownButton } = useDropdownButton({
dropdownId: ColumnHeadDropdownId, dropdownId: column.key + '-header',
}); });
const handleColumnMoveLeft = () => { const handleColumnMoveLeft = () => {
@ -61,7 +60,7 @@ export const EntityTableHeaderOptions = ({
return ( return (
<StyledDropdownContainer> <StyledDropdownContainer>
<DropdownButton <DropdownButton
dropdownId={ColumnHeadDropdownId} dropdownId={column.key + '-header'}
dropdownComponents={ dropdownComponents={
<StyledDropdownMenu> <StyledDropdownMenu>
<StyledDropdownMenuItemsContainer> <StyledDropdownMenuItemsContainer>
@ -83,6 +82,7 @@ export const EntityTableHeaderOptions = ({
</StyledDropdownMenuItemsContainer> </StyledDropdownMenuItemsContainer>
</StyledDropdownMenu> </StyledDropdownMenu>
} }
dropdownHotkeyScope={{ scope: column.key + '-header' }}
/> />
</StyledDropdownContainer> </StyledDropdownContainer>
); );

3
front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx
View File

@ -34,6 +34,9 @@ export default meta;
type Story = StoryObj<typeof TableOptionsDropdown>; type Story = StoryObj<typeof TableOptionsDropdown>;
export const Default: Story = { export const Default: Story = {
args: {
customHotkeyScope: { scope: 'options' },
},
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);