-
{tool.name}
+
+ {tool.name}
+ {tool.status === 'obsolete' && (
+ {tool.status}
+ )}
+
{tool.description && (
{tool.description}
diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 16b549013..01aec8678 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -18,6 +18,7 @@ import Badge from './ui/Badge';
import ToolingDetailModal from './ToolingDetailModal';
import classnames from 'classnames';
import { postAnalytics } from '../lib/postAnalytics';
+import Tag from './ui/Tag';
interface ToolingTableProps {
toolsByGroup: GroupedTools;
@@ -177,16 +178,19 @@ const ToolingTable = ({
>
segment.length > 25) ? 'break-all' : ''}`,
+ className: `${tool.name.split(' ').some((segment) => segment.length > 25) ? 'break-all' : ''} gap-x-2 gap-y-1`,
style: {
flexBasis: '240px',
- flexShrink: 0,
+ flexShrink: 1,
flexGrow: 0,
},
title: 'See details',
}}
>
{tool.name}
+ {tool.status === 'obsolete' && (
+ {tool.status}
+ )}
{transform.groupBy !== 'toolingTypes' && (
diff --git a/pages/tools/components/ui/Tag.tsx b/pages/tools/components/ui/Tag.tsx
new file mode 100644
index 000000000..73d31ef2e
--- /dev/null
+++ b/pages/tools/components/ui/Tag.tsx
@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import classnames from 'classnames';
+
+interface TagProps {
+ children: ReactNode;
+ intent?: 'success' | 'warning' | 'error' | 'neutral';
+}
+
+const Tag = ({ children, intent = 'neutral' }: TagProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default Tag;
diff --git a/pages/tools/hooks/useToolsTransform.tsx b/pages/tools/hooks/useToolsTransform.tsx
index 5ed4483b4..bf6d04e84 100644
--- a/pages/tools/hooks/useToolsTransform.tsx
+++ b/pages/tools/hooks/useToolsTransform.tsx
@@ -15,6 +15,7 @@ export interface Transform {
drafts: JSONSchemaDraft[];
toolingTypes: string[];
environments: string[];
+ showObsolete: 'true' | 'false';
}
export type TransformUpdate =
@@ -36,6 +37,7 @@ const buildQueryString = (transform: Transform) => {
drafts: transform.drafts.join(','),
toolingTypes: transform.toolingTypes.join(','),
environments: transform.environments.join(','),
+ showObsolete: transform.showObsolete,
}).toString();
};
@@ -53,6 +55,7 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) {
drafts: [],
toolingTypes: [],
environments: [],
+ showObsolete: 'false',
});
useEffect(() => {
@@ -84,7 +87,9 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) {
environments: parseArrayParam(
query.environments,
) as Transform['environments'],
- };
+ showObsolete:
+ (query.showObsolete as Transform['showObsolete']) || 'false',
+ } satisfies Transform;
const queryString = buildQueryString(updatedTransform);
const hash = window.location.hash;
@@ -131,6 +136,7 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) {
drafts: [],
toolingTypes: [],
environments: [],
+ showObsolete: 'false',
};
const queryString = buildQueryString(initialTransform);
@@ -186,52 +192,47 @@ const filterTools = (
tools: JSONSchemaTool[],
transform: Transform,
): JSONSchemaTool[] => {
- const lowerCaseTransform = {
- languages: lowerCaseArray(transform.languages),
- licenses: lowerCaseArray(transform.licenses),
- toolingTypes: lowerCaseArray(transform.toolingTypes),
- environments: lowerCaseArray(transform.environments),
- drafts: transform.drafts,
- };
-
- return tools.filter((tool) => {
- const matchesLanguage =
- !lowerCaseTransform.languages.length ||
- (tool.languages || []).some((lang) =>
- lowerCaseTransform.languages.includes(lang.toLowerCase()),
- );
-
- const matchesLicense =
- !lowerCaseTransform.licenses.length ||
- (tool.license &&
- lowerCaseTransform.licenses.includes(tool.license.toLowerCase()));
-
- const matchesToolingType =
- !lowerCaseTransform.toolingTypes.length ||
- (tool.toolingTypes || []).some((type) =>
- lowerCaseTransform.toolingTypes.includes(type.toLowerCase()),
- );
-
- const matchesEnvironment =
- !lowerCaseTransform.environments.length ||
- (tool.environments || []).some((environment) =>
- lowerCaseTransform.environments.includes(environment.toLowerCase()),
- );
-
- const matchesDraft =
- !lowerCaseTransform.drafts.length ||
- (tool.supportedDialects?.draft || []).some((draft) =>
- lowerCaseTransform.drafts.includes(draft),
- );
+ const filteredTools = tools.filter((tool) => {
+ if (transform.showObsolete === 'false' && tool.status === 'obsolete')
+ return false;
+
+ const lowerCaseTransform = {
+ languages: lowerCaseArray(transform.languages),
+ licenses: lowerCaseArray(transform.licenses),
+ toolingTypes: lowerCaseArray(transform.toolingTypes),
+ environments: lowerCaseArray(transform.environments),
+ drafts: transform.drafts,
+ };
return (
- matchesLanguage &&
- matchesLicense &&
- matchesToolingType &&
- matchesEnvironment &&
- matchesDraft
+ // Matches Languages
+ (!lowerCaseTransform.languages.length ||
+ (tool.languages || []).some((lang) =>
+ lowerCaseTransform.languages.includes(lang.toLowerCase()),
+ )) &&
+ // Matches Tooling Types
+ (!lowerCaseTransform.toolingTypes.length ||
+ (tool.toolingTypes || []).some((type) =>
+ lowerCaseTransform.toolingTypes.includes(type.toLowerCase()),
+ )) &&
+ // Matches Environment
+ (!lowerCaseTransform.environments.length ||
+ (tool.environments || []).some((environment) =>
+ lowerCaseTransform.environments.includes(environment.toLowerCase()),
+ )) &&
+ // Matches Dialect
+ (!lowerCaseTransform.drafts.length ||
+ (tool.supportedDialects?.draft || []).some((draft) =>
+ lowerCaseTransform.drafts.includes(draft),
+ )) &&
+ // Matches License
+ (!lowerCaseTransform.licenses.length ||
+ (tool.license &&
+ lowerCaseTransform.licenses.includes(tool.license.toLowerCase())))
);
});
+
+ return filteredTools;
};
const sortTools = (
diff --git a/public/_redirects b/public/_redirects
index b7aa7b470..85e91c411 100644
--- a/public/_redirects
+++ b/public/_redirects
@@ -20,5 +20,6 @@
/latest/relative-json-pointer /draft/2020-12/relative-json-pointer.html 301
/latest/release-notes /draft/2020-12/release-notes
/implementations /tools 301
+/obsolete-implementations /tools?showObsolete=true 301
/slack https://join.slack.com/t/json-schema/shared_invite/zt-2ued3v79g-Tk_aI32ZdW~ST0EWpGBwNQ 301
/slack-redirect https://join.slack.com/t/json-schema/shared_invite/zt-2ued3v79g-Tk_aI32ZdW~ST0EWpGBwNQ 301