fix: editor selector cards

Signed-off-by: Oleksii Orel <oorel@redhat.com>
eclipse-che · Nov 1, 2024 · c496147 · c496147
1 parent bd75e93
commit c496147
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 7 deletions.
diff --git 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/jest.setup.tsx b/packages/dashboard-frontend/jest.setup.tsx
@@ -41,6 +41,6 @@ jest.mock('@/components/CheTooltip', () => {
 
 jest.mock('react-markdown', () => {
   return jest.fn(props => {
-    return React.createElement('div', null, props.children, props.content);
+    return React.createElement('a', null, props.children, props.content);
   });
 });
diff --git a/...d/src/components/EditorSelector/Gallery/Entry/__tests__/__snapshots__/index.spec.tsx.snap b/...d/src/components/EditorSelector/Gallery/Entry/__tests__/__snapshots__/index.spec.tsx.snap
@@ -113,7 +113,7 @@ exports[`Editor Selector Entry snapshot 1`] = `
       </div>
     </div>
     <div
-      className="pf-c-card__body"
+      className="pf-c-card__body cardBody"
     >
       <span
         className=""

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
@@ -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
@@ -45,6 +45,8 @@ export type State = {
 const allowedTags = ['Tech Preview', 'Deprecated'];
 
 export class EditorSelectorEntry extends React.PureComponent<Props, State> {
+  private timerId: number | undefined;
+
   constructor(props: Props) {
     super(props);
 
@@ -59,7 +61,38 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
     };
   }
 
+  // TODO temporary solution for making links open in a new browser tab (should be fixed with https://github.com/eclipse-che/che/issues/23219)
+  private setAttribute(
+    widgetId: string,
+    querySelector: string = 'a',
+    attributeName: string = 'target',
+    attributeValue: string = '_blank',
+  ): void {
+    clearTimeout(this.timerId);
+    this.timerId = window.setTimeout(() => {
+      const widget = document.getElementById(widgetId);
+      if (widget) {
+        widget.querySelectorAll(querySelector).forEach(targetElement => {
+          targetElement.setAttribute(attributeName, attributeValue);
+        });
+      }
+    }, 500);
+  }
+
+  private get id(): string {
+    return `editor-selector-card-${this.state.activeEditor.id}`;
+  }
+
+  public componentDidMount(): void {
+    if (this.state.activeEditor.provider) {
+      this.setAttribute(this.id);
+    }
+  }
+
   public componentDidUpdate(prevProps: Props): void {
+    if (this.state.activeEditor.provider) {
+      this.setAttribute(this.id);
+    }
     if (prevProps.selectedId !== this.props.selectedId) {
       const selectedEditor = this.props.editorsGroup.find(
         editor => editor.id === this.props.selectedId,
@@ -176,7 +209,7 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
     return (
       <Card
         hasSelectableInput={true}
-        id={'editor-selector-card-' + activeEditor.id}
+        id={this.id}
         isCompact={true}
         isFlat={true}
         isSelectableRaised
@@ -200,10 +233,10 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
             />
           </CardActions>
         </CardHeader>
-        <CardBody>
+        <CardBody className={styles.cardBody}>
           <span className={titleClassName}>{groupName}</span>
           {activeEditor.provider && (
-            <div style={{ fontSize: '75%' }}>
+            <div className={styles.provider}>
               <ReactMarkdown>{activeEditor.provider}</ReactMarkdown>
             </div>
           )}

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
@@ -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
@@ -135,11 +135,14 @@ export class EditorGallery extends React.PureComponent<Props, State> {
 }
 
 const VERSION_PRIORITY: ReadonlyArray<string> = ['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 || !a.tags.includes(DEPRECATED_TAG) ? VERSION_PRIORITY.indexOf(a.version) : -1;
+      const bPriority =
+        !b.tags || !b.tags.includes(DEPRECATED_TAG) ? VERSION_PRIORITY.indexOf(b.version) : -1;
 
       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
@@ -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) |
-Original file line number
+Diff line change
@@ Expand Up / @@ -113,7 +113,7 @@ exports[`Editor Selector Entry snapshot 1`] = ` @@
           </div>
         </div>
         <div
-          className="pf-c-card__body"
+          className="pf-c-card__body cardBody"
         >
           <span
             className=""
@@ Expand Down @@