github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/shared/components/progress/progress-popup.tsx (about)

     1  import {Popup} from 'argo-ui';
     2  import * as React from 'react';
     3  import {ProgressBar} from './progress-bar';
     4  import './progress-popup.scss';
     5  
     6  const Title = ({title}: {title: string}) => {
     7      return <span className='progress-popup__title'>{title}</span>;
     8  };
     9  
    10  const Footer = ({percentage, onClose}: {percentage: number; onClose: () => void}) => {
    11      return (
    12          <div className='progress-popup__footer'>
    13              {percentage >= 100 && (
    14                  <button className='argo-button argo-button--base-o' onClick={() => onClose()}>
    15                      Close
    16                  </button>
    17              )}
    18          </div>
    19      );
    20  };
    21  
    22  export const ProgressPopup = ({title, percentage, onClose}: {title: string; percentage: number; onClose: () => void}) => {
    23      return (
    24          <Popup title={<Title title={title} />} footer={<Footer percentage={percentage} onClose={onClose} />}>
    25              <div className='progress-popup__content'>
    26                  <ProgressBar percentage={percentage} />
    27              </div>
    28          </Popup>
    29      );
    30  };