From e76d04a7ade840d437eca66dbaecd92fec49687a Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 8 Apr 2025 10:23:02 +0200
Subject: [PATCH] feat: export button in flags overview (#9715)

---
 .../feature/FeatureToggleList/ExportFlags.tsx | 26 +++++++++++++++++++
 .../FeatureToggleListTable.tsx                | 15 ++++++++---
 2 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/component/feature/FeatureToggleList/ExportFlags.tsx

diff --git a/frontend/src/component/feature/FeatureToggleList/ExportFlags.tsx b/frontend/src/component/feature/FeatureToggleList/ExportFlags.tsx
new file mode 100644
index 0000000000..758ed4f5a4
--- /dev/null
+++ b/frontend/src/component/feature/FeatureToggleList/ExportFlags.tsx
@@ -0,0 +1,26 @@
+import { IconButton, Tooltip } from '@mui/material';
+import IosShare from '@mui/icons-material/IosShare';
+import type { FC } from 'react';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+
+export const ExportFlags: FC<{ onClick: () => void }> = ({ onClick }) => {
+    const { trackEvent } = usePlausibleTracker();
+
+    return (
+        <Tooltip title='Export flags' arrow>
+            <IconButton
+                onClick={() => {
+                    onClick();
+                    trackEvent('search-feature-buttons', {
+                        props: {
+                            action: 'export',
+                        },
+                    });
+                }}
+                size='small'
+            >
+                <IosShare />
+            </IconButton>
+        </Tooltip>
+    );
+};
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index bbdf180216..02494a66ab 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -31,6 +31,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useGlobalFeatureSearch } from './useGlobalFeatureSearch';
 import { LifecycleFilters } from './FeatureToggleFilters/LifecycleFilters';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { ExportFlags } from './ExportFlags';
 
 export const featuresPlaceholder = Array(15).fill({
     name: 'Name of the feature',
@@ -289,9 +290,17 @@ export const FeatureToggleListTable: VFC = () => {
                             >
                                 View archive
                             </Link>
-                            <FeatureToggleListActions
-                                onExportClick={() => setShowExportDialog(true)}
-                            />
+                            {flagsReleaseManagementUIEnabled ? (
+                                <ExportFlags
+                                    onClick={() => setShowExportDialog(true)}
+                                />
+                            ) : (
+                                <FeatureToggleListActions
+                                    onExportClick={() =>
+                                        setShowExportDialog(true)
+                                    }
+                                />
+                            )}
                         </>
                     }
                 >