Import first super early version of UI (#2932)

Import first super early version of UI

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

@@ -0,0 +1,91 @@
+import { Button, styled, TextField } from '@mui/material';
+import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import { KeyboardArrowDownOutlined } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { useImportApi } from 'hooks/api/actions/useImportApi/useImportApi';
+import { useProjectEnvironments } from 'hooks/api/getters/useProjectEnvironments/useProjectEnvironments';
+
+const StyledDiv = styled('div')(({ theme }) => ({
+    backgroundColor: '#efefef',
+    height: '100vh',
+    padding: theme.spacing(2),
+}));
+
+const StyledTextField = styled(TextField)(({ theme }) => ({
+    width: '100%',
+    margin: theme.spacing(2, 0),
+}));
+
+interface IImportModalProps {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+
+    project: string;
+}
+
+export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => {
+    const { environments } = useProjectEnvironments(project);
+    const { createImport } = useImportApi();
+
+    const environmentOptions = environments
+        .filter(environment => environment.enabled)
+        .map(environment => ({
+            key: environment.name,
+            label: environment.name,
+            title: environment.name,
+        }));
+
+    const [environment, setEnvironment] = useState('');
+    const [data, setData] = useState('');
+
+    useEffect(() => {
+        setEnvironment(environmentOptions[0]?.key);
+    }, [JSON.stringify(environmentOptions)]);
+
+    const onSubmit = async () => {
+        await createImport({
+            data: JSON.parse(data),
+            environment,
+            project,
+        });
+    };
+
+    return (
+        <SidebarModal
+            open={open}
+            onClose={() => {
+                setOpen(false);
+            }}
+            label={'New service account'}
+        >
+            <StyledDiv>
+                <GeneralSelect
+                    sx={{ width: '140px' }}
+                    options={environmentOptions}
+                    onChange={setEnvironment}
+                    label={'Environment'}
+                    value={environment}
+                    IconComponent={KeyboardArrowDownOutlined}
+                    fullWidth
+                />
+                <StyledTextField
+                    label="Exported toggles"
+                    variant="outlined"
+                    onChange={event => setData(event.target.value)}
+                    value={data}
+                    multiline
+                    minRows={20}
+                />
+                <Button
+                    variant="contained"
+                    color="primary"
+                    type="submit"
+                    onClick={onSubmit}
+                >
+                    Import
+                </Button>{' '}
+            </StyledDiv>
+        </SidebarModal>
+    );
+};

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

@@ -18,7 +18,7 @@ import {
     StyledTopRow,
 } from './Project.styles';
 import { Tabs } from '@mui/material';
-import { Delete, Edit } from '@mui/icons-material';
+import { Delete, Edit, FileUpload } from '@mui/icons-material';
 import useToast from 'hooks/useToast';
 import useQueryParams from 'hooks/useQueryParams';
 import { useEffect, useState } from 'react';
@@ -40,6 +40,7 @@ import { ChangeRequestOverview } from 'component/changeRequest/ChangeRequestOver
 import { ProjectChangeRequests } from '../../changeRequest/ProjectChangeRequests/ProjectChangeRequests';
 import { ProjectSettings } from './ProjectSettings/ProjectSettings';
 import { useFavoriteProjectsApi } from 'hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi';
+import { ImportModal } from './Import/ImportModal';
 
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -47,9 +48,10 @@ export const Project = () => {
     const { project, loading, refetch } = useProject(projectId);
     const ref = useLoading(loading);
     const { setToastData } = useToast();
+    const [modalOpen, setModalOpen] = useState(false);
     const navigate = useNavigate();
     const { pathname } = useLocation();
-    const { isOss } = useUiConfig();
+    const { isOss, uiConfig } = useUiConfig();
     const basePath = `/projects/${projectId}`;
     const projectName = project?.name || projectId;
     const { favorite, unfavorite } = useFavoriteProjectsApi();
@@ -133,6 +135,27 @@ export const Project = () => {
                             </StyledProjectTitle>
                         </StyledDiv>
                         <StyledDiv>
+                            <ConditionallyRender
+                                condition={Boolean(
+                                    uiConfig?.flags?.featuresExportImport
+                                )}
+                                show={
+                                    <PermissionIconButton
+                                        permission={UPDATE_PROJECT}
+                                        projectId={projectId}
+                                        sx={{
+                                            visibility: isOss()
+                                                ? 'hidden'
+                                                : 'visible',
+                                        }}
+                                        onClick={() => setModalOpen(true)}
+                                        tooltipProps={{ title: 'Import' }}
+                                        data-loading
+                                    >
+                                        <FileUpload />
+                                    </PermissionIconButton>
+                                }
+                            />
                             <PermissionIconButton
                                 permission={UPDATE_PROJECT}
                                 projectId={projectId}
@@ -247,6 +270,11 @@ export const Project = () => {
                 <Route path="settings/*" element={<ProjectSettings />} />
                 <Route path="*" element={<ProjectOverview />} />
             </Routes>
+            <ImportModal
+                open={modalOpen}
+                setOpen={setModalOpen}
+                project={projectId}
+            />
         </div>
     );
 };

frontend/src/hooks/api/actions/useImportApi/useImportApi.ts

@@ -0,0 +1,32 @@
+import { ExportQuerySchema } from 'openapi';
+import useAPI from '../useApi/useApi';
+
+export interface ImportQuerySchema {}
+
+export const useImportApi = () => {
+    const { makeRequest, createRequest, errors, loading } = useAPI({
+        propagateErrors: true,
+    });
+
+    const createImport = async (payload: ImportQuerySchema) => {
+        const path = `api/admin/features-batch/full-import`;
+        const req = createRequest(path, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        });
+
+        try {
+            const res = await makeRequest(req.caller, req.id);
+
+            return res;
+        } catch (e) {
+            throw e;
+        }
+    };
+
+    return {
+        loading,
+        errors,
+        createImport,
+    };
+};