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

     1  import {Checkbox} from 'argo-ui';
     2  import * as React from 'react';
     3  import * as ReactForm from 'react-form';
     4  
     5  export interface ApplicationSyncOptionProps {
     6      options: string[];
     7      onChanged: (updatedOptions: string[]) => any;
     8  }
     9  
    10  function booleanOption(name: string, label: string, defaultVal: boolean, props: ApplicationSyncOptionProps) {
    11      const options = props.options.slice();
    12      const prefix = `${name}=`;
    13      const index = options.findIndex(item => item.startsWith(prefix));
    14      const checked = index < 0 ? defaultVal : options[index].substring(prefix.length) === 'true';
    15      return (
    16          <React.Fragment>
    17              <Checkbox
    18                  id={`sync-option-${name}`}
    19                  checked={checked}
    20                  onChange={(val: boolean) => {
    21                      if (index < 0) {
    22                          props.onChanged(options.concat(`${name}=${val}`));
    23                      } else {
    24                          options.splice(index, 1);
    25                          props.onChanged(options);
    26                      }
    27                  }}
    28              />
    29              <label htmlFor={`sync-option-${name}`}>{label}</label>
    30          </React.Fragment>
    31      );
    32  }
    33  
    34  const optionStyle: React.CSSProperties = {marginTop: '0.5em'};
    35  
    36  export const ApplicationSyncOptions = (props: ApplicationSyncOptionProps) => (
    37      <React.Fragment>
    38          <div style={optionStyle}>{booleanOption('Validate', 'Use a schema to validate resource manifests', true, props)}</div>
    39          <div style={optionStyle}>{booleanOption('CreateNamespace', 'Auto-create namespace', false, props)}</div>
    40      </React.Fragment>
    41  );
    42  
    43  export const ApplicationSyncOptionsField = ReactForm.FormField((props: {fieldApi: ReactForm.FieldApi}) => {
    44      const {
    45          fieldApi: {getValue, setValue, setTouched}
    46      } = props;
    47      const val = getValue() || [];
    48      return (
    49          <div className='argo-field'>
    50              <ApplicationSyncOptions
    51                  options={val}
    52                  onChanged={opts => {
    53                      setTouched(true);
    54                      setValue(opts);
    55                  }}
    56              />
    57          </div>
    58      );
    59  });