@kuadrant/kuadrant-backstage-plugin-frontend 0.0.2-dev-3d7caf4 → 0.0.2-dev-415994c

package/dist/components/KuadrantPage/KuadrantPage.esm.js

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import { Box, Typography, Grid, Button, Chip, IconButton } from '@material-ui/core';
+import React, { useState, useCallback, useMemo } from 'react';
+import { makeStyles, Box, CircularProgress, Typography, Button, Chip, IconButton } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
 import LockIcon from '@material-ui/icons/Lock';
-import { Page, Header, SupportButton, Content, Progress, ResponseErrorPanel, InfoCard, Table, Link } from '@backstage/core-components';
+import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import { Page, Header, SupportButton, Content, ResponseErrorPanel, Table, Link } from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
 import { useApi, configApiRef, fetchApiRef, alertApiRef, identityApiRef } from '@backstage/core-plugin-api';
 import { PermissionGate } from '../PermissionGate/PermissionGate.esm.js';
@@ -14,8 +15,49 @@ import { kuadrantApiProductListPermission, kuadrantApiProductCreatePermission, k
 import { useKuadrantPermission } from '../../utils/permissions.esm.js';
 import { EditAPIProductDialog } from '../EditAPIProductDialog/EditAPIProductDialog.esm.js';
 import { ConfirmDeleteDialog } from '../ConfirmDeleteDialog/ConfirmDeleteDialog.esm.js';
+import emptyStateIllustration from '../../assets/empty-state-illustration.png';
 
+const useStyles = makeStyles((theme) => ({
+  container: {
+    display: "flex",
+    height: "100%",
+    minHeight: 400
+  },
+  tableContainer: {
+    flex: 1,
+    overflow: "auto",
+    padding: 10
+  },
+  emptyState: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(6),
+    minHeight: 400
+  },
+  emptyStateContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(6),
+    maxWidth: 900
+  },
+  emptyStateText: {
+    flex: 1
+  },
+  emptyStateTitle: {
+    marginBottom: theme.spacing(2)
+  },
+  emptyStateDescription: {
+    marginBottom: theme.spacing(3),
+    color: theme.palette.text.secondary
+  },
+  emptyStateImage: {
+    maxWidth: 400,
+    height: "auto"
+  }
+}));
 const ResourceList = () => {
+  const classes = useStyles();
   const config = useApi(configApiRef);
   const fetchApi = useApi(fetchApiRef);
   const alertApi = useApi(alertApiRef);
@@ -30,6 +72,14 @@ const ResourceList = () => {
   const [apiProductToEdit, setApiProductToEdit] = useState(null);
   const [deleting, setDeleting] = useState(false);
   const [deleteStats, setDeleteStats] = useState(null);
+  const [filters, setFilters] = useState({
+    status: [],
+    policy: [],
+    route: [],
+    namespace: [],
+    tags: [],
+    authentication: []
+  });
   const {
     allowed: canCreateApiProduct,
     loading: createPermissionLoading,
@@ -52,7 +102,6 @@ const ResourceList = () => {
   );
   const deletePermissionLoading = deleteOwnPermissionLoading || deleteAllPermissionLoading;
   const {
-    allowed: canListPlanPolicies,
     loading: planPolicyPermissionLoading,
     error: planPolicyPermissionError
   } = useKuadrantPermission(kuadrantPlanPolicyListPermission);
@@ -80,13 +129,154 @@ const ResourceList = () => {
     );
     return await response.json();
   }, [backendUrl, fetchApi, refreshTrigger]);
+  const getPolicyForProduct = useCallback((product) => {
+    if (!planPolicies?.items) return null;
+    const targetRef = product.spec?.targetRef;
+    if (!targetRef) return null;
+    const policy = planPolicies.items.find((pp) => {
+      const ref = pp.targetRef;
+      return ref?.kind === "HTTPRoute" && ref?.name === targetRef.name && (!ref?.namespace || ref?.namespace === (targetRef.namespace || product.metadata.namespace));
+    });
+    return policy?.metadata.name || null;
+  }, [planPolicies]);
+  const getAuthSchemes = useCallback((product) => {
+    const authSchemes = product.status?.discoveredAuthScheme?.authentication || {};
+    const schemeObjects = Object.values(authSchemes);
+    const schemes = [];
+    if (schemeObjects.some((scheme) => scheme.hasOwnProperty("apiKey"))) {
+      schemes.push("API Key");
+    }
+    if (schemeObjects.some((scheme) => scheme.hasOwnProperty("jwt"))) {
+      schemes.push("OIDC");
+    }
+    if (schemes.length === 0) {
+      schemes.push("Unknown");
+    }
+    return schemes;
+  }, []);
   const loading = apiProductsLoading || planPoliciesLoading || createPermissionLoading || deletePermissionLoading || planPolicyPermissionLoading;
   const error = apiProductsError || planPoliciesError;
   const permissionError = createPermissionError || deletePermissionError || planPolicyPermissionError;
-  const handleCreateSuccess = () => {
+  const allProducts = useMemo(() => {
+    return apiProducts?.items || [];
+  }, [apiProducts]);
+  const filterSections = useMemo(() => {
+    const statusCounts = { Draft: 0, Published: 0 };
+    const policyCounts = /* @__PURE__ */ new Map();
+    const routeCounts = /* @__PURE__ */ new Map();
+    const namespaceCounts = /* @__PURE__ */ new Map();
+    const tagCounts = /* @__PURE__ */ new Map();
+    const authCounts = /* @__PURE__ */ new Map();
+    allProducts.forEach((p) => {
+      const status = p.spec?.publishStatus || "Draft";
+      statusCounts[status]++;
+      const policy = getPolicyForProduct(p) || "N/A";
+      policyCounts.set(policy, (policyCounts.get(policy) || 0) + 1);
+      const route = p.spec?.targetRef?.name || "unknown";
+      routeCounts.set(route, (routeCounts.get(route) || 0) + 1);
+      const ns = p.metadata.namespace;
+      namespaceCounts.set(ns, (namespaceCounts.get(ns) || 0) + 1);
+      const tags = p.spec?.tags || [];
+      tags.forEach((tag) => {
+        tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
+      });
+      const authSchemes = getAuthSchemes(p);
+      authSchemes.forEach((scheme) => {
+        authCounts.set(scheme, (authCounts.get(scheme) || 0) + 1);
+      });
+    });
+    return [
+      {
+        id: "status",
+        title: "Status",
+        options: [
+          { value: "Draft", label: "Draft", count: statusCounts.Draft },
+          { value: "Published", label: "Published", count: statusCounts.Published }
+        ]
+      },
+      {
+        id: "authentication",
+        title: "Authentication",
+        options: Array.from(authCounts.entries()).map(([scheme, count]) => ({
+          value: scheme,
+          label: scheme,
+          count
+        }))
+      },
+      {
+        id: "policy",
+        title: "Policy",
+        options: Array.from(policyCounts.entries()).map(([name, count]) => ({
+          value: name,
+          label: name,
+          count
+        })),
+        collapsed: policyCounts.size > 5
+      },
+      {
+        id: "route",
+        title: "Route",
+        options: Array.from(routeCounts.entries()).map(([name, count]) => ({
+          value: name,
+          label: name,
+          count
+        })),
+        collapsed: routeCounts.size > 5
+      },
+      {
+        id: "namespace",
+        title: "Namespace",
+        options: Array.from(namespaceCounts.entries()).map(([ns, count]) => ({
+          value: ns,
+          label: ns,
+          count
+        })),
+        collapsed: namespaceCounts.size > 5
+      },
+      {
+        id: "tags",
+        title: "Tags",
+        options: Array.from(tagCounts.entries()).map(([tag, count]) => ({
+          value: tag,
+          label: tag,
+          count
+        })),
+        collapsed: tagCounts.size > 5
+      }
+    ];
+  }, [allProducts, getPolicyForProduct, getAuthSchemes]);
+  const filteredProducts = useMemo(() => {
+    return allProducts.filter((p) => {
+      if (filters.status.length > 0) {
+        const status = p.spec?.publishStatus || "Draft";
+        if (!filters.status.includes(status)) return false;
+      }
+      if (filters.authentication.length > 0) {
+        const authSchemes = getAuthSchemes(p);
+        if (!filters.authentication.some((a) => authSchemes.includes(a))) return false;
+      }
+      if (filters.policy.length > 0) {
+        const policy = getPolicyForProduct(p) || "N/A";
+        if (!filters.policy.includes(policy)) return false;
+      }
+      if (filters.route.length > 0) {
+        const route = p.spec?.targetRef?.name || "unknown";
+        if (!filters.route.includes(route)) return false;
+      }
+      if (filters.namespace.length > 0) {
+        if (!filters.namespace.includes(p.metadata.namespace)) return false;
+      }
+      if (filters.tags.length > 0) {
+        const tags = p.spec?.tags || [];
+        if (!filters.tags.some((t) => tags.includes(t))) return false;
+      }
+      return true;
+    });
+  }, [allProducts, filters, getPolicyForProduct, getAuthSchemes]);
+  const handleCreateSuccess = (productInfo) => {
     setRefreshTrigger((prev) => prev + 1);
     alertApi.post({
-      message: "API Product created",
+      message: `"${productInfo.displayName}" created successfully`,
       severity: "success",
       display: "transient"
     });
@@ -97,8 +287,9 @@ const ResourceList = () => {
   };
   const handleEditSuccess = () => {
     setRefreshTrigger((prev) => prev + 1);
+    const productName = apiProductToEdit?.name || "API Product";
     alertApi.post({
-      message: "API Product updated",
+      message: `"${productName}" updated successfully`,
       severity: "success",
       display: "transient"
     });
@@ -136,9 +327,10 @@ const ResourceList = () => {
       if (!response.ok) {
         throw new Error("failed to delete apiproduct");
       }
+      const deletedName = apiProductToDelete?.name || "API Product";
       setRefreshTrigger((prev) => prev + 1);
       alertApi.post({
-        message: "API Product deleted",
+        message: `"${deletedName}" deleted successfully`,
         severity: "success",
         display: "transient"
       });
@@ -159,72 +351,89 @@ const ResourceList = () => {
     setDeleteDialogOpen(false);
     setApiProductToDelete(null);
   };
-  const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString("en-GB", {
-      year: "numeric",
-      month: "short",
-      day: "numeric"
-    });
+  const handlePublishToggle = async (row) => {
+    const namespace = row.metadata.namespace;
+    const name = row.metadata.name;
+    const displayName = row.spec?.displayName || name;
+    const currentStatus = row.spec?.publishStatus || "Draft";
+    const newStatus = currentStatus === "Published" ? "Draft" : "Published";
+    try {
+      const response = await fetchApi.fetch(
+        `${backendUrl}/api/kuadrant/apiproducts/${namespace}/${name}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            spec: { publishStatus: newStatus }
+          })
+        }
+      );
+      if (!response.ok) {
+        throw new Error("failed to update publish status");
+      }
+      setRefreshTrigger((prev) => prev + 1);
+      alertApi.post({
+        message: `"${displayName}" ${newStatus === "Published" ? "published" : "unpublished"} successfully`,
+        severity: "success",
+        display: "transient"
+      });
+    } catch (err) {
+      console.error("error updating publish status:", err);
+      alertApi.post({
+        message: "Failed to update publish status",
+        severity: "error",
+        display: "transient"
+      });
+    }
   };
   const columns = [
     {
       title: "Name",
       field: "spec.displayName",
       render: (row) => {
-        const publishStatus = row.spec?.publishStatus;
-        const isPublished = publishStatus === "Published";
         const displayName = row.spec?.displayName ?? row.metadata.name;
-        if (isPublished) {
-          return /* @__PURE__ */ React.createElement(Link, { to: `/catalog/default/api/${row.metadata.name}/api-product` }, /* @__PURE__ */ React.createElement("strong", null, displayName));
-        }
-        return /* @__PURE__ */ React.createElement("span", { className: "text-muted" }, /* @__PURE__ */ React.createElement("strong", null, displayName));
+        return /* @__PURE__ */ React.createElement(Link, { to: `/kuadrant/api-products/${row.metadata.namespace}/${row.metadata.name}` }, /* @__PURE__ */ React.createElement("strong", null, displayName));
       },
       customFilterAndSearch: (term, row) => {
         const displayName = row.spec?.displayName || row.metadata.name || "";
         return displayName.toLowerCase().includes(term.toLowerCase());
       }
     },
-    {
-      title: "Resource Name",
-      field: "metadata.name"
-    },
     {
       title: "Version",
       field: "spec.version",
       render: (row) => row.spec?.version || "-"
     },
     {
-      title: "HTTPRoute",
+      title: "Route",
       field: "spec.targetRef.name",
       render: (row) => row.spec?.targetRef?.name || "-"
     },
     {
-      title: "Publish Status",
-      field: "spec.publishStatus",
+      title: "Policy",
+      field: "policy",
+      render: (row) => getPolicyForProduct(row) || "N/A"
+    },
+    {
+      title: "Tags",
+      field: "spec.tags",
       render: (row) => {
-        const status = row.spec?.publishStatus || "Draft";
-        return /* @__PURE__ */ React.createElement(
-          Chip,
-          {
-            label: status,
-            size: "small",
-            color: status === "Published" ? "primary" : "default"
-          }
-        );
+        const tags = row.spec?.tags || [];
+        if (tags.length === 0) return "-";
+        return /* @__PURE__ */ React.createElement(Box, { display: "flex", style: { gap: 4, flexWrap: "wrap" } }, tags.map((tag) => /* @__PURE__ */ React.createElement(Chip, { key: tag, label: tag, size: "small", variant: "outlined" })));
       }
     },
     {
-      title: "Approval Mode",
-      field: "spec.approvalMode",
+      title: "Status",
+      field: "spec.publishStatus",
       render: (row) => {
-        const mode = row.spec?.approvalMode || "manual";
+        const status = row.spec?.publishStatus || "Draft";
         return /* @__PURE__ */ React.createElement(
           Chip,
           {
-            label: mode,
+            label: status,
             size: "small",
-            color: mode === "automatic" ? "secondary" : "default"
+            color: status === "Published" ? "primary" : "default"
           }
         );
       }
@@ -267,11 +476,6 @@ const ResourceList = () => {
       title: "Namespace",
       field: "metadata.namespace"
     },
-    {
-      title: "Created",
-      field: "metadata.creationTimestamp",
-      render: (row) => formatDate(row.metadata.creationTimestamp)
-    },
     {
       title: "Actions",
       field: "actions",
@@ -281,8 +485,17 @@ const ResourceList = () => {
         const isOwner = owner === userEntityRef;
         const canEdit = canUpdateAllApiProducts || canUpdateOwnApiProduct && isOwner;
         const canDelete = canDeleteAllApiProducts || canDeleteOwnApiProduct && isOwner;
-        if (!canEdit && !canDelete) return null;
-        return /* @__PURE__ */ React.createElement(Box, { display: "flex", style: { gap: 4 } }, canEdit && /* @__PURE__ */ React.createElement(
+        const isPublished = row.spec?.publishStatus === "Published";
+        return /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", style: { gap: 4 } }, canEdit && /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            size: "small",
+            color: "primary",
+            onClick: () => handlePublishToggle(row),
+            style: { marginRight: 4, textTransform: "none" }
+          },
+          isPublished ? "Unpublish" : "Publish"
+        ), canEdit && /* @__PURE__ */ React.createElement(
           IconButton,
           {
             size: "small",
@@ -302,57 +515,6 @@ const ResourceList = () => {
       }
     }
   ];
-  const planPolicyColumns = [
-    {
-      title: "Name",
-      field: "metadata.name",
-      render: (row) => /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          to: `/kuadrant/planpolicy/${row.metadata.namespace}/${row.metadata.name}`
-        },
-        /* @__PURE__ */ React.createElement("strong", null, row.metadata.name)
-      )
-    },
-    {
-      title: "Namespace",
-      field: "metadata.namespace"
-    }
-  ];
-  const renderResources = (resources) => {
-    if (!resources || resources.length === 0) {
-      return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "No API products found");
-    }
-    return /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        options: {
-          paging: resources.length > 5,
-          pageSize: 20,
-          search: true,
-          filtering: true,
-          debounceInterval: 300,
-          toolbar: true,
-          emptyRowsWhenPaging: false
-        },
-        columns,
-        data: resources
-      }
-    );
-  };
-  const renderPlanPolicies = (resources) => {
-    if (!resources || resources.length === 0) {
-      return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "No plan policies found");
-    }
-    return /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        options: { paging: false, search: false, toolbar: false },
-        columns: planPolicyColumns,
-        data: resources
-      }
-    );
-  };
   return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(
     Header,
     {
@@ -360,33 +522,74 @@ const ResourceList = () => {
       subtitle: "Manage API products for Kubernetes"
     },
     /* @__PURE__ */ React.createElement(SupportButton, null, "Manage API products and plan policies")
-  ), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(Progress, null), error && /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }), permissionError && /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(Typography, { color: "error" }, "unable to check permissions: ", permissionError.message), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "permission:", " ", createPermissionError ? "kuadrant.apiproduct.create" : deletePermissionError ? "kuadrant.apiproduct.delete" : planPolicyPermissionError ? "kuadrant.planpolicy.list" : "unknown"), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "please try again or contact your administrator")), !loading && !error && !permissionError && /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
-    InfoCard,
+  ), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(
+    Box,
     {
-      title: "API Products",
-      action: canCreateApiProduct ? /* @__PURE__ */ React.createElement(
-        Box,
-        {
-          display: "flex",
-          alignItems: "center",
-          height: "100%",
-          mt: 1
-        },
-        /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            variant: "contained",
-            color: "primary",
-            size: "small",
-            startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
-            onClick: () => setCreateDialogOpen(true)
-          },
-          "Create API Product"
-        )
-      ) : undefined
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: 300
     },
-    renderResources(apiProducts?.items)
-  )), canListPlanPolicies && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(InfoCard, { title: "Plan Policies" }, renderPlanPolicies(planPolicies?.items)))), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(CircularProgress, null),
+    /* @__PURE__ */ React.createElement(Typography, { variant: "h6", style: { marginTop: 16 } }, "Loading data..."),
+    /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "Preparing your data... This should only take a moment.")
+  ), error && /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }), permissionError && /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(Typography, { color: "error" }, "unable to check permissions: ", permissionError.message), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "permission:", " ", createPermissionError ? "kuadrant.apiproduct.create" : deletePermissionError ? "kuadrant.apiproduct.delete" : planPolicyPermissionError ? "kuadrant.planpolicy.list" : "unknown"), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "please try again or contact your administrator")), !loading && !error && !permissionError && allProducts.length === 0 && /* @__PURE__ */ React.createElement(Box, { className: classes.emptyState }, /* @__PURE__ */ React.createElement(Box, { className: classes.emptyStateContent }, /* @__PURE__ */ React.createElement(Box, { className: classes.emptyStateText }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", className: classes.emptyStateTitle }, "API Product"), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "body1",
+      className: classes.emptyStateDescription
+    },
+    "Create API product by registering existing API, associate route and policy"
+  ), canCreateApiProduct && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
+      onClick: () => setCreateDialogOpen(true)
+    },
+    "Create API Product"
+  )), /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: emptyStateIllustration,
+      alt: "API Product illustration",
+      className: classes.emptyStateImage
+    }
+  ))), !loading && !error && !permissionError && allProducts.length > 0 && /* @__PURE__ */ React.createElement(Box, { className: classes.container }, /* @__PURE__ */ React.createElement(
+    FilterPanel,
+    {
+      sections: filterSections,
+      filters,
+      onChange: setFilters
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { className: classes.tableContainer }, /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "flex-end", mb: 2 }, canCreateApiProduct && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
+      onClick: () => setCreateDialogOpen(true)
+    },
+    "Create API Product"
+  )), filteredProducts.length === 0 ? /* @__PURE__ */ React.createElement(Box, { p: 4, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, "No API products match the selected filters.")) : /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      options: {
+        paging: filteredProducts.length > 10,
+        pageSize: 20,
+        search: true,
+        filtering: false,
+        debounceInterval: 300,
+        toolbar: true,
+        emptyRowsWhenPaging: false
+      },
+      columns,
+      data: filteredProducts
+    }
+  ))), /* @__PURE__ */ React.createElement(
     CreateAPIProductDialog,
     {
       open: createDialogOpen,