From a2de67332e314fc863e02ac413b3baff2f8a3a62 Mon Sep 17 00:00:00 2001
From: Paulo Amorim <pauloamorimbr@gmail.com>
Date: Thu, 12 Dec 2024 11:51:11 -0300
Subject: [PATCH] feat(projectHistoryLogs): hide export button behind feature
 flag TASK-1359 (#5347)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 🗒️ Checklist

1. [x] run linter locally
2. [x] update all related docs (API, README, inline, etc.), if any
3. [x] draft PR with a title `<type>(<scope>)<!>: <title> TASK-1234`
4. [x] tag PR: at least `frontend` or `backend` unless it's global
5. [x] fill in the template below and delete template comments
6. [x] review thyself: read the diff and repro the preview as written
7. [x] open PR & confirm that CI passes
8. [x] request reviewers, if needed
9. [ ] delete this section before merging

### 💭 Notes
This PR hides the `Export all data` button behind a feature flag, to be
viewed and tested conditionally.
The final implementation of the button will be worked on a future PR,
for another project.

### 👀 Preview steps
1. ℹ️ have account and a project
2. Have the activity logs feature flag on with:
?ff_activityLogsEnabled=true
3. Make some changes to the project, like editing the form and
redeploying
4. Navigate to Project > Settings > Activity
5. 🟢 `Export all data` should not be visible
6. Enable the button feature flag with:
?ff_exportActivityLogsEnabled=true
7. 🟢 `Export all data` should be visible
8. Button behavior is mocked so far and won't have any effect right now
---
 jsapp/js/components/activity/formActivity.tsx | 15 +++++++++++----
 jsapp/js/featureFlags.ts                      |  3 ++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/jsapp/js/components/activity/formActivity.tsx b/jsapp/js/components/activity/formActivity.tsx
index ecc3e1a03a..5b07fe1586 100644
--- a/jsapp/js/components/activity/formActivity.tsx
+++ b/jsapp/js/components/activity/formActivity.tsx
@@ -18,6 +18,7 @@ import KoboModalHeader from '../modals/koboModalHeader';
 import {ActivityMessage} from './activityMessage.component';
 import ExportToEmailButton from '../exportToEmailButton/exportToEmailButton.component';
 import {useParams} from 'react-router-dom';
+import {FeatureFlag, useFeatureFlag} from 'jsapp/js/featureFlags';
 
 /**
  * A component used at Project > Settings > Activity route. Displays a table
@@ -26,6 +27,10 @@ import {useParams} from 'react-router-dom';
 export default function FormActivity() {
   const {data: filterOptions} = useActivityLogsFilterOptionsQuery();
 
+  const exportActivityLogsEnabled = useFeatureFlag(
+    FeatureFlag.exportActivityLogsEnabled
+  );
+
   const [selectedFilterOption, setSelectedFilterOption] =
     useState<KoboSelectOption | null>(null);
 
@@ -88,10 +93,12 @@ export default function FormActivity() {
             placeholder={t('Filter by')}
             options={filterOptions || []}
           />
-          <ExportToEmailButton
-            label={t('Export all data')}
-            exportFunction={exportData}
-          />
+          {exportActivityLogsEnabled && (
+            <ExportToEmailButton
+              label={t('Export all data')}
+              exportFunction={exportData}
+            />
+          )}
         </div>
       </div>
       <div className={styles.tableContainer}>
diff --git a/jsapp/js/featureFlags.ts b/jsapp/js/featureFlags.ts
index 9e5c7884db..ccc1d98890 100644
--- a/jsapp/js/featureFlags.ts
+++ b/jsapp/js/featureFlags.ts
@@ -5,7 +5,8 @@
 export enum FeatureFlag {
   activityLogsEnabled = 'activityLogsEnabled',
   mmosEnabled = 'mmosEnabled',
-  oneTimeAddonsEnabled = 'oneTimeAddonsEnabled'
+  oneTimeAddonsEnabled = 'oneTimeAddonsEnabled',
+  exportActivityLogsEnabled = 'exportActivityLogsEnabled',
 }
 
 /**