add cheIcon in topology

frontend/packages/dev-console/src/components/topology/__tests__/__snapshots__/topology-utils.spec.ts.snap

@@ -44,6 +44,7 @@ Object {
       "data": Object {
         "build": undefined,
         "builderImage": "test-file-stub",
+        "cheEnabled": false,
         "connectedPipeline": Object {
           "pipeline": undefined,
           "pipelineRuns": Array [],
@@ -559,6 +560,7 @@ Object {
       "data": Object {
         "build": undefined,
         "builderImage": "test-file-stub",
+        "cheEnabled": false,
         "connectedPipeline": Object {
           "pipeline": undefined,
           "pipelineRuns": Array [],
@@ -1532,6 +1534,7 @@ Object {
       "data": Object {
         "build": undefined,
         "builderImage": "test-file-stub",
+        "cheEnabled": false,
         "connectedPipeline": Object {
           "pipeline": undefined,
           "pipelineRuns": Array [],

frontend/packages/dev-console/src/components/topology/shapes/CheIcon.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { getImageForIconClass } from '@console/internal/components/catalog/catalog-item-icon';
+import { createSvgIdUrl, SVGDefs } from '@console/topology';
+
+type CheIconProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+const FILTER_ID = 'CheIconOutlineFilterId';
+
+const CheIcon: React.FC<CheIconProps> = ({ x, y, width, height }) => (
+  <>
+    <SVGDefs id={FILTER_ID}>
+      <filter id={FILTER_ID}>
+        <feOffset result="nw" in="SourceAlpha" dx="-0.5" dy="-0.5" />
+        <feOffset result="ne" in="SourceAlpha" dx="0.5" dy="-0.5" />
+        <feOffset result="se" in="SourceAlpha" dx="0.5" dy="0.5" />
+        <feOffset result="sw" in="SourceAlpha" dx="-0.5" dy="0.5" />
+        <feMerge result="blackborder">
+          <feMergeNode in="nw" />
+          <feMergeNode in="ne" />
+          <feMergeNode in="se" />
+          <feMergeNode in="sw" />
+        </feMerge>
+        <feFlood floodColor="#FFFFFF" />
+        <feComposite in2="blackborder" operator="in" result="offsetColor" />
+        <feMerge>
+          <feMergeNode in="offsetColor" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+    </SVGDefs>
+    <image
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      xlinkHref={getImageForIconClass('icon-che')}
+      filter={createSvgIdUrl(FILTER_ID)}
+    />
+  </>
+);
+
+export default React.memo(CheIcon);

frontend/packages/dev-console/src/components/topology/topology-types.ts

@@ -100,6 +100,7 @@ export interface ConnectedWorkloadPipeline {
 export interface WorkloadData {
   url?: string;
   editUrl?: string;
+  cheEnabled?: boolean;
   builderImage?: string;
   kind?: string;
   isKnativeResource?: boolean;

frontend/packages/dev-console/src/components/topology/topology-utils.ts

@@ -134,6 +134,7 @@ export const createTopologyNodeData = (
       editUrl:
         deploymentsAnnotations['app.openshift.io/edit-url'] ||
         getEditURL(deploymentsAnnotations['app.openshift.io/vcs-uri'], cheURL),
+      cheEnabled: !!cheURL,
       builderImage:
         getImageForIconClass(`icon-${deploymentsLabels['app.openshift.io/runtime']}`) ||
         getImageForIconClass(`icon-${deploymentsLabels['app.kubernetes.io/name']}`) ||

frontend/packages/dev-console/src/components/topology2/components/nodes/WorkloadNode.tsx

@@ -15,6 +15,7 @@ import Decorator from '../../../topology/shapes/Decorator';
 import { routeDecoratorIcon } from '../../../import/render-utils';
 import PodSet from '../../../topology/shapes/PodSet';
 import KnativeIcon from '../../../topology/shapes/KnativeIcon';
+import CheIcon from '../../../topology/shapes/CheIcon';
 import BuildDecorator from './build-decorators/BuildDecorator';
 import BaseNode from './BaseNode';
 
@@ -43,12 +44,21 @@ const WorkloadNode: React.FC<WorkloadNodeProps> = ({
   const { width, height } = element.getBounds();
   const workloadData = element.getData().data;
   const size = Math.min(width, height);
-  const { donutStatus } = workloadData;
+  const { donutStatus, editUrl, cheEnabled } = workloadData;
   const { radius, decoratorRadius } = calculateRadius(size);
-  const repoIcon = routeDecoratorIcon(workloadData.editUrl, decoratorRadius);
   const cx = width / 2;
   const cy = height / 2;
-
+  const repoIcon =
+    cheEnabled && editUrl ? (
+      <CheIcon
+        x={cx - radius * 1.07}
+        y={cx - radius * 1.02}
+        width={radius * 0.39}
+        height={radius * 0.31}
+      />
+    ) : (
+      routeDecoratorIcon(editUrl, decoratorRadius)
+    );
   const tipContent = `Create a ${
     element.getData().operatorBackedService ? 'binding' : 'visual'
   } connector`;

frontend/packages/knative-plugin/src/utils/knative-topology-utils.ts

@@ -261,6 +261,7 @@ export const createTopologyServiceNodeData = (
       editUrl:
         annotations['app.openshift.io/edit-url'] ||
         getEditURL(annotations['app.openshift.io/vcs-uri'], cheURL),
+      cheEnabled: !!cheURL,
       isKnativeResource: true,
     },
   };

frontend/public/components/catalog/catalog-item-icon.tsx

@@ -14,6 +14,7 @@ import * as camelImg from '../../imgs/logos/camel.svg';
 import * as capedwarfImg from '../../imgs/logos/capedwarf.svg';
 import * as catalogImg from '../../imgs/logos/catalog-icon.svg';
 import * as cassandraImg from '../../imgs/logos/cassandra.svg';
+import * as cheImg from '../../imgs/logos/che.svg';
 import * as clojureImg from '../../imgs/logos/clojure.svg';
 import * as codeigniterImg from '../../imgs/logos/codeigniter.svg';
 import * as cordovaImg from '../../imgs/logos/cordova.png';
@@ -102,6 +103,7 @@ const logos = new Map()
   .set('icon-capedwarf', capedwarfImg)
   .set('icon-catalog', catalogImg)
   .set('icon-cassandra', cassandraImg)
+  .set('icon-che', cheImg)
   .set('icon-clojure', clojureImg)
   .set('icon-codeigniter', codeigniterImg)
   .set('icon-cordova', cordovaImg)