github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewSidebarOptions.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 { TILTFILE_LABEL, UNLABELED_LABEL } from "./labels"
     8  import { CollapseButton, ExpandButton } from "./resourceListOptionsButtons"
     9  import { useResourceListOptions } from "./ResourceListOptionsContext"
    10  import { ResourceNameFilter } from "./ResourceNameFilter"
    11  import SidebarItem from "./SidebarItem"
    12  import { sidebarItemIsDisabled } from "./SidebarItemView"
    13  import {
    14    Color,
    15    Font,
    16    FontSize,
    17    mixinResetListStyle,
    18    SizeUnit,
    19  } from "./style-helpers"
    20  import { ResourceName } from "./types"
    21  import { OverviewSidebarToggle } from "./OverviewSidebarToggle"
    22  
    23  export const OverviewSidebarOptionsRoot = styled.div`
    24    display: flex;
    25    justify-content: space-between;
    26    font-family: ${Font.monospace};
    27    font-size: ${FontSize.smallest};
    28    padding-left: ${SizeUnit(0.5)};
    29    padding-right: ${SizeUnit(0.5)};
    30    color: ${Color.offWhite};
    31    flex-direction: column;
    32  `
    33  
    34  const OverviewSidebarOptionsButtonRow = styled.div`
    35    align-items: center;
    36    display: flex;
    37    flex-direction: row;
    38    justify-content: space-between;
    39    width: 100%;
    40  `
    41  
    42  export const FilterOptionList = styled.ul`
    43    ${mixinResetListStyle};
    44    display: flex;
    45    align-items: center;
    46    user-select: none; /* Prevent unsightly highlighting on the label */
    47  `
    48  
    49  export const SidebarOptionsLabel = styled(FormControlLabel)`
    50    .MuiFormControlLabel-label.MuiTypography-body1 {
    51      line-height: 1;
    52    }
    53  `
    54  
    55  export const CheckboxToggle = styled(InstrumentedCheckbox)`
    56    &.MuiCheckbox-root,
    57    &.Mui-checked {
    58      color: ${Color.gray60};
    59    }
    60  `
    61  
    62  // Create a list of all the groups from the list of resources.
    63  //
    64  // Sadly, this logic is duplicated several times across table and sidebar,
    65  // but there's no easy way to consolidate it right now.
    66  function toGroups(
    67    items: SidebarItem[],
    68    hideDisabledResources: boolean
    69  ): string[] {
    70    let hasUnlabeled = false
    71    let hasTiltfile = false
    72    let hasLabels: { [key: string]: boolean } = {}
    73    items.forEach((item) => {
    74      const isDisabled = sidebarItemIsDisabled(item)
    75      if (hideDisabledResources && isDisabled) {
    76        return
    77      }
    78  
    79      const labels = item.labels
    80      const isTiltfile = item.name === ResourceName.tiltfile
    81      if (labels.length) {
    82        labels.forEach((label) => {
    83          hasLabels[label] = true
    84        })
    85      } else if (isTiltfile) {
    86        hasTiltfile = true
    87      } else {
    88        hasUnlabeled = true
    89      }
    90    })
    91  
    92    let groups = Object.keys(hasLabels)
    93    if (groups.length) {
    94      if (hasTiltfile) {
    95        groups.push(TILTFILE_LABEL)
    96      }
    97      if (hasUnlabeled) {
    98        groups.push(UNLABELED_LABEL)
    99      }
   100    }
   101    return groups
   102  }
   103  
   104  export function OverviewSidebarOptions(props: { items?: SidebarItem[] }) {
   105    const features = useFeatures()
   106    const { options, setOptions } = useResourceListOptions()
   107    let toggleDisabledResources = useCallback(() => {
   108      setOptions({
   109        showDisabledResources: !options.showDisabledResources,
   110      })
   111    }, [options.showDisabledResources])
   112  
   113    const labelsEnabled = features.isEnabled(Flag.Labels)
   114    let items = props.items || []
   115  
   116    const hideDisabledResources = !options.showDisabledResources
   117  
   118    // TODO(nick): Enable/disable the expand/collapse button based
   119    // on whether the groups are shown and the current group state.
   120    let groups = useMemo(
   121      () => toGroups(items, hideDisabledResources),
   122      [items, hideDisabledResources]
   123    )
   124    const resourceFilterApplied = options.resourceNameFilter.length > 0
   125    const displayResourceGroups =
   126      labelsEnabled && groups.length && !resourceFilterApplied
   127  
   128    const disabledResourcesToggle = (
   129      <SidebarOptionsLabel
   130        control={
   131          <CheckboxToggle
   132            analyticsName="ui.web.disabledResourcesToggle"
   133            analyticsTags={{ type: AnalyticsType.Detail }}
   134            size="small"
   135            checked={options.showDisabledResources}
   136            onClick={toggleDisabledResources}
   137          />
   138        }
   139        label="Show disabled resources"
   140      />
   141    )
   142  
   143    return (
   144      <OverviewSidebarOptionsRoot>
   145        <OverviewSidebarOptionsButtonRow>
   146          <ResourceNameFilter />
   147          <OverviewSidebarToggle />
   148        </OverviewSidebarOptionsButtonRow>
   149        <OverviewSidebarOptionsButtonRow>
   150          <SidebarOptionsLabel
   151            control={
   152              <CheckboxToggle
   153                analyticsName="ui.web.alertsOnTopToggle"
   154                size="small"
   155                checked={options.alertsOnTop}
   156                onClick={(_e) =>
   157                  setOptions({ alertsOnTop: !options.alertsOnTop })
   158                }
   159              />
   160            }
   161            label="Alerts on top"
   162          />
   163          <div>
   164            <ExpandButton
   165              disabled={!displayResourceGroups}
   166              analyticsType={AnalyticsType.Detail}
   167            />
   168            <CollapseButton
   169              groups={groups}
   170              disabled={!displayResourceGroups}
   171              analyticsType={AnalyticsType.Detail}
   172            />
   173          </div>
   174        </OverviewSidebarOptionsButtonRow>
   175        {disabledResourcesToggle}
   176      </OverviewSidebarOptionsRoot>
   177    )
   178  }