Move frontend to Vite 5 (#2775)
* merge squashed - A couple of CJS modules into ESM (config mostly) - Vite complains about node.js modules: fixed `useIsMatchingLocation.ts` > or use rollupOptions in vite.config.ts > ref: https://github.com/saleor/saleor-dashboard/blob/f0e4f59d97e2a8c3e22bd2af7b7ce68a361fc9a4/vite.config.js#L6 - Adjust Storybook to work with Vite: use @storybook/test - Use SWC for jest tranformations - Remove unused deps: - ts-jest: replaced with @swc/jest, typecheck by `tsc` - babel plugins - @svgr/plugin-jsx: not used - @testing-library/user-event: handled by @storybook/test - @typescript-eslint/utils: was not plugged in - tsup, esbuild-plugin-svgr: will look into that later - Install Vite required deps, and remove craco/webpack deps - Adjust SVG to work with Vite as components - Fixed `Step.tsx`: I dont know if one should be swaped for the other, but there should be no slash - Initial formating and linting: - removed empty object params - sorting imports, etc.. * prettier: fix pattern * coverage: sb coverage report isnt working * Add missing pieces * `yarn lint --fix` * fix: scripts permissions * tsc: cut errors in half * fix: remove `react-app-env.d.ts` * tsc: all fixed, except `react-data-grid` types issue * eslint: ignore env-config.js * eslint: Align ci with config * msw: bypass testing warnings ref: https://stackoverflow.com/questions/68024935/msw-logging-warnings-for-unhandled-supertest-requests * rebase: and fix things * Adjust to current `graphql-codegen` no ESM support * Remove vite plugin and use built-in methods * rebase: and some fixes * quick fix + `corepack use yarn@1.22.19` * Fix build errors --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Aasim Attia
@@ -176,124 +176,128 @@ export const CommandMenu = () => {
|
||||
.concat(activities.map((activity) => activity.id));
|
||||
|
||||
return (
|
||||
isCommandMenuOpened && (
|
||||
<StyledDialog>
|
||||
<StyledInput
|
||||
value={search}
|
||||
placeholder="Search"
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
<StyledList>
|
||||
<ScrollWrapper>
|
||||
<StyledInnerList>
|
||||
<SelectableList
|
||||
selectableListId="command-menu-list"
|
||||
selectableItemIds={[selectableItemIds]}
|
||||
hotkeyScope={AppHotkeyScope.CommandMenu}
|
||||
onEnter={(_itemId) => {}}
|
||||
>
|
||||
{!matchingCreateCommand.length &&
|
||||
!matchingNavigateCommand.length &&
|
||||
!people.length &&
|
||||
!companies.length &&
|
||||
!activities.length && (
|
||||
<StyledEmpty>No results found</StyledEmpty>
|
||||
)}
|
||||
<CommandGroup heading="Create">
|
||||
{matchingCreateCommand.map((cmd) => (
|
||||
<SelectableItem itemId={cmd.id} key={cmd.id}>
|
||||
<CommandMenuItem
|
||||
id={cmd.id}
|
||||
to={cmd.to}
|
||||
key={cmd.id}
|
||||
Icon={cmd.Icon}
|
||||
label={cmd.label}
|
||||
onClick={cmd.onCommandClick}
|
||||
firstHotKey={cmd.firstHotKey}
|
||||
secondHotKey={cmd.secondHotKey}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Navigate">
|
||||
{matchingNavigateCommand.map((cmd) => (
|
||||
<SelectableItem itemId={cmd.id} key={cmd.id}>
|
||||
<CommandMenuItem
|
||||
id={cmd.id}
|
||||
to={cmd.to}
|
||||
key={cmd.id}
|
||||
label={cmd.label}
|
||||
Icon={cmd.Icon}
|
||||
onClick={cmd.onCommandClick}
|
||||
firstHotKey={cmd.firstHotKey}
|
||||
secondHotKey={cmd.secondHotKey}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="People">
|
||||
{people.map((person) => (
|
||||
<SelectableItem itemId={person.id} key={person.id}>
|
||||
<CommandMenuItem
|
||||
id={person.id}
|
||||
key={person.id}
|
||||
to={`object/person/${person.id}`}
|
||||
label={
|
||||
person.name.firstName + ' ' + person.name.lastName
|
||||
}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
type="rounded"
|
||||
avatarUrl={null}
|
||||
colorId={person.id}
|
||||
placeholder={
|
||||
person.name.firstName + ' ' + person.name.lastName
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Companies">
|
||||
{companies.map((company) => (
|
||||
<SelectableItem itemId={company.id} key={company.id}>
|
||||
<CommandMenuItem
|
||||
id={company.id}
|
||||
key={company.id}
|
||||
label={company.name}
|
||||
to={`object/company/${company.id}`}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
colorId={company.id}
|
||||
placeholder={company.name}
|
||||
avatarUrl={getLogoUrlFromDomainName(
|
||||
company.domainName,
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Notes">
|
||||
{activities.map((activity) => (
|
||||
<SelectableItem itemId={activity.id} key={activity.id}>
|
||||
<CommandMenuItem
|
||||
id={activity.id}
|
||||
Icon={IconNotes}
|
||||
key={activity.id}
|
||||
label={activity.title ?? ''}
|
||||
onClick={() => openActivityRightDrawer(activity.id)}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</SelectableList>
|
||||
</StyledInnerList>
|
||||
</ScrollWrapper>
|
||||
</StyledList>
|
||||
</StyledDialog>
|
||||
)
|
||||
<>
|
||||
{isCommandMenuOpened && (
|
||||
<StyledDialog>
|
||||
<StyledInput
|
||||
value={search}
|
||||
placeholder="Search"
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
<StyledList>
|
||||
<ScrollWrapper>
|
||||
<StyledInnerList>
|
||||
<SelectableList
|
||||
selectableListId="command-menu-list"
|
||||
selectableItemIds={[selectableItemIds]}
|
||||
hotkeyScope={AppHotkeyScope.CommandMenu}
|
||||
onEnter={(_itemId) => {}}
|
||||
>
|
||||
{!matchingCreateCommand.length &&
|
||||
!matchingNavigateCommand.length &&
|
||||
!people.length &&
|
||||
!companies.length &&
|
||||
!activities.length && (
|
||||
<StyledEmpty>No results found</StyledEmpty>
|
||||
)}
|
||||
<CommandGroup heading="Create">
|
||||
{matchingCreateCommand.map((cmd) => (
|
||||
<SelectableItem itemId={cmd.id} key={cmd.id}>
|
||||
<CommandMenuItem
|
||||
id={cmd.id}
|
||||
to={cmd.to}
|
||||
key={cmd.id}
|
||||
Icon={cmd.Icon}
|
||||
label={cmd.label}
|
||||
onClick={cmd.onCommandClick}
|
||||
firstHotKey={cmd.firstHotKey}
|
||||
secondHotKey={cmd.secondHotKey}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Navigate">
|
||||
{matchingNavigateCommand.map((cmd) => (
|
||||
<SelectableItem itemId={cmd.id} key={cmd.id}>
|
||||
<CommandMenuItem
|
||||
id={cmd.id}
|
||||
to={cmd.to}
|
||||
key={cmd.id}
|
||||
label={cmd.label}
|
||||
Icon={cmd.Icon}
|
||||
onClick={cmd.onCommandClick}
|
||||
firstHotKey={cmd.firstHotKey}
|
||||
secondHotKey={cmd.secondHotKey}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="People">
|
||||
{people.map((person) => (
|
||||
<SelectableItem itemId={person.id} key={person.id}>
|
||||
<CommandMenuItem
|
||||
id={person.id}
|
||||
key={person.id}
|
||||
to={`object/person/${person.id}`}
|
||||
label={
|
||||
person.name.firstName + ' ' + person.name.lastName
|
||||
}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
type="rounded"
|
||||
avatarUrl={null}
|
||||
colorId={person.id}
|
||||
placeholder={
|
||||
person.name.firstName +
|
||||
' ' +
|
||||
person.name.lastName
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Companies">
|
||||
{companies.map((company) => (
|
||||
<SelectableItem itemId={company.id} key={company.id}>
|
||||
<CommandMenuItem
|
||||
id={company.id}
|
||||
key={company.id}
|
||||
label={company.name}
|
||||
to={`object/company/${company.id}`}
|
||||
Icon={() => (
|
||||
<Avatar
|
||||
colorId={company.id}
|
||||
placeholder={company.name}
|
||||
avatarUrl={getLogoUrlFromDomainName(
|
||||
company.domainName,
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Notes">
|
||||
{activities.map((activity) => (
|
||||
<SelectableItem itemId={activity.id} key={activity.id}>
|
||||
<CommandMenuItem
|
||||
id={activity.id}
|
||||
Icon={IconNotes}
|
||||
key={activity.id}
|
||||
label={activity.title ?? ''}
|
||||
onClick={() => openActivityRightDrawer(activity.id)}
|
||||
/>
|
||||
</SelectableItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</SelectableList>
|
||||
</StyledInnerList>
|
||||
</ScrollWrapper>
|
||||
</StyledList>
|
||||
</StyledDialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user