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

     1  import React from "react"
     2  import { MemoryRouter } from "react-router"
     3  import Features, { FeaturesTestProvider, Flag } from "./feature"
     4  import OverviewTablePane from "./OverviewTablePane"
     5  import { ResourceGroupsContextProvider } from "./ResourceGroupsContext"
     6  import { ResourceListOptionsProvider } from "./ResourceListOptionsContext"
     7  import { ResourceSelectionProvider } from "./ResourceSelectionContext"
     8  import { StarredResourceMemoryProvider } from "./StarredResourcesContext"
     9  import {
    10    nResourceView,
    11    nResourceWithLabelsView,
    12    tenResourceView,
    13    twoResourceView,
    14  } from "./testdata"
    15  
    16  export default {
    17    title: "New UI/OverviewTablePane",
    18    decorators: [
    19      (Story: any, context: any) => {
    20        const features = new Features({
    21          [Flag.Labels]: context?.args?.labelsEnabled ?? true,
    22        })
    23        return (
    24          <MemoryRouter initialEntries={["/"]}>
    25            <FeaturesTestProvider value={features}>
    26              <ResourceListOptionsProvider>
    27                <StarredResourceMemoryProvider>
    28                  <ResourceGroupsContextProvider>
    29                    <ResourceSelectionProvider>
    30                      <div style={{ margin: "-1rem", height: "80vh" }}>
    31                        <Story />
    32                      </div>
    33                    </ResourceSelectionProvider>
    34                  </ResourceGroupsContextProvider>
    35                </StarredResourceMemoryProvider>
    36              </ResourceListOptionsProvider>
    37            </FeaturesTestProvider>
    38          </MemoryRouter>
    39        )
    40      },
    41    ],
    42    argTypes: {
    43      labelsEnabled: {
    44        name: "Group resources by label enabled",
    45        control: {
    46          type: "boolean",
    47        },
    48        defaultValue: true,
    49      },
    50    },
    51  }
    52  
    53  export const TwoResources = () => (
    54    <OverviewTablePane view={twoResourceView()} isSocketConnected={true} />
    55  )
    56  
    57  export const TenResources = () => (
    58    <OverviewTablePane view={tenResourceView()} isSocketConnected={true} />
    59  )
    60  
    61  export const TenResourcesWithLabels = () => (
    62    <OverviewTablePane
    63      view={nResourceWithLabelsView(10)}
    64      isSocketConnected={true}
    65    />
    66  )
    67  
    68  export const OneHundredResources = () => (
    69    <OverviewTablePane view={nResourceView(100)} isSocketConnected={true} />
    70  )
    71  
    72  export const OneHundredResourcesOneStar = () => (
    73    <StarredResourceMemoryProvider initialValueForTesting={["vigoda_2"]}>
    74      <OverviewTablePane view={nResourceView(100)} isSocketConnected={true} />
    75    </StarredResourceMemoryProvider>
    76  )
    77  
    78  export const OneHundredResourcesTenStars = () => {
    79    let items = [
    80      "vigoda_1",
    81      "vigoda_11",
    82      "vigoda_21",
    83      "vigoda_31",
    84      "vigoda_41",
    85      "vigoda_51",
    86      "vigoda_61",
    87      "vigoda_71",
    88      "vigoda_81",
    89      "vigoda_91",
    90    ]
    91    return (
    92      <StarredResourceMemoryProvider initialValueForTesting={items}>
    93        <OverviewTablePane view={nResourceView(100)} isSocketConnected={true} />
    94      </StarredResourceMemoryProvider>
    95    )
    96  }