github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/LockDisplay/LockDisplay.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 { Button } from '../button';
    17  import { Delete } from '../../../images';
    18  import { addAction, DisplayLock } from '../../utils/store';
    19  import classNames from 'classnames';
    20  import { useCallback } from 'react';
    21  import { FormattedDate } from '../FormattedDate/FormattedDate';
    22  
    23  const millisecondsPerDay = 1000 * 60 * 60 * 24;
    24  // lock is outdated if it's more than two days old
    25  export const isOutdated = (dateAdded: Date | undefined): boolean =>
    26      dateAdded ? (Date.now().valueOf() - dateAdded.valueOf()) / millisecondsPerDay > 2 : true;
    27  
    28  export const LockDisplay: React.FC<{ lock: DisplayLock }> = (props) => {
    29      const { lock } = props;
    30      const allClassNames = classNames('lock-display-info', {
    31          'date-display--outdated': isOutdated(lock.date),
    32          'date-display--normal': !isOutdated(lock.date),
    33      });
    34      const deleteLock = useCallback(() => {
    35          if (lock.application) {
    36              addAction({
    37                  action: {
    38                      $case: 'deleteEnvironmentApplicationLock',
    39                      deleteEnvironmentApplicationLock: {
    40                          environment: lock.environment,
    41                          lockId: lock.lockId,
    42                          application: lock.application,
    43                      },
    44                  },
    45              });
    46          } else {
    47              addAction({
    48                  action: {
    49                      $case: 'deleteEnvironmentLock',
    50                      deleteEnvironmentLock: {
    51                          environment: lock.environment,
    52                          lockId: lock.lockId,
    53                      },
    54                  },
    55              });
    56          }
    57      }, [lock.application, lock.environment, lock.lockId]);
    58      return (
    59          <div className="lock-display">
    60              <div className="lock-display__table">
    61                  <div className="lock-display-table">
    62                      {!!lock.date && <FormattedDate createdAt={lock.date} className={allClassNames} />}
    63                      <div className="lock-display-info">{lock.environment}</div>
    64                      {!!lock.application && <div className="lock-display-info">{lock.application}</div>}
    65                      <div className="lock-display-info">{lock.lockId}</div>
    66                      <div className="lock-display-info">{lock.message}</div>
    67                      <div className="lock-display-info">{lock.authorName}</div>
    68                      <div className="lock-display-info">{lock.authorEmail}</div>
    69                      <Button
    70                          className="lock-display-info lock-action service-action--delete"
    71                          onClick={deleteLock}
    72                          icon={<Delete />}
    73                      />
    74                  </div>
    75              </div>
    76          </div>
    77      );
    78  };