github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewTablePane.tsx (about)

     1  import React from "react"
     2  import styled from "styled-components"
     3  import { AnalyticsType } from "./analytics"
     4  import HeaderBar from "./HeaderBar"
     5  import OverviewTable from "./OverviewTable"
     6  import { OverviewTableBulkActions } from "./OverviewTableBulkActions"
     7  import { OverviewTableDisplayOptions } from "./OverviewTableDisplayOptions"
     8  import { ResourceNameFilter } from "./ResourceNameFilter"
     9  import StarredResourceBar, {
    10    starredResourcePropsFromView,
    11  } from "./StarredResourceBar"
    12  import { Color, SizeUnit, Width, ZIndex } from "./style-helpers"
    13  
    14  type OverviewTablePaneProps = {
    15    view: Proto.webviewView
    16    isSocketConnected: boolean
    17  }
    18  
    19  let OverviewTablePaneStyle = styled.div`
    20    display: flex;
    21    flex-direction: column;
    22    width: 100%;
    23    height: 100vh;
    24    background-color: ${Color.gray20};
    25  `
    26  
    27  const OverviewTableStickyNav = styled.div`
    28    background-color: ${Color.gray20};
    29    position: sticky;
    30    top: 0;
    31    z-index: ${ZIndex.TableStickyHeader};
    32  `
    33  
    34  const OverviewTableMenu = styled.section`
    35    display: flex;
    36    flex-direction: row;
    37    align-items: center;
    38    margin-left: auto;
    39    margin-right: auto;
    40    /* Max and min width are based on fixed table layout and column widths */
    41    max-width: 2000px;
    42    min-width: 1400px;
    43  
    44    @media screen and (max-width: 2200px) {
    45      margin-left: ${SizeUnit(1 / 2)};
    46      margin-right: ${SizeUnit(1 / 2)};
    47    }
    48  `
    49  
    50  const OverviewTableResourceNameFilter = styled(ResourceNameFilter)`
    51    margin-left: ${SizeUnit(1 / 2)};
    52    margin-right: ${SizeUnit(1 / 2)};
    53    min-width: ${Width.sidebarDefault}px;
    54  `
    55  
    56  export default function OverviewTablePane(props: OverviewTablePaneProps) {
    57    return (
    58      <OverviewTablePaneStyle>
    59        <OverviewTableStickyNav>
    60          <HeaderBar
    61            view={props.view}
    62            currentPage={AnalyticsType.Grid}
    63            isSocketConnected={props.isSocketConnected}
    64          />
    65          <StarredResourceBar {...starredResourcePropsFromView(props.view, "")} />
    66          <OverviewTableMenu aria-label="Resource menu">
    67            <OverviewTableResourceNameFilter />
    68            <OverviewTableBulkActions uiButtons={props.view.uiButtons} />
    69            <OverviewTableDisplayOptions resources={props.view.uiResources} />
    70          </OverviewTableMenu>
    71        </OverviewTableStickyNav>
    72        <OverviewTable view={props.view} />
    73      </OverviewTablePaneStyle>
    74    )
    75  }