feat: add an ability to show provider info into a sample

Signed-off-by: Oleksii Orel <oorel@redhat.com>
eclipse-che · Oct 24, 2024 · a4d415a · a4d415a
1 parent 3db8de4
commit a4d415a
Show file tree

Hide file tree

Showing 14 changed files with 2,357 additions and 1,151 deletions.
diff --git a/.deps/dev.md b/.deps/dev.md
diff --git a/.deps/prod.md b/.deps/prod.md
diff --git a/packages/dashboard-backend/src/constants/examples.ts b/packages/dashboard-backend/src/constants/examples.ts
@@ -58,7 +58,86 @@ export const devWorkspaceResourcesExample = {
 
     return dump(devfile, { indent: 2 });
   },
-  editorId: 'che-incubator/che-code/insiders',
-  pluginRegistryUrl: 'http://plugin-registry.eclipse-che.svc:8080/v3',
-  projects: [],
+  get editorContent() {
+    const devfile = {
+      schemaVersion: '2.2.2',
+      metadata: {
+        description:
+          'Microsoft Visual Studio Code - Open Source IDE for Eclipse Che - Insiders build',
+        displayName: 'VS Code - Open Source',
+        name: 'che-code',
+        tags: ['Tech-Preview'],
+        attributes: {
+          title: 'VS Code - Open Source',
+        },
+      },
+      commands: [
+        {
+          apply: {
+            component: 'che-code-injector',
+          },
+          id: 'init-container-command',
+        },
+        {
+          exec: {
+            commandLine:
+              'nohup /checode/entrypoint-volume.sh > /checode/entrypoint-logs.txt 2>&1 &',
+            component: 'che-code-runtime-description',
+          },
+          id: 'init-che-code-command',
+        },
+      ],
+      components: [
+        {
+          container: {
+            command: ['/entrypoint-init-container.sh'],
+            image: 'quay.io/che-incubator/che-code:insiders',
+          },
+          name: 'che-code-injector',
+        },
+        {
+          attributes: {
+            'app.kubernetes.io/component': 'che-code-runtime',
+            'app.kubernetes.io/part-of': 'che-code.eclipse.org',
+            'controller.devfile.io/container-contribution': true,
+          },
+          container: {
+            endpoints: [
+              {
+                attributes: {
+                  cookiesAuthEnabled: true,
+                  discoverable: false,
+                  type: 'main',
+                  urlRewriteSupported: true,
+                },
+                exposure: 'public',
+                name: 'che-code',
+                protocol: 'https',
+                secure: true,
+                targetPort: 3100,
+              },
+            ],
+            image: 'quay.io/devfile/universal-developer-image:latest',
+            volumeMounts: [
+              {
+                name: 'checode',
+                path: '/checode',
+              },
+            ],
+          },
+          name: 'che-code-runtime-description',
+        },
+        {
+          name: 'checode',
+          volume: {},
+        },
+      ],
+      events: {
+        postStart: ['init-che-code-command'],
+        preStart: ['init-container-command'],
+      },
+    };
+
+    return dump(devfile, { indent: 2 });
+  },
 };
diff --git a/packages/dashboard-frontend/jest.setup.tsx b/packages/dashboard-frontend/jest.setup.tsx
@@ -38,3 +38,9 @@ jest.mock('@/components/CheTooltip', () => {
     }),
   };
 });
+
+jest.mock('react-markdown', () => {
+  return jest.fn(props => {
+    return React.createElement('div', null, props.children, props.content);
+  });
+});
diff --git a/packages/dashboard-frontend/package.json b/packages/dashboard-frontend/package.json
@@ -56,6 +56,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
+    "react-markdown": "^9.0.1",
     "react-pluralize": "^1.6.3",
     "react-redux": "^7.2.9",
     "react-router": "^5.1.2",

diff --git a/...s/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/__tests__/index.spec.tsx b/...s/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/__tests__/index.spec.tsx
@@ -172,6 +172,17 @@ describe('Editor Selector Entry', () => {
     });
   });
 
+  describe('provider info', () => {
+    test('show text', () => {
+      renderComponent(
+        editorGroup[0].id,
+        [...editorGroup].map(editor => Object.assign({}, editor, { provider: 'Provided by...' })),
+      );
+
+      expect(screen.queryByText('Provided by...')).not.toBeNull();
+    });
+  });
+
   describe('props change', () => {
     test('sibling editor ID provided later', () => {
       const { reRenderComponent } = renderComponent(editorGroup[0].id, editorGroup);

diff --git a/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx b/packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx
@@ -22,6 +22,7 @@ import {
 } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
 
 import styles from '@/components/EditorSelector/Gallery/Entry/index.module.css';
 import { TagLabel } from '@/components/TagLabel';
@@ -79,11 +80,13 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
   }
 
   private handleCardClick(event: React.MouseEvent) {
-    event.preventDefault();
-
     const { selectedId, onSelect } = this.props;
     const { activeEditor } = this.state;
 
+    if (!activeEditor.provider) {
+      event.preventDefault();
+    }
+
     if (activeEditor.id === selectedId) {
       return;
     }
@@ -199,6 +202,11 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
         </CardHeader>
         <CardBody>
           <span className={titleClassName}>{groupName}</span>
+          {activeEditor.provider && (
+            <div style={{ fontSize: '75%' }}>
+              <ReactMarkdown>{activeEditor.provider}</ReactMarkdown>
+            </div>
+          )}
         </CardBody>
       </Card>
     );

diff --git a/packages/dashboard-frontend/src/services/models/che.ts b/packages/dashboard-frontend/src/services/models/che.ts
@@ -29,6 +29,7 @@ export interface Plugin {
   type: string;
   version: string;
   description?: string;
+  provider?: string;
   links: {
     devfile: string;
   };

diff --git a/...ard-frontend/src/store/Plugins/chePlugins/__tests__/helpers.convertToEditorPlugin.spec.ts b/...ard-frontend/src/store/Plugins/chePlugins/__tests__/helpers.convertToEditorPlugin.spec.ts
@@ -78,8 +78,7 @@ describe('convertToEditorPlugin', () => {
     const plugin = convertToEditorPlugin(editor);
 
     expect(plugin).toEqual({
-      description:
-        'Microsoft Visual Studio Code - Open Source IDE for Eclipse Che - Insiders build',
+      description: 'Open Source IDE for Eclipse Che....',
       displayName: 'VS Code - Open Source',
       icon: `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`,
       iconMediatype: 'image/svg+xml',
@@ -88,6 +87,7 @@ describe('convertToEditorPlugin', () => {
         devfile: '',
       },
       name: 'che-code',
+      provider: 'Provided by ....',
       publisher: 'che-incubator',
       tags: ['Tech-Preview'],
       type: 'Che Editor',
@@ -123,11 +123,11 @@ function getEditor(): devfileApi.Devfile {
         iconMediatype: 'image/svg+xml',
         publisher: 'che-incubator',
         repository: 'https://github.com/che-incubator/che-code',
-        title: 'Microsoft Visual Studio Code - Open Source IDE for Eclipse Che - Insiders build',
+        title: 'Open Source IDE for Eclipse Che ....',
         version: 'insiders',
+        provider: 'Provided by ....',
       },
-      description:
-        'Microsoft Visual Studio Code - Open Source IDE for Eclipse Che - Insiders build',
+      description: 'Open Source IDE for Eclipse Che....',
       displayName: 'VS Code - Open Source',
       name: 'che-code',
       tags: ['Tech-Preview'],

diff --git a/packages/dashboard-frontend/src/store/Plugins/chePlugins/helpers.ts b/packages/dashboard-frontend/src/store/Plugins/chePlugins/helpers.ts
@@ -22,7 +22,7 @@ export function convertToEditorPlugin(editor: devfileApi.Devfile): che.Plugin {
   ) {
     throw new Error('Invalid editor metadata');
   }
-  return {
+  const plugin: che.Plugin = {
     id:
       editor.metadata.attributes.publisher +
       '/' +
@@ -42,4 +42,10 @@ export function convertToEditorPlugin(editor: devfileApi.Devfile): che.Plugin {
     icon: editor.metadata.attributes.iconData,
     iconMediatype: editor.metadata.attributes.iconMediatype,
   };
+
+  if (editor.metadata.attributes?.provider) {
+    plugin.provider = editor.metadata.attributes.provider;
+  }
+
+  return plugin;
 }