djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

App Permissions Modal - QA fixes (#3853)

Browse source 
* Fix App Permissions Modal scrolling

* change changeset to be minor

* fix height of permissions modal - confimration step
This commit is contained in:
Lukasz Ostrowski 2023-07-05 08:06:36 +02:00 committed by GitHub
parent 07fa3bc0cc
commit b0214c6454
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/yellow-impalas-lie.md Normal file
View file

@ -0,0 +1,5 @@
---
"saleor-dashboard": minor
---
Apps: Fixed problem with Permissions Modal that was clipped on smaller screens. Now long permissions list is scrollable.

2
src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx
View file

@ -27,7 +27,7 @@ export const AppPermissionsDialogConfirmation = ({
const { mapCodesToNames } = useGetAvailableAppPermissions();
return (
<Box>
<Box __maxHeight={"50vh"} overflow={"auto"}>
<Text marginBottom={2} as={"p"}>
{intl.formatMessage(messages.summaryText)}
</Text>

64
src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx
View file

@ -15,6 +15,12 @@ interface AppPermissionsDialogPermissionPickerProps {
onClose(): void;
}
/**
* Approximate height that clips list and makes it scrollable.
* This makes it avaialble on small devices, including horizontal ipad air
*/
const LIST_MAX_HEIGHT = "50vh";
export const AppPermissionsDialogPermissionPicker = ({
onSubmit,
onChange,
@ -39,35 +45,37 @@ export const AppPermissionsDialogPermissionPicker = ({
onChange(values);
}}
>
<List>
{allPermissions.map(perm => {
const isAssigned = Boolean(selected.find(p => p === perm.code));
<Box overflow={"scroll"} __maxHeight={LIST_MAX_HEIGHT}>
<List>
{allPermissions.map(perm => {
const isAssigned = Boolean(selected.find(p => p === perm.code));
return (
<List.Item
key={perm.code}
paddingY={1}
paddingX={2}
display={"flex"}
alignItems={"center"}
as={"label"}
backgroundColor={
isAssigned ? "decorativeSurfaceSubdued3" : undefined
}
>
<Checkbox
name={perm.code}
defaultChecked={isAssigned}
marginRight={4}
/>
<Text variant={isAssigned ? "bodyStrong" : "body"}>
{perm.name}
</Text>
</List.Item>
);
})}
</List>
<Box display={"flex"} justifyContent={"flex-end"} gap={2}>
return (
<List.Item
key={perm.code}
paddingY={1}
paddingX={2}
display={"flex"}
alignItems={"center"}
as={"label"}
backgroundColor={
isAssigned ? "decorativeSurfaceSubdued3" : undefined
}
>
<Checkbox
name={perm.code}
defaultChecked={isAssigned}
marginRight={4}
/>
<Text variant={isAssigned ? "bodyStrong" : "body"}>
{perm.name}
</Text>
</List.Item>
);
})}
</List>
</Box>
<Box display={"flex"} justifyContent={"flex-end"} gap={2} marginTop={2}>
<Button onClick={onClose} type={"button"} variant={"tertiary"}>
{intl.formatMessage(messages.closeButton)}
</Button>