Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 4x 59x 59x | import { PlusIcon } from "@assets/icons/RebrandedIcons";
import { Button } from "@common/Button";
import { Stack } from "@mui/material";
import { palette } from "@palette";
import FilterPermissionList, { ItemType } from "../FilterPermissionList";
import ControlledSearchBar from "@common/SearchBar_V2/ControlledSearchBar";
import {
composePermission,
useAccessControl,
} from "features/Permissions/AccessControl";
import RESOURCE_BASE, {
CREATE_DENY_MESSAGE,
OPERATIONS,
} from "@constants/permissions";
const PermissionsFilterBar = ({
searchQuery,
handleSearch,
handleAdd,
filters,
setFilter,
}: {
searchQuery: string;
handleSearch: (value: string) => void;
handleAdd: () => void;
filters: ItemType[];
setFilter: (item: ItemType) => void;
}) => {
const isEditAllowed = useAccessControl({
resource: composePermission(
RESOURCE_BASE.MEMBER,
RESOURCE_BASE.ACCESS_POLICIES,
),
operation: OPERATIONS.UPDATE,
withPortal: true,
});
return (
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
padding="16px"
gap="8px"
>
<FilterPermissionList filterData={filters} onHandleSelect={setFilter} />
<Stack
direction="row"
gap="8px"
alignItems="center"
justifyContent="center"
height="32px"
>
<ControlledSearchBar
onChange={handleSearch}
value={searchQuery}
formSx={{ "& > div": { width: "200px" } }}
/>
<Button
background="primary"
onClick={handleAdd}
size="small"
disabled={!isEditAllowed}
tooltipProps={{
show: !isEditAllowed,
message: CREATE_DENY_MESSAGE,
}}
>
<PlusIcon width={18} height={18} stroke={palette.neutral.white} />{" "}
Permission
</Button>
</Stack>
</Stack>
);
};
export default PermissionsFilterBar;
|