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 }