Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ref(dashboards): Namespaced Widget components #85238

Merged
merged 13 commits into from
Feb 14, 2025

Conversation

gggritso
Copy link
Member

@gggritso gggritso commented Feb 14, 2025

A big re-structure of the components that make up our standard widgets. Improves clarity (simpler component names), removed junk (single-use components that don't need their own files) reduces the number of imports (components are namespaced), and adds more documentation.

Changes

There are a few changes in this PR, all linked together. The easiest way to explain them is in context, so here's an example, taken straight from the new documentation:

// No more `WidgetLayout`. Just `Widget` is clearer in its purpose.
<Widget
  // No need to import `WidgetTitle` component. Use the namespaced `Widget.TextTitle`
  Title={<Widget.TextTitle title="epm() : /insights/frontend/assets" />}
  Actions={
    // New `Widget.Toolbar` ensures spacing of the elements
    <Widget.Toolbar>
      // We used to have a `WidgetButton` component, but it was only used in one place and didn't really provide any value
      <Button size="xs">Say More</Button>
      <Button size="xs">Say Less</Button>
      // `Widget.Description` for rendering description tooltips
      <Widget.Description
        title="epm() : /insights/frontend/assets"
        description="Events received, tracked per minute"
      />
    </Widget.Toolbar>
  }
  Visualization={
    isLoading ? (
      // No guesswork for how to render placeholders! Visualizations always have a `.Placeholder` component attached to them
      <TimeSeriesWidgetVisualization.Placeholder />
    ) : hasError ? (
      // Namespaced `Widget.Error` component
      <Widget.Error error="Oh no!" />
    ) : (
      <TimeSeriesWidgetVisualization
        visualizationType="line"
        timeSeries={[sampleDurationTimeSeries]}
      />
    )
  }
  Footer={<span>This data is incomplete!</span>}
/>

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Feb 14, 2025
@gggritso gggritso requested a review from JonasBa February 14, 2025 15:54
@gggritso gggritso marked this pull request as ready for review February 14, 2025 15:54
@gggritso gggritso requested review from a team as code owners February 14, 2025 15:54
Copy link
Member

@JonasBa JonasBa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I much prefer this sort of API, a bit more tedious to write, but easier to follow, understand, and ultimately a lot more flexible too!

Add some prefixes to disambiguate
@gggritso
Copy link
Member Author

@JonasBa makes sense! I'm not very sensitive to polluting autocomplete since it also includes the paths, but I agree that for very generic names like "Toolbar" this is a good idea. I think I address your naming suggestions wholesale, but let me know if I missed anything 🙏🏻

This comment was marked as outdated.

Copy link
Member

@JonasBa JonasBa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work @gggritso

@gggritso gggritso merged commit db043e0 into master Feb 14, 2025
41 checks passed
@gggritso gggritso deleted the ref/dashboards/namespaced-widget-layout-components branch February 14, 2025 21:40
@github-actions github-actions bot locked and limited conversation to collaborators Mar 2, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants