github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/EnvironmentLockDisplay/EnvironmentLockDisplay.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 { addAction, DisplayLock, useEnvironmentLock } from '../../utils/store';
    18  import { Tooltip } from '../tooltip/tooltip';
    19  import { Locks, LocksWhite } from '../../../images';
    20  import { Button } from '../button';
    21  
    22  export const DisplayLockInlineRenderer: React.FC<{ lock: DisplayLock }> = (props) => {
    23      const { lock } = props;
    24      const hasAuthor = lock.authorEmail || lock.authorName;
    25      const author = hasAuthor ? lock.authorName + '<' + lock.authorEmail + '>' : 'unknown';
    26  
    27      const description = lock.application ? (
    28          <span>
    29              Application <b>{lock.application}</b> locked by <b>{author}</b> on environment <b>{lock.environment}</b>
    30          </span>
    31      ) : (
    32          <span>
    33              Environment <b>{lock.environment}</b> locked by <b>{author}</b>
    34          </span>
    35      );
    36      return (
    37          <span title={lock.lockId}>
    38              {description}
    39              <span>
    40                  {' '}
    41                  with message: <b>'{lock.message}'</b>{' '}
    42              </span>
    43          </span>
    44      );
    45  };
    46  export const DisplayLockRenderer: React.FC<{ lock: DisplayLock }> = (props) => {
    47      const { lock } = props;
    48      const hasAuthor = lock.authorEmail || lock.authorName;
    49      const author = hasAuthor ? lock.authorName + '<' + lock.authorEmail + '>' : 'unknown';
    50      const kind = lock.application ? 'App' : 'Environment';
    51      return (
    52          <div>
    53              <div>
    54                  {kind} locked by {author}
    55              </div>
    56              <div>
    57                  with Message: <b>{lock.message}</b>
    58              </div>
    59              <div>ID: {lock.lockId}</div>
    60              <div>Click to unlock.</div>
    61          </div>
    62      );
    63  };
    64  
    65  export const EnvironmentLockDisplay: React.FC<{ env: string; lockId: string; bigLockIcon: boolean }> = (props) => {
    66      const { env, lockId } = props;
    67      const lock = useEnvironmentLock(lockId);
    68      const deleteLock = React.useCallback(() => {
    69          addAction({
    70              action: { $case: 'deleteEnvironmentLock', deleteEnvironmentLock: { environment: env, lockId: lockId } },
    71          });
    72      }, [env, lockId]);
    73      const content = <DisplayLockRenderer lock={lock} />;
    74      const lockIcon = props.bigLockIcon ? (
    75          <Locks className="environment-lock-icon" />
    76      ) : (
    77          <LocksWhite className="env-card-env-lock-icon fixed-size" />
    78      );
    79      return (
    80          <Tooltip tooltipContent={content} id={'env-group-chip-id-' + lock.lockId}>
    81              <div>
    82                  <Button icon={lockIcon} onClick={deleteLock} className={'button-lock'} />
    83              </div>
    84          </Tooltip>
    85      );
    86  };