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:
Giuseppe Guerra
2023-08-03 13:58:22 +02:00
committed by GitHub
parent 7147778dbd
commit 24e826aac0
5 changed files with 18 additions and 5 deletions

View File

@ -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}>

View File

@ -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} />

View File

@ -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',
});
});
});

View File

@ -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.

View File

@ -261,6 +261,7 @@ export class QueryGroup extends PureComponent<Props, State> {
pluginType={PluginType.datasource}
angularSupportEnabled={config?.angularSupportEnabled}
showPluginDetailsLink={true}
interactionElementId="datasource-query"
/>
)}
</div>