Line data    Source code

       1              : import * as React from 'react';
       2              : import symbols from '@ankoh/dashql-svg-symbols';
       3              : 
       4              : import { ConnectionState } from './connection_state.js';
       5              : import { Button, ButtonVariant } from '../ui/foundations/button.js';
       6              : import { STATUS_COLOR_FAILED, STATUS_COLOR_IN_PROGRESS, STATUS_COLOR_OTHER, STATUS_COLOR_SUCCESS } from '../ui/foundations/status_indicator.js';
       7              : 
       8              : interface ButtonProps {
       9              :     sessionId?: string;
      10              :     conn: ConnectionState;
      11              :     onClick?: () => void;
      12              :     compact?: boolean;
      13              : }
      14              : 
      15            1 : export const CONNECTION_HEALTH_NAMES: string[] = [
      16            1 :     "Disconnected",
      17            1 :     "Connecting",
      18            1 :     "Cancelled",
      19            1 :     "Connected",
      20            1 :     "Failed",
      21            1 : ]
      22              : 
      23            1 : export const CONNECTION_HEALTH_COLORS: string[] = [
      24            1 :     STATUS_COLOR_OTHER,
      25            1 :     STATUS_COLOR_IN_PROGRESS,
      26            1 :     STATUS_COLOR_OTHER,
      27            1 :     STATUS_COLOR_SUCCESS,
      28            1 :     STATUS_COLOR_FAILED,
      29            1 : ];
      30              : 
      31            1 : export const ConnectionStatus = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
      32            0 :     const health = props.conn.connectionHealth ?? 0;
      33            0 :     const connectorIcon = props.conn.connectorInfo.icons.outlines;
      34              : 
      35            0 :     const connStatusText = props.conn.connectorInfo.names.displayShort;
      36            0 :     const connStatusColor = CONNECTION_HEALTH_COLORS[health];
      37              : 
      38            0 :     const handleClick = () => {
      39            0 :         if (props.onClick) {
      40            0 :             props.onClick();
      41              :         }
      42            0 :     };
      43              : 
      44              :     // This status button is the small-screen connector affordance, so it uses the outline variant.
      45            0 :     const ConnectorIconVisual = React.useCallback(() => (
      46            0 :         <svg width="16" height="16">
      47            0 :             <use xlinkHref={`${symbols}#${connectorIcon}`} />
      48            0 :         </svg>
      49            0 :     ), [connectorIcon]);
      50            0 :     const StatusDotVisual = React.useCallback(() => (
      51            0 :         <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg">
      52            0 :             <circle cx="4" cy="4" r="4" style={{ fill: connStatusColor }} />
      53            0 :         </svg>
      54            0 :     ), [connStatusColor]);
      55              : 
      56            0 :     return (
      57            0 :         <Button
      58            0 :             ref={ref}
      59            0 :             variant={ButtonVariant.Default}
      60            0 :             leadingVisual={ConnectorIconVisual}
      61            0 :             trailingVisual={StatusDotVisual}
      62            0 :             onClick={handleClick}
      63            0 :             aria-label={props.compact ? connStatusText : undefined}
      64              :         >
      65            0 :             {props.compact ? null : connStatusText}
      66            0 :         </Button>
      67              :     );
      68            1 : });