mirror of
https://github.com/grafana/grafana.git
synced 2025-08-06 03:09:26 +08:00
Plugins: Add elementId attribute to angular_deprecation_docs_clicked interaction (#72800)
Add elementId attribute to angular_deprecation_docs_clicked interaction
This commit is contained in:
@ -109,6 +109,7 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
|
||||
pluginId={plugin.meta.id}
|
||||
pluginType={plugin.meta.type}
|
||||
angularSupportEnabled={config?.angularSupportEnabled}
|
||||
interactionElementId="panel-options"
|
||||
/>
|
||||
)}
|
||||
<div className={styles.formRow}>
|
||||
|
@ -82,6 +82,7 @@ export function PluginDetailsPage({
|
||||
pluginId={plugin.id}
|
||||
pluginType={plugin.type}
|
||||
showPluginDetailsLink={false}
|
||||
interactionElementId="plugin-details-page"
|
||||
/>
|
||||
)}
|
||||
<PluginDetailsSignature plugin={plugin} className={styles.alert} />
|
||||
|
@ -89,12 +89,13 @@ describe('AngularDeprecationPluginNotice', () => {
|
||||
});
|
||||
|
||||
it('reports interaction when clicking on the link', async () => {
|
||||
render(<AngularDeprecationPluginNotice pluginId="test-id" />);
|
||||
render(<AngularDeprecationPluginNotice pluginId="test-id" interactionElementId="some-identifier" />);
|
||||
const c = 'Read our deprecation notice and migration advice.';
|
||||
expect(screen.getByText(c)).toBeInTheDocument();
|
||||
await userEvent.click(screen.getByText(c));
|
||||
expect(reportInteraction).toHaveBeenCalledWith('angular_deprecation_docs_clicked', {
|
||||
pluginId: 'test-id',
|
||||
elementId: 'some-identifier',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -12,6 +12,8 @@ type Props = {
|
||||
|
||||
angularSupportEnabled?: boolean;
|
||||
showPluginDetailsLink?: boolean;
|
||||
|
||||
interactionElementId?: string;
|
||||
};
|
||||
|
||||
function deprecationMessage(pluginType?: string, angularSupportEnabled?: boolean): string {
|
||||
@ -42,8 +44,17 @@ function deprecationMessage(pluginType?: string, angularSupportEnabled?: boolean
|
||||
// An Alert showing information about Angular deprecation notice.
|
||||
// If the plugin does not use Angular (!plugin.angularDetected), it returns null.
|
||||
export function AngularDeprecationPluginNotice(props: Props): React.ReactElement | null {
|
||||
const { className, angularSupportEnabled, pluginId, pluginType, showPluginDetailsLink } = props;
|
||||
const { className, angularSupportEnabled, pluginId, pluginType, showPluginDetailsLink, interactionElementId } = props;
|
||||
const [dismissed, setDismissed] = useState(false);
|
||||
|
||||
const interactionAttributes: Record<string, string> = {};
|
||||
if (pluginId) {
|
||||
interactionAttributes.pluginId = pluginId;
|
||||
}
|
||||
if (interactionElementId) {
|
||||
interactionAttributes.elementId = interactionElementId;
|
||||
}
|
||||
|
||||
return dismissed ? null : (
|
||||
<Alert severity="warning" title="Angular plugin" className={className} onRemove={() => setDismissed(true)}>
|
||||
<p>{deprecationMessage(pluginType, angularSupportEnabled)}</p>
|
||||
@ -56,9 +67,7 @@ export function AngularDeprecationPluginNotice(props: Props): React.ReactElement
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
onClick={() => {
|
||||
reportInteraction('angular_deprecation_docs_clicked', {
|
||||
pluginId,
|
||||
});
|
||||
reportInteraction('angular_deprecation_docs_clicked', interactionAttributes);
|
||||
}}
|
||||
>
|
||||
Read our deprecation notice and migration advice.
|
||||
|
@ -261,6 +261,7 @@ export class QueryGroup extends PureComponent<Props, State> {
|
||||
pluginType={PluginType.datasource}
|
||||
angularSupportEnabled={config?.angularSupportEnabled}
|
||||
showPluginDetailsLink={true}
|
||||
interactionElementId="datasource-query"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user