Plugins: Plugin details right panel is added. All the details were moved from thee top to the right panel (#90325)

* PluginDetailsRight panel is added. All the details were moved from the top to the right panel

* Add feature toggle pluginsDetailsRightPanel,Fix build, fix review comments

* Fix the typo

Co-authored-by: Giuseppe Guerra <giuseppe.guerra@grafana.com>

* hasAccessToExplore

* changes after review, add translations

* fix betterer

* fix betterer

* fix css error

* fix betterer

* fix translation labels, fix position of the right panel

* fix the build

* add condition to show updatedAt for plugin details

* add test to check 2 new fields at plugin details right panel;

* change the gap and remove report abuse button from core plugins

* add more tests

---------

Co-authored-by: Giuseppe Guerra <giuseppe.guerra@grafana.com>
This commit is contained in:
Yulia Shanyrova
2024-08-13 11:55:30 +02:00
committed by GitHub
parent bac68069e0
commit 8044cb50f1
24 changed files with 362 additions and 85 deletions

View File

@@ -77,6 +77,7 @@ export interface FeatureToggles {
lokiPredefinedOperations?: boolean;
pluginsFrontendSandbox?: boolean;
frontendSandboxMonitorOnly?: boolean;
pluginsDetailsRightPanel?: boolean;
sqlDatasourceDatabaseSelection?: boolean;
recordedQueriesMulti?: boolean;
vizAndWidgetSplit?: boolean;

View File

@@ -1,21 +1,37 @@
import { HTMLAttributes } from 'react';
import { PluginSignatureStatus } from '@grafana/data';
import { PluginSignatureStatus, PluginSignatureType } from '@grafana/data';
import { IconName } from '../../types';
import { Badge, BadgeProps } from '../Badge/Badge';
const SIGNATURE_ICONS: Record<string, IconName> = {
[PluginSignatureType.grafana]: 'grafana',
[PluginSignatureType.commercial]: 'shield',
[PluginSignatureType.community]: 'shield',
DEFAULT: 'shield-exclamation',
};
/**
* @public
*/
export interface PluginSignatureBadgeProps extends HTMLAttributes<HTMLDivElement> {
status?: PluginSignatureStatus;
signatureType?: PluginSignatureType;
signatureOrg?: string;
}
/**
* @public
*/
export const PluginSignatureBadge = ({ status, color, ...otherProps }: PluginSignatureBadgeProps) => {
const display = getSignatureDisplayModel(status);
export const PluginSignatureBadge = ({
status,
color,
signatureType,
signatureOrg,
...otherProps
}: PluginSignatureBadgeProps) => {
const display = getSignatureDisplayModel(status, signatureType, signatureOrg);
return (
<Badge text={display.text} color={display.color} icon={display.icon} tooltip={display.tooltip} {...otherProps} />
);
@@ -23,16 +39,27 @@ export const PluginSignatureBadge = ({ status, color, ...otherProps }: PluginSig
PluginSignatureBadge.displayName = 'PluginSignatureBadge';
function getSignatureDisplayModel(signature?: PluginSignatureStatus): BadgeProps {
function getSignatureDisplayModel(
signature?: PluginSignatureStatus,
signatureType?: PluginSignatureType,
signatureOrg?: string
): BadgeProps {
if (!signature) {
signature = PluginSignatureStatus.invalid;
}
const signatureIcon = SIGNATURE_ICONS[signatureType || ''] || SIGNATURE_ICONS.DEFAULT;
switch (signature) {
case PluginSignatureStatus.internal:
return { text: 'Core', color: 'blue', tooltip: 'Core plugin that is bundled with Grafana' };
case PluginSignatureStatus.valid:
return { text: 'Signed', icon: 'lock', color: 'green', tooltip: 'Signed and verified plugin' };
return {
text: signatureType ? signatureType : 'Signed',
icon: signatureType ? signatureIcon : 'lock',
color: 'green',
tooltip: 'Signed and verified plugin',
};
case PluginSignatureStatus.invalid:
return {
text: 'Invalid signature',