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

     1  import React from "react"
     2  import styled from "styled-components"
     3  import { ReactComponent as TriggerModeButtonSvg } from "./assets/svg/trigger-mode-button.svg"
     4  import { InstrumentedButton } from "./instrumentedComponents"
     5  import { AnimDuration, Color, mixinResetButtonStyle } from "./style-helpers"
     6  import { TriggerMode } from "./types"
     7  
     8  let StyledTriggerModeToggle = styled(InstrumentedButton)`
     9    ${mixinResetButtonStyle}
    10    display: flex;
    11    align-items: center;
    12  
    13    .fillStd {
    14      fill: ${Color.gray20};
    15    }
    16    .strokeStd {
    17      stroke: ${Color.gray50};
    18      transition: stroke ${AnimDuration.short} linear;
    19    }
    20    .triggerModeSvg-isManual {
    21      opacity: 0;
    22      fill: ${Color.blue};
    23      transition: opacity ${AnimDuration.default} ease;
    24    }
    25    .triggerModeSvg-isAuto {
    26      fill: ${Color.gray50};
    27      transition: opacity ${AnimDuration.default} ease;
    28    }
    29  
    30    &.is-manual {
    31      .strokeStd {
    32        stroke: ${Color.blue};
    33      }
    34      .triggerModeSvg-isManual {
    35        opacity: 1;
    36      }
    37      .triggerModeSvg-isAuto {
    38        opacity: 0;
    39      }
    40    }
    41  `
    42  
    43  type TriggerModeToggleProps = {
    44    resourceName: string
    45    triggerMode: TriggerMode
    46  }
    47  
    48  export const ToggleTriggerModeTooltip = {
    49    isManual: "Manual: File changes don’t trigger updates",
    50    isAuto: "Auto: File changes trigger update",
    51  }
    52  
    53  const titleText = (isManual: boolean): string => {
    54    if (isManual) {
    55      return ToggleTriggerModeTooltip.isManual
    56    } else {
    57      return ToggleTriggerModeTooltip.isAuto
    58    }
    59  }
    60  
    61  export function toggleTriggerMode(name: string, mode: TriggerMode) {
    62    let url = "/api/override/trigger_mode"
    63  
    64    fetch(url, {
    65      method: "post",
    66      body: JSON.stringify({
    67        manifest_names: [name],
    68        trigger_mode: mode,
    69      }),
    70    }).then((response) => {
    71      if (!response.ok) {
    72        console.log(response)
    73      }
    74    })
    75  }
    76  
    77  export default function OverviewTableTriggerModeToggle(
    78    props: TriggerModeToggleProps
    79  ) {
    80    let isManualTriggerMode =
    81      props.triggerMode == TriggerMode.TriggerModeManualWithAutoInit ||
    82      props.triggerMode == TriggerMode.TriggerModeManual
    83    let desiredMode = isManualTriggerMode
    84      ? // if this manifest WAS Manual_NoInit and hadn't built yet, no guarantee that user wants it to initially build now, but seems like an OK guess
    85        TriggerMode.TriggerModeAuto
    86      : // Either manifest was Auto_AutoInit and has already built and the fact that it's now NoInit doesn't make a diff, or was Auto_NoInit in which case we want to preserve the NoInit behavior
    87        TriggerMode.TriggerModeManual
    88    let onClick = (e: any) => {
    89      toggleTriggerMode(props.resourceName, desiredMode)
    90    }
    91  
    92    return (
    93      <StyledTriggerModeToggle
    94        className={isManualTriggerMode ? "is-manual" : ""}
    95        onClick={onClick}
    96        title={titleText(isManualTriggerMode)}
    97        analyticsName="ui.web.toggleTriggerMode"
    98        analyticsTags={{ toMode: desiredMode.toString() }}
    99      >
   100        <TriggerModeButtonSvg />
   101      </StyledTriggerModeToggle>
   102    )
   103  }