Raphaël BosiandGitHub
cbc0d06a2f
This PR is the first part of a refactoring aiming to deprecate the hotkey scopes api in favor of the new focus stack api which is more robust. The refactored components in this PR are the dropdowns and the side panel/command menu. - Replaced `useScopedHotkeys` by `useHotkeysOnFocusedElement` for all dropdown components, selectable lists and the command menu - Introduced `focusId` for all dropdowns and created a common hotkey scope `DropdownHotkeyScope` for backward compatibility - Replaced `setHotkeyScopeAndMemorizePreviousScope` occurrences with `usePushFocusItemToFocusStack` and `goBackToPreviousHotkeyScope` with `removeFocusItemFromFocusStack` Note: Test that the shorcuts and arrow key navigation still work properly when interacting with dropdowns and the command menu. Bugs that I have spotted during the QA but which are already present on main: - Icon picker select with arrow keys doesn’t work inside dropdowns - Some dropdowns are not selectable with arrow keys (no selectable list) - Dropdowns in dropdowns don’t reset the hotkey scope correctly when closing - The table click outside is not triggered after closing a table cell and clicking outside of the table
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
|
|
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
|
|
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
|
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
|
|
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
|
import styled from '@emotion/styled';
|
|
import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui/display';
|
|
import { LightIconButton } from 'twenty-ui/input';
|
|
import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation';
|
|
|
|
type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
|
|
databaseLogoUrl: string;
|
|
connectionId: string;
|
|
connectionLabel: string;
|
|
onRemove: () => void;
|
|
};
|
|
|
|
const StyledDatabaseLogoContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
height: ${({ theme }) => theme.spacing(4)};
|
|
justify-content: center;
|
|
width: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledDatabaseLogo = styled.img`
|
|
height: 100%;
|
|
`;
|
|
|
|
export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
|
|
databaseLogoUrl,
|
|
connectionId,
|
|
connectionLabel,
|
|
onRemove,
|
|
}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
|
|
const dropdownId =
|
|
'settings-integration-database-connection-summary-card-dropdown';
|
|
|
|
return (
|
|
<SettingsSummaryCard
|
|
title={
|
|
<>
|
|
<StyledDatabaseLogoContainer>
|
|
<StyledDatabaseLogo alt="" src={databaseLogoUrl} />
|
|
</StyledDatabaseLogoContainer>
|
|
{connectionLabel}
|
|
</>
|
|
}
|
|
rightComponent={
|
|
<>
|
|
<SettingsIntegrationDatabaseConnectionSyncStatus
|
|
connectionId={connectionId}
|
|
shouldFetchPendingSchemaUpdates
|
|
/>
|
|
<Dropdown
|
|
dropdownId={dropdownId}
|
|
clickableComponent={
|
|
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
|
|
}
|
|
dropdownComponents={
|
|
<DropdownContent>
|
|
<DropdownMenuItemsContainer>
|
|
<MenuItem
|
|
LeftIcon={IconTrash}
|
|
text="Remove"
|
|
onClick={onRemove}
|
|
/>
|
|
<UndecoratedLink to="./edit">
|
|
<MenuItem LeftIcon={IconPencil} text="Edit" />
|
|
</UndecoratedLink>
|
|
</DropdownMenuItemsContainer>
|
|
</DropdownContent>
|
|
}
|
|
/>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
};
|