From ce6d2e56bc1c62b62387143108ea2f5d6c2bc2ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 31 Oct 2022 08:45:31 +0000
Subject: [PATCH] fix: only show link to create segment if you have permission
 (#2291)

---
 .../segments/SegmentEmpty/SegmentEmpty.tsx       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.tsx b/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.tsx
index 1b3b696f81e..eb402082ef3 100644
--- a/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.tsx
+++ b/frontend/src/component/segments/SegmentEmpty/SegmentEmpty.tsx
@@ -1,9 +1,14 @@
 import { Typography } from '@mui/material';
 import { useStyles } from 'component/segments/SegmentEmpty/SegmentEmpty.styles';
 import { Link } from 'react-router-dom';
+import { CREATE_SEGMENT } from 'component/providers/AccessProvider/permissions';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import AccessContext from 'contexts/AccessContext';
+import { useContext } from 'react';
 
 export const SegmentEmpty = () => {
     const { classes } = useStyles();
+    const { hasAccess } = useContext(AccessContext);
 
     return (
         <div className={classes.empty}>
@@ -13,9 +18,14 @@ export const SegmentEmpty = () => {
                 your feature. The segment is often a collection of constraints
                 and can be reused.
             </p>
-            <Link to="/segments/create" className={classes.paramButton}>
-                Create your first segment
-            </Link>
+            <ConditionallyRender
+                condition={hasAccess(CREATE_SEGMENT)}
+                show={
+                    <Link to="/segments/create" className={classes.paramButton}>
+                        Create your first segment
+                    </Link>
+                }
+            />
         </div>
     );
 };