feat(marketplace): add drawer with initial layout

Signed-off-by: Christoph Jerolimov <[email protected]>
redhat-developer · Nov 19, 2024 · 17bade2 · 17bade2
1 parent a95c630
commit 17bade2
Show file tree

Hide file tree

Showing 8 changed files with 345 additions and 62 deletions.
diff --git a/workspaces/marketplace/plugins/marketplace-common/report.api.md b/workspaces/marketplace/plugins/marketplace-common/report.api.md
@@ -8,7 +8,7 @@ export interface MarketplacePluginEntry {
   // (undocumented)
   metadata: MarketplacePluginMetadata;
   // (undocumented)
-  spec: MarketplacePluginSpec;
+  spec?: MarketplacePluginSpec;
 }
 
 // @public (undocumented)

diff --git a/workspaces/marketplace/plugins/marketplace-common/src/types.ts b/workspaces/marketplace/plugins/marketplace-common/src/types.ts
@@ -19,7 +19,7 @@
  */
 export interface MarketplacePluginEntry {
   metadata: MarketplacePluginMetadata;
-  spec: MarketplacePluginSpec;
+  spec?: MarketplacePluginSpec;
 }
 
 /**

diff --git a/workspaces/marketplace/plugins/marketplace/package.json b/workspaces/marketplace/plugins/marketplace/package.json
@@ -38,14 +38,16 @@
     "@backstage/core-components": "^0.15.1",
     "@backstage/core-plugin-api": "^1.10.0",
     "@backstage/theme": "^0.6.0",
+    "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.12.2",
     "@red-hat-developer-hub/backstage-plugin-marketplace-common": "workspace:^",
     "@tanstack/react-query": "^5.60.5",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.28.0",
@@ -56,7 +58,8 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
     "msw": "^1.0.0",
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.3.0"
   },
   "files": [
     "dist"

diff --git a/workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogGrid.tsx b/workspaces/marketplace/plugins/marketplace/src/components/MarketplaceCatalogGrid.tsx
@@ -14,13 +14,15 @@
  * limitations under the License.
  */
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import {
   useQueryParamState,
   ItemCardGrid,
   Link,
   LinkButton,
 } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
 
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -32,6 +34,7 @@ import Typography from '@mui/material/Typography';
 
 import { MarketplacePluginEntry } from '@red-hat-developer-hub/backstage-plugin-marketplace-common';
 import { usePlugins } from '../hooks/usePlugins';
+import { detailsRouteRef, rootRouteRef } from '../routes';
 
 const Icon = ({ entry }: { entry: MarketplacePluginEntry }) =>
   entry.metadata.icon ? (
@@ -81,65 +84,88 @@ const EntrySkeleton = ({
 );
 
 // TODO: add link around card
-const Entry = ({ entry }: { entry: MarketplacePluginEntry }) => (
-  <Card
-    variant="outlined"
-    sx={{
-      '&:hover': { backgroundColor: 'background.default', cursor: 'pointer' },
-    }}
-  >
-    <CardContent sx={{ backgroundColor: 'transparent' }}>
-      <Stack spacing={2}>
-        <Stack direction="row" spacing={2}>
-          <Icon entry={entry} />
-          <Stack spacing={0.5}>
-            <Typography variant="subtitle1" style={{ fontWeight: '500' }}>
-              {entry.metadata.title}
-            </Typography>
-            {entry.metadata.developer ? (
-              <Typography variant="subtitle2" style={{ fontWeight: 'normal' }}>
-                {' by '}
-                <Link
-                  to={`/marketplace?developer=${encodeURIComponent(
-                    entry.metadata.developer,
-                  )}`}
-                  color="primary"
-                >
-                  {entry.metadata.developer}
-                </Link>
+const Entry = ({ entry }: { entry: MarketplacePluginEntry }) => {
+  const navigate = useNavigate();
+  const getIndexPath = useRouteRef(rootRouteRef);
+  const getDetailsPath = useRouteRef(detailsRouteRef);
+
+  const detailsPath = getDetailsPath({ name: entry.metadata.name });
+  const withSearchParameter = (name: string, value: string) =>
+    `${getIndexPath()}?${encodeURIComponent(name)}=${encodeURIComponent(
+      value,
+    )}`;
+
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        '&:hover': { backgroundColor: 'background.default', cursor: 'pointer' },
+      }}
+      onClick={() => navigate(detailsPath)}
+    >
+      <CardContent sx={{ backgroundColor: 'transparent' }}>
+        <Stack spacing={2}>
+          <Stack direction="row" spacing={2}>
+            <Icon entry={entry} />
+            <Stack spacing={0.5}>
+              <Typography variant="subtitle1" style={{ fontWeight: '500' }}>
+                {entry.metadata.title}
               </Typography>
-            ) : null}
-            {entry.metadata.categories &&
-            entry.metadata.categories.length > 0 ? (
-              <Typography variant="subtitle2" style={{ fontWeight: 'normal' }}>
-                <LinkButton
-                  to={`/marketplace?category=${encodeURIComponent(
-                    entry.metadata.categories[0],
-                  )}`}
-                  variant="outlined"
-                  style={{ fontWeight: 'normal', padding: '2px 6px' }}
+              {entry.metadata.developer ? (
+                <Typography
+                  variant="subtitle2"
+                  style={{ fontWeight: 'normal' }}
                 >
-                  {entry.metadata.categories[0]}
-                </LinkButton>
-              </Typography>
-            ) : null}
+                  {' by '}
+                  <Link
+                    to={withSearchParameter(
+                      'developer',
+                      entry.metadata.developer,
+                    )}
+                    color="primary"
+                    onClick={e => e.stopPropagation()}
+                  >
+                    {entry.metadata.developer}
+                  </Link>
+                </Typography>
+              ) : null}
+              {entry.metadata.categories &&
+              entry.metadata.categories.length > 0 ? (
+                <Typography
+                  variant="subtitle2"
+                  style={{ fontWeight: 'normal' }}
+                >
+                  <LinkButton
+                    to={withSearchParameter(
+                      'category',
+                      entry.metadata.categories[0],
+                    )}
+                    variant="outlined"
+                    style={{ fontWeight: 'normal', padding: '2px 6px' }}
+                    onClick={e => e.stopPropagation()}
+                  >
+                    {entry.metadata.categories[0]}
+                  </LinkButton>
+                </Typography>
+              ) : null}
+            </Stack>
           </Stack>
-        </Stack>
 
-        {entry.metadata.abstract ? (
-          <Typography variant="subtitle2" style={{ fontWeight: 'normal' }}>
-            {entry.metadata.abstract}
-          </Typography>
-        ) : null}
-      </Stack>
-    </CardContent>
-    <CardActions sx={{ pl: 2, pr: 2, pb: 2, justifyContent: 'flex-start' }}>
-      <Link to={`/marketplace/${encodeURIComponent(entry.metadata.name)}`}>
-        Read more
-      </Link>
-    </CardActions>
-  </Card>
-);
+          {entry.metadata.abstract ? (
+            <Typography variant="subtitle2" style={{ fontWeight: 'normal' }}>
+              {entry.metadata.abstract}
+            </Typography>
+          ) : null}
+        </Stack>
+      </CardContent>
+      <CardActions sx={{ pl: 2, pr: 2, pb: 2, justifyContent: 'flex-start' }}>
+        <Link to={detailsPath} onClick={e => e.stopPropagation()}>
+          Read more
+        </Link>
+      </CardActions>
+    </Card>
+  );
+};
 
 export const MarketplaceCatalogGrid = () => {
   const plugins = usePlugins();