From eb97d91f2e8f709dcc0bfd20f118dc83a83bcef8 Mon Sep 17 00:00:00 2001 From: Oleksii Orel Date: Fri, 1 Nov 2024 06:38:56 +0200 Subject: [PATCH] fix: editor selector cards Signed-off-by: Oleksii Orel --- .deps/EXCLUDED/prod.md | 1 + .../__snapshots__/index.spec.tsx.snap | 2 +- .../EditorSelector/Gallery/Entry/helpers.ts | 37 ++++++++++++ .../Gallery/Entry/index.module.css | 11 ++++ .../EditorSelector/Gallery/Entry/index.tsx | 14 ++++- .../Gallery/__tests__/index.spec.tsx | 56 +++++++++++++++++++ .../EditorSelector/Gallery/index.tsx | 5 +- .../yarn/old_version/.deps/EXCLUDED/prod.md | 1 + 8 files changed, 122 insertions(+), 5 deletions(-) create mode 100644 packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/helpers.ts diff --git a/.deps/EXCLUDED/prod.md b/.deps/EXCLUDED/prod.md index 40ff38df9..419536d28 100644 --- a/.deps/EXCLUDED/prod.md +++ b/.deps/EXCLUDED/prod.md @@ -11,6 +11,7 @@ This file lists dependencies that do not need CQs or auto-detection does not wor | `blueimp-md5@2.19.0` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/blueimp-md5/2.19.0) | | `codemirror@5.65.16` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.16) | | `cookie-signature@1.2.1` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/cookie-signature/1.2.1) | +| `ecc-jsbn@0.1.2` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/ecc-jsbn/0.1.2) | | `fast-uri@2.4.0` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fast-uri/2.4.0) | | `fastify@4.28.1` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fastify/4.28.1) | | `jsep@1.3.9` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/jsep/1.3.9) | 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; diff --git a/scripts/yarn/old_version/.deps/EXCLUDED/prod.md b/scripts/yarn/old_version/.deps/EXCLUDED/prod.md index 40ff38df9..419536d28 100644 --- a/scripts/yarn/old_version/.deps/EXCLUDED/prod.md +++ b/scripts/yarn/old_version/.deps/EXCLUDED/prod.md @@ -11,6 +11,7 @@ This file lists dependencies that do not need CQs or auto-detection does not wor | `blueimp-md5@2.19.0` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/blueimp-md5/2.19.0) | | `codemirror@5.65.16` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.16) | | `cookie-signature@1.2.1` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/cookie-signature/1.2.1) | +| `ecc-jsbn@0.1.2` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/ecc-jsbn/0.1.2) | | `fast-uri@2.4.0` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fast-uri/2.4.0) | | `fastify@4.28.1` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fastify/4.28.1) | | `jsep@1.3.9` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/jsep/1.3.9) |