argo-cd

1
import {Checkbox} from 'argo-ui';
2
import * as React from 'react';
3
import {FieldApi, FormField as ReactFormField} from 'react-form';
4

5
import {format, parse} from './kustomize-image';
6

7
export const ImageTagFieldEditor = ReactFormField((props: {metadata: {value: string}; fieldApi: FieldApi; className: string}) => {
8
    const {
9
        fieldApi: {getValue, setValue}
10
    } = props;
11
    const origImage = parse(props.metadata.value);
12
    const val = getValue();
13
    const image = val ? parse(val) : {name: origImage.name};
14
    const mustBeDigest = (image.digest || '').indexOf(':') > -1;
15
    return (
16
        <div>
17
            <input
18
                style={{width: 'calc(50% - 1em)', marginRight: '1em'}}
19
                placeholder={origImage.name}
20
                className={props.className}
21
                value={image.newName || ''}
22
                onChange={el => {
23
                    setValue(format({...image, newName: el.target.value}));
24
                }}
25
            />
26
            <input
27
                style={{width: 'calc(50% - 12em)'}}
28
                className={props.className}
29
                onChange={el => {
30
                    const forceDigest = el.target.value.indexOf(':') > -1;
31
                    if (image.digest || forceDigest) {
32
                        setValue(format({...image, newTag: null, digest: el.target.value}));
33
                    } else {
34
                        setValue(format({...image, newTag: el.target.value, digest: null}));
35
                    }
36
                }}
37
                placeholder={origImage.newTag || origImage.digest}
38
                value={image.newTag || image.digest || ''}
39
            />
40
            <div style={{width: '6em', display: 'inline-block'}}>
41
                <Checkbox
42
                    checked={!!image.digest}
43
                    id={`${image.name}_is-digest`}
44
                    onChange={() => {
45
                        const nextImg = {...image};
46
                        if (mustBeDigest) {
47
                            return;
48
                        }
49
                        if (nextImg.digest) {
50
                            nextImg.newTag = nextImg.digest;
51
                            nextImg.digest = null;
52
                        } else {
53
                            nextImg.digest = nextImg.newTag;
54
                            nextImg.newTag = null;
55
                        }
56
                        setValue(format(nextImg));
57
                    }}
58
                />{' '}
59
                <label htmlFor={`${image.name}_is-digest`}> Digest?</label>
60
            </div>
61
        </div>
62
    );
63
});
64