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(); const { mapCodesToNames } = useGetAvailableAppPermissions();
return ( return (
<Box> <Box __maxHeight={"50vh"} overflow={"auto"}>
<Text marginBottom={2} as={"p"}> <Text marginBottom={2} as={"p"}>
{intl.formatMessage(messages.summaryText)} {intl.formatMessage(messages.summaryText)}
</Text> </Text>

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

@ -15,6 +15,12 @@ interface AppPermissionsDialogPermissionPickerProps {
onClose(): void; 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 = ({ export const AppPermissionsDialogPermissionPicker = ({
onSubmit, onSubmit,
onChange, onChange,
@ -39,35 +45,37 @@ export const AppPermissionsDialogPermissionPicker = ({
onChange(values); onChange(values);
}} }}
> >
<List> <Box overflow={"scroll"} __maxHeight={LIST_MAX_HEIGHT}>
{allPermissions.map(perm => { <List>
const isAssigned = Boolean(selected.find(p => p === perm.code)); {allPermissions.map(perm => {
const isAssigned = Boolean(selected.find(p => p === perm.code));
return ( return (
<List.Item <List.Item
key={perm.code} key={perm.code}
paddingY={1} paddingY={1}
paddingX={2} paddingX={2}
display={"flex"} display={"flex"}
alignItems={"center"} alignItems={"center"}
as={"label"} as={"label"}
backgroundColor={ backgroundColor={
isAssigned ? "decorativeSurfaceSubdued3" : undefined isAssigned ? "decorativeSurfaceSubdued3" : undefined
} }
> >
<Checkbox <Checkbox
name={perm.code} name={perm.code}
defaultChecked={isAssigned} defaultChecked={isAssigned}
marginRight={4} marginRight={4}
/> />
<Text variant={isAssigned ? "bodyStrong" : "body"}> <Text variant={isAssigned ? "bodyStrong" : "body"}>
{perm.name} {perm.name}
</Text> </Text>
</List.Item> </List.Item>
); );
})} })}
</List> </List>
<Box display={"flex"} justifyContent={"flex-end"} gap={2}> </Box>
<Box display={"flex"} justifyContent={"flex-end"} gap={2} marginTop={2}>
<Button onClick={onClose} type={"button"} variant={"tertiary"}> <Button onClick={onClose} type={"button"} variant={"tertiary"}>
{intl.formatMessage(messages.closeButton)} {intl.formatMessage(messages.closeButton)}
</Button> </Button>