diff --git a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/__tests__/__snapshots__/index.spec.tsx.snap index 677992d57..1cc56554b 100644 --- a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/__tests__/__snapshots__/index.spec.tsx.snap +++ b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/__tests__/__snapshots__/index.spec.tsx.snap @@ -113,7 +113,7 @@ exports[`Editor Selector Entry snapshot 1`] = `
{ + const widget = document.getElementById(widgetId); + if (widget) { + widget.querySelectorAll(querySelector).forEach(item => { + item.setAttribute(attributeName, attributeValue); + }); + } + }, 500); +} diff --git a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.module.css b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.module.css index 8612cefd1..8f09ee6f4 100644 --- a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.module.css +++ b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.module.css @@ -18,3 +18,14 @@ .activeCard { color: #000; } + +.cardBody { + min-height: 65px; + padding-bottom: 35px; +} + +.provider { + position: absolute; + bottom: var(--pf-c-card--child--PaddingBottom); + font-size: 75%; +} diff --git a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx index 585ddd6ba..535adf676 100644 --- a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx +++ b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx @@ -24,6 +24,7 @@ import { CheckIcon } from '@patternfly/react-icons'; import React from 'react'; import ReactMarkdown from 'react-markdown'; +import { setAttribute } from '@/components/EditorSelector/Gallery/Entry/helpers'; import styles from '@/components/EditorSelector/Gallery/Entry/index.module.css'; import { TagLabel } from '@/components/TagLabel'; import { che } from '@/services/models'; @@ -59,7 +60,16 @@ export class EditorSelectorEntry extends React.PureComponent { }; } + public componentDidMount(): void { + if (this.state.activeEditor.provider) { + setAttribute(`editor-selector-card-${this.state.activeEditor.id}`, 'a', 'target', '_blank'); + } + } + public componentDidUpdate(prevProps: Props): void { + if (this.state.activeEditor.provider) { + setAttribute(`editor-selector-card-${this.state.activeEditor.id}`, 'a', 'target', '_blank'); + } if (prevProps.selectedId !== this.props.selectedId) { const selectedEditor = this.props.editorsGroup.find( editor => editor.id === this.props.selectedId, @@ -200,10 +210,10 @@ export class EditorSelectorEntry extends React.PureComponent { /> - + {groupName} {activeEditor.provider && ( -
+
{activeEditor.provider}
)} diff --git a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/__tests__/index.spec.tsx index 5b811f839..dc05b044c 100644 --- a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/__tests__/index.spec.tsx +++ b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/__tests__/index.spec.tsx @@ -130,6 +130,34 @@ describe('EditorGallery', () => { expect(sortedEditors[1].version).toEqual('1.0.0'); }); + test('1.0.0(Deprecated) <=> latest', () => { + const editorA = editors[0]; + editorA.tags = ['Deprecated']; + editorA.version = '1.0.0'; + editorA.id = `${editorA.publisher}/${editorA.name}/${editorA.version}`; + + const editorB = editors[1]; // latest + + const sortedEditors = sortEditors([editorA, editorB]); + + expect(sortedEditors[0].version).toEqual('latest'); + expect(sortedEditors[1].version).toEqual('1.0.0'); // Deprecated + }); + + test('1.0.0 <=> latest(Deprecated)', () => { + const editorA = editors[0]; + editorA.version = '1.0.0'; + editorA.id = `${editorA.publisher}/${editorA.name}/${editorA.version}`; + + const editorB = editors[1]; // latest + editorB.tags = ['Deprecated']; + + const sortedEditors = sortEditors([editorA, editorB]); + + expect(sortedEditors[0].version).toEqual('1.0.0'); + expect(sortedEditors[1].version).toEqual('latest'); // Deprecated + }); + test('insiders <=> 1.0.0', () => { const editorA = editors[0]; // insiders const editorB = editors[1]; @@ -141,6 +169,34 @@ describe('EditorGallery', () => { expect(sortedEditors[0].version).toEqual('insiders'); expect(sortedEditors[1].version).toEqual('1.0.0'); }); + + test('insiders(Deprecated) <=> 1.0.0', () => { + const editorA = editors[0]; // insiders + editorA.id = `${editorA.publisher}/${editorA.name}/${editorA.version}`; + editorA.tags = ['Deprecated']; + + const editorB = editors[1]; + editorB.version = '1.0.0'; + + const sortedEditors = sortEditors([editorA, editorB]); + + expect(sortedEditors[0].version).toEqual('insiders'); + expect(sortedEditors[1].version).toEqual('1.0.0'); + }); + + test('insiders <=> 1.0.0(Deprecated)', () => { + const editorA = editors[0]; // insiders + editorA.id = `${editorA.publisher}/${editorA.name}/${editorA.version}`; + + const editorB = editors[1]; + editorB.version = '1.0.0'; + editorB.tags = ['Deprecated']; + + const sortedEditors = sortEditors([editorA, editorB]); + + expect(sortedEditors[0].version).toEqual('insiders'); + expect(sortedEditors[1].version).toEqual('1.0.0'); // Deprecated + }); }); describe('select editor', () => { diff --git a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/index.tsx b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/index.tsx index ae2c0bcb5..1969d5357 100644 --- a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/index.tsx +++ b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/index.tsx @@ -135,11 +135,12 @@ export class EditorGallery extends React.PureComponent { } const VERSION_PRIORITY: ReadonlyArray = ['insiders', 'next', 'latest']; +const DEPRECATED_TAG = 'Deprecated'; export function sortEditors(editors: che.Plugin[]) { const sorted = editors.sort((a, b) => { if (a.name === b.name) { - const aPriority = VERSION_PRIORITY.indexOf(a.version); - const bPriority = VERSION_PRIORITY.indexOf(b.version); + const aPriority = a.tags?.includes(DEPRECATED_TAG) ? -1 : VERSION_PRIORITY.indexOf(a.version); + const bPriority = b.tags?.includes(DEPRECATED_TAG) ? -1 : VERSION_PRIORITY.indexOf(b.version); if (aPriority !== -1 && bPriority !== -1) { return aPriority - bPriority;