Plugin Catalog: clean up (#34274)

* chore(marketplace): remove view plugin page from plugin.json

* refactor(marketplace): replace usage of stylesFactory with useStyles2

* feat(catalog): remove image renderers from listings

plugins-bundled/internal/plugin-catalog-app/src/components/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
-import { useTheme2, stylesFactory } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 
 interface Props {
   href: string;
@@ -11,20 +11,29 @@ interface Props {
 }
 
 export const Card = ({ href, text, image, layout = 'vertical' }: Props) => {
-  const theme = useTheme2();
-  const styles = getCardStyles(theme, layout);
+  const styles = useStyles2(getCardStyles);
 
   return (
     <a href={href} className={styles.root}>
-      <div className={styles.container}>
-        <div className={styles.imgContainer}>{image}</div>
+      <div
+        className={cx(styles.container, {
+          [styles.containerHorizontal]: layout === 'horizontal',
+        })}
+      >
+        <div
+          className={cx(styles.imgContainer, {
+            [styles.imgContainerHorizontal]: layout === 'horizontal',
+          })}
+        >
+          {image}
+        </div>
         {text}
       </div>
     </a>
   );
 };
 
-const getCardStyles = stylesFactory((theme: GrafanaTheme2, layout) => ({
+const getCardStyles = (theme: GrafanaTheme2) => ({
   root: css`
     background-color: ${theme.colors.background.primary};
     border-radius: ${theme.shape.borderRadius()};
@@ -38,15 +47,22 @@ const getCardStyles = stylesFactory((theme: GrafanaTheme2, layout) => ({
   `,
   container: css`
     display: flex;
-    flex-direction: ${layout === 'vertical' ? 'column' : 'row'};
-    justify-content: ${layout === 'vertical' ? 'space-around' : 'flex-start'};
+    flex-direction: column;
+    justify-content: space-around;
     height: 100%;
   `,
-  imgContainer: css`
-    flex-grow: ${layout === 'vertical' ? 1 : 0};
-    padding: ${theme.spacing()} 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  containerHorizontal: css`
+    flex-direction: row;
+    justify-content: flex-start;
   `,
-}));
+  imgContainer: css`
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    padding: ${theme.spacing()} 0;
+  `,
+  imgContainerHorizontal: css`
+    flex-grow: 0;
+  `,
+});

plugins-bundled/internal/plugin-catalog-app/src/hooks/usePlugins.tsx

@@ -15,13 +15,17 @@ export const usePlugins = () => {
   useEffect(() => {
     const fetchPluginData = async () => {
       const items = await api.getRemotePlugins();
-      const filteredItems = items
-        .filter((plugin) => Boolean(plugin.versionSignatureType))
-        .filter((plugin) => plugin.status !== 'enterprise')
-        .filter((plugin) => !status || plugin.status === status);
+      const filteredPlugins = items.filter((plugin) => {
+        const isNotRenderer = plugin.typeCode !== 'renderer';
+        const isSigned = Boolean(plugin.versionSignatureType);
+        const isNotEnterprise = plugin.status !== 'enterprise';
+
+        return isNotRenderer && isSigned && isNotEnterprise;
+      });
+
       const installedPlugins = await api.getInstalledPlugins();
 
-      setState((state) => ({ ...state, items: filteredItems, installedPlugins, isLoading: false }));
+      setState((state) => ({ ...state, items: filteredPlugins, installedPlugins, isLoading: false }));
     };
 
     fetchPluginData();

plugins-bundled/internal/plugin-catalog-app/src/plugin.json

@@ -54,12 +54,6 @@
       "path": "/a/grafana-plugin-catalog-app/?tab=library",
       "role": "Admin",
       "addToNav": true
-    },
-    {
-      "type": "page",
-      "name": "View plugin",
-      "path": "/a/grafana-plugin-catalog-app?tab=plugin",
-      "role": "Admin"
     }
   ],
   "dependencies": {