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

     1  import React, { useMemo } from "react"
     2  import styled from "styled-components"
     3  import { buttonsByComponent } from "./ApiButton"
     4  import { useLogAlertIndex } from "./LogStore"
     5  import { usePathBuilder } from "./PathBuilder"
     6  import { useResourceListOptions } from "./ResourceListOptionsContext"
     7  import SidebarItem from "./SidebarItem"
     8  import SidebarResources from "./SidebarResources"
     9  import { Width } from "./style-helpers"
    10  import { ResourceName, ResourceView } from "./types"
    11  import ChevronRightIcon from "@material-ui/icons/ChevronRight"
    12  import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"
    13  import { InstrumentedButton } from "./instrumentedComponents"
    14  import { useSidebarContext } from "./SidebarContext"
    15  import { AnimDuration, Color, Font, FontSize, SizeUnit } from "./style-helpers"
    16  import { Tooltip } from "@material-ui/core"
    17  import { mixinResetButtonStyle } from "./style-helpers"
    18  import { AnalyticsAction } from "./analytics"
    19  import { OverviewSidebarToggle } from "./OverviewSidebarToggle"
    20  
    21  type OverviewResourceSidebarProps = {
    22    name: string
    23    view: Proto.webviewView
    24  }
    25  
    26  let OverviewResourceSidebarRoot = styled.div`
    27    display: flex;
    28    flex-direction: column;
    29    flex-shrink: 1;
    30    flex-grow: 1;
    31    height: 100%;
    32    min-width: ${Width.sidebarMinimum}px;
    33  
    34    &.is-open {
    35      min-width: ${Width.sidebarDefault}px;
    36    }
    37  `
    38  
    39  export default function OverviewResourceSidebar(
    40    props: OverviewResourceSidebarProps
    41  ) {
    42    let logAlertIndex = useLogAlertIndex()
    43    let pathBuilder = usePathBuilder()
    44    let resources = props.view.uiResources || []
    45    let buttons = useMemo(
    46      () => buttonsByComponent(props.view.uiButtons),
    47      [props.view.uiButtons]
    48    )
    49    let items = resources.map((res) => {
    50      let stopBuildButton = buttons.get(res.metadata?.name!)?.stopBuild
    51      return new SidebarItem(res, logAlertIndex, stopBuildButton)
    52    })
    53    let selected = props.name
    54    if (props.name === ResourceName.all) {
    55      selected = ""
    56    }
    57    const { options } = useResourceListOptions()
    58    const { isSidebarOpen } = useSidebarContext()
    59  
    60    return (
    61      <OverviewResourceSidebarRoot className={isSidebarOpen ? "is-open" : ""}>
    62        {
    63          /* If the sidebar is toggled, only show the toggle button */
    64          isSidebarOpen ? (
    65            <SidebarResources
    66              items={items}
    67              selected={selected}
    68              resourceView={ResourceView.OverviewDetail}
    69              pathBuilder={pathBuilder}
    70              resourceListOptions={options}
    71            />
    72          ) : (
    73            <OverviewSidebarToggle />
    74          )
    75        }
    76      </OverviewResourceSidebarRoot>
    77    )
    78  }