feat: export project level feature toggles (#3120)

frontend/src/component/feature/FeatureToggleList/ExportDialog.tsx

@@ -13,7 +13,7 @@ interface IExportDialogProps {
     showExportDialog: boolean;
     data: FeatureSchema[];
     onClose: () => void;
-    environments: IEnvironment[];
+    environments: string[];
 }
 
 const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
@@ -27,15 +27,15 @@ export const ExportDialog = ({
     onClose,
     environments,
 }: IExportDialogProps) => {
-    const [selected, setSelected] = useState(environments[0].name);
+    const [selected, setSelected] = useState(environments[0]);
     const { createExport } = useExportApi();
     const ref = createRef<HTMLDivElement>();
     const { setToastApiError } = useToast();
 
     const getOptions = () =>
         environments.map(env => ({
-            key: env.name,
+            key: env,
-            label: env.name,
+            label: env,
         }));
 
     const getPayload = () => {

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -59,7 +59,9 @@ const { value: storedParams, setValue: setStoredParams } = createLocalStorage(
 export const FeatureToggleListTable: VFC = () => {
     const theme = useTheme();
     const { environments } = useEnvironments();
-    const enabledEnvironment = environments.filter(env => env.enabled);
+    const enabledEnvironments = environments
+        .filter(env => env.enabled)
+        .map(env => env.name);
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
     const [showExportDialog, setShowExportDialog] = useState(false);
@@ -387,7 +389,7 @@ export const FeatureToggleListTable: VFC = () => {
                         showExportDialog={showExportDialog}
                         data={data}
                         onClose={() => setShowExportDialog(false)}
-                        environments={enabledEnvironment}
+                        environments={enabledEnvironments}
                     />
                 }
             />

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -1,5 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { styled, useMediaQuery, useTheme } from '@mui/material';
+import {
+    IconButton,
+    styled,
+    Tooltip,
+    useMediaQuery,
+    useTheme,
+} from '@mui/material';
 import { Add } from '@mui/icons-material';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { SortingRule, useFlexLayout, useSortBy, useTable } from 'react-table';
@@ -47,6 +53,9 @@ import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
 import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import { flexRow } from 'themes/themeStyles';
 import VariantsWarningTooltip from 'component/feature/FeatureView/FeatureVariants/VariantsTooltipWarning';
+import FileDownload from '@mui/icons-material/FileDownload';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
 
 const StyledResponsiveButton = styled(ResponsiveButton)(() => ({
     whiteSpace: 'nowrap',
@@ -145,6 +154,8 @@ export const ProjectFeatureToggles = ({
         onChangeRequestToggleConfirm,
         changeRequestDialogDetails,
     } = useChangeRequestToggle(projectId);
+    const [showExportDialog, setShowExportDialog] = useState(false);
+    const { uiConfig } = useUiConfig();
 
     const onToggle = useCallback(
         async (
@@ -377,7 +388,7 @@ export const ProjectFeatureToggles = ({
         getSearchContext,
     } = useSearch(columns, searchValue, featuresData);
 
-    const data = useMemo<object[]>(() => {
+    const data = useMemo(() => {
         if (loading) {
             return Array(6).fill({
                 type: '-',
@@ -542,6 +553,28 @@ export const ProjectFeatureToggles = ({
                                 setHiddenColumns={setHiddenColumns}
                             />
                             <PageHeader.Divider sx={{ marginLeft: 0 }} />
+                            <ConditionallyRender
+                                condition={Boolean(
+                                    uiConfig?.flags?.featuresExportImport
+                                )}
+                                show={
+                                    <Tooltip
+                                        title="Export current selection"
+                                        arrow
+                                    >
+                                        <IconButton
+                                            onClick={() =>
+                                                setShowExportDialog(true)
+                                            }
+                                            sx={theme => ({
+                                                marginRight: theme.spacing(2),
+                                            })}
+                                        >
+                                            <FileDownload />
+                                        </IconButton>
+                                    </Tooltip>
+                                }
+                            />
                             <StyledResponsiveButton
                                 onClick={() =>
                                     navigate(getCreateTogglePath(projectId))
@@ -639,6 +672,17 @@ export const ProjectFeatureToggles = ({
                     />
                 }
             />
+            <ConditionallyRender
+                condition={Boolean(uiConfig?.flags?.featuresExportImport)}
+                show={
+                    <ExportDialog
+                        showExportDialog={showExportDialog}
+                        data={data}
+                        onClose={() => setShowExportDialog(false)}
+                        environments={environments}
+                    />
+                }
+            />
         </PageContent>
     );
 };