github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/SidebarIcon.tsx (about)

     1  import React, { PureComponent } from "react"
     2  import styled from "styled-components"
     3  import { ReactComponent as CheckmarkSmallSvg } from "./assets/svg/checkmark-small.svg"
     4  import { ReactComponent as ErrorSvg } from "./assets/svg/error.svg"
     5  import { ReactComponent as WarningSvg } from "./assets/svg/warning.svg"
     6  import { ClassNameFromResourceStatus } from "./ResourceStatus"
     7  import {
     8    AnimDuration,
     9    Color,
    10    ColorAlpha,
    11    ColorRGBA,
    12    Glow,
    13    Width,
    14  } from "./style-helpers"
    15  import Tooltip from "./Tooltip"
    16  import { ResourceStatus } from "./types"
    17  
    18  type SidebarIconProps = {
    19    status: ResourceStatus
    20    tooltipText?: string
    21  }
    22  
    23  let SidebarIconRoot = styled.div`
    24    display: flex;
    25    flex-shrink: 0;
    26    align-items: center;
    27    justify-content: center;
    28    width: ${Width.statusIcon}px;
    29    margin-right: ${Width.statusIconMarginRight}px;
    30    transition: background-color ${AnimDuration.default} linear,
    31      opacity ${AnimDuration.default} linear;
    32  
    33    &.isWarning {
    34      background-color: ${Color.yellow};
    35    }
    36    &.isHealthy {
    37      background-color: ${Color.green};
    38    }
    39    &.isUnhealthy {
    40      background-color: ${Color.red};
    41    }
    42    &.isBuilding {
    43      background-color: ${ColorRGBA(Color.white, ColorAlpha.translucent)};
    44    }
    45    .isSelected &.isBuilding {
    46      background-color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
    47    }
    48    &.isPending {
    49      background-color: ${ColorRGBA(Color.white, ColorAlpha.translucent)};
    50      animation: ${Glow.white} 2s linear infinite;
    51    }
    52    .isSelected &.isPending {
    53      background-color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
    54      animation: ${Glow.dark} 2s linear infinite;
    55    }
    56    &.isNone {
    57      border-right: 1px solid ${Color.gray40};
    58      box-sizing: border-box;
    59      transition: border-color ${AnimDuration.default} linear;
    60  
    61      svg {
    62        fill: ${Color.gray50};
    63      }
    64    }
    65    .isSelected &.isNone {
    66      border-right-color: ${Color.grayLightest};
    67  
    68      svg {
    69        fill: ${Color.gray40};
    70      }
    71    }
    72  `
    73  // Sidenote: Resources with a `disabled` status are displayed without any icons,
    74  // so that status case is not handled here
    75  export default class SidebarIcon extends PureComponent<SidebarIconProps> {
    76    render() {
    77      let icon = <span>&nbsp;</span>
    78      if (this.props.status === ResourceStatus.Warning) {
    79        icon = (
    80          <WarningSvg
    81            fill={Color.white}
    82            width="10px"
    83            height="10px"
    84            role="presentation"
    85          />
    86        )
    87      } else if (this.props.status === ResourceStatus.Unhealthy) {
    88        icon = <ErrorSvg fill={Color.white} role="presentation" />
    89      } else if (this.props.status === ResourceStatus.None) {
    90        icon = <CheckmarkSmallSvg role="presentation" />
    91      }
    92  
    93      return (
    94        <Tooltip title={this.props.tooltipText || ""}>
    95          <SidebarIconRoot
    96            className={`${ClassNameFromResourceStatus(this.props.status)}`}
    97          >
    98            {icon}
    99          </SidebarIconRoot>
   100        </Tooltip>
   101      )
   102    }
   103  }