Editor Selector improvements

packages/dashboard-frontend/src/components/EditorSelector/Definition/__tests__/__snapshots__/index.spec.tsx.snap

@@ -26,6 +26,29 @@ exports[`EditorDefinition snapshot w/o initial values 1`] = `
     </button>
     Editor Definition Field
   </div>
+  <div
+    className="pf-l-flex"
+  >
+    <div
+      className="pf-m-align-right"
+    >
+      <a
+        aria-disabled={false}
+        aria-label={null}
+        className="pf-c-button pf-m-link pf-m-inline"
+        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe={true}
+        disabled={null}
+        href="https://eclipse.dev/che/docs/stable/end-user-guide/defining-a-common-ide/"
+        role={null}
+        target="_blank"
+        type={null}
+      >
+        How to specify and use a custom editor
+      </a>
+    </div>
+  </div>
 </form>
 `;
 
@@ -55,5 +78,28 @@ exports[`EditorDefinition snapshot with initial values 1`] = `
     </button>
     Editor Definition Field
   </div>
+  <div
+    className="pf-l-flex"
+  >
+    <div
+      className="pf-m-align-right"
+    >
+      <a
+        aria-disabled={false}
+        aria-label={null}
+        className="pf-c-button pf-m-link pf-m-inline"
+        data-ouia-component-id="OUIA-Generated-Button-link-2"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe={true}
+        disabled={null}
+        href="https://eclipse.dev/che/docs/stable/end-user-guide/defining-a-common-ide/"
+        role={null}
+        target="_blank"
+        type={null}
+      >
+        How to specify and use a custom editor
+      </a>
+    </div>
+  </div>
 </form>
 `;

packages/dashboard-frontend/src/components/EditorSelector/Definition/index.tsx

@@ -15,6 +15,7 @@ import React from 'react';
 
 import { EditorDefinitionField } from '@/components/EditorSelector/Definition/DefinitionField';
 import { EditorImageField } from '@/components/EditorSelector/Definition/ImageField';
+import { DocsLink } from '@/components/EditorSelector/DocsLink';
 
 export type Props = {
   editorDefinition: string | undefined;
@@ -58,6 +59,8 @@ export class EditorDefinition extends React.PureComponent<Props, State> {
           onChange={editorDefinition => this.handleEditorDefinition(editorDefinition)}
         />
         <EditorImageField onChange={editorImage => this.handleEditorImage(editorImage)} />
+
+        <DocsLink />
       </Form>
     );
   }

packages/dashboard-frontend/src/components/EditorSelector/DocsLink/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocsLink snapshot 1`] = `
+<div
+  className="pf-l-flex"
+>
+  <div
+    className="pf-m-align-right"
+  >
+    <a
+      aria-disabled={false}
+      aria-label={null}
+      className="pf-c-button pf-m-link pf-m-inline"
+      data-ouia-component-id="OUIA-Generated-Button-link-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe={true}
+      disabled={null}
+      href="https://eclipse.dev/che/docs/stable/end-user-guide/defining-a-common-ide/"
+      role={null}
+      target="_blank"
+      type={null}
+    >
+      How to specify and use a custom editor
+    </a>
+  </div>
+</div>
+`;

packages/dashboard-frontend/src/components/EditorSelector/DocsLink/__tests__/index.spec.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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
+ */
+
+import React from 'react';
+
+import { DocsLink } from '@/components/EditorSelector/DocsLink';
+import getComponentRenderer from '@/services/__mocks__/getComponentRenderer';
+
+const { createSnapshot } = getComponentRenderer(getComponent);
+
+describe('DocsLink', () => {
+  test('snapshot', () => {
+    const snapshot = createSnapshot();
+    expect(snapshot.toJSON()).toMatchSnapshot();
+  });
+});
+
+function getComponent() {
+  return <DocsLink />;
+}

packages/dashboard-frontend/src/components/EditorSelector/DocsLink/index.tsx

@@ -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
+ */
+
+import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import React from 'react';
+
+const DOCS_DEFINING_A_COMMON_IDE =
+  'https://eclipse.dev/che/docs/stable/end-user-guide/defining-a-common-ide/';
+
+export class DocsLink extends React.PureComponent {
+  public render() {
+    return (
+      <Flex>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Button
+            component="a"
+            href={DOCS_DEFINING_A_COMMON_IDE}
+            variant="link"
+            isInline
+            target="_blank"
+          >
+            How to specify and use a custom editor
+          </Button>
+        </FlexItem>
+      </Flex>
+    );
+  }
+}

packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/__tests__/__snapshots__/index.spec.tsx.snap

@@ -28,6 +28,49 @@ exports[`Editor Selector Entry snapshot 1`] = `
         className="editorIcon"
         src="/v3/images/vscode.svg"
       />
+      <div
+        className="pf-c-label-group pf-m-vertical"
+      >
+        <div
+          className="pf-c-label-group__main"
+        >
+
+          <ul
+            aria-label="Label group category"
+            className="pf-c-label-group__list"
+            role="list"
+          >
+            <li
+              className="pf-c-label-group__list-item"
+            >
+              <span
+                className="pf-c-label pf-m-blue pf-m-outline label version"
+              >
+                <span
+                  className="pf-c-label__content"
+                >
+                  insiders
+                </span>
+              </span>
+            </li>
+            <li
+              className="pf-c-label-group__list-item"
+            >
+              <span
+                style={
+                  {
+                    "lineHeight": "12px",
+                    "padding": "0 5px",
+                    "visibility": "hidden",
+                  }
+                }
+              >
+
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
       <div
         className="pf-c-card__actions"
       >
@@ -78,15 +121,6 @@ exports[`Editor Selector Entry snapshot 1`] = `
       >
         VS Code - Open Source
       </span>
-      <span
-        className="pf-c-label pf-m-blue pf-m-outline versionLabel"
-      >
-        <span
-          className="pf-c-label__content"
-        >
-          insiders
-        </span>
-      </span>
     </div>
   </article>,
 ]

packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx

@@ -18,12 +18,13 @@ import {
   Dropdown,
   DropdownItem,
   KebabToggle,
+  LabelGroup,
 } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
 import React from 'react';
 
 import styles from '@/components/EditorSelector/Gallery/Entry/index.module.css';
-import TagLabel from '@/components/TagLabel';
+import { TagLabel } from '@/components/TagLabel';
 import { che } from '@/services/models';
 
 export type Props = {
@@ -144,6 +145,20 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
 
     const titleClassName = isSelectedGroup ? styles.activeCard : '';
 
+    const hasTechPreviewTag =
+      (activeEditor.tags || []).includes('tech-preview') === true ||
+      /idea/i.test(activeEditor.id) === true;
+    const tagsGroup = (
+      <LabelGroup isVertical>
+        <TagLabel type="version" text={activeEditor.version} />
+        {hasTechPreviewTag ? (
+          <TagLabel type="tag" text="Tech Preview" />
+        ) : (
+          <span style={{ padding: '0 5px', lineHeight: '12px', visibility: 'hidden' }}>&nbsp;</span>
+        )}
+      </LabelGroup>
+    );
+
     return (
       <Card
         hasSelectableInput={true}
@@ -157,6 +172,7 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
       >
         <CardHeader>
           <img src={groupIcon} className={styles.editorIcon} />
+          {tagsGroup}
           <CardActions>
             <Dropdown
               toggle={
@@ -172,7 +188,6 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
         </CardHeader>
         <CardBody>
           <span className={titleClassName}>{groupName}</span>
-          <TagLabel version={activeEditor.version}></TagLabel>
         </CardBody>
       </Card>
     );

packages/dashboard-frontend/src/components/EditorSelector/Gallery/__tests__/__snapshots__/index.spec.tsx.snap

@@ -5,8 +5,8 @@ exports[`EditorGallery snapshot 1`] = `
   className="pf-l-gallery pf-m-gutter"
   style={
     {
-      "--pf-l-gallery--GridTemplateColumns--max": "170px",
-      "--pf-l-gallery--GridTemplateColumns--min": "170px",
+      "--pf-l-gallery--GridTemplateColumns--max": "210px",
+      "--pf-l-gallery--GridTemplateColumns--min": "210px",
     }
   }
 >

packages/dashboard-frontend/src/components/EditorSelector/Gallery/index.tsx

@@ -125,7 +125,7 @@ export class EditorGallery extends React.PureComponent<Props, State> {
 
   public render() {
     return (
-      <Gallery hasGutter={true} minWidths={{ default: '170px' }} maxWidths={{ default: '170px' }}>
+      <Gallery hasGutter={true} minWidths={{ default: '210px' }} maxWidths={{ default: '210px' }}>
         {this.buildEditorCards()}
       </Gallery>
     );