Show category's displayName instead of name in Composition

Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Change-Id: I15369e8a9da6a77a5f7cd8edb6a33963358dd746
Issue-ID: SDC-3863

3 files changed, 11 insertions, 10 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/__snapshots__/info-tab.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/__snapshots__/info-tab.component.spec.ts.snap
index 1948395b47..5b4159e027 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/__snapshots__/info-tab.component.spec.ts.snap
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/__snapshots__/info-tab.component.spec.ts.snap
@@ -7,6 +7,7 @@ exports[`InfoTabComponent can load instance 1`] = `
   compositionService={[Function Object]}
   eventListenerService={[Function Object]}
   flatLeftPaletteElementsFromService={[Function Function]}
+  getCategoryDisplayNameOrName={[Function Function]}
   getPathNamesVersionChangeModal={[Function Function]}
   initEditResourceVersion={[Function Function]}
   modalService={[Function Object]}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.html
index cafe93e103..ccaebab8af 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.html
@@ -46,7 +46,7 @@
         <ng-container *ngIf="component.categories && component.categories[0]">
             <div class="component-details-panel-item">
                 <span class="name" [innerHTML]="'GENERAL_LABEL_CATEGORY' | translate"></span>
-                <span class="value" data-tests-id="rightTab_category" tooltip="{{component.categories[0].name}}">{{component.categories[0].name}}</span>
+                <span class="value" data-tests-id="rightTab_category" tooltip="{{getCategoryDisplayNameOrName(component.categories[0])}}">{{getCategoryDisplayNameOrName(component.categories[0])}}</span>
             </div>
 
             <!-- SUB CATEGORY -->
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.ts
index 773b44cab7..9ed56ed2a9 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/info-tab/info-tab.component.ts
@@ -5,7 +5,7 @@ import {
     Component as TopologyTemplate,
     ComponentInstance,
     LeftPaletteComponent,
-    FullComponentInstance
+    FullComponentInstance, IMainCategory
 } from "app/models";
 import {Store} from "@ngxs/store";
 import { EVENTS, GRAPH_EVENTS } from 'app/utils';
@@ -23,7 +23,6 @@ import {SelectedComponentType, TogglePanelLoadingAction} from "../../../common/s
 import Dictionary = _.Dictionary;
 import {TopologyTemplateService} from "../../../../../services/component-services/topology-template.service";
 
-
 @Component({
     selector: 'panel-info-tab',
     templateUrl: './info-tab.component.html',
@@ -81,12 +80,15 @@ export class InfoTabComponent implements OnInit, OnDestroy {
         return this.componentType === SelectedComponentType.COMPONENT_INSTANCE;
     }
 
+    private getCategoryDisplayNameOrName = (mainCategory: IMainCategory): string => {
+        return mainCategory.displayName ? mainCategory.displayName : mainCategory.name;
+    }
+
     private versioning: Function = (versionNumber: string): string => {
         let version: Array<string> = versionNumber && versionNumber.split('.');
         return '00000000'.slice(version[0].length) + version[0] + '.' + '00000000'.slice(version[1].length) + version[1];
     };
 
-
     private onChangeVersion = (versionDropdown) => {
         let newVersionValue = versionDropdown.value;
         versionDropdown.value = (<FullComponentInstance>this.component).getComponentUid();
@@ -106,10 +108,10 @@ export class InfoTabComponent implements OnInit, OnDestroy {
             let onUpdate = () => {
                 //this function will update the instance version than the function call getComponent to update the current component and return the new instance version
                 this.componentInstanceService.changeResourceInstanceVersion(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.component.uniqueId, newVersionValue)
-                    .subscribe((component) => {
-                        this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
-                        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_VERSION_CHANGED, component);
-                    }, onCancel);
+                .subscribe((component) => {
+                    this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_VERSION_CHANGED, component);
+                }, onCancel);
             };
 
             if (this.component.isService() || this.component.isServiceProxy() || this.component.isServiceSubstitution()) {
@@ -140,7 +142,6 @@ export class InfoTabComponent implements OnInit, OnDestroy {
         }
     };
 
-
     private getPathNamesVersionChangeModal = (pathsToDelete:string[]):string => {
         const relatedPaths = _.filter(this.compositionService.forwardingPaths, path =>
             _.find(pathsToDelete, id =>
@@ -191,4 +192,3 @@ export class InfoTabComponent implements OnInit, OnDestroy {
     }
 
 };
-