Line data    Source code

       1              : import * as React from 'react';
       2              : import symbols from '@ankoh/dashql-svg-symbols';
       3              : import * as styles from './card_placeholder.module.css';
       4              : 
       5              : import { useAppFlavor } from '../config/flavor_provider.js';
       6              : import { classNames } from '../utils/classnames.js';
       7              : import { QueryExecutionStatus, queryIsDone, type QueryExecutionState } from '../query/query_execution_state.js';
       8              : 
       9              : /// The hint of a card before the first run
      10            1 : const RUN_HINT = 'Run the query to see the result';
      11              : 
      12              : /// What the query of a card without a result does, null when it did not run and the card shows the hint
      13            1 : function queryStatusMessage(query: QueryExecutionState | null): string | null {
      14            1 :     if (query == null) return null;
      15            1 :     if (!queryIsDone(query.status)) return 'Running the query…';
      16            1 :     if (query.status === QueryExecutionStatus.FAILED) return 'The query failed';
      17            0 :     if (query.status === QueryExecutionStatus.CANCELLED) return 'The query was cancelled';
      18            0 :     return null;
      19            1 : }
      20              : 
      21              : /// A card that has nothing to show yet: the logo of the flavor, faint, with the message below it.
      22              : /// A hint is quieter than a status, it must not compete with the cards that show results.
      23            1 : export function CardPlaceholder(props: { message: string; hint?: boolean }): React.ReactElement {
      24            1 :     const logo = useAppFlavor().logo;
      25            1 :     return (
      26            1 :         <div className={styles.root} data-testid="card-placeholder">
      27            1 :             <svg
      28            1 :                 className={classNames(styles.logo, { [styles.logo_wordmark]: logo.wordmark })}
      29            1 :                 style={logo.wordmark ? { aspectRatio: logo.aspectRatio } : undefined}
      30            1 :                 aria-hidden="true"
      31              :             >
      32            1 :                 <use xlinkHref={`${symbols}#${logo.symbol}`} />
      33            1 :             </svg>
      34            1 :             <span className={props.hint ? styles.hint : styles.message}>{props.message}</span>
      35            1 :         </div>
      36              :     );
      37            1 : }
      38              : 
      39              : /// The placeholder of a card whose query has no result: the hint to run it, else what the query does
      40            1 : export function QueryStatusPlaceholder(props: { query: QueryExecutionState | null }): React.ReactElement {
      41            1 :     const status = queryStatusMessage(props.query);
      42            1 :     return status != null ? <CardPlaceholder message={status} /> : <CardPlaceholder message={RUN_HINT} hint />;
      43            1 : }