github.com/tilt-dev/tilt@v0.36.0/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 { OverviewSidebarToggle } from "./OverviewSidebarToggle"
    19  
    20  type OverviewResourceSidebarProps = {
    21    name: string
    22    view: Proto.webviewView
    23  }
    24  
    25  let OverviewResourceSidebarRoot = styled.div`
    26    display: flex;
    27    flex-direction: column;
    28    flex-shrink: 1;
    29    flex-grow: 1;
    30    height: 100%;
    31    min-width: ${Width.sidebarMinimum}px;
    32  
    33    &.is-open {
    34      min-width: ${Width.sidebarDefault}px;
    35    }
    36  `
    37  
    38  export default function OverviewResourceSidebar(
    39    props: OverviewResourceSidebarProps
    40  ) {
    41    let logAlertIndex = useLogAlertIndex()
    42    let pathBuilder = usePathBuilder()
    43    let resources = props.view.uiResources || []
    44    let buttons = useMemo(
    45      () => buttonsByComponent(props.view.uiButtons),
    46      [props.view.uiButtons]
    47    )
    48    let items = resources.map((res) => {
    49      let stopBuildButton = buttons.get(res.metadata?.name!)?.stopBuild
    50      return new SidebarItem(res, logAlertIndex, stopBuildButton)
    51    })
    52    let selected = props.name
    53    if (props.name === ResourceName.all) {
    54      selected = ""
    55    }
    56    const { options } = useResourceListOptions()
    57    const { isSidebarOpen } = useSidebarContext()
    58  
    59    return (
    60      <OverviewResourceSidebarRoot className={isSidebarOpen ? "is-open" : ""}>
    61        {
    62          /* If the sidebar is toggled, only show the toggle button */
    63          isSidebarOpen ? (
    64            <SidebarResources
    65              items={items}
    66              selected={selected}
    67              resourceView={ResourceView.OverviewDetail}
    68              pathBuilder={pathBuilder}
    69              resourceListOptions={options}
    70            />
    71          ) : (
    72            <OverviewSidebarToggle />
    73          )
    74        }
    75      </OverviewResourceSidebarRoot>
    76    )
    77  }