mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
more ui touches
This commit is contained in:
parent
fe4aa79ffb
commit
2ac422f175
@ -21,7 +21,11 @@
|
|||||||
color: var(--brand-alert-green);
|
color: var(--brand-alert-green);
|
||||||
}
|
}
|
||||||
|
|
||||||
.url {
|
.info li.error {
|
||||||
|
color: var(--brand-alert-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contianer {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: var(--font-size-base);
|
font-size: var(--font-size-base);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
@ -31,11 +35,6 @@
|
|||||||
padding-right: calc(var(--spacer) / 2);
|
padding-right: calc(var(--spacer) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
|
||||||
margin-top: calc(var(--spacer) / 3);
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.removeButton {
|
.removeButton {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -4,17 +4,22 @@ import styles from './Info.module.css'
|
|||||||
export default function ImageInfo({
|
export default function ImageInfo({
|
||||||
image,
|
image,
|
||||||
tag,
|
tag,
|
||||||
|
valid,
|
||||||
handleClose
|
handleClose
|
||||||
}: {
|
}: {
|
||||||
image: string
|
image: string
|
||||||
tag: string
|
tag: string
|
||||||
|
valid: boolean
|
||||||
handleClose(): void
|
handleClose(): void
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
|
const displayText = valid
|
||||||
|
? '✓ Image found, container checksum automatically added!'
|
||||||
|
: 'x Container checksum could not be fetched automatically, please add it manually'
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
<h3 className={styles.url}>{`${image}:${tag}`}</h3>
|
<h3 className={styles.contianer}>{`Image: ${image} Tag: ${tag}`}</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li className={styles.success}>✓ Image found</li>
|
<li className={valid ? styles.success : styles.error}>{displayText}</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button className={styles.removeButton} onClick={handleClose}>
|
<button className={styles.removeButton} onClick={handleClose}>
|
||||||
×
|
×
|
||||||
|
@ -4,9 +4,6 @@ import UrlInput from '../URLInput'
|
|||||||
import { InputProps } from '@shared/FormInput'
|
import { InputProps } from '@shared/FormInput'
|
||||||
import { FormPublishData } from 'src/components/Publish/_types'
|
import { FormPublishData } from 'src/components/Publish/_types'
|
||||||
import { LoggerInstance } from '@oceanprotocol/lib'
|
import { LoggerInstance } from '@oceanprotocol/lib'
|
||||||
import { toast } from 'react-toastify'
|
|
||||||
import axios from 'axios'
|
|
||||||
import isUrl from 'is-url-superb'
|
|
||||||
import ImageInfo from './Info'
|
import ImageInfo from './Info'
|
||||||
import { getContainerChecksum } from '@utils/docker'
|
import { getContainerChecksum } from '@utils/docker'
|
||||||
|
|
||||||
@ -14,26 +11,26 @@ export default function ContainerInput(props: InputProps): ReactElement {
|
|||||||
const [field, meta, helpers] = useField(props.name)
|
const [field, meta, helpers] = useField(props.name)
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const [isValid, setIsValid] = useState(false)
|
const [isValid, setIsValid] = useState(false)
|
||||||
|
const [checked, setChecked] = useState(false)
|
||||||
const { values, setFieldError, setFieldValue } =
|
const { values, setFieldError, setFieldValue } =
|
||||||
useFormikContext<FormPublishData>()
|
useFormikContext<FormPublishData>()
|
||||||
|
|
||||||
async function handleValidation(e: React.SyntheticEvent, container: string) {
|
async function handleValidation(e: React.SyntheticEvent, container: string) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
try {
|
try {
|
||||||
console.log('isUrl(container)', isUrl(container))
|
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
if (!isUrl(container, { lenient: false })) {
|
const parsedContainerValue = container?.split(':')
|
||||||
const parsedContainerValue = container.split(':')
|
const imageNname = parsedContainerValue?.slice(0, -1).join(':')
|
||||||
const image = parsedContainerValue[0]
|
const tag =
|
||||||
const tag = parsedContainerValue[1]
|
parsedContainerValue.length > 1 ? parsedContainerValue?.at(-1) : ''
|
||||||
const checksum = await getContainerChecksum(image, tag)
|
setFieldValue('metadata.dockerImageCustom', imageNname)
|
||||||
setFieldValue('metadata.dockerImageCustom', image)
|
|
||||||
setFieldValue('metadata.dockerImageCustomTag', tag)
|
setFieldValue('metadata.dockerImageCustomTag', tag)
|
||||||
|
const checksum = await getContainerChecksum(imageNname, tag)
|
||||||
if (checksum) {
|
if (checksum) {
|
||||||
setFieldValue('metadata.dockerImageCustomChecksum', checksum)
|
setFieldValue('metadata.dockerImageCustomChecksum', checksum)
|
||||||
setIsValid(true)
|
setIsValid(true)
|
||||||
}
|
}
|
||||||
}
|
setChecked(true)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setFieldError(`${field.name}[0].url`, error.message)
|
setFieldError(`${field.name}[0].url`, error.message)
|
||||||
LoggerInstance.error(error.message)
|
LoggerInstance.error(error.message)
|
||||||
@ -46,16 +43,18 @@ export default function ContainerInput(props: InputProps): ReactElement {
|
|||||||
setFieldValue('metadata.dockerImageCustom', '')
|
setFieldValue('metadata.dockerImageCustom', '')
|
||||||
setFieldValue('metadata.dockerImageCustomTag', '')
|
setFieldValue('metadata.dockerImageCustomTag', '')
|
||||||
setFieldValue('metadata.dockerImageCustomChecksum', '')
|
setFieldValue('metadata.dockerImageCustomChecksum', '')
|
||||||
|
setChecked(false)
|
||||||
setIsValid(false)
|
setIsValid(false)
|
||||||
helpers.setTouched(false)
|
helpers.setTouched(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isValid ? (
|
{checked ? (
|
||||||
<ImageInfo
|
<ImageInfo
|
||||||
image={values.metadata.dockerImageCustom}
|
image={values.metadata.dockerImageCustom}
|
||||||
tag={values.metadata.dockerImageCustomTag}
|
tag={values.metadata.dockerImageCustomTag}
|
||||||
|
valid={isValid}
|
||||||
handleClose={handleClose}
|
handleClose={handleClose}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
@ -129,7 +129,6 @@ export default function MetadataFields(): ReactElement {
|
|||||||
)}
|
)}
|
||||||
component={Input}
|
component={Input}
|
||||||
name="metadata.dockerImageCustomChecksum"
|
name="metadata.dockerImageCustomChecksum"
|
||||||
disabled
|
|
||||||
/>
|
/>
|
||||||
<Field
|
<Field
|
||||||
{...getFieldContent(
|
{...getFieldContent(
|
||||||
|
@ -42,7 +42,6 @@ async function getAlgorithmContainerPreset(
|
|||||||
(preset) => `${preset.image}:${preset.tag}` === dockerImage
|
(preset) => `${preset.image}:${preset.tag}` === dockerImage
|
||||||
)
|
)
|
||||||
preset.checksum = await getContainerChecksum(preset.image, preset.tag)
|
preset.checksum = await getContainerChecksum(preset.image, preset.tag)
|
||||||
console.log('preset')
|
|
||||||
return preset
|
return preset
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user