From fbfe2b280003d02d3c73c0eb0b9348a0eda71de2 Mon Sep 17 00:00:00 2001
From: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Date: Mon, 5 Sep 2022 16:45:45 +0200
Subject: [PATCH] Library Panel: Allow to delete it when disabled or deprecated
 (#54662)

---
 .../VizTypePicker/PanelTypeCard.tsx           | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
index 7b3c9c57b5f..7ab30364d90 100644
--- a/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
+++ b/public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx
@@ -29,9 +29,10 @@ export const PanelTypeCard: React.FC<Props> = ({
   children,
 }) => {
   const styles = useStyles2(getStyles);
+  const isDisabled = disabled || plugin.state === PluginState.deprecated;
   const cssClass = cx({
     [styles.item]: true,
-    [styles.disabled]: disabled || plugin.state === PluginState.deprecated,
+    [styles.itemDisabled]: isDisabled,
     [styles.current]: isCurrent,
   });
 
@@ -39,18 +40,18 @@ export const PanelTypeCard: React.FC<Props> = ({
     <div
       className={cssClass}
       aria-label={selectors.components.PluginVisualization.item(plugin.name)}
-      onClick={disabled ? undefined : onClick}
+      onClick={isDisabled ? undefined : onClick}
       title={isCurrent ? 'Click again to close this section' : plugin.name}
     >
-      <img className={styles.img} src={plugin.info.logos.small} alt="" />
+      <img className={cx(styles.img, { [styles.disabled]: isDisabled })} src={plugin.info.logos.small} alt="" />
 
-      <div className={styles.itemContent}>
+      <div className={cx(styles.itemContent, { [styles.disabled]: isDisabled })}>
         <div className={styles.name}>{title}</div>
         {description ? <span className={styles.description}>{description}</span> : null}
         {children}
       </div>
       {showBadge && (
-        <div className={cx(styles.badge, disabled && styles.disabled)}>
+        <div className={cx(styles.badge, { [styles.disabled]: isDisabled })}>
           <PanelPluginBadge plugin={plugin} />
         </div>
       )}
@@ -100,13 +101,21 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: relative;
       padding: ${theme.spacing(0, 1)};
     `,
+    itemDisabled: css`
+      cursor: default;
+
+      &,
+      &:hover {
+        background: ${theme.colors.action.disabledBackground};
+      }
+    `,
     current: css`
       label: currentVisualizationItem;
       border: 1px solid ${theme.colors.primary.border};
       background: ${theme.colors.action.selected};
     `,
     disabled: css`
-      opacity: 0.2;
+      opacity: ${theme.colors.action.disabledOpacity};
       filter: grayscale(1);
       cursor: default;
       pointer-events: none;
@@ -138,6 +147,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       background: ${theme.colors.background.primary};
     `,
     deleteButton: css`
+      cursor: pointer;
       margin-left: auto;
     `,
   };