fix(Editor): add empty role picker help page and link

This commit is contained in:
41666 2021-07-09 04:30:34 -05:00
parent 30b9ea3a59
commit d8cdc1c62a
5 changed files with 152 additions and 25 deletions

View file

@ -1,6 +1,7 @@
import { Role } from '@roleypoly/design-system/atoms/role';
import { Space } from '@roleypoly/design-system/atoms/space';
import { TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
import { Link } from '@roleypoly/design-system/atoms/typography';
import { Role as RoleType } from '@roleypoly/types';
import Fuse from 'fuse.js';
import * as React from 'react';
@ -32,21 +33,36 @@ export const RoleSearch = (props: Props) => {
<div>
<TextInputWithIcon
icon={<GoSearch />}
placeholder={props.placeholder || 'Search or drag a role...'}
placeholder={props.placeholder || 'Search for a role...'}
value={props.searchTerm}
onChange={(x) => props.onSearchUpdate(x.target.value)}
/>
<Space />
{results.map((resultRole, idx) => (
<RoleInliner key={idx}>
<Role
selected={false}
role={resultRole.item}
onClick={handleClick(resultRole.item)}
key={`${idx}role`}
/>
</RoleInliner>
))}
{props.roles.length > 0 ? (
results.length > 0 ? (
results.map((resultRole, idx) => (
<RoleInliner key={idx}>
<Role
selected={false}
role={resultRole.item}
onClick={handleClick(resultRole.item)}
key={`${idx}role`}
/>
</RoleInliner>
))
) : (
<i>
No roles could be found. Try a different search term.
<br />
</i>
)
) : (
<i>
Roleypoly can't see any more roles.
<br />
<Link href="/help/why-no-roles">Learn why</Link>
</i>
)}
</div>
);
};