diff --git a/frontend/src/component/feature/FeatureToggleList/ExportDialog.tsx b/frontend/src/component/feature/FeatureToggleList/ExportDialog.tsx index 2cc34f5600..a1002cc70c 100644 --- a/frontend/src/component/feature/FeatureToggleList/ExportDialog.tsx +++ b/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(); const { setToastApiError } = useToast(); const getOptions = () => environments.map(env => ({ - key: env.name, - label: env.name, + key: env, + label: env, })); const getPayload = () => { diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index 745d552200..89812a7dd4 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/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} /> } /> diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index 3441eb2ac6..d78d3767ba 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/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(() => { + const data = useMemo(() => { if (loading) { return Array(6).fill({ type: '-', @@ -542,6 +553,28 @@ export const ProjectFeatureToggles = ({ setHiddenColumns={setHiddenColumns} /> + + + setShowExportDialog(true) + } + sx={theme => ({ + marginRight: theme.spacing(2), + })} + > + + + + } + /> navigate(getCreateTogglePath(projectId)) @@ -639,6 +672,17 @@ export const ProjectFeatureToggles = ({ /> } /> + setShowExportDialog(false)} + environments={environments} + /> + } + /> ); };