Update chosen pills
This commit is contained in:
Krzysztof Wolski
parent
50782494e1
commit
a44e96a278
4 changed files with 391 additions and 11 deletions
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { storiesOf } from "@storybook/react";
|
||||||
|
import React from "react";
|
||||||
|
import Decorator from "@saleor/storybook/Decorator";
|
||||||
|
import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups";
|
||||||
|
import { AccountErrorCode } from "@saleor/types/globalTypes";
|
||||||
|
import { StaffErrorFragment } from "@saleor/staff/types/StaffErrorFragment";
|
||||||
|
import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField";
|
||||||
|
import AccountPermissionGroups, { AccountPermissionGroupsProps } from ".";
|
||||||
|
|
||||||
|
const availablePermissionGroups: SearchPermissionGroups_search_edges_node[] = [
|
||||||
|
{
|
||||||
|
__typename: "Group",
|
||||||
|
id: "R3JvdXA6MQ==",
|
||||||
|
name: "Unmanagable by user",
|
||||||
|
userCanManage: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
__typename: "Group",
|
||||||
|
id: "R3JvdXA6Mg==",
|
||||||
|
name: "Default group",
|
||||||
|
userCanManage: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
__typename: "Group",
|
||||||
|
id: "R3JvdXA6Mz==",
|
||||||
|
name: "Translators",
|
||||||
|
userCanManage: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
__typename: "Group",
|
||||||
|
id: "R3JvdXA6My==",
|
||||||
|
name: "CMS",
|
||||||
|
userCanManage: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const displayValues: MultiAutocompleteChoiceType[] = [
|
||||||
|
{ disabled: true, label: "Unmanagable by user", value: "R3JvdXA6MQ==" },
|
||||||
|
{ disabled: false, label: "Default group", value: "R3JvdXA6Mg==" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const formData = {
|
||||||
|
permissionGroups: ["R3JvdXA6MQ==", "R3JvdXA6Mg=="]
|
||||||
|
};
|
||||||
|
|
||||||
|
const errors: StaffErrorFragment[] = [
|
||||||
|
{
|
||||||
|
__typename: "StaffError",
|
||||||
|
code: AccountErrorCode.OUT_OF_SCOPE_GROUP,
|
||||||
|
field: "addGroups"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const props: AccountPermissionGroupsProps = {
|
||||||
|
availablePermissionGroups,
|
||||||
|
disabled: false,
|
||||||
|
displayValues,
|
||||||
|
errors: [],
|
||||||
|
formData,
|
||||||
|
hasMore: false,
|
||||||
|
initialSearch: "",
|
||||||
|
loading: false,
|
||||||
|
onChange: () => undefined,
|
||||||
|
onFetchMore: () => undefined,
|
||||||
|
onSearchChange: () => undefined
|
||||||
|
};
|
||||||
|
|
||||||
|
storiesOf("Generics / Account Permission Groups Widget", module)
|
||||||
|
.addDecorator(Decorator)
|
||||||
|
.add("default", () => <AccountPermissionGroups {...props} />)
|
||||||
|
.add("error", () => <AccountPermissionGroups {...props} errors={errors} />);
|
||||||
|
|
@ -12,7 +12,9 @@ import MultiAutocompleteSelectField, {
|
||||||
MultiAutocompleteChoiceType
|
MultiAutocompleteChoiceType
|
||||||
} from "../MultiAutocompleteSelectField";
|
} from "../MultiAutocompleteSelectField";
|
||||||
|
|
||||||
interface AccountPermissionGroupsProps extends FetchMoreProps, SearchPageProps {
|
export interface AccountPermissionGroupsProps
|
||||||
|
extends FetchMoreProps,
|
||||||
|
SearchPageProps {
|
||||||
formData: {
|
formData: {
|
||||||
permissionGroups: string[];
|
permissionGroups: string[];
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -53,10 +53,10 @@ const useStyles = makeStyles(
|
||||||
},
|
},
|
||||||
disabledChipInner: {
|
disabledChipInner: {
|
||||||
"& svg": {
|
"& svg": {
|
||||||
color: theme.palette.secondary.contrastText
|
color: theme.palette.grey[200]
|
||||||
},
|
},
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
background: fade(theme.palette.secondary.main, 0.8),
|
background: fade(theme.palette.grey[400], 0.8),
|
||||||
borderRadius: 18,
|
borderRadius: 18,
|
||||||
color: theme.palette.primary.contrastText,
|
color: theme.palette.primary.contrastText,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -194,14 +194,14 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
|
||||||
<Typography className={classes.chipLabel}>
|
<Typography className={classes.chipLabel}>
|
||||||
{value.label}
|
{value.label}
|
||||||
</Typography>
|
</Typography>
|
||||||
{!value.disabled && (
|
|
||||||
<IconButton
|
<IconButton
|
||||||
className={classes.chipClose}
|
className={classes.chipClose}
|
||||||
|
disabled={value.disabled}
|
||||||
onClick={() => handleSelect(value.value)}
|
onClick={() => handleSelect(value.value)}
|
||||||
>
|
>
|
||||||
<CloseIcon fontSize="small" />
|
<CloseIcon fontSize="small" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,291 @@ exports[`Storyshots Discounts / Select countries default 1`] = `
|
||||||
/>
|
/>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = `
|
||||||
|
<div
|
||||||
|
style="padding:24px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-container-id"
|
||||||
|
data-tc="permissionGroups"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
|
||||||
|
data-shrink="false"
|
||||||
|
>
|
||||||
|
Permission groups
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-expanded="false"
|
||||||
|
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
|
||||||
|
role="combobox"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
autocomplete="off"
|
||||||
|
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root-id"
|
||||||
|
focusable="false"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
style="fill-rule:evenodd"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
|
||||||
|
style="padding-left:8px"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legend-id"
|
||||||
|
style="width:0.01px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chipContainer-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chip-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-disabledChipInner-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||||
|
>
|
||||||
|
Unmanagable by user
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label-id"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||||
|
focusable="false"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chip-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chipInner-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||||
|
>
|
||||||
|
Default group
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label-id"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||||
|
focusable="false"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = `
|
||||||
|
<div
|
||||||
|
style="padding:24px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-container-id"
|
||||||
|
data-tc="permissionGroups"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
|
||||||
|
data-shrink="false"
|
||||||
|
>
|
||||||
|
Permission groups
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-autocomplete="list"
|
||||||
|
aria-expanded="false"
|
||||||
|
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
|
||||||
|
role="combobox"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
autocomplete="off"
|
||||||
|
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root-id"
|
||||||
|
focusable="false"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
style="fill-rule:evenodd"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
|
||||||
|
style="padding-left:8px"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legend-id"
|
||||||
|
style="width:0.01px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chipContainer-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chip-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-disabledChipInner-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||||
|
>
|
||||||
|
Unmanagable by user
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label-id"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||||
|
focusable="false"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chip-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MultiAutocompleteSelectField-chipInner-id"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||||
|
>
|
||||||
|
Default group
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label-id"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||||
|
focusable="false"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
|
||||||
|
>
|
||||||
|
Group is out of your permission scope
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`Storyshots Generics / ActionDialog default 1`] = `
|
exports[`Storyshots Generics / ActionDialog default 1`] = `
|
||||||
<div
|
<div
|
||||||
style="padding:24px"
|
style="padding:24px"
|
||||||
|
|
@ -137183,6 +137468,28 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
|
||||||
>
|
>
|
||||||
Full Access
|
Full Access
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label-id"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||||
|
focusable="false"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue