diff --git a/microsite/src/pages/plugins/_pluginCard.tsx b/microsite/src/pages/plugins/_pluginCard.tsx index ba7864f9aa..af5fd13202 100644 --- a/microsite/src/pages/plugins/_pluginCard.tsx +++ b/microsite/src/pages/plugins/_pluginCard.tsx @@ -14,6 +14,7 @@ export interface IPluginData { addedDate: string; isNew: boolean; order?: number; + status?: 'active' | 'inactive'; } const defaultIconUrl = '/img/logo-gradient-on-dark.svg'; diff --git a/microsite/src/pages/plugins/index.tsx b/microsite/src/pages/plugins/index.tsx index 1a87f9c0af..0eb6f2849e 100644 --- a/microsite/src/pages/plugins/index.tsx +++ b/microsite/src/pages/plugins/index.tsx @@ -123,6 +123,14 @@ const Plugins = () => { const otherPlugins = useMemo(() => { return plugins.otherPlugins + .filter(pluginData => pluginData.status !== 'inactive') + .filter(pluginData => matchesCategory(pluginData, selectedCategories)) + .filter(pluginData => matchesSearch(pluginData, searchTerm)); + }, [selectedCategories, searchTerm]); + + const inactivePlugins = useMemo(() => { + return plugins.otherPlugins + .filter(pluginData => pluginData.status === 'inactive') .filter(pluginData => matchesCategory(pluginData, selectedCategories)) .filter(pluginData => matchesSearch(pluginData, searchTerm)); }, [selectedCategories, searchTerm]); @@ -162,7 +170,7 @@ const Plugins = () => { /> - {corePlugins.length === 0 && otherPlugins.length === 0 && ( + {corePlugins.length === 0 && otherPlugins.length === 0 && inactivePlugins.length === 0 && (

No plugins found

@@ -199,6 +207,30 @@ const Plugins = () => {

)} + + {showOtherPlugins && otherPlugins.length === 0 && inactivePlugins.length > 0 && ( +
+

Active Plugins (0)

+

+ We couldn't find any active plugins matching your criteria. +

+
+ )} + + {inactivePlugins.length > 0 && ( +
+

Inactive Plugins ({inactivePlugins.length})

+

+ These plugins are no longer actively maintained as their NPM package has not seen an update in more than 365 days. They are kept here for reference but may not work with + current versions of Backstage. +

+
+ {inactivePlugins.map(pluginData => ( + + ))} +
+
+ )} );