github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/EnvironmentCard/EnvironmentCard.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 { addAction, getPriorityClassName, useFilteredEnvironmentLockIDs } from '../../utils/store';
    17  import { Button } from '../button';
    18  import { Locks } from '../../../images';
    19  import * as React from 'react';
    20  import { EnvironmentLockDisplay } from '../EnvironmentLockDisplay/EnvironmentLockDisplay';
    21  import { Environment, EnvironmentGroup } from '../../../api/api';
    22  import classNames from 'classnames';
    23  import { ProductVersionLink, setOpenEnvironmentConfigDialog } from '../../utils/Links';
    24  import { useSearchParams } from 'react-router-dom';
    25  import { useCallback } from 'react';
    26  
    27  export const EnvironmentCard: React.FC<{ environment: Environment; group: EnvironmentGroup | undefined }> = (props) => {
    28      const { environment, group } = props;
    29      const [params, setParams] = useSearchParams();
    30      const locks = useFilteredEnvironmentLockIDs(environment.name);
    31  
    32      const priorityClassName = group !== undefined ? getPriorityClassName(group) : getPriorityClassName(environment);
    33      const onShowConfigClick = useCallback((): void => {
    34          setOpenEnvironmentConfigDialog(params, environment.name);
    35          setParams(params);
    36      }, [environment.name, params, setParams]);
    37  
    38      const addLock = React.useCallback(() => {
    39          addAction({
    40              action: {
    41                  $case: 'createEnvironmentLock',
    42                  createEnvironmentLock: { environment: environment.name, lockId: '', message: '' },
    43              },
    44          });
    45      }, [environment.name]);
    46      return (
    47          <div className="environment-lane">
    48              <div className={classNames('environment-lane__header', priorityClassName)}>
    49                  <div className="environment__name" title={'Name of the environment'}>
    50                      {environment.name}
    51                  </div>
    52              </div>
    53              <div className="environment-lane__body">
    54                  {locks.length !== 0 && (
    55                      <div className="environment__locks">
    56                          {locks.map((lock) => (
    57                              <EnvironmentLockDisplay
    58                                  env={environment.name}
    59                                  lockId={lock}
    60                                  key={lock}
    61                                  bigLockIcon={true}
    62                              />
    63                          ))}
    64                      </div>
    65                  )}
    66                  <div className="environment__actions">
    67                      <Button
    68                          className="environment-action service-action--prepare-undeploy test-lock-env"
    69                          label={'Add Environment Lock in ' + environment.name}
    70                          icon={<Locks />}
    71                          onClick={addLock}
    72                      />
    73                      <Button
    74                          className="environment-action service-action--show-config"
    75                          label={'Show Configuration of environment ' + environment.name}
    76                          onClick={onShowConfigClick}
    77                      />
    78                      <div>
    79                          <ProductVersionLink
    80                              env={environment.name}
    81                              groupName={group?.environmentGroupName ?? ''}></ProductVersionLink>
    82                      </div>
    83                  </div>
    84              </div>
    85          </div>
    86      );
    87  };
    88  
    89  export const EnvironmentGroupCard: React.FC<{ environmentGroup: EnvironmentGroup }> = (props) => {
    90      const { environmentGroup } = props;
    91      // all envs in the same group have the same priority
    92      const priorityClassName = getPriorityClassName(environmentGroup);
    93      const addLock = React.useCallback(() => {
    94          environmentGroup.environments.forEach((environment) => {
    95              addAction({
    96                  action: {
    97                      $case: 'createEnvironmentLock',
    98                      createEnvironmentLock: { environment: environment.name, lockId: '', message: '' },
    99                  },
   100              });
   101          });
   102      }, [environmentGroup]);
   103      return (
   104          <div className="environment-group-lane">
   105              <div className="environment-group-lane__header-wrapper">
   106                  <div className={classNames('environment-group-lane__header', priorityClassName)}>
   107                      <div className="environment-group__name" title={'Name of the environment group'}>
   108                          {environmentGroup.environmentGroupName}
   109                      </div>
   110                  </div>
   111                  <div className="environment__actions">
   112                      <Button
   113                          className="environment-action service-action--prepare-undeploy test-lock-group"
   114                          label={'Add Lock for each environment in ' + environmentGroup.environmentGroupName}
   115                          icon={<Locks />}
   116                          onClick={addLock}
   117                      />
   118                  </div>
   119              </div>
   120              <div className="environment-group-lane__body">
   121                  {environmentGroup.environments.map((env) => (
   122                      <EnvironmentCard environment={env} key={env.name} group={environmentGroup} />
   123                  ))}
   124              </div>
   125              {/*I am just here so that we can avoid margin collapsing */}
   126              <div className={'environment-group-lane__footer'} />
   127          </div>
   128      );
   129  };