Update available!
;\n }\n\n return null;\n}\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n return {\n hasUpdate: css`\n color: ${theme.colors.text.secondary};\n font-size: ${theme.typography.bodySmall.fontSize};\n margin-bottom: 0;\n `,\n };\n};\n","import React from 'react';\n\ntype PluginLogoProps = {\n alt: string;\n className?: string;\n src: string;\n height?: string | number;\n};\n\nexport function PluginLogo({ alt, className, src, height }: PluginLogoProps): React.ReactElement {\n // @ts-ignore - react doesn't know about loading attr.\n return{children}
;\n};\n\nconst getStyles = (theme: GrafanaTheme2, wrap?: boolean) => ({\n container: css`\n display: flex;\n flex-direction: row;\n flex-wrap: ${wrap ? 'wrap' : 'no-wrap'};\n & > * {\n margin-bottom: ${theme.spacing()};\n margin-right: ${theme.spacing()};\n }\n & > *:last-child {\n margin-right: 0;\n }\n `,\n});\n","import React from 'react';\n\nimport { HorizontalGroup, PluginSignatureBadge } from '@grafana/ui';\n\nimport { CatalogPlugin } from '../types';\n\nimport { PluginEnterpriseBadge, PluginDisabledBadge, PluginInstalledBadge, PluginUpdateAvailableBadge } from './Badges';\n\ntype PluginBadgeType = {\n plugin: CatalogPlugin;\n};\n\nexport function PluginListItemBadges({ plugin }: PluginBadgeType) {\n if (plugin.isEnterprise) {\n return (\n {plugin.name}
\n\n
\n By {plugin.orgName}
\n\n {plugin.type &&
\n \n );\n}\n\n// Styles shared between the different type of list items\nexport const getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css`\n display: grid;\n grid-template-columns: ${LOGO_SIZE} 1fr ${theme.spacing(3)};\n grid-template-rows: auto;\n gap: ${theme.spacing(2)};\n grid-auto-flow: row;\n background: ${theme.colors.background.secondary};\n border-radius: ${theme.shape.borderRadius()};\n padding: ${theme.spacing(3)};\n transition: ${theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {\n duration: theme.transitions.duration.short,\n })};\n\n &:hover {\n background: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};\n }\n `,\n list: css`\n row-gap: 0px;\n\n > img {\n align-self: start;\n }\n\n > .plugin-content {\n min-height: 0px;\n grid-area: 2 / 2 / 4 / 3;\n\n > p {\n margin: ${theme.spacing(0, 0, 0.5, 0)};\n }\n }\n\n > .plugin-name {\n align-self: center;\n grid-area: 1 / 2 / 2 / 3;\n }\n `,\n pluginType: css`\n grid-area: 1 / 3 / 2 / 4;\n color: ${theme.colors.text.secondary};\n `,\n pluginLogo: css`\n grid-area: 1 / 1 / 3 / 2;\n max-width: 100%;\n align-self: center;\n object-fit: contain;\n `,\n content: css`\n grid-area: 3 / 1 / 4 / 3;\n color: ${theme.colors.text.secondary};\n `,\n name: css`\n grid-area: 1 / 2 / 3 / 3;\n align-self: center;\n font-size: ${theme.typography.h4.fontSize};\n color: ${theme.colors.text.primary};\n margin: 0;\n `,\n };\n};\n","import { css, cx } from '@emotion/css';\nimport React from 'react';\nimport { useLocation } from 'react-router-dom';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nimport { CatalogPlugin, PluginListDisplayMode } from '../types';\n\nimport { PluginListItem } from './PluginListItem';\n\ninterface Props {\n plugins: CatalogPlugin[];\n displayMode: PluginListDisplayMode;\n}\n\nexport const PluginList = ({ plugins, displayMode }: Props) => {\n const isList = displayMode === PluginListDisplayMode.List;\n const styles = useStyles2(getStyles);\n const location = useLocation();\n\n return (\n \n {plugins.map((plugin) => (\n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n container: css`\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));\n gap: ${theme.spacing(3)};\n `,\n list: css`\n grid-template-columns: 1fr;\n `,\n };\n};\n","import React, { useState, useRef } from 'react';\nimport { useDebounce } from 'react-use';\n\nimport { FilterInput } from '@grafana/ui';\n\ninterface Props {\n value?: string;\n onSearch: (value: string) => void;\n}\n\n// useDebounce has a bug which causes it to fire on first render. This wrapper prevents that.\n// https://github.com/streamich/react-use/issues/759\nconst useDebounceWithoutFirstRender = (callBack: () => any, delay = 0, deps: React.DependencyList = []) => {\n const isFirstRender = useRef(true);\n const debounceDeps = [...deps, isFirstRender];\n\n return useDebounce(\n () => {\n if (isFirstRender.current) {\n isFirstRender.current = false;\n return;\n }\n return callBack();\n },\n delay,\n debounceDeps\n );\n};\n\nexport const SearchField = ({ value, onSearch }: Props) => {\n const [query, setQuery] = useState(value);\n\n useDebounceWithoutFirstRender(() => onSearch(query ?? ''), 500, [query]);\n\n return (\n \n
\n\n {/* Filter by installed / all */}\n {remotePluginsAvailable ? (\n \n
\n ) : (\n \n
\n \n )}\n\n {/* Sorting */}\n \n
\n\n {/* Display mode */}\n \n \n className={styles.displayAs}\n value={displayMode}\n onChange={setDisplayMode}\n options={[\n {\n value: PluginListDisplayMode.Grid,\n icon: 'table',\n description: 'Display plugins in a grid layout',\n },\n { value: PluginListDisplayMode.List, icon: 'list-ul', description: 'Display plugins in list' },\n ]}\n />\n
\n \n {isLoading ? (\n
\n