feat(integration-directory): plugin detailed view #16821
Conversation
…etsentry/sentry into feat/plugin-detailed-view
| @@ -105,6 +105,7 @@ def get(self, request, organization): | |||
| "projectName": project.name, # TODO(steve): do we need? | |||
| "enabled": plugin_info["enabled"], | |||
| "configured": plugin_info["configured"], # TODO(steve): do we need? | |||
| "projectPlatform": project.platform, | |||
There was a problem hiding this comment.
Needed to add this so we can render the project badge
| </Button> | ||
| ) : ( | ||
| <StyledButton | ||
| borderless |
There was a problem hiding this comment.
Why borderless in this context?
There was a problem hiding this comment.
@evanpurkhiser It definitely doesn't look good here, that's for sure. We really just copy-pasted these buttons from the existing integrations page where it looks better:
Right now, we are waiting for a proper design from Chris. We'll tune up all the styling on this page once we know what it should look like.
| const features = plugin.featureDescriptions.map(f => ({ | ||
| featureGate: f.featureGate, | ||
| description: ( | ||
| <FeatureListItem | ||
| dangerouslySetInnerHTML={{__html: singleLineRenderer(f.description)}} | ||
| /> | ||
| ), | ||
| })); |
There was a problem hiding this comment.
Do we have to use dangerouslySetInnerHTML because the descriptions have actual HTML tags in them? If so, isn't it risky to allow users to write HTML that would show up on Sentry?
There was a problem hiding this comment.
It's markdown, the markdown parser prevents HTML
There was a problem hiding this comment.
@leeandher Good point, I actually don't think in this case we need to use that here. But just so you know, singleLineRenderer will actually sanitize the inputs so it wouldn't be risky.
src/sentry/static/sentry/app/views/organizationIntegrations/pluginDetailedView.tsx
Outdated
Show resolved
Hide resolved
src/sentry/static/sentry/app/views/organizationIntegrations/pluginDetailedView.tsx
Outdated
Show resolved
Hide resolved
| getTabDiplay(tab: Tab) { | ||
| //we want to show project configurations to make it more clear | ||
| if (tab === 'configurations') { | ||
| return 'project configurations'; | ||
| } | ||
| return tab; | ||
| } |
There was a problem hiding this comment.
This function, or where it's implemented should be surrounded by the t() function, right?
There was a problem hiding this comment.
The raw strings are always the things that should be wrapped in t(), using a variable in t defeats it, since we can't map raw strings to translations then
There was a problem hiding this comment.
@evanpurkhiser Is that true? What if we have translations for the different values of the input of t()?
| @@ -40,7 +40,7 @@ export default class PluginRow extends React.Component<Props> { | |||
| <ProviderDetails> | |||
| <Status enabled={this.isEnabled} /> | |||
| <StyledLink | |||
| to={`/settings/${slug}/plugins/${plugin.slug}?tab=configurations`} | |||
| to={`/settings/${slug}/plugins/${plugin.slug}/?tab=configurations`} | |||
There was a problem hiding this comment.
had to add the trailing / so the link works properly
src/sentry/static/sentry/app/views/organizationIntegrations/installedPlugin.tsx
Show resolved
Hide resolved
|
Dang, looks good! |
This PR adds the detailed view for plugins in the new integration directory. Here are some nifty screenshots:
Information tab:
Project Config tab:
You'll notice that the information tab contains information about the features that was added in this PR #16797. We pull them off the
feature_descriptionsof the plugin classes.For the configurations tab, I decided to call it
Project Configurationsso it's a bit more clear that these are project specific. The items you see in the rows have Project Badges so they look like projects elsewhere in Sentry.You'll notice we have the following buttons in the rows:
At the top we have the
Add to Projectbutton. Clicking it generates the project select modal:Doesn't look that great now but we will probably improve it once we have a proper design.