Line data    Source code

       1              : /*
       2              :  * Copyright (C) 2016 Red Hat, Inc.
       3              :  * SPDX-License-Identifier: LGPL-2.1-or-later
       4              :  */
       5          553 : import React, { useState } from 'react';
       6          553 : import cockpit from 'cockpit';
       7              : 
       8              : import { Alert, AlertActionCloseButton, AlertProps } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
       9              : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
      10              : import './cockpit-components-inline-notification.css';
      11              : 
      12          553 : const _ = cockpit.gettext;
      13              : 
      14              : export const InlineNotification = ({ text, detail, type = "danger", onDismiss, isInline = true, isLiveRegion = false }: {
      15              :     text: string;
      16              :     detail?: string;
      17              :     type?: AlertProps["variant"];
      18              :     onDismiss?: (ev?: Event) => void;
      19              :     isInline?: boolean;
      20              :     isLiveRegion?: boolean;
      21              : }) => {
      22              :     const [isDetail, setIsDetail] = useState(false);
      23              : 
      24              :     const detailButton = (detail &&
      25              :         <Button variant="link" isInline className="alert-link more-button"
      26              :             onClick={event => {
      27              :                 if (event.button !== 0)
      28              :                     return;
      29              :                 event.preventDefault();
      30              :                 setIsDetail(prev => !prev);
      31              :             }}
      32              :         >
      33              :             {isDetail ? _("show less") : _("show more")}
      34              :         </Button>
      35              :     );
      36              : 
      37              :     return (
      38              :         <Alert variant={type}
      39              :             isLiveRegion={isLiveRegion}
      40              :             isInline={isInline}
      41              :             title={<> {text} {detailButton} </>}
      42              :             { ...onDismiss && { actionClose: <AlertActionCloseButton onClose={onDismiss} /> } }>
      43              :             {isDetail && (<p>{detail}</p>)}
      44              :         </Alert>
      45              :     );
      46              : };
      47              : 
      48            9 : export const ModalError = ({ dialogError, dialogErrorDetail, id, isExpandable }: {
      49              :     dialogError: string,
      50              :     dialogErrorDetail?: string,
      51              :     id?: string,
      52              :     isExpandable?: boolean,
      53            9 : }) => {
      54            9 :     return (
      55            3 :         <Alert {...id && { id }} variant='danger' isInline title={dialogError} isExpandable={!!isExpandable}>
      56            1 :             { typeof dialogErrorDetail === 'string' ? <p>{dialogErrorDetail}</p> : dialogErrorDetail }
      57            9 :         </Alert>
      58              :     );
      59            9 : };