github.com/tilt-dev/tilt@v0.36.0/web/src/OverviewTableDisplayOptions.tsx (about)

     1  import { FormControlLabel } from "@material-ui/core"
     2  import React, { useCallback, useMemo } from "react"
     3  import styled from "styled-components"
     4  import { Flag, useFeatures } from "./feature"
     5  import { InstrumentedCheckbox } from "./instrumentedComponents"
     6  import { getResourceLabels, TILTFILE_LABEL, UNLABELED_LABEL } from "./labels"
     7  import { CollapseButton, ExpandButton } from "./resourceListOptionsButtons"
     8  import { useResourceListOptions } from "./ResourceListOptionsContext"
     9  import { resourceIsDisabled } from "./ResourceStatus"
    10  import { Color, Font, FontSize } from "./style-helpers"
    11  import { ResourceName, UIResource } from "./types"
    12  
    13  const DisplayOptions = styled.div`
    14    margin-left: auto;
    15    font-family: ${Font.monospace};
    16    font-size: ${FontSize.smallest};
    17  `
    18  
    19  const DisplayOptionCheckbox = styled(InstrumentedCheckbox)`
    20    &.MuiCheckbox-root,
    21    &.Mui-checked {
    22      color: ${Color.gray60};
    23    }
    24  `
    25  
    26  // Create a list of all the groups from the list of resources.
    27  //
    28  // Sadly, this logic is duplicated across table and sidebar,
    29  // but there's no easy way to consolidate it right now.
    30  function toGroups(
    31    resources: UIResource[],
    32    hideDisabledResources: boolean
    33  ): string[] {
    34    let hasUnlabeled = false
    35    let hasTiltfile = false
    36    let hasLabels: { [key: string]: boolean } = {}
    37    resources.forEach((r) => {
    38      const resourceDisabled = resourceIsDisabled(r)
    39      if (hideDisabledResources && resourceDisabled) {
    40        return
    41      }
    42  
    43      const labels = getResourceLabels(r)
    44      const isTiltfile = r.metadata?.name === ResourceName.tiltfile
    45      if (labels.length) {
    46        labels.forEach((label) => {
    47          hasLabels[label] = true
    48        })
    49      } else if (isTiltfile) {
    50        hasTiltfile = true
    51      } else {
    52        hasUnlabeled = true
    53      }
    54    })
    55  
    56    let groups = Object.keys(hasLabels)
    57    if (groups.length) {
    58      if (hasTiltfile) {
    59        groups.push(TILTFILE_LABEL)
    60      }
    61      if (hasUnlabeled) {
    62        groups.push(UNLABELED_LABEL)
    63      }
    64    }
    65    return groups
    66  }
    67  
    68  export function OverviewTableDisplayOptions(props: {
    69    resources?: UIResource[]
    70  }) {
    71    const features = useFeatures()
    72    const { options, setOptions } = useResourceListOptions()
    73    let toggleDisabledResources = useCallback(() => {
    74      setOptions({
    75        showDisabledResources: !options.showDisabledResources,
    76      })
    77    }, [options.showDisabledResources])
    78  
    79    const labelsEnabled = features.isEnabled(Flag.Labels)
    80    let resources = props.resources || []
    81  
    82    const hideDisabledResources = !options.showDisabledResources
    83  
    84    // TODO(nick): Enable/disable the expand/collapse button based
    85    // on whether the groups are shown and the current group state.
    86    let groups = useMemo(
    87      () => toGroups(resources, hideDisabledResources),
    88      [resources, hideDisabledResources]
    89    )
    90    const resourceFilterApplied = options.resourceNameFilter.length > 0
    91    const displayResourceGroups =
    92      labelsEnabled && groups.length && !resourceFilterApplied
    93  
    94    return (
    95      <DisplayOptions>
    96        <FormControlLabel
    97          control={
    98            <DisplayOptionCheckbox
    99              size="small"
   100              checked={options.showDisabledResources}
   101              onClick={toggleDisabledResources}
   102            />
   103          }
   104          label="Show disabled resources"
   105        />
   106        <ExpandButton disabled={!displayResourceGroups} />
   107        <CollapseButton groups={groups} disabled={!displayResourceGroups} />
   108      </DisplayOptions>
   109    )
   110  }