yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-17 19:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15260 from strapi/fix/RelationInput-read-only

Browse Source
This commit is contained in:
Josh 2023-01-04 09:28:33 +00:00 committed by GitHub
commit 99bd18d096
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
View File

@ -38,12 +38,13 @@ export const LinkEllipsis = styled(Link)`
export const DisconnectButton = styled.button` export const DisconnectButton = styled.button`
svg path { svg path {
fill: ${({ theme }) => theme.colors.neutral500}; fill: ${({ theme, disabled }) =>
disabled ? theme.colors.neutral600 : theme.colors.neutral500};
} }
&:hover svg path, &:hover svg path,
&:focus svg path { &:focus svg path {
fill: ${({ theme }) => theme.colors.neutral600}; fill: ${({ theme, disabled }) => !disabled && theme.colors.neutral600};
} }
`; `;
@ -103,8 +104,7 @@ const RelationInput = ({
); );
const shouldDisplayLoadMoreButton = const shouldDisplayLoadMoreButton =
(!!labelLoadMore && !disabled && paginatedRelations.hasNextPage) || (!!labelLoadMore && paginatedRelations.hasNextPage) || paginatedRelations.isLoading;
paginatedRelations.isLoading;
const options = useMemo( const options = useMemo(
() => () =>
@ -503,9 +503,7 @@ const ListItem = ({ data, index, style }) => {
<Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}> <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
<Tooltip description={mainField ?? `${id}`}> <Tooltip description={mainField ?? `${id}`}>
{href ? ( {href ? (
<LinkEllipsis to={href} disabled={disabled}> <LinkEllipsis to={href}>{mainField ?? id}</LinkEllipsis>
{mainField ?? id}
</LinkEllipsis>
) : ( ) : (
<Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis> <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
{mainField ?? id} {mainField ?? id}

3
packages/core/admin/admin/src/content-manager/components/RelationInput/components/RelationItem.js
View File

@ -83,8 +83,8 @@ export const RelationItem = ({
paddingRight={4} paddingRight={4}
hasRadius hasRadius
borderSize={1} borderSize={1}
background={disabled ? 'neutral150' : 'neutral0'}
borderColor="neutral200" borderColor="neutral200"
background={disabled ? 'neutral150' : 'neutral0'}
justifyContent="space-between" justifyContent="space-between"
ref={canDrag ? composedRefs : undefined} ref={canDrag ? composedRefs : undefined}
data-handler-id={handlerId} data-handler-id={handlerId}
@ -99,6 +99,7 @@ export const RelationItem = ({
aria-label={iconButtonAriaLabel} aria-label={iconButtonAriaLabel}
noBorder noBorder
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
disabled={disabled}
> >
<Drag /> <Drag />
</IconButton> </IconButton>

23
packages/core/admin/admin/src/content-manager/components/RelationInput/tests/RelationInput.test.js
View File

@ -136,12 +136,12 @@ describe('Content-Manager || RelationInput', () => {
}); });
test('should call onRelationLoadMore', () => { test('should call onRelationLoadMore', () => {
const spy = jest.fn(); const onRelationLoadMoreSpy = jest.fn();
setup({ onRelationLoadMore: spy }); setup({ onRelationLoadMore: onRelationLoadMoreSpy });
fireEvent.click(screen.getByText('Load more')); fireEvent.click(screen.getByText('Load more'));
expect(spy).toHaveBeenCalled(); expect(onRelationLoadMoreSpy).toHaveBeenCalled();
}); });
test('should call onSearch', () => { test('should call onSearch', () => {
@ -306,7 +306,7 @@ describe('Content-Manager || RelationInput', () => {
}, },
}); });
expect(screen.getByRole('button', { name: /load more/i })).toHaveAttribute( expect(screen.getByRole('button', { name: 'Load more' })).toHaveAttribute(
'aria-disabled', 'aria-disabled',
'true' 'true'
); );
@ -318,12 +318,21 @@ describe('Content-Manager || RelationInput', () => {
expect(screen.getByText('This is an error')).toBeInTheDocument(); expect(screen.getByText('This is an error')).toBeInTheDocument();
}); });
test('should apply disabled state', () => { test('should display disabled state with only read permission', () => {
const { queryByText, getByTestId, container } = setup({ disabled: true }); const onRelationLoadMoreSpy = jest.fn();
const { getAllByRole, getByRole, getByTestId, getByText, container } = setup({
disabled: true,
onRelationLoadMore: onRelationLoadMoreSpy,
});
fireEvent.click(getByText('Load more'));
expect(onRelationLoadMoreSpy).toHaveBeenCalledTimes(1);
expect(queryByText('Load more')).not.toBeInTheDocument();
expect(container.querySelector('input')).toBeDisabled(); expect(container.querySelector('input')).toBeDisabled();
expect(getByTestId('remove-relation-1')).toBeDisabled(); expect(getByTestId('remove-relation-1')).toBeDisabled();
const [dragButton] = getAllByRole('button', { name: 'Drag' });
expect(dragButton).toHaveAttribute('aria-disabled', 'true');
expect(getByRole('link', { name: 'Relation 1' })).toBeInTheDocument();
}); });
}); });
}); });