NXT-4419: Use 'isOwnedByAnotherIdentity' to display 'community icon'

NXT-4419 (Distinguish "foreign" (3rd-party) items in search results)

Author: xnhp

org.knime.ui.js/src/api/gateway-api/generated-api.ts

@@ -1356,6 +1356,12 @@ export interface ComponentSearchItem {
      * @memberof ComponentSearchItem
      */
     icon?: string;
+    /**
+     * True if the item is owned by an AccountIdentity (e.g. user or team) other than the currently authenticated user.
+     * @type {boolean}
+     * @memberof ComponentSearchItem
+     */
+    isOwnedByAnotherIdentity?: boolean;
     /**
      * The type (a.k.a. \"kind\") of the component
      * @type {string}

org.knime.ui.js/src/components/nodeTemplates/NodeTemplate/NodeTemplate.vue

@@ -4,7 +4,10 @@ import { computed, ref } from "vue";
 import { NodePreview } from "@knime/components";
 
 import type { NodeRepositoryDisplayModesType } from "@/store/settings";
-import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import type {
+  ComponentNodeTemplateWithExtendedPorts,
+  NodeTemplateWithExtendedPorts,
+} from "@/util/dataMappers";
 
 import NodeTemplateIconMode from "./NodeTemplateIconMode.vue";
 import NodeTemplateListMode from "./NodeTemplateListMode.vue";
@@ -17,7 +20,9 @@ export type Props = {
    * Additional to the properties of the NodeTemplate from the gateway API, this object
    * contains the port information (color and kind) which was mapped from the store
    */
-  nodeTemplate: NodeTemplateWithExtendedPorts;
+  nodeTemplate:
+    | NodeTemplateWithExtendedPorts
+    | ComponentNodeTemplateWithExtendedPorts;
   displayMode?: NodeRepositoryDisplayModesType;
   isSelected?: boolean;
   isDescriptionActive?: boolean;

org.knime.ui.js/src/components/nodeTemplates/NodeTemplate/NodeTemplateIconMode.vue

@@ -3,12 +3,18 @@ import { computed } from "vue";
 
 import ExtensionCommunityIcon from "@knime/styles/img/icons/extension-community.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import type {
+  ComponentNodeTemplateWithExtendedPorts,
+  NodeTemplateWithExtendedPorts,
+} from "@/util/dataMappers";
 
 import NodeTemplateHelpIcon from "./NodeTemplateHelpIcon.vue";
+import { shouldShowCommunityIcon } from "./nodeTemplateCommunityIcon";
 
 type Props = {
-  nodeTemplate: NodeTemplateWithExtendedPorts;
+  nodeTemplate:
+    | NodeTemplateWithExtendedPorts
+    | ComponentNodeTemplateWithExtendedPorts;
   isHovered: boolean;
   isDescriptionActive?: boolean;
   showFloatingHelpIcon?: boolean;
@@ -27,6 +33,10 @@ const extensionText = computed(() => {
   }
   return `\n———\n${props.nodeTemplate.extension.name}\nby ${props.nodeTemplate.extension.vendor.name}`;
 });
+
+const showCommunityIcon = computed(() =>
+  shouldShowCommunityIcon(props.nodeTemplate),
+);
 </script>
 
 <template>
@@ -55,7 +65,7 @@ const extensionText = computed(() => {
 
     <div class="extension-info">
       <ExtensionCommunityIcon
-        v-if="nodeTemplate.extension && !nodeTemplate.extension.vendor?.isKNIME"
+        v-if="showCommunityIcon"
         class="extension-community-icon"
       />
     </div>

org.knime.ui.js/src/components/nodeTemplates/NodeTemplate/NodeTemplateListMode.vue

@@ -3,12 +3,18 @@ import { computed } from "vue";
 
 import ExtensionCommunityIcon from "@knime/styles/img/icons/extension-community.svg";
 
-import type { NodeTemplateWithExtendedPorts } from "@/util/dataMappers";
+import type {
+  ComponentNodeTemplateWithExtendedPorts,
+  NodeTemplateWithExtendedPorts,
+} from "@/util/dataMappers";
 
 import NodeTemplateHelpIcon from "./NodeTemplateHelpIcon.vue";
+import { shouldShowCommunityIcon } from "./nodeTemplateCommunityIcon";
 
 type Props = {
-  nodeTemplate: NodeTemplateWithExtendedPorts;
+  nodeTemplate:
+    | NodeTemplateWithExtendedPorts
+    | ComponentNodeTemplateWithExtendedPorts;
   isHovered: boolean;
   showFloatingHelpIcon?: boolean;
   isSelected?: boolean;
@@ -23,15 +29,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["helpIconClick"]);
 
-const isCommunityExtension = computed(
-  () => !props.nodeTemplate.extension?.vendor?.isKNIME,
+const showCommunityIcon = computed(() =>
+  shouldShowCommunityIcon(props.nodeTemplate),
 );
 </script>
 
 <template>
   <div
     class="node-template-list-mode"
-    :class="{ 'with-community-icon': isCommunityExtension }"
+    :class="{ 'with-community-icon': showCommunityIcon }"
     :title="
       nodeTemplate.extension && nodeTemplate.extension.vendor
         ? `${nodeTemplate.extension.name} \nby “${nodeTemplate.extension.vendor.name}”`
@@ -50,7 +56,7 @@ const isCommunityExtension = computed(
     </div>
 
     <ExtensionCommunityIcon
-      v-if="isCommunityExtension"
+      v-if="showCommunityIcon"
       class="extension-community-icon"
     />
 

org.knime.ui.js/src/components/nodeTemplates/NodeTemplate/nodeTemplateCommunityIcon.ts

@@ -0,0 +1,18 @@
+import type {
+  ComponentNodeTemplateWithExtendedPorts,
+  NodeTemplateWithExtendedPorts,
+} from "@/util/dataMappers";
+
+export const isComponentNodeTemplate = (
+  data: NodeTemplateWithExtendedPorts | ComponentNodeTemplateWithExtendedPorts,
+): data is ComponentNodeTemplateWithExtendedPorts => Boolean(data.component);
+
+export const shouldShowCommunityIcon = (
+  data: NodeTemplateWithExtendedPorts | ComponentNodeTemplateWithExtendedPorts,
+): boolean => {
+  if (isComponentNodeTemplate(data)) {
+    return data.isOwnedByAnotherIdentity;
+  }
+
+  return Boolean(data.extension?.vendor && !data.extension.vendor.isKNIME);
+};

org.knime.ui.js/src/util/dataMappers/common.ts

@@ -12,6 +12,11 @@ export type NodeTemplateWithExtendedPorts = NodeTemplate & {
 };
 
 export type ComponentNodeTemplateWithExtendedPorts = NodeTemplate & {
+  /**
+   * True if the component is owned by an account other than the current user.
+   * Mirrors the gateway API isOwnedByAnotherIdentity flag.
+   */
+  isOwnedByAnotherIdentity: boolean;
   description: string;
   inPorts: Array<ExtendedPortType & { name: string; description: string }>;
   outPorts: Array<ExtendedPortType & { name: string; description: string }>;

org.knime.ui.js/src/util/dataMappers/componentSearch.ts

@@ -47,6 +47,7 @@ const toNodeTemplateWithExtendedPorts = (
     name: input.name,
     type: input.type,
     component: true,
+    isOwnedByAnotherIdentity: input.isOwnedByAnotherIdentity ?? false,
     icon: input.icon,
     inPorts,
     outPorts,