-
+ - Plugin not found -
-- No installed plugin matches this address. It may have been removed - from your Nextly config. -
-
+
+ );
+}
+
+/**
+ * Shown when admin-meta failed, so whether this plugin is installed is
+ * unknown.
+ *
+ * Not the catalogue view: that one states the plugin is absent, which is a
+ * claim this page cannot make when the request that would have told it failed.
+ */
+function InstalledPluginsUnavailable() {
+ const queryClient = useQueryClient();
+
+ return (
+
+
+ + Plugin not found +
++ No installed plugin matches this address, and it is not in the plugin + directory either. It may have been removed from your Nextly config. +
+ {plugins.map(plugin => (
+
+ );
+}
+
+function BrowseContent(): React.ReactElement {
+ const [query, setQuery] = useState("");
+
+ const { data: branding } = useSuspenseQuery({
+ queryKey: ["admin-meta"],
+ queryFn: () => publicApi.get
+
+
+ {showFeatured && (
+ + Start here +
++ {showFeatured ? "More plugins" : "Plugins"} +
+ {rest.length > 0 ? ( ++ {normalized + ? `No plugins match “${query.trim()}”.` + : "No plugins to show yet."} +
+ )} +
+
+
+
+ }
+ >
+ Browse plugins
++ Plugins published by Nextly. Adding one is a dependency and a line in + your Nextly config, so open a plugin to get both. +
+
+
+ );
+}
+
+/**
+ * What a catalogue plugin's page shows when the project has not installed it.
+ *
+ * Deliberately thin, and the reason is the invariant the whole surface is
+ * built on: verified content only ever appears in the verified section. Nothing
+ * here has been observed running, so there is no contributions section, no
+ * permissions and no routes — only what the catalogue claims, plus the lines
+ * that would make the claims checkable.
+ *
+ * @module pages/dashboard/plugins/components/NotInstalledPlugin
+ */
+export function NotInstalledPlugin({
+ plugin,
+}: {
+ plugin: RegistryPlugin;
+}): React.ReactElement {
+ const [manager, setManager] = useState+ {label} + {file && ( + + {file} + + )} +
+
+
+ {outcome === "failed" && (
+ // Announced, because the only other signal is an icon on the button
+ // the reader just pressed, and the instruction matters more than the
+ // failure: the line above is still there to be selected.
+
+ {value}
+
+
+ + Could not copy to the clipboard. Select the line above and copy it + manually. +
+ )} + {outcome === "copied" && ( + // Success is announced too, and only to assistive technology. The + // button's `aria-label` overrides its descendants, so swapping the + // glyph changes nothing a screen reader can perceive — sighted users + // already have the tick, and this is the equivalent for everyone else. ++ {label} copied to the clipboard. +
+ )} +
+
+
+
+ {/* States the boundary rather than leaving it implied: a reader looking
+ for permissions and routes should learn why they are absent instead
+ of concluding the plugin contributes nothing. */}
+
+ );
+}
diff --git a/packages/admin/src/pages/dashboard/plugins/components/PluginCard.tsx b/packages/admin/src/pages/dashboard/plugins/components/PluginCard.tsx
new file mode 100644
index 0000000000..733f7713d7
--- /dev/null
+++ b/packages/admin/src/pages/dashboard/plugins/components/PluginCard.tsx
@@ -0,0 +1,95 @@
+import { Badge } from "@nextlyhq/ui";
+import type React from "react";
+
+import { PluginIconFrom } from "@admin/components/shared/plugin-icon";
+import { Link } from "@admin/components/ui/link";
+import { ROUTES, buildRoute } from "@admin/constants/routes";
+import { categoryLabel } from "@admin/lib/plugins/plugin-categories";
+import { pluginSlug } from "@admin/lib/plugins/plugin-slug";
+import {
+ cataloguePresentationCandidates,
+ resolveCataloguePresentation,
+} from "@admin/lib/plugins/registry/resolve-catalogue-presentation";
+import type { RegistryPlugin } from "@admin/lib/plugins/registry/types";
+import type { PluginMetadata } from "@admin/types/branding";
+
+interface PluginCardProps {
+ plugin: RegistryPlugin;
+ /**
+ * The installed plugin this entry describes, when the project has it.
+ *
+ * The metadata itself rather than a boolean: an installed plugin is the
+ * authority on its own icon and description, so the card needs what it
+ * declared and not merely the fact that it exists.
+ */
+ installed: Pick
+
+
+
+
+
+ + {plugin.name} +
++ {plugin.author} + {label ? ` · ${label}` : ""} +
++ {plugin.description} +
+ +
+
+
+ Add it to your project
+
+ Install the package, then make two edits in{" "}
+ nextly.config.ts: import the
+ plugin at the top of the file, and add it to the{" "}
+ plugins array. Nextly picks it up
+ on the next start.
+
+ {PACKAGE_MANAGERS.map(pm => (
+
+ ))}
+
+
+ {/* One line per edit, each copyable on its own: the import and the
+ array entry land in different places in the same file, so joining
+ them into one block would be a snippet nobody can paste anywhere. */}
+
+
+ )}
+ + This plugin also ships admin UI, registered by importing it in + your admin route page. Skip these and the plugin still loads — its + editors just fall back to plain inputs + {adminStyles ? ", and render unstyled" : ""}. +
+ {adminImport && ( ++ What this plugin adds — its collections, permissions and API routes — is + only known once it is installed and Nextly has loaded it. +
+ + {plugin.links && ( +
+ {plugin.links.homepage && (
+
+ )}
+ {plugin.links.repository && (
+
+ )}
+ {plugin.links.docs && (
+
+ )}
+
+ )}
+
+
+
+ Installed
+
+ )}
+
+
+ {/* Two lines, not a character count: a clamp adapts to the card's real
+ width, where a truncated string would cut at a different place on
+ every breakpoint. */}
+
+ {/* `truncate` needs the min-w-0 above: a flex child defaults to
+ min-width:auto, which refuses to shrink below its content. */}
+
+
+ {presentation.isInstalled && (
+ {plugin.name}
++ {plugin.author} +
++ {presentation.description} +
+ + {label && ( + + {label} + + )} + + ); +} diff --git a/packages/admin/src/pages/dashboard/plugins/components/PluginPageLoading.tsx b/packages/admin/src/pages/dashboard/plugins/components/PluginPageLoading.tsx new file mode 100644 index 0000000000..c4ff443b8e --- /dev/null +++ b/packages/admin/src/pages/dashboard/plugins/components/PluginPageLoading.tsx @@ -0,0 +1,32 @@ +"use client"; + +import type React from "react"; + +import { Loader2 } from "@admin/components/icons"; + +/** + * What a plugin page shows while the data it suspends on is in flight. + * + * A `Suspense` fallback is not optional for these pages. `QueryErrorBoundary` + * handles errors and nothing else, and the only boundary above it is + * `RootLayout`'s `fallback={null}` — which exists to hide a lazy chunk + * swapping in, not to stand in for a page. Without a local boundary a + * suspending page is a blank screen for as long as the request takes. + * + * @module pages/dashboard/plugins/components/PluginPageLoading + */ +export function PluginPageLoading({ + label = "Loading…", +}: { + label?: string; +}): React.ReactElement { + return ( +
+
+ );
+}
diff --git a/packages/admin/src/pages/dashboard/plugins/index.tsx b/packages/admin/src/pages/dashboard/plugins/index.tsx
index 95d4b9d55d..6523d462ac 100644
--- a/packages/admin/src/pages/dashboard/plugins/index.tsx
+++ b/packages/admin/src/pages/dashboard/plugins/index.tsx
@@ -10,6 +10,7 @@
* @module pages/dashboard/plugins
*/
+import { Button } from "@nextlyhq/ui";
import type React from "react";
import { Suspense } from "react";
@@ -17,6 +18,7 @@ import { PageContainer } from "@admin/components/layout/page-container";
import { Breadcrumbs } from "@admin/components/shared";
import { PageErrorFallback } from "@admin/components/shared/error-fallbacks";
import { QueryErrorBoundary } from "@admin/components/shared/query-error-boundary";
+import { Link } from "@admin/components/ui/link";
import { ROUTES } from "@admin/constants/routes";
import PluginsTable from "./components/PluginsTable";
@@ -52,6 +54,14 @@ const PluginsOverviewPage: React.FC = () => {
whether it is enabled.
+
+ {/* In the header rather than only in the empty state: a project that
+ already has plugins is the one most likely to want another, and an
+ action that appears only while the list is empty is unreachable
+ exactly then. */}
+
{/* Plugins table */}
diff --git a/packages/admin/src/pages/dashboard/plugins/not-installed-detail.test.tsx b/packages/admin/src/pages/dashboard/plugins/not-installed-detail.test.tsx
new file mode 100644
index 0000000000..3296510959
--- /dev/null
+++ b/packages/admin/src/pages/dashboard/plugins/not-installed-detail.test.tsx
@@ -0,0 +1,291 @@
+/**
+ * A plugin's page has one URL whether or not the project has it. These cover
+ * the uninstalled half: the directory links every card here, and most cards
+ * are for plugins nobody has installed yet, so that is the ordinary path
+ * rather than an error.
+ */
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { AdminBranding } from "@admin/types/branding";
+
+/**
+ * The install line, as a pattern shared by the assertions that require it and
+ * the ones that require its absence.
+ *
+ * A literal `"pnpm add @nextlyhq/plugin-seo"` would match nothing now that the
+ * command is pinned, so every `queryByText(...).toBeNull()` below would pass
+ * on a page that rendered the install block in full. Matching the version
+ * loosely keeps the absence assertions answering the question they ask, while
+ * `install-command.test.ts` pins the exact strings.
+ */
+const INSTALL_COMMAND = /^pnpm add @nextlyhq\/plugin-seo@\d/;
+
+/**
+ * jsdom's navigator has no `clipboard` property at all, which is the same
+ * shape a browser on a plain-HTTP origin presents — so the "unavailable" case
+ * below is the environment's own default rather than something simulated.
+ */
+const ORIGINAL_CLIPBOARD = Object.getOwnPropertyDescriptor(
+ navigator,
+ "clipboard"
+);
+
+function setClipboard(clipboard: Clipboard | undefined) {
+ Object.defineProperty(navigator, "clipboard", {
+ value: clipboard,
+ configurable: true,
+ });
+}
+
+/**
+ * Puts back what was there, which in jsdom is no own property at all —
+ * defining one with `undefined` is not the same thing, and it would outlive
+ * these tests for anything else sharing this environment.
+ */
+function restoreClipboard() {
+ if (ORIGINAL_CLIPBOARD) {
+ Object.defineProperty(navigator, "clipboard", ORIGINAL_CLIPBOARD);
+ } else {
+ delete (navigator as { clipboard?: Clipboard }).clipboard;
+ }
+}
+
+let mockBranding: AdminBranding = { plugins: [] } as unknown as AdminBranding;
+let mockBrandingStatus = { isPending: false, isUnavailable: false };
+
+vi.mock("@admin/context/providers/BrandingProvider", () => ({
+ useBranding: () => mockBranding,
+ useBrandingStatus: () => mockBrandingStatus,
+}));
+
+import PluginDetailPage from "./[slug]";
+
+function renderDetail(slug: string) {
+ const client = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+ return render(
+