From 5b660b14d8e2f20c590672a20b546bec12101ffd Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 10 Jul 2023 15:43:12 +0200
Subject: [PATCH] fix(ui): flags permission role

---
 frontend/app/components/FFlags/FFlagsList.tsx | 22 ++++++++++++++-----
 frontend/app/duck/roles.js                    |  1 +
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/FFlags/FFlagsList.tsx b/frontend/app/components/FFlags/FFlagsList.tsx
index 712824554..e1dd0aaf6 100644
--- a/frontend/app/components/FFlags/FFlagsList.tsx
+++ b/frontend/app/components/FFlags/FFlagsList.tsx
@@ -1,5 +1,7 @@
-import {numberWithCommas} from "App/utils";
 import React from 'react';
+import { numberWithCommas } from 'App/utils';
+import withPageTitle from 'HOCs/withPageTitle';
+import withPermissions from 'HOCs/withPermissions';
 import FFlagsListHeader from 'Components/FFlags/FFlagsListHeader';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { Loader, NoContent, Pagination } from 'UI';
@@ -92,9 +94,17 @@ function FFlagsList({ siteId }: { siteId: string }) {
             </div>
             <div className="w-full flex items-center justify-between pt-4 px-6">
               <div>
-                Showing <span className="font-medium">{(featureFlagsStore.page - 1) * featureFlagsStore.pageSize + 1}</span> to{' '}
-                <span className="font-medium">{(featureFlagsStore.page - 1) * featureFlagsStore.pageSize + featureFlagsStore.flags.length}</span> of{' '}
-                <span className="font-medium">{numberWithCommas(featureFlagsStore.total)}</span> Feature Flags.
+                Showing{' '}
+                <span className="font-medium">
+                  {(featureFlagsStore.page - 1) * featureFlagsStore.pageSize + 1}
+                </span>{' '}
+                to{' '}
+                <span className="font-medium">
+                  {(featureFlagsStore.page - 1) * featureFlagsStore.pageSize +
+                    featureFlagsStore.flags.length}
+                </span>{' '}
+                of <span className="font-medium">{numberWithCommas(featureFlagsStore.total)}</span>{' '}
+                Feature Flags.
               </div>
               <Pagination
                 page={featureFlagsStore.page}
@@ -111,4 +121,6 @@ function FFlagsList({ siteId }: { siteId: string }) {
   );
 }
 
-export default observer(FFlagsList);
+export default withPageTitle('Feature Flags')(
+  withPermissions(['FEATURE_FLAGS'])(observer(FFlagsList))
+);
diff --git a/frontend/app/duck/roles.js b/frontend/app/duck/roles.js
index 3015d556c..31d65cd79 100644
--- a/frontend/app/duck/roles.js
+++ b/frontend/app/duck/roles.js
@@ -18,6 +18,7 @@ const initialState = Map({
     { text: 'Dashboard', value: 'METRICS' },
     { text: 'Assist (Live)', value: 'ASSIST_LIVE' },
     { text: 'Assist (Call)', value: 'ASSIST_CALL' },
+    { text: 'Feature Flags', value: 'FEATURE_FLAGS' }
   ]),
 });