github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/ServiceLane/EnvSelectionDialog.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import * as React from 'react';
    17  import { useState } from 'react';
    18  import { Checkbox } from '../dropdown/checkbox';
    19  import { ConfirmationDialog } from '../dialog/ConfirmationDialog';
    20  import { showSnackbarError } from '../../utils/store';
    21  
    22  export type EnvSelectionDialogProps = {
    23      environments: string[];
    24      onSubmit: (selectedEnvs: string[]) => void;
    25      onCancel: () => void;
    26      open: boolean;
    27      envSelectionDialog: boolean; // false if release train dialog
    28  };
    29  
    30  export const EnvSelectionDialog: React.FC<EnvSelectionDialogProps> = (props) => {
    31      const [selectedEnvs, setSelectedEnvs] = useState<string[]>([]);
    32  
    33      const onConfirm = React.useCallback(() => {
    34          if (selectedEnvs.length < 1) {
    35              showSnackbarError('There needs to be at least one environment selected to perform this action');
    36              return;
    37          }
    38          props.onSubmit(selectedEnvs);
    39          setSelectedEnvs([]);
    40      }, [props, selectedEnvs]);
    41  
    42      const onCancel = React.useCallback(() => {
    43          props.onCancel();
    44          setSelectedEnvs([]);
    45      }, [props]);
    46  
    47      const addTeam = React.useCallback(
    48          (env: string) => {
    49              const newEnv = env;
    50              const indexOf = selectedEnvs.indexOf(newEnv);
    51              if (indexOf >= 0) {
    52                  const copy = selectedEnvs.concat();
    53                  copy.splice(indexOf, 1);
    54                  setSelectedEnvs(copy);
    55              } else if (!props.envSelectionDialog) {
    56                  setSelectedEnvs([newEnv]);
    57              } else {
    58                  setSelectedEnvs(selectedEnvs.concat(newEnv));
    59              }
    60          },
    61          [props.envSelectionDialog, selectedEnvs]
    62      );
    63  
    64      return (
    65          <ConfirmationDialog
    66              classNames={'env-selection-dialog'}
    67              onConfirm={onConfirm}
    68              onCancel={onCancel}
    69              open={props.open}
    70              headerLabel={
    71                  props.envSelectionDialog
    72                      ? 'Select all environments to be removed:'
    73                      : 'Select which environments to run release train to:'
    74              }
    75              confirmLabel={props.envSelectionDialog ? 'Remove app from environments' : 'Release Train'}>
    76              {props.environments.length > 0 ? (
    77                  <div className="envs-dropdown-select">
    78                      {props.environments.map((env: string, index: number) => {
    79                          const enabled = selectedEnvs.includes(env);
    80                          return (
    81                              <div key={env}>
    82                                  <Checkbox
    83                                      enabled={enabled}
    84                                      onClick={addTeam}
    85                                      id={String(env)}
    86                                      label={env}
    87                                      classes={'env' + env}
    88                                  />
    89                              </div>
    90                          );
    91                      })}
    92                  </div>
    93              ) : (
    94                  <div className="envs-dropdown-select">
    95                      {props.envSelectionDialog ? (
    96                          <div id="missing_envs">There are no environments to list</div>
    97                      ) : (
    98                          <div id="missing_envs">
    99                              There are no available environments to run a release train to based on the current
   100                              environment/environmentGroup
   101                          </div>
   102                      )}
   103                  </div>
   104              )}
   105          </ConfirmationDialog>
   106      );
   107  };