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

     1  import React, { useEffect, useState } from "react"
     2  import { MemoryRouter } from "react-router"
     3  import SplitPane from "react-split-pane"
     4  import Features, { FeaturesTestProvider, Flag } from "./feature"
     5  import LogStore, { LogStoreProvider } from "./LogStore"
     6  import OverviewResourceSidebar from "./OverviewResourceSidebar"
     7  import { ResourceGroupsContextProvider } from "./ResourceGroupsContext"
     8  import { ResourceListOptionsProvider } from "./ResourceListOptionsContext"
     9  import { SidebarContextProvider, useSidebarContext } from "./SidebarContext"
    10  import { Width } from "./style-helpers"
    11  import {
    12    nResourceView,
    13    nResourceWithLabelsView,
    14    oneResource,
    15    tenResourceView,
    16    tiltfileResource,
    17    twoResourceView,
    18  } from "./testdata"
    19  import { LogLevel, UIResource, UpdateStatus } from "./types"
    20  
    21  export default {
    22    title: "New UI/Log View/OverviewResourceSidebar",
    23    decorators: [
    24      (Story: any, context: any) => {
    25        const features = new Features({
    26          [Flag.Labels]: context?.args?.labelsEnabled ?? true,
    27        })
    28        return (
    29          <MemoryRouter initialEntries={["/"]}>
    30            <FeaturesTestProvider value={features}>
    31              <ResourceGroupsContextProvider>
    32                <SidebarContextProvider>
    33                  <div style={{ margin: "-1rem", height: "80vh" }}>
    34                    <Story />
    35                  </div>
    36                </SidebarContextProvider>
    37              </ResourceGroupsContextProvider>
    38            </FeaturesTestProvider>
    39          </MemoryRouter>
    40        )
    41      },
    42    ],
    43    argTypes: {
    44      labelsEnabled: {
    45        name: "Group resources by label enabled",
    46        control: {
    47          type: "boolean",
    48        },
    49        defaultValue: true,
    50      },
    51      disableResourcesEnabled: {
    52        name: "See disabled resources and bulk actions",
    53        control: {
    54          type: "boolean",
    55        },
    56        defaultValue: true,
    57      },
    58    },
    59  }
    60  
    61  function OverviewResourceSidebarHarness(props: {
    62    name: string
    63    view: Proto.webviewView
    64  }) {
    65    let { name, view } = props
    66    const { isSidebarOpen, setSidebarOpen, setSidebarClosed } =
    67      useSidebarContext()
    68  
    69    const [paneSize, setPaneSize] = useState<number>(
    70      isSidebarOpen ? Width.sidebarDefault : Width.sidebarMinimum
    71    )
    72  
    73    useEffect(() => {
    74      setPaneSize(
    75        isSidebarOpen ? Width.sidebarDefault : Width.sidebarMinimum + 0.01
    76      )
    77    }, [isSidebarOpen])
    78  
    79    const handleSplitPaneResize = (newSize: number) => {
    80      if (newSize < Width.sidebarBreakpoint && isSidebarOpen) {
    81        setSidebarClosed()
    82      } else if (newSize >= Width.sidebarBreakpoint && !isSidebarOpen) {
    83        setSidebarOpen()
    84      }
    85    }
    86    return (
    87      <SplitPane
    88        split="vertical"
    89        size={paneSize}
    90        minSize={Width.sidebarMinimum}
    91        onChange={handleSplitPaneResize}
    92        onDragFinished={() =>
    93          setPaneSize(isSidebarOpen ? Width.sidebarDefault : Width.sidebarMinimum)
    94        }
    95      >
    96        <OverviewResourceSidebar name={name} view={view} />
    97        <div></div>
    98      </SplitPane>
    99    )
   100  }
   101  
   102  export const TwoResources = () => (
   103    <OverviewResourceSidebarHarness name={"vigoda"} view={twoResourceView()} />
   104  )
   105  
   106  export const TenResources = () => (
   107    <OverviewResourceSidebarHarness name={"vigoda_1"} view={tenResourceView()} />
   108  )
   109  
   110  export const TenResourcesWithLabels = () => (
   111    <OverviewResourceSidebarHarness
   112      name={"vigoda_1"}
   113      view={nResourceWithLabelsView(10)}
   114    />
   115  )
   116  
   117  export const OneHundredResources = () => (
   118    <OverviewResourceSidebarHarness name={"vigoda_1"} view={nResourceView(100)} />
   119  )
   120  
   121  export function TwoResourcesTwoTests() {
   122    let all: UIResource[] = [
   123      tiltfileResource(),
   124      oneResource({ isBuilding: true }),
   125      oneResource({ name: "snack" }),
   126      oneResource({ name: "beep" }),
   127      oneResource({ name: "boop" }),
   128    ]
   129    let view = { uiResources: all, tiltfileKey: "test" }
   130    return <OverviewResourceSidebarHarness name={""} view={view} />
   131  }
   132  
   133  export function TestsWithErrors() {
   134    let logStore = new LogStore()
   135    let segments = []
   136    let spans = {} as any
   137    let all: UIResource[] = [tiltfileResource()]
   138    for (let i = 0; i < 8; i++) {
   139      let name = "test_" + i
   140      let test = oneResource({ name })
   141  
   142      let spanId = "build-" + i
   143      spans[spanId] = { manifestName: name }
   144  
   145      test.status!.buildHistory![0].spanID = spanId
   146      if (i % 2 === 0) {
   147        test.status!.buildHistory![0].error = "egads!"
   148        test.status!.updateStatus = UpdateStatus.Error
   149  
   150        segments.push({
   151          spanId,
   152          text: `egads ${i}!\n`,
   153          time: new Date().toString(),
   154          level: LogLevel.ERROR,
   155          anchor: true,
   156        })
   157      }
   158      all.push(test)
   159    }
   160  
   161    logStore.append({ spans, segments })
   162  
   163    let view = { uiResources: all, tiltfileKey: "test" }
   164    return (
   165      <MemoryRouter>
   166        <LogStoreProvider value={logStore}>
   167          <ResourceListOptionsProvider>
   168            <OverviewResourceSidebarHarness name={""} view={view} />
   169          </ResourceListOptionsProvider>
   170        </LogStoreProvider>
   171      </MemoryRouter>
   172    )
   173  }