fix: editor selector cards

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

Hide file tree

Showing 6 changed files with 120 additions and 5 deletions.
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/helpers.ts b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/helpers.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2018-2024 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+let timerId: number | undefined;
+
+/**
+ * Set the attribute for all target elements in the widget
+ * @param widgetId
+ * @param querySelector
+ * @param attributeName
+ * @param attributeValue
+ */
+export function setAttribute(
+  widgetId: string,
+  querySelector: string,
+  attributeName: string,
+  attributeValue: string,
+): void {
+  clearTimeout(timerId);
+  timerId = window.setTimeout(() => {
+    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
@@ -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
@@ -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<Props, State> {
     };
   }
 
+  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<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,12 @@ 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?.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;