Skip to content

Commit

Permalink
Package Dialog skeleton (#2002)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fiskus
fiskus authored Jan 15, 2021
1 parent dcd4d3a commit 3a06277
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 90 deletions.
48 changes: 22 additions & 26 deletions catalog/app/containers/Bucket/PackageCopyDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import * as AWS from 'utils/AWS'
import * as Data from 'utils/Data'
import Delay from 'utils/Delay'
import * as NamedRoutes from 'utils/NamedRoutes'
import Skeleton from 'components/Skeleton'
import StyledLink from 'utils/StyledLink'
import tagged from 'utils/tagged'
import * as validators from 'utils/validators'
Expand Down Expand Up @@ -40,33 +39,22 @@ function requestPackageCopy(
})
}

const useFormSkeletonStyles = M.makeStyles((t) => ({
meta: {
marginTop: t.spacing(3),
},
}))

function FormSkeleton({ animate }) {
const headerSkeleton = <Skeleton {...{ height: 48, mt: 2, animate }} />
const inputsSkeleton = <Skeleton {...{ height: 48, mt: 3, animate }} />
const metadataSkeleton = (
<M.Box mt={3}>
<M.Box display="flex" mb={2}>
<Skeleton {...{ height: 24, width: 64, animate }} />
<M.Box flexGrow={1} />
<Skeleton {...{ height: 24, width: 64, animate }} />
</M.Box>
<M.Box display="flex">
<Skeleton {...{ height: 32, width: 200, animate }} />
<Skeleton {...{ height: 32, ml: 0.5, flexGrow: 1, animate }} />
</M.Box>
<M.Box display="flex" mt={0.5}>
<Skeleton {...{ height: 32, width: 200, animate }} />
<Skeleton {...{ height: 32, ml: 0.5, flexGrow: 1, animate }} />
</M.Box>
</M.Box>
)
const workflowSkeleton = <Skeleton {...{ height: 80, mt: 3, mb: 3, animate }} />
const classes = useFormSkeletonStyles()

return (
<>
{headerSkeleton}
{inputsSkeleton}
{metadataSkeleton}
{workflowSkeleton}
<PD.TextFieldSkeleton animate={animate} />
<PD.TextFieldSkeleton animate={animate} />

<PD.MetaInputSkeleton className={classes.meta} animate={animate} />
<PD.WorkflowsInputSkeleton animate={animate} />
</>
)
}
Expand All @@ -85,6 +73,12 @@ function DialogTitle({ bucket }) {
)
}

const useStyles = M.makeStyles((t) => ({
meta: {
marginTop: t.spacing(3),
},
}))

function DialogForm({
close,
hash,
Expand All @@ -98,6 +92,7 @@ function DialogForm({
workflowsConfig,
}) {
const nameValidator = PD.useNameValidator()
const classes = useStyles()

const initialMeta = React.useMemo(
() => ({
Expand Down Expand Up @@ -188,6 +183,7 @@ function DialogForm({
{AsyncResult.case({
Ok: ({ responseError, schema, validate }) => (
<RF.Field
className={classes.meta}
component={PD.MetaInput}
name="meta"
bucket={successor.slug}
Expand All @@ -199,7 +195,7 @@ function DialogForm({
initialValue={initialMeta}
/>
),
_: () => <PD.MetaInputSkeleton />,
_: () => <PD.MetaInputSkeleton className={classes.meta} />,
})}
</PD.SchemaFetcher>

Expand Down
20 changes: 15 additions & 5 deletions catalog/app/containers/Bucket/PackageCreateDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,6 @@ import * as PD from './PackageDialog'
import * as requests from './requests'

const useFilesInputStyles = M.makeStyles((t) => ({
root: {
marginTop: t.spacing(2),
},
header: {
alignItems: 'center',
display: 'flex',
Expand Down Expand Up @@ -159,6 +156,7 @@ const useFilesInputStyles = M.makeStyles((t) => ({

function FilesInput({
input: { value: inputValue, onChange: onInputChange },
className,
meta,
uploads,
setUploads,
Expand Down Expand Up @@ -219,7 +217,7 @@ function FilesInput({

const totalProgress = React.useMemo(() => getTotalProgress(uploads), [uploads])
return (
<div className={classes.root}>
<div className={className}>
<div className={classes.header}>
<div
className={cx(
Expand Down Expand Up @@ -319,6 +317,15 @@ function FilesInput({
)
}

const useStyles = M.makeStyles((t) => ({
files: {
marginTop: t.spacing(2),
},
meta: {
marginTop: t.spacing(3),
},
}))

const getTotalProgress = R.pipe(
R.values,
R.reduce(
Expand Down Expand Up @@ -349,6 +356,7 @@ function PackageCreateDialog({
const [uploads, setUploads] = React.useState({})
const [success, setSuccess] = React.useState(null)
const nameValidator = PD.useNameValidator()
const classes = useStyles()

const reset = (form) => () => {
form.restart()
Expand Down Expand Up @@ -567,6 +575,7 @@ function PackageCreateDialog({

<RF.Field
component={FilesInput}
className={classes.files}
name="files"
validate={validators.nonEmpty}
validateFields={['files']}
Expand All @@ -584,6 +593,7 @@ function PackageCreateDialog({
{AsyncResult.case({
Ok: ({ responseError, schema, validate }) => (
<RF.Field
className={classes.meta}
component={PD.MetaInput}
name="meta"
bucket={bucket}
Expand All @@ -595,7 +605,7 @@ function PackageCreateDialog({
initialValue={PD.EMPTY_META_VALUE}
/>
),
_: () => <PD.MetaInputSkeleton />,
_: () => <PD.MetaInputSkeleton className={classes.meta} />,
})}
</PD.SchemaFetcher>

Expand Down
33 changes: 0 additions & 33 deletions catalog/app/containers/Bucket/PackageDialog/FormSkeleton.js
View file

This file was deleted.

32 changes: 8 additions & 24 deletions catalog/app/containers/Bucket/PackageDialog/PackageDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import * as Lab from '@material-ui/lab'

import JsonEditor from 'components/JsonEditor'
import { parseJSON, stringifyJSON } from 'components/JsonEditor/State'
import Skeleton from 'components/Skeleton'
import * as Notifications from 'containers/Notifications'
import { useData } from 'utils/Data'
import Delay from 'utils/Delay'
Expand Down Expand Up @@ -207,9 +206,6 @@ export const getWorkflowApiParam = R.cond([
])

const useMetaInputStyles = M.makeStyles((t) => ({
root: {
marginTop: t.spacing(3),
},
header: {
alignItems: 'center',
display: 'flex',
Expand Down Expand Up @@ -282,7 +278,13 @@ const useMetaInputStyles = M.makeStyles((t) => ({
export const EMPTY_META_VALUE = { mode: 'kv', text: '{}' }

// TODO: warn on duplicate keys
export function MetaInput({ schemaError, input: { value, onChange }, meta, schema }) {
export function MetaInput({
className,
schemaError,
input: { value, onChange },
meta,
schema,
}) {
const classes = useMetaInputStyles()
const error = schemaError ? [schemaError] : meta.submitFailed && meta.error
const disabled = meta.submitting || meta.submitSucceeded
Expand Down Expand Up @@ -364,7 +366,7 @@ export function MetaInput({ schemaError, input: { value, onChange }, meta, schem
const { getRootProps, isDragActive } = useDropzone({ onDrop })

return (
<div className={classes.root}>
<div className={className}>
<div className={classes.header}>
{/* eslint-disable-next-line no-nested-ternary */}
<M.Typography color={disabled ? 'textSecondary' : error ? 'error' : undefined}>
Expand Down Expand Up @@ -457,21 +459,3 @@ export function SchemaFetcher({ children, schemaUrl }) {
)
return children(res)
}

// TODO: use this skeleton for FormSkeleton
export function MetaInputSkeleton() {
const classes = useMetaInputStyles()
const t = M.useTheme()
return (
<M.Grid container spacing={1} className={classes.root}>
{R.times(
(index) => (
<M.Grid item xs={6} key={index}>
<Skeleton height={t.spacing(4)} width="100%" />
</M.Grid>
),
6,
)}
</M.Grid>
)
}
67 changes: 67 additions & 0 deletions catalog/app/containers/Bucket/PackageDialog/Skeleton.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import * as React from 'react'
import * as M from '@material-ui/core'

import Skeleton from 'components/Skeleton'

export function TextFieldSkeleton({ animate }) {
return <Skeleton {...{ height: 48, mt: 2, mb: 1, animate }} />
}

export function FilesInputSkeleton({ animate, className }) {
return (
<div className={className}>
<Skeleton {...{ height: 24, width: 64, animate }} />
<Skeleton {...{ height: 140, mt: 2, animate }} />
</div>
)
}

export function MetaInputSkeleton({ animate, className }) {
return (
<div className={className}>
<M.Box display="flex" mb={2}>
<Skeleton {...{ height: 24, width: 64, animate }} />
<M.Box flexGrow={1} />
<Skeleton {...{ height: 24, width: 64, animate }} />
</M.Box>
<M.Box display="flex">
<Skeleton {...{ height: 32, width: 200, animate }} />
<Skeleton {...{ height: 32, ml: 0.5, flexGrow: 1, animate }} />
</M.Box>
<M.Box display="flex" mt={0.5}>
<Skeleton {...{ height: 32, width: 200, animate }} />
<Skeleton {...{ height: 32, ml: 0.5, flexGrow: 1, animate }} />
</M.Box>
</div>
)
}

export function WorkflowsInputSkeleton({ animate }) {
return <Skeleton {...{ height: 80, mt: 3, mb: 3, animate }} />
}

const useFormSkeletonStyles = M.makeStyles((t) => ({
files: {
marginTop: t.spacing(2),
},
meta: {
marginTop: t.spacing(3),
},
}))

export function FormSkeleton({ animate }) {
const classes = useFormSkeletonStyles()

return (
<>
<TextFieldSkeleton animate={animate} />
<TextFieldSkeleton animate={animate} />

<FilesInputSkeleton className={classes.files} animate={animate} />

<MetaInputSkeleton className={classes.meta} animate={animate} />

<WorkflowsInputSkeleton animate={animate} />
</>
)
}
2 changes: 1 addition & 1 deletion catalog/app/containers/Bucket/PackageDialog/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ export { default as DialogLoading } from './DialogLoading'

export { default as DialogSuccess } from './DialogSuccess'

export { default as FormSkeleton } from './FormSkeleton'
export * from './Skeleton'
14 changes: 13 additions & 1 deletion catalog/app/containers/Bucket/PackageUpdateDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -814,6 +814,15 @@ function FilesInput({
)
}

const useStyles = M.makeStyles((t) => ({
files: {
marginTop: t.spacing(2),
},
meta: {
marginTop: t.spacing(3),
},
}))

const getTotalProgress = R.pipe(
R.values,
R.reduce(
Expand Down Expand Up @@ -842,6 +851,7 @@ function DialogForm({
const req = APIConnector.use()
const [uploads, setUploads] = React.useState({})
const nameValidator = PD.useNameValidator()
const classes = useStyles()

const initialMeta = React.useMemo(
() => ({
Expand Down Expand Up @@ -1048,6 +1058,7 @@ function DialogForm({
/>

<RF.Field
className={classes.files}
component={FilesInput}
name="files"
validate={validators.nonEmpty}
Expand All @@ -1067,6 +1078,7 @@ function DialogForm({
{AsyncResult.case({
Ok: ({ responseError, schema, validate }) => (
<RF.Field
className={classes.meta}
component={PD.MetaInput}
name="meta"
bucket={bucket}
Expand All @@ -1078,7 +1090,7 @@ function DialogForm({
initialValue={initialMeta}
/>
),
_: () => <PD.MetaInputSkeleton />,
_: () => <PD.MetaInputSkeleton className={classes.meta} />,
})}
</PD.SchemaFetcher>

Expand Down

0 comments on commit 3a06277

Please sign in to comment.