LibraryPanels: Adds descriptions to cards (#33452)

* LibraryPanels: Adds descriptions to cards

* Chore: updates after PR comments

public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx

@@ -12,6 +12,7 @@ interface Props {
   onDelete?: () => void;
   disabled?: boolean;
   showBadge?: boolean;
+  description?: string;
 }
 
 export const PanelTypeCard: React.FC<Props> = ({
@@ -22,6 +23,7 @@ export const PanelTypeCard: React.FC<Props> = ({
   onDelete,
   disabled,
   showBadge,
+  description,
 }) => {
   const styles = useStyles2(getStyles);
   const cssClass = cx({
@@ -41,6 +43,7 @@ export const PanelTypeCard: React.FC<Props> = ({
 
       <div className={styles.itemContent}>
         <div className={styles.name}>{title}</div>
+        {description ? <span className={styles.description}>{description}</span> : null}
       </div>
       {showBadge && (
         <div className={cx(styles.badge, disabled && styles.disabled)}>
@@ -109,6 +112,15 @@ const getStyles = (theme: GrafanaThemeV2) => {
       padding: 0 10px;
       width: 100%;
     `,
+    description: css`
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: ${theme.typography.bodySmall.fontSize};
+      font-weight: ${theme.typography.fontWeightLight};
+      padding: 0 ${theme.spacing(1.25)};
+      width: 100%;
+    `,
     img: css`
       max-height: 38px;
       width: 38px;

public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { PanelPluginMeta } from '@grafana/data';
-import { LibraryPanelDTO } from '../../types';
 import { config } from '@grafana/runtime';
+
+import { LibraryPanelDTO } from '../../types';
 import { PanelTypeCard } from 'app/features/dashboard/components/VizTypePicker/PanelTypeCard';
 import { DeleteLibraryPanelModal } from '../DeleteLibraryPanelModal/DeleteLibraryPanelModal';
 
@@ -18,7 +19,6 @@ export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX
   onDelete,
   showSecondaryActions,
 }) => {
-  //const styles = useStyles(getStyles);
   const [showDeletionModal, setShowDeletionModal] = useState(false);
 
   const onDeletePanel = () => {
@@ -33,38 +33,11 @@ export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX
       <PanelTypeCard
         isCurrent={false}
         title={libraryPanel.name}
+        description={libraryPanel.description}
         plugin={panelPlugin}
         onClick={() => onClick(libraryPanel)}
         onDelete={showSecondaryActions ? () => setShowDeletionModal(true) : undefined}
       />
-      {/* <Card heading={libraryPanel.name} onClick={}>
-        <Card.Figure>
-          <Icon className={styles.panelIcon} name="book-open" size="xl" />
-        </Card.Figure>
-        <Card.Meta>
-          <Tooltip content="Connected dashboards" placement="bottom">
-            <div className={styles.tooltip}>
-              <Icon name="apps" className={styles.detailIcon} />
-              {libraryPanel.meta.connectedDashboards}
-            </div>
-          </Tooltip>
-          <span>
-            Last edited {formatDate?.(libraryPanel.meta.updated ?? '') ?? libraryPanel.meta.updated} by{' '}
-            {libraryPanel.meta.updatedBy.name}
-          </span>
-        </Card.Meta>
-        {children && <Card.Actions>{children}</Card.Actions>}
-        {showSecondaryActions && (
-          <Card.SecondaryActions>
-            <IconButton
-              name="trash-alt"
-              tooltip="Delete panel"
-              tooltipPlacement="bottom"
-              onClick={() => setShowDeletionModal(true)}
-            />
-          </Card.SecondaryActions>
-        )}
-      </Card> */}
       {showDeletionModal && (
         <DeleteLibraryPanelModal
           libraryPanel={libraryPanel}
@@ -75,20 +48,3 @@ export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX
     </>
   );
 };
-
-// const getStyles = (theme: GrafanaTheme) => {
-//   return {
-//     tooltip: css`
-//       display: inline;
-//     `,
-//     detailIcon: css`
-//       margin-right: 0.5ch;
-//     `,
-//     panelIcon: css`
-//       color: ${theme.colors.textWeak};
-//     `,
-//     tagList: css`
-//       align-self: center;
-//     `,
-//   };
-// };