feat: add import export flag (#3411)

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

@@ -68,6 +68,7 @@ export const FeatureToggleListTable: VFC = () => {
     const [showExportDialog, setShowExportDialog] = useState(false);
     const { features = [], loading, refetchFeatures } = useFeatures();
     const [searchParams, setSearchParams] = useSearchParams();
+    const { uiConfig } = useUiConfig();
     const [initialState] = useState(() => ({
         sortBy: [
             {
@@ -310,16 +311,28 @@ export const FeatureToggleListTable: VFC = () => {
                             >
                                 View archive
                             </Link>
-                            <Tooltip title="Export current selection" arrow>
+                            <ConditionallyRender
-                                <IconButton
+                                condition={Boolean(
-                                    onClick={() => setShowExportDialog(true)}
+                                    uiConfig?.flags?.featuresExportImport
-                                    sx={theme => ({
+                                )}
-                                        marginRight: theme.spacing(2),
+                                show={
-                                    })}
+                                    <Tooltip
-                                >
+                                        title="Export current selection"
-                                    <FileDownload />
+                                        arrow
-                                </IconButton>
+                                    >
-                            </Tooltip>
+                                        <IconButton
+                                            onClick={() =>
+                                                setShowExportDialog(true)
+                                            }
+                                            sx={theme => ({
+                                                marginRight: theme.spacing(2),
+                                            })}
+                                        >
+                                            <FileDownload />
+                                        </IconButton>
+                                    </Tooltip>
+                                }
+                            />
 
                             <CreateFeatureButton
                                 loading={false}
@@ -370,11 +383,16 @@ export const FeatureToggleListTable: VFC = () => {
                     />
                 }
             />
-            <ExportDialog
+            <ConditionallyRender
-                showExportDialog={showExportDialog}
+                condition={Boolean(uiConfig?.flags?.featuresExportImport)}
-                data={data}
+                show={
-                onClose={() => setShowExportDialog(false)}
+                    <ExportDialog
-                environments={enabledEnvironments}
+                        showExportDialog={showExportDialog}
+                        data={data}
+                        onClose={() => setShowExportDialog(false)}
+                        environments={enabledEnvironments}
+                    />
+                }
             />
         </PageContent>
     );

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

@@ -139,16 +139,23 @@ export const Project = () => {
                             </StyledProjectTitle>
                         </StyledDiv>
                         <StyledDiv>
-                            <PermissionIconButton
+                            <ConditionallyRender
-                                permission={UPDATE_FEATURE}
+                                condition={Boolean(
-                                projectId={projectId}
+                                    uiConfig?.flags?.featuresExportImport
-                                onClick={() => setModalOpen(true)}
+                                )}
-                                tooltipProps={{ title: 'Import' }}
+                                show={
-                                data-testid={IMPORT_BUTTON}
+                                    <PermissionIconButton
-                                data-loading
+                                        permission={UPDATE_FEATURE}
-                            >
+                                        projectId={projectId}
-                                <FileUpload />
+                                        onClick={() => setModalOpen(true)}
-                            </PermissionIconButton>
+                                        tooltipProps={{ title: 'Import' }}
+                                        data-testid={IMPORT_BUTTON}
+                                        data-loading
+                                    >
+                                        <FileUpload />
+                                    </PermissionIconButton>
+                                }
+                            />
                             <ConditionallyRender
                                 condition={!isOss()}
                                 show={

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

@@ -583,21 +583,29 @@ export const ProjectFeatureToggles = ({
                                     setHiddenColumns={setHiddenColumns}
                                 />
                                 <PageHeader.Divider sx={{ marginLeft: 0 }} />
-                                <Tooltip
+                                <ConditionallyRender
-                                    title="Export toggles visible in the table below"
+                                    condition={Boolean(
-                                    arrow
+                                        uiConfig?.flags?.featuresExportImport
-                                >
+                                    )}
-                                    <IconButton
+                                    show={
-                                        onClick={() =>
+                                        <Tooltip
-                                            setShowExportDialog(true)
+                                            title="Export toggles visible in the table below"
-                                        }
+                                            arrow
-                                        sx={theme => ({
+                                        >
-                                            marginRight: theme.spacing(2),
+                                            <IconButton
-                                        })}
+                                                onClick={() =>
-                                    >
+                                                    setShowExportDialog(true)
-                                        <FileDownload />
+                                                }
-                                    </IconButton>
+                                                sx={theme => ({
-                                </Tooltip>
+                                                    marginRight:
+                                                        theme.spacing(2),
+                                                })}
+                                            >
+                                                <FileDownload />
+                                            </IconButton>
+                                        </Tooltip>
+                                    }
+                                />
                                 <StyledResponsiveButton
                                     onClick={() =>
                                         navigate(getCreateTogglePath(projectId))
@@ -704,7 +712,10 @@ export const ProjectFeatureToggles = ({
                     }
                 />
                 <ConditionallyRender
-                    condition={!loading}
+                    condition={
+                        Boolean(uiConfig?.flags?.featuresExportImport) &&
+                        !loading
+                    }
                     show={
                         <ExportDialog
                             showExportDialog={showExportDialog}

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

@@ -4,6 +4,7 @@ import { FileDownload } from '@mui/icons-material';
 import type { FeatureSchema } from 'openapi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ArchiveButton } from './ArchiveButton';
 import { MoreActions } from './MoreActions';
 import { ManageTags } from './ManageTags';
@@ -18,6 +19,7 @@ interface IProjectFeaturesBatchActionsProps {
 export const ProjectFeaturesBatchActions: FC<
     IProjectFeaturesBatchActionsProps
 > = ({ selectedIds, data, projectId }) => {
+    const { uiConfig } = useUiConfig();
     const [showExportDialog, setShowExportDialog] = useState(false);
     const { trackEvent } = usePlausibleTracker();
     const selectedData = useMemo(
@@ -54,12 +56,17 @@ export const ProjectFeaturesBatchActions: FC<
             </Button>
             <ManageTags projectId={projectId} data={selectedData} />
             <MoreActions projectId={projectId} data={selectedData} />
-            <ExportDialog
+            <ConditionallyRender
-                showExportDialog={showExportDialog}
+                condition={Boolean(uiConfig?.flags?.featuresExportImport)}
-                data={selectedData}
+                show={
-                onClose={() => setShowExportDialog(false)}
+                    <ExportDialog
-                environments={environments}
+                        showExportDialog={showExportDialog}
-                onConfirm={trackExport}
+                        data={selectedData}
+                        onClose={() => setShowExportDialog(false)}
+                        environments={environments}
+                        onConfirm={trackExport}
+                    />
+                }
             />
         </>
     );

frontend/src/interfaces/uiConfig.ts

@@ -40,6 +40,7 @@ export interface IFlags {
     embedProxyFrontend?: boolean;
     maintenanceMode?: boolean;
     messageBanner?: boolean;
+    featuresExportImport?: boolean;
     newProjectOverview?: boolean;
     caseInsensitiveInOperators?: boolean;
     crOnVariants?: boolean;

src/lib/__snapshots__/create-config.test.ts.snap

@@ -75,6 +75,7 @@ exports[`should create default config 1`] = `
       "crOnVariants": false,
       "embedProxy": true,
       "embedProxyFrontend": true,
+      "featuresExportImport": true,
       "loginHistory": false,
       "maintenanceMode": false,
       "messageBanner": false,
@@ -101,6 +102,7 @@ exports[`should create default config 1`] = `
       "crOnVariants": false,
       "embedProxy": true,
       "embedProxyFrontend": true,
+      "featuresExportImport": true,
       "loginHistory": false,
       "maintenanceMode": false,
       "messageBanner": false,

src/lib/features/export-import-toggles/export-import-controller.ts

@@ -21,6 +21,7 @@ import {
 } from '../../openapi';
 import { IAuthRequest } from '../../routes/unleash-types';
 import { extractUsername } from '../../util';
+import { InvalidOperationError } from '../../error';
 
 class ExportImportController extends Controller {
     private logger: Logger;
@@ -118,6 +119,7 @@ class ExportImportController extends Controller {
         req: IAuthRequest<unknown, unknown, ExportQuerySchema, unknown>,
         res: Response,
     ): Promise<void> {
+        this.verifyExportImportEnabled();
         const query = req.body;
         const userName = extractUsername(req);
         const data = await this.exportImportService.export(query, userName);
@@ -134,6 +136,7 @@ class ExportImportController extends Controller {
         req: IAuthRequest<unknown, unknown, ImportTogglesSchema, unknown>,
         res: Response,
     ): Promise<void> {
+        this.verifyExportImportEnabled();
         const dto = req.body;
         const { user } = req;
         const validation = await this.startTransaction(async (tx) =>
@@ -152,6 +155,7 @@ class ExportImportController extends Controller {
         req: IAuthRequest<unknown, unknown, ImportTogglesSchema, unknown>,
         res: Response,
     ): Promise<void> {
+        this.verifyExportImportEnabled();
         const dto = req.body;
         const { user } = req;
         await this.startTransaction(async (tx) =>
@@ -160,5 +164,13 @@ class ExportImportController extends Controller {
 
         res.status(200).end();
     }
+
+    private verifyExportImportEnabled() {
+        if (!this.config.flagResolver.isEnabled('featuresExportImport')) {
+            throw new InvalidOperationError(
+                'Feature export/import is not enabled',
+            );
+        }
+    }
 }
 export default ExportImportController;

src/lib/features/export-import-toggles/export-import-permissions.e2e.test.ts

@@ -233,7 +233,9 @@ beforeAll(async () => {
         db.stores,
         {
             experimental: {
-                flags: {},
+                flags: {
+                    featuresExportImport: true,
+                },
             },
         },
         db.rawDatabase,

src/lib/features/export-import-toggles/export-import.e2e.test.ts

@@ -138,7 +138,9 @@ beforeAll(async () => {
         db.stores,
         {
             experimental: {
-                flags: {},
+                flags: {
+                    featuresExportImport: true,
+                },
             },
         },
         db.rawDatabase,

src/lib/types/experimental.ts

@@ -34,6 +34,10 @@ const flags = {
         process.env.UNLEASH_EXPERIMENTAL_MESSAGE_BANNER,
         false,
     ),
+    featuresExportImport: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_FEATURES_EXPORT_IMPORT,
+        true,
+    ),
     caseInsensitiveInOperators: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_CASE_INSENSITIVE_IN_OPERATORS,
         false,