github.com/argoproj/argo-cd/v2@v2.10.9/ui/src/app/settings/components/project-sync-windows-edit-panel/project-sync-windows-edit-panel.tsx (about)

     1  import {FormField, FormSelect} from 'argo-ui';
     2  import * as React from 'react';
     3  import {Form, FormApi, Text} from 'react-form';
     4  
     5  import {CheckboxField} from '../../../shared/components';
     6  
     7  import * as models from '../../../shared/models';
     8  
     9  import {ProjectSyncWindowsParams} from '../../../shared/services/projects-service';
    10  import {
    11      ProjectSyncWindowApplicationsEdit,
    12      ProjectSyncWindowClusterEdit,
    13      ProjectSyncWindowNamespaceEdit,
    14      ProjectSyncWindowScheduleEdit
    15  } from '../project-sync-windows-edit/project-sync-windows-edit';
    16  
    17  import timezones from 'timezones-list';
    18  
    19  interface ProjectSyncWindowsDefaultParams {
    20      projName: string;
    21      window: models.SyncWindow;
    22      newWindow: boolean;
    23      id: number;
    24  }
    25  
    26  interface ProjectSyncWindowsEditPanelProps {
    27      submit: (params: ProjectSyncWindowsParams) => any;
    28      getApi?: (formApi: FormApi) => void;
    29      defaultParams: ProjectSyncWindowsDefaultParams;
    30  }
    31  
    32  export const ProjectSyncWindowsEditPanel = (props: ProjectSyncWindowsEditPanelProps) => {
    33      if (props.defaultParams.window === undefined) {
    34          const w = {
    35              schedule: '* * * * *'
    36          } as models.SyncWindow;
    37          props.defaultParams.window = w;
    38      }
    39      return (
    40          <div className='project-sync-windows-edit-panel'>
    41              <Form
    42                  onSubmit={props.submit}
    43                  getApi={props.getApi}
    44                  defaultValues={{
    45                      projName: props.defaultParams.projName,
    46                      window: props.defaultParams.window
    47                  }}
    48                  validateError={(params: ProjectSyncWindowsParams) => ({
    49                      projName: !params.projName && 'Project name is required',
    50                      window: !params.window && 'Window is required'
    51                  })}>
    52                  {api => (
    53                      <form onSubmit={api.submitForm} role='form' className='width-control'>
    54                          <div className='white-box'>
    55                              <p>GENERAL</p>
    56                              <div className='argo-form-row'>
    57                                  <FormField formApi={api} label='Kind' field='window.kind' component={FormSelect} componentProps={{options: ['allow', 'deny']}} />
    58                              </div>
    59                              <ProjectSyncWindowScheduleEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    60                              <br />
    61                              <div className='argo-form-row'>
    62                                  <FormField formApi={api} label='Time Zone' componentProps={{options: generateTimezones()}} field='window.timeZone' component={FormSelect} />
    63                              </div>
    64                              <div className='argo-form-row'>
    65                                  <FormField formApi={api} label='Duration (e.g. "30m" or "1h")' field='window.duration' component={Text} />
    66                              </div>
    67                              <div className='argo-form-row'>
    68                                  <FormField formApi={api} label='Enable manual sync' field='window.manualSync' component={CheckboxField} />
    69                              </div>
    70                          </div>
    71                          <div className='white-box'>
    72                              <ProjectSyncWindowApplicationsEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    73                          </div>
    74                          <div className='white-box'>
    75                              <ProjectSyncWindowNamespaceEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    76                          </div>
    77                          <div className='white-box'>
    78                              <ProjectSyncWindowClusterEdit projName={api.values.projName} window={api.values.window} formApi={api} />
    79                          </div>
    80                      </form>
    81                  )}
    82              </Form>
    83          </div>
    84      );
    85  
    86      function generateTimezones(): string[] {
    87          const zones: string[] = [];
    88          for (const tz of timezones) {
    89              zones.push(tz.tzCode);
    90          }
    91          zones.sort();
    92          return zones;
    93      }
    94  };