1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-06 00:07:44 +01:00
unleash.unleash/frontend/src/component/segments/SegmentEmpty.tsx
Nuno Góis f8a9d7f355
fix: take into account project segments permission in form (#5352)
https://linear.app/unleash/issue/SR-184/ticket-1106-users-with-createedit-project-segment-dont-see-all-the

https://github.com/Unleash/unleash/pull/5304 did not take into account
permissions further into the Segment form.

This PR fixes the remaining permission checks to take into consideration
the project-level permission: `UPDATE_PROJECT_SEGMENT`.
2023-11-16 11:54:56 +00:00

67 lines
2.1 KiB
TypeScript

import { styled, Typography } from '@mui/material';
import { Link } from 'react-router-dom';
import {
CREATE_SEGMENT,
UPDATE_PROJECT_SEGMENT,
} from 'component/providers/AccessProvider/permissions';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import AccessContext from 'contexts/AccessContext';
import { useContext } from 'react';
import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
const StyledDiv = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
margin: theme.spacing(6),
marginLeft: 'auto',
marginRight: 'auto',
}));
const StyledTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.mainHeader,
marginBottom: theme.spacing(2.5),
}));
const StyledParagraph = styled('p')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
color: theme.palette.text.secondary,
maxWidth: 515,
marginBottom: theme.spacing(2.5),
textAlign: 'center',
}));
const StyledLink = styled(Link)(({ theme }) => ({
textDecoration: 'none',
color: theme.palette.primary.main,
fontWeight: theme.fontWeight.bold,
}));
export const SegmentEmpty = () => {
const projectId = useOptionalPathParam('projectId');
const { hasAccess } = useContext(AccessContext);
return (
<StyledDiv>
<StyledTypography>No segments yet!</StyledTypography>
<StyledParagraph>
Segment makes it easy for you to define who should be exposed to
your feature. The segment is often a collection of constraints
and can be reused.
</StyledParagraph>
<ConditionallyRender
condition={hasAccess(
[CREATE_SEGMENT, UPDATE_PROJECT_SEGMENT],
projectId,
)}
show={
<StyledLink to='/segments/create'>
Create your first segment
</StyledLink>
}
/>
</StyledDiv>
);
};