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