Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

feat: file dropzone (#2939)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-01-20 09:50:24 +01:00 committed by GitHub
parent 30ed92cbbb
commit a67649347a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 84 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -87,6 +87,7 @@
"react": "17.0.2",
"react-chartjs-2": "4.3.1",
"react-dom": "17.0.2",
"react-dropzone": "14.2.3",
"react-error-boundary": "3.1.4",
"react-hooks-global-state": "2.1.0",
"react-markdown": "^8.0.4",

1
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
View File

@ -58,6 +58,7 @@ const StyledConstraintLabel = styled('p')(({ theme }) => ({
}));
const StyledAddCustomLabel = styled('div')(({ theme }) => ({
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
color: theme.palette.text.secondary,
display: 'flex',

44
frontend/src/component/project/Project/Import/FileDropZone.tsx Normal file
View File

@ -0,0 +1,44 @@
import React, { FC, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Box } from '@mui/material';
const formatJSON = (json: string) => {
try {
return JSON.stringify(JSON.parse(json), null, 4);
} catch (e) {
console.error(e);
return '';
}
};
// This component has no styling on purpose
export const FileDropZone: FC<{ onChange: (content: string) => void }> = ({
onChange,
children,
...props
}) => {
const onDrop = useCallback(([file]) => {
const reader = new FileReader();
reader.onload = function (e) {
const contents = e?.target?.result;
if (typeof contents === 'string') {
onChange(formatJSON(contents));
}
};
reader.readAsText(file);
}, []);
const { getRootProps, getInputProps } = useDropzone({
onDrop,
accept: {
'application/json': ['.json'],
},
maxFiles: 1,
});
return (
<Box {...getRootProps()} {...props}>
<input {...getInputProps()} />
{children}
</Box>
);
};

7
frontend/src/component/project/Project/Import/ImportModal.tsx
View File

@ -5,6 +5,7 @@ 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';
import { StyledFileDropZone } from './ImportTogglesDropZone';
const StyledDiv = styled('div')(({ theme }) => ({
backgroundColor: '#efefef',
@ -69,6 +70,11 @@ export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => {
IconComponent={KeyboardArrowDownOutlined}
fullWidth
/>
<StyledFileDropZone onChange={setData}>
<p>
Drag 'n' drop some files here, or click to select files
</p>
</StyledFileDropZone>
<StyledTextField
label="Exported toggles"
variant="outlined"
@ -76,6 +82,7 @@ export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => {
value={data}
multiline
minRows={20}
maxRows={20}
/>
<Button
variant="contained"

9
frontend/src/component/project/Project/Import/ImportTogglesDropZone.tsx Normal file
View File

@ -0,0 +1,9 @@
import { styled } from '@mui/material';
import { FileDropZone } from './FileDropZone';
import React from 'react';
export const StyledFileDropZone = styled(FileDropZone)(({ theme }) => ({
padding: theme.spacing(4),
border: '1px solid black',
margin: theme.spacing(2, 0),
}));

23
frontend/yarn.lock
View File

@ -3048,6 +3048,11 @@ at-least-node@^1.0.0:
resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
attr-accept@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
available-typed-arrays@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@ -4952,6 +4957,13 @@ file-entry-cache@^6.0.1:
dependencies:
flat-cache "^3.0.4"
file-selector@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
dependencies:
tslib "^2.4.0"
file-uri-to-path@2:
version "2.0.0"
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-2.0.0.tgz#7b415aeba227d575851e0a5b0c640d7656403fba"
@ -7351,6 +7363,15 @@ react-dom@17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-dropzone@14.2.3:
version "14.2.3"
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
dependencies:
attr-accept "^2.2.2"
file-selector "^0.6.0"
prop-types "^15.8.1"
react-error-boundary@3.1.4, react-error-boundary@^3.1.0:
version "3.1.4"
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
@ -8313,7 +8334,7 @@ tslib@^1.14.1, tslib@^1.8.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.1, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1:
tslib@^2.0.1, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==