Skip to content

Commit

Permalink
Publish dialog (#602)
Browse files Browse the repository at this point in the history
  • Loading branch information
@guergana
guergana authored Oct 23, 2024
1 parent 3c268cd commit c28a359
Show file tree
Hide file tree
Showing 25 changed files with 364 additions and 239 deletions.
Binary file added client/assets/icon_info.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions client/components/Application/Dialogs/AdjustFile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react'
import Box from '@mui/material/Box'
import DisplaySettingsIcon from '@mui/icons-material/DisplaySettings'
import ConfirmDialog from '../../Parts/Dialogs/OneButton'
import OneButtonDialog from '../../Parts/Dialogs/OneButton'
import SelectField from '../../Parts/Fields/Select'
import InputField from '../../Parts/Fields/Input'
import * as store from '@client/store'
Expand All @@ -17,7 +17,7 @@ export default function AdjustFileDialog() {
const newType = record.type !== type ? type : undefined

return (
<ConfirmDialog
<OneButtonDialog
disabled={!newName && !newType}
open={true}
title="Adjust File"
Expand All @@ -39,6 +39,6 @@ export default function AdjustFileDialog() {
onChange={setType}
/>
</Box>
</ConfirmDialog>
</OneButtonDialog>
)
}
6 changes: 3 additions & 3 deletions client/components/Application/Dialogs/Config.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react'
import Box from '@mui/material/Box'
import SaveIcon from '@mui/icons-material/Save'
import ConfirmDialog from '../../Parts/Dialogs/OneButton'
import OneButtonDialog from '../../Parts/Dialogs/OneButton'
import ConfigEditor from '../../Editors/Config'
import * as store from '@client/store'

Expand All @@ -13,7 +13,7 @@ export default function ConfigDialog() {
if (!newConfig) return null

return (
<ConfirmDialog
<OneButtonDialog
open={true}
title="Config"
label="Save"
Expand All @@ -32,6 +32,6 @@ export default function ConfigDialog() {
defaultSection={dialog === 'configProject' ? 'project' : undefined}
/>
</Box>
</ConfirmDialog>
</OneButtonDialog>
)
}
6 changes: 3 additions & 3 deletions client/components/Application/Dialogs/Create.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react'
import Box from '@mui/material/Box'
import LinearProgress from '@mui/material/LinearProgress'
import ConfirmDialog from '../../Parts/Dialogs/OneButton'
import OneButtonDialog from '../../Parts/Dialogs/OneButton'
import MultilineField from '../../Parts/Fields/Multiline'
import InputField from '../../Parts/Fields/Input'
import Columns from '../../Parts/Grids/Columns'
Expand Down Expand Up @@ -85,7 +85,7 @@ export default function CreateDialog() {
}

return (
<ConfirmDialog
<OneButtonDialog
ctrlEnter
open={true}
maxWidth="md"
Expand Down Expand Up @@ -139,6 +139,6 @@ export default function CreateDialog() {
)}
</Box>
</Columns>
</ConfirmDialog>
</OneButtonDialog>
)
}
240 changes: 97 additions & 143 deletions client/components/Application/Dialogs/FileUpload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import IconButton from '@mui/material/IconButton'
import DialogContent from '@mui/material/DialogContent'
import CloseIcon from '@mui/icons-material/Close'
import * as store from '@client/store'
import Tabs from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'
import { styled } from '@mui/material/styles'
import uploadFilesDialogImg from '../../../assets/dialog_upload_files.png'
import iconUploadFileImg from '../../../assets/icon_upload_file.png'
Expand All @@ -18,6 +16,7 @@ import TextField from '@mui/material/TextField'
import CircularProgress from '@mui/material/CircularProgress'
import InputAdornment from '@mui/material/InputAdornment'
import * as helpers from '../../../helpers'
import DialogTabs from '../../Parts/Tabs/Dialog'

export default function FileUploadDialog() {
const [errorMessage, setErrorMessage] = React.useState('')
Expand All @@ -26,21 +25,10 @@ export default function FileUploadDialog() {
store.closeDialog()
}

const dialogTab = store.useStore((state) => state.dialogTab)

const [value, setValue] = React.useState(dialogTab ? dialogTab : 0)

const [remoteUrlValue, setRemoteUrlValue] = React.useState('')

const [loading, setLoading] = React.useState(false)

function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
}
}

// by default the height of the tabs is set by its content, to avoid the height jump
// when changing the tabs we assign the second tab whatever is the height of the first one
const tabRefForHeight = React.useRef<HTMLDivElement>(null)
Expand All @@ -50,13 +38,6 @@ export default function FileUploadDialog() {
tabRefForHeight.current ? setTabHeight(tabRefForHeight.current.clientHeight) : null
}, [tabRefForHeight])

// the event needs to be passed even if not used, disabling here so there's
// no unused variable error in the typescript check
// @ts-ignore
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue)
}

const inputFileRef = React.useRef<HTMLInputElement>(null)
const inputFolderRef = React.useRef<HTMLInputElement>(null)

Expand Down Expand Up @@ -97,6 +78,8 @@ export default function FileUploadDialog() {
}
}

const tabLabels = ['From your computer', 'Add external data']

const isWebkitDirectorySupported = 'webkitdirectory' in document.createElement('input')
if (!isWebkitDirectorySupported) return null

Expand Down Expand Up @@ -132,142 +115,113 @@ export default function FileUploadDialog() {
<img src={uploadFilesDialogImg} alt="Image Folder Dialog" />
</Box>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs
value={value}
onChange={handleChange}
aria-label="File Upload Tabs"
centered
>
<Tab label="From your computer" {...a11yProps(0)} />
<Tab label="Add external data" {...a11yProps(1)} />
</Tabs>
</Box>
<CustomTabPanel value={value} index={0}>
<Box ref={tabRefForHeight}>
<Columns columns={2} spacing={4}>
<FileSelectBox
sx={{
':hover': {
borderColor: (theme) => theme.palette.primary.main,
},
}}
>
<input
type="file"
multiple
ref={inputFileRef}
onChange={async (ev: React.ChangeEvent<HTMLInputElement>) => {
if (ev.target.files) {
await store.addFiles(ev.target.files)
store.openDialog('openLocation')
}
<DialogTabs labels={tabLabels}>
<Box ref={tabRefForHeight}>
<Columns columns={2} spacing={4}>
<FileSelectBox
sx={{
':hover': {
borderColor: (theme) => theme.palette.primary.main,
},
}}
/>
<Box sx={{ padding: '32px 48px 24px 48px' }}>
<Box>
<img src={iconUploadFileImg} alt="Icon Upload File" />
>
<input
type="file"
multiple
ref={inputFileRef}
onChange={async (ev: React.ChangeEvent<HTMLInputElement>) => {
if (ev.target.files) {
await store.addFiles(ev.target.files)
store.openDialog('openLocation')
}
}}
/>
<Box sx={{ padding: '32px 48px 24px 48px' }}>
<Box>
<img src={iconUploadFileImg} alt="Icon Upload File" />
</Box>
<Box>Add one or more Excel or csv files </Box>
<StyledSelectBox className="file-select__button">
Select
</StyledSelectBox>
</Box>
<Box>Add one or more Excel or csv files </Box>
<StyledSelectBox className="file-select__button">
Select
</StyledSelectBox>
</Box>
</FileSelectBox>
<FileSelectBox
sx={{
':hover': {
borderColor: (theme) => theme.palette.primary.main,
},
}}
>
<input
type="file"
multiple
ref={inputFolderRef}
onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
if (ev.target.files) {
store.addFiles(ev.target.files)
store.closeDialog()
}
</FileSelectBox>
<FileSelectBox
sx={{
':hover': {
borderColor: (theme) => theme.palette.primary.main,
},
}}
// @ts-expect-error
webkitdirectory=""
/>
<Box sx={{ padding: '32px 48px 24px 48px' }}>
<Box>
<img src={iconUploadFolderImg} alt="Icon Upload File" />
>
<input
type="file"
multiple
ref={inputFolderRef}
onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
if (ev.target.files) {
store.addFiles(ev.target.files)
store.closeDialog()
}
}}
// @ts-expect-error
webkitdirectory=""
/>
<Box sx={{ padding: '32px 48px 24px 48px' }}>
<Box>
<img src={iconUploadFolderImg} alt="Icon Upload File" />
</Box>
<Box>Add one or more folders</Box>
<StyledSelectBox className="file-select__button">
Select
</StyledSelectBox>
</Box>
<Box>Add one or more folders</Box>
<StyledSelectBox className="file-select__button">
Select
</StyledSelectBox>
</Box>
</FileSelectBox>
</Columns>
</Box>
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
<Box sx={{ paddingLeft: '140px', paddingRight: '140px', minHeight: tabHeight }}>
</FileSelectBox>
</Columns>
</Box>
<Box
sx={{
fontSize: '14px',
}}
sx={{ paddingLeft: '140px', paddingRight: '140px', minHeight: tabHeight }}
>
Link to the external table:
</Box>
<Box sx={{ display: 'flex' }}>
<AddRemoteTextfield
value={remoteUrlValue}
errorMessage={errorMessage}
onChange={onAddRemoteTextfieldChange}
/>
{loading ? (
<CircularProgress
size={'2rem'}
sx={{
'& .MuiLinearProgress-bar': {
backgroundColor: '#00D1FF',
},
padding: '10px',
}}
<Box
sx={{
fontSize: '14px',
}}
>
Link to the external table:
</Box>
<Box sx={{ display: 'flex' }}>
<AddRemoteTextfield
value={remoteUrlValue}
errorMessage={errorMessage}
onChange={onAddRemoteTextfieldChange}
/>
) : null}
{loading ? (
<CircularProgress
size={'2rem'}
sx={{
'& .MuiLinearProgress-bar': {
backgroundColor: '#00D1FF',
},
padding: '10px',
}}
/>
) : null}
</Box>
<SimpleButton
label={'Add'}
sx={{ my: 0.5, marginTop: '53px' }}
variant="contained"
aria-label="accept"
disabled={!remoteUrlValue}
onClick={() => onAddRemoteConfirm(remoteUrlValue)}
/>
</Box>
<SimpleButton
label={'Add'}
sx={{ my: 0.5, marginTop: '53px' }}
variant="contained"
aria-label="accept"
disabled={!remoteUrlValue}
onClick={() => onAddRemoteConfirm(remoteUrlValue)}
/>
</Box>
</CustomTabPanel>
</DialogTabs>
</Box>
</DialogContent>
</Dialog>
)
}

function CustomTabPanel(props: {
children?: React.ReactNode
index: number
value: number
}) {
const { children, value, index, ...other } = props

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
</div>
)
}

function AddRemoteTextfield(props: {
errorMessage?: string
value: string
Expand Down
Loading

0 comments on commit c28a359

Please sign in to comment.