# All files / src/components/panels AboutPanel.tsx

0% Statements 0/50
100% Branches 1/1
100% Functions 1/1
0% Lines 0/50

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73

     import type { JSX } from "react";
    import type { ConnectionStatus, Environment, Session } from "../../hooks/types.js";
    import styles from "./SettingsPanel.module.scss";

    declare const __APP_VERSION__: string;

    /** Human-readable label for each connection state. */
    const CONNECTION_LABEL: Record<ConnectionStatus, string> = {
      connected: "Connected",
      connecting: "Connecting...",
      disconnected: "Disconnected",
    };

    /** CSS class for the connection dot in each state. */
    const CONNECTION_DOT_CLASS: Record<ConnectionStatus, string> = {
      connected: styles.aboutDotConnected,
      connecting: styles.aboutDotConnecting,
      disconnected: styles.aboutDotDisconnected,
    };

    /** Props for the AboutPanel component. */
    interface AboutPanelProps {
      /** Current connection state of the event stream. */
      connectionStatus: ConnectionStatus;
      /** List of all environments. */
      environments: Environment[];
      /** List of all sessions. */
      sessions: Session[];
    }

    /** About panel showing connection status, environment summary, session count, and version. */
    export function AboutPanel({
      connectionStatus,
      environments,
      sessions,
    }: AboutPanelProps): JSX.Element {
      const connectedEnvs = environments.filter((e) => e.status === "connected").length;
      const totalEnvs = environments.length;
      const activeSessionCount = sessions.filter((s) => ["running", "idle"].includes(s.status)).length;

      return (
        <section className={styles.section} data-testid="about-panel">
          <h3 className={styles.sectionTitle}>About</h3>
          <p className={styles.sectionDescription}>Connection status and application information.</p>
          <div className={styles.aboutGrid}>
            <div className={styles.aboutItem}>
              <span className={styles.aboutLabel}>Connection</span>
              <span className={styles.aboutValue}>
                <span className={`${styles.aboutDot} ${CONNECTION_DOT_CLASS[connectionStatus]}`} />
                {CONNECTION_LABEL[connectionStatus]}
              </span>
            </div>
            <div className={styles.aboutItem}>
              <span className={styles.aboutLabel}>Environments</span>
              <span className={styles.aboutValue}>
                {connectedEnvs}/{totalEnvs} connected
              </span>
            </div>
            <div className={styles.aboutItem}>
              <span className={styles.aboutLabel}>Active Sessions</span>
              <span className={styles.aboutValue}>{activeSessionCount}</span>
            </div>
            <div className={styles.aboutItem}>
              <span className={styles.aboutLabel}>Version</span>
              <span className={styles.aboutValue}>
                {typeof __APP_VERSION__ !== "undefined" ? __APP_VERSION__ : "unknown"}
              </span>
            </div>
          </div>
        </section>
      );
    }