github.com/argoproj/argo-cd@v1.8.7/ui/src/app/applications/components/application-parameters/kustomize.tsx (about)

     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  });