fix: consider apiVersion when getting example yaml for crds

frontend/src/components/CustomResourceDefinitionsView.tsx

@@ -28,7 +28,7 @@ const CustomResourceDefinitionsView: React.FC<CustomResourceDefinitionsViewProps
       <div className="oh-crd-tile-view">
         {customResourceDefinitions.map(crd => (
           <div className="oh-crd-tile" key={crd.name}>
-            <div className="oh-crd-tile__title">{crd.displayName}</div>
+            <div className="oh-crd-tile__title">{crd.displayName} ({crd.version})</div>
             <div className="oh-crd-tile__rule" />
             <div className="oh-crd-tile__description">{crd.description}</div>
             {showExamples && (

frontend/src/components/editor/BundleDownloader.js

@@ -259,7 +259,4 @@ const mapStateToProps = state => ({
   operatorPackage: state.editorState.operatorPackage
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(OperatorBundleDownloader);
+export default connect(mapStateToProps, mapDispatchToProps)(OperatorBundleDownloader);

frontend/src/components/editor/RulesEditor.js

@@ -83,10 +83,18 @@ class RulesEditor extends React.Component {
     if (selections.includes('*') && selections.length > 1) {
       const prevSelections = _.get(rule, field);
       if (prevSelections.includes('*')) {
-        this.updateRule(rule, field, _.filter(selections, selection => selection !== '*'));
+        this.updateRule(
+          rule,
+          field,
+          _.filter(selections, selection => selection !== '*')
+        );
         return;
       }
-      this.updateRule(rule, field, _.filter(selections, selection => selection === '*'));
+      this.updateRule(
+        rule,
+        field,
+        _.filter(selections, selection => selection === '*')
+      );
       return;
     }
 

frontend/src/pages/operatorHub/OperatorHub.js

@@ -612,7 +612,7 @@ class OperatorHub extends React.Component {
         {_.map(this.sortCategories(categories), category => (
           <div key={category} className={`oh-category-item ${category === selectedCategory ? 'selected' : ''}`}>
             <button className="oh-category-item__select" onClick={e => this.categorySelect(e, category)}>
-              {category.length == 0 ? 'All' : category}
+              {category.length === 0 ? 'All' : category}
             </button>
             {category === selectedCategory && (
               <button className="oh-category-item__deselect" onClick={e => this.categorySelect(e, '')}>
@@ -890,7 +890,4 @@ const mapStateToProps = state => ({
   ...state.viewState
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(OperatorHub);
+export default connect(mapStateToProps, mapDispatchToProps)(OperatorHub);

frontend/src/utils/operatorTypes.ts

@@ -198,6 +198,7 @@ export type NormalizedOperatorChannel = {
 export type NormalizedCrdPreview = {
     name: string
     kind: string
+    version: string
     displayName: string
     description: string
     yamlExample: object | null

frontend/src/utils/operatorUtils.ts

@@ -40,7 +40,7 @@ const normalizeCapabilityLevel = (capability: string) => {
 /**
  * Search for deployment example by kind
  */
-const getExampleYAML = (kind: string, operator: operatorTypes.Operator): object | null => {
+const getExampleYAML = (kind: string, version: string, operator: operatorTypes.Operator): object | null => {
   const examples = _.get(operator, 'metadata.annotations.alm-examples');
   if (!examples) {
     return null;
@@ -53,7 +53,13 @@ const getExampleYAML = (kind: string, operator: operatorTypes.Operator): object
       yamlExamples = JSON.parse(examples);
     }
 
-    return _.find(yamlExamples, { kind });
+    return _.find(yamlExamples, (resource) => {
+      const apiVersionSplit = resource.apiVersion?.split('/');
+      if (apiVersionSplit.length > 2) {
+        throw new Error("Example resource YAML has invalid apiVersion.")
+      }
+      return resource?.kind === kind && (apiVersionSplit.length === 2? apiVersionSplit[1]: resource.apiVersion) === version;
+    });
   } catch (e) {
     return null;
   }
@@ -75,12 +81,13 @@ export const mergeDescriptions = (operator: operatorTypes.Operator) => {
 
 
 
-const normalizeCRD = (crd: operatorTypes.CustomResourceFile, operator: operatorTypes.Operator): operatorTypes.NormalizedCrdPreview => ({
+const normalizeCRD = (crd: operatorTypes.OperatorOwnedCrd, operator: operatorTypes.Operator): operatorTypes.NormalizedCrdPreview => ({
   name: _.get(crd, 'name', 'Name Not Available'),
   kind: crd.kind,
+  version: crd.version,
   displayName: _.get(crd, 'displayName', 'Name Not Available'),
   description: _.get(crd, 'description', 'No description available'),
-  yamlExample: getExampleYAML(crd.kind, operator)
+  yamlExample: getExampleYAML(crd.kind, crd.version, operator)
 });
 
 const normalizeCRDs = (operator: operatorTypes.Operator) => {