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

     1  import React from "react"
     2  import { MemoryRouter } from "react-router"
     3  import LogStore from "./LogStore"
     4  import PathBuilder from "./PathBuilder"
     5  import { ResourceNavContextProvider } from "./ResourceNav"
     6  import SidebarItem from "./SidebarItem"
     7  import SidebarItemView, { SidebarItemViewProps } from "./SidebarItemView"
     8  import { Width } from "./style-helpers"
     9  import { oneResource } from "./testdata"
    10  import {
    11    ResourceName,
    12    ResourceStatus,
    13    ResourceView,
    14    TriggerMode,
    15  } from "./types"
    16  
    17  let pathBuilder = PathBuilder.forTesting("localhost", "/")
    18  
    19  function ItemWrapper(props: { children: React.ReactNode }) {
    20    let resourceNav = {
    21      selectedResource: "",
    22      invalidResource: "",
    23      openResource: (name: string) => {},
    24    }
    25    return (
    26      <MemoryRouter initialEntries={["/"]}>
    27        <ResourceNavContextProvider value={resourceNav}>
    28          <div style={{ width: `${Width.sidebarDefault}px`, margin: "100px" }}>
    29            {props.children}
    30          </div>
    31        </ResourceNavContextProvider>
    32      </MemoryRouter>
    33    )
    34  }
    35  
    36  type optionFn = (item: SidebarItemViewProps) => void
    37  
    38  function withName(n: string): optionFn {
    39    return (props: SidebarItemViewProps) => {
    40      let item = props.item
    41      item.name = n
    42    }
    43  }
    44  
    45  function withBuildStatusOnly(status: ResourceStatus): optionFn {
    46    return (props: SidebarItemViewProps) => {
    47      let item = props.item
    48      item.buildStatus = status
    49      item.runtimeStatus = ResourceStatus.None
    50      if (status === ResourceStatus.Building) {
    51        item.currentBuildStartTime = new Date(Date.now() - 1).toISOString()
    52      }
    53      if (
    54        status === ResourceStatus.Unhealthy ||
    55        status === ResourceStatus.Warning
    56      ) {
    57        item.buildAlertCount = 1
    58      }
    59    }
    60  }
    61  
    62  function withStatus(status: ResourceStatus): optionFn {
    63    return (props: SidebarItemViewProps) => {
    64      let item = props.item
    65      item.buildStatus = status
    66      item.runtimeStatus = status
    67      if (status === ResourceStatus.Building) {
    68        item.currentBuildStartTime = new Date(Date.now() - 1).toISOString()
    69      }
    70      if (
    71        status === ResourceStatus.Unhealthy ||
    72        status === ResourceStatus.Warning
    73      ) {
    74        item.buildAlertCount = 1
    75        item.runtimeAlertCount = 1
    76      }
    77    }
    78  }
    79  
    80  function withManualTrigger(): optionFn {
    81    return (props: SidebarItemViewProps) => {
    82      let item = props.item
    83      item.triggerMode = TriggerMode.TriggerModeManual
    84      item.hasPendingChanges = true
    85    }
    86  }
    87  
    88  function withManualInit(): optionFn {
    89    return (props: SidebarItemViewProps) => {
    90      let item = props.item
    91      item.triggerMode = TriggerMode.TriggerModeAutoWithManualInit
    92      item.lastBuild = null
    93    }
    94  }
    95  
    96  function withQueuedTrigger(): optionFn {
    97    return (props: SidebarItemViewProps) => {
    98      let item = props.item
    99      item.triggerMode = TriggerMode.TriggerModeManual
   100      item.hasPendingChanges = true
   101      item.queued = true
   102    }
   103  }
   104  
   105  type Args = { selected: boolean }
   106  
   107  function withArgs(args: Args): optionFn {
   108    return (props: SidebarItemViewProps) => {
   109      props.selected = args.selected
   110    }
   111  }
   112  
   113  function itemView(...options: optionFn[]) {
   114    let ls = new LogStore()
   115    let item = new SidebarItem(oneResource({}), ls)
   116    let props = {
   117      item: item,
   118      selected: false,
   119      resourceView: ResourceView.Log,
   120      pathBuilder: pathBuilder,
   121    }
   122    options.forEach((option) => option(props))
   123    return (
   124      <ItemWrapper>
   125        <SidebarItemView {...props} />
   126      </ItemWrapper>
   127    )
   128  }
   129  
   130  export default {
   131    title: "New UI / SidebarItemView",
   132    args: { selected: false },
   133  }
   134  
   135  export const OneItemBuilding = (args: Args) =>
   136    itemView(withArgs(args), withStatus(ResourceStatus.Building))
   137  
   138  export const OneItemPending = (args: Args) =>
   139    itemView(withArgs(args), withStatus(ResourceStatus.Pending))
   140  
   141  export const OneItemHealthy = (args: Args) =>
   142    itemView(withArgs(args), withStatus(ResourceStatus.Healthy))
   143  
   144  export const OneItemUnhealthy = (args: Args) =>
   145    itemView(withArgs(args), withStatus(ResourceStatus.Unhealthy))
   146  
   147  export const OneItemWarning = (args: Args) =>
   148    itemView(withArgs(args), withStatus(ResourceStatus.Warning))
   149  
   150  export const OneItemNone = (args: Args) =>
   151    itemView(withArgs(args), withStatus(ResourceStatus.None))
   152  
   153  export const OneItemTrigger = (args: Args) =>
   154    itemView(
   155      withArgs(args),
   156      withStatus(ResourceStatus.Pending),
   157      withManualTrigger()
   158    )
   159  
   160  export const OneItemManualInit = (args: Args) =>
   161    itemView(withArgs(args), withStatus(ResourceStatus.None), withManualInit())
   162  
   163  export const OneItemQueuedTrigger = (args: Args) =>
   164    itemView(
   165      withArgs(args),
   166      withStatus(ResourceStatus.Pending),
   167      withQueuedTrigger()
   168    )
   169  
   170  export const OneItemLongName = (args: Args) =>
   171    itemView(withArgs(args), withName("longnamelongnameverylongname"))
   172  
   173  export const Tiltfile = (args: Args) =>
   174    itemView(
   175      withArgs(args),
   176      withName(ResourceName.tiltfile),
   177      withBuildStatusOnly(ResourceStatus.Healthy)
   178    )