[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

4 files changed, 621 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html
new file mode 100644
index 0000000000..0d7d5dc8f4
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html
@@ -0,0 +1,23 @@
+<!-- Description Popover -->
+<div >
+    <span data-tests-id='popover-x-button' data-ng-click='closeDescriptionPopover()' class='tlv-sprite tlv-x-btn close-popover-btn'></span>
+    <div class="w-sdc-form-item" ng-form="descriptionForm" data-ng-class="{error:(descriptionForm.$dirty && descriptionForm.$invalid)}">
+        <textarea class="i-sdc-form-textarea {{$index}}" data-ng-class="{'view-mode': isViewMode()}"
+                  data-ng-maxlength="256"
+                  maxlength="256"
+                  data-ng-required="true"
+                  name="description"
+                  data-ng-model="artifact.description"
+                  data-ng-model-options="{ debounce: 200 }"
+                  data-ng-pattern="getValidationPattern('string')"
+                  ng-readonly="isViewMode()"
+                  data-tests-id="description">
+                                    </textarea>
+
+        <div class="input-error" data-ng-show="descriptionForm.$dirty && descriptionForm.$invalid">
+            <span ng-show="descriptionForm.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span>
+            <span ng-show="descriptionForm.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+            <span ng-show="descriptionForm.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
new file mode 100644
index 0000000000..2816c312f9
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
@@ -0,0 +1,276 @@
+//@require "./*.html"
+'use strict';
+import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
+import {ArtifactModel, ArtifactGroupModel, Resource} from "app/models";
+import {ArtifactsUtils, ModalsHandler, ValidationUtils} from "app/utils";
+import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
+import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
+
+interface IDeploymentArtifactsViewModelScope extends IWorkspaceViewModelScope {
+    tableHeadersList:Array<any>;
+    reverse:boolean;
+    sortBy:string;
+    artifacts:Array<ArtifactModel>;
+    editForm:ng.IFormController;
+    isLoading:boolean;
+    artifactDescriptions:any;
+    selectedArtifactId:string;
+    popoverTemplate:string;
+
+    addOrUpdate(artifact:ArtifactModel):void;
+    updateSelectedArtifact():void;
+    delete(artifact:ArtifactModel):void;
+    sort(sortBy:string):void;
+    noArtifactsToShow():boolean;
+    getValidationPattern(validationType:string, parameterType?:string):RegExp;
+    validateJson(json:string):boolean;
+    resetValue(parameter:any):void;
+    viewModeOrCsarComponent():boolean;
+    isLicenseArtifact(artifact:ArtifactModel):void;
+    getEnvArtifact(heatArtifact:ArtifactModel):ArtifactModel;
+    getEnvArtifactName(artifact:ArtifactModel):string;
+    openEditEnvParametersModal(artifact:ArtifactModel):void;
+    openDescriptionPopover(artifactId:string):void;
+    closeDescriptionPopover():void;
+}
+
+export class DeploymentArtifactsViewModel {
+
+    static '$inject' = [
+        '$scope',
+        '$templateCache',
+        '$filter',
+        'ValidationUtils',
+        'ArtifactsUtils',
+        'ModalsHandler',
+        'ComponentServiceNg2'
+    ];
+
+    constructor(private $scope:IDeploymentArtifactsViewModelScope,
+                private $templateCache:ng.ITemplateCacheService,
+                private $filter:ng.IFilterService,
+                private validationUtils:ValidationUtils,
+                private artifactsUtils:ArtifactsUtils,
+                private ModalsHandler:ModalsHandler,
+                private ComponentServiceNg2: ComponentServiceNg2) {
+        this.initScope();
+        this.$scope.updateSelectedMenuItem();
+    }
+
+    private initDescriptions = ():void => {
+        this.$scope.artifactDescriptions = {};
+        _.forEach(this.$scope.component.deploymentArtifacts, (artifact:ArtifactModel):void => {
+            this.$scope.artifactDescriptions[artifact.artifactLabel] = artifact.description;
+        });
+    };
+
+    private setArtifact = (artifact:ArtifactModel):void => {
+        if (!artifact.description || !this.$scope.getValidationPattern('string').test(artifact.description)) {
+            artifact.description = this.$scope.artifactDescriptions[artifact.artifactLabel];
+        }
+    };
+
+    private initScopeArtifacts = ()=> {
+        this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.deploymentArtifacts);
+        _.forEach(this.$scope.artifacts, (artifact:ArtifactModel):void => {
+            artifact.envArtifact = this.getEnvArtifact(artifact);
+        });
+    };
+
+    private initArtifacts = (loadFromServer:boolean):void => {
+        if (loadFromServer) {
+            this.$scope.isLoading = true;
+            this.ComponentServiceNg2.getComponentDeploymentArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
+                this.$scope.component.deploymentArtifacts = response.deploymentArtifacts;
+                this.initScopeArtifacts();
+                this.$scope.isLoading = false;
+            });
+        } else {
+            this.initScopeArtifacts();
+        }
+
+    };
+
+    private getEnvArtifact = (heatArtifact:ArtifactModel):ArtifactModel=> {
+        return _.find(this.$scope.artifacts, (item:ArtifactModel)=> {
+            return item.generatedFromId === heatArtifact.uniqueId;
+        });
+    };
+
+    private getCurrentArtifact = ():ArtifactModel => {
+        if (!this.$scope.selectedArtifactId) {
+            return null;
+        }
+        let artifact:ArtifactModel = this.$scope.artifacts.filter((art) => {
+            return art.uniqueId == this.$scope.selectedArtifactId;
+        })[0];
+        return artifact;
+    }
+
+    private initScope = ():void => {
+        let self = this;
+        this.$scope.isLoading = false;
+        this.$scope.selectedArtifactId = null;
+        this.initDescriptions();
+        if(this.$scope.component.deploymentArtifacts) {
+            this.initArtifacts(false);
+        } else {
+            this.initArtifacts(true);
+        }
+        this.$scope.setValidState(true);
+
+        this.$scope.tableHeadersList = [
+            {title: 'Name', property: 'artifactDisplayName'},
+            {title: 'Type', property: 'artifactType'},
+            {title: 'Deployment timeout', property: 'timeout'},
+            {title: 'Version', property: 'artifactVersion'},
+            {title: 'UUID', property: 'artifactUUID'}
+        ];
+
+        this.$templateCache.put("deployment-artifacts-description-popover.html", require('app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html'));
+        this.$scope.popoverTemplate = "deployment-artifacts-description-popover.html";
+
+        this.$scope.isLicenseArtifact = (artifact:ArtifactModel):boolean => {
+            let isLicense:boolean = false;
+            if (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) {
+
+                isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType);
+            }
+
+            return isLicense;
+        };
+
+        this.$scope.sort = (sortBy:string):void => {
+            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
+            this.$scope.sortBy = sortBy;
+        };
+
+        this.$scope.getValidationPattern = (validationType:string, parameterType?:string):RegExp => {
+            return this.validationUtils.getValidationPattern(validationType, parameterType);
+        };
+
+        this.$scope.validateJson = (json:string):boolean => {
+            if (!json) {
+                return true;
+            }
+            return this.validationUtils.validateJson(json);
+        };
+
+        this.$scope.viewModeOrCsarComponent = ():boolean => {
+            return this.$scope.isViewMode() || (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent());
+        };
+
+        this.$scope.addOrUpdate = (artifact:ArtifactModel):void => {
+            artifact.artifactGroupType = 'DEPLOYMENT';
+            let artifactCopy = new ArtifactModel(artifact);
+
+            let success = (response:any):void => {
+                this.$scope.artifactDescriptions[artifactCopy.artifactLabel] = artifactCopy.description;
+                this.initArtifacts(true);
+                //  this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts);
+            };
+
+            let error = (err:any):void => {
+                console.log(err);
+                this.initArtifacts(true);
+                //  self.$scope.artifacts = _.values(self.$scope.component.deploymentArtifacts);
+            };
+
+            this.ModalsHandler.openArtifactModal(artifactCopy, this.$scope.component).then(success, error);
+        };
+
+        this.$scope.noArtifactsToShow = ():boolean => {
+            return !_.some(this.$scope.artifacts, 'esId');
+        };
+
+        this.$scope.resetValue = (parameter:any):void => {
+            if (!parameter.currentValue && parameter.defaultValue) {
+                parameter.currentValue = parameter.defaultValue;
+            }
+            else if ('boolean' == parameter.type) {
+                parameter.currentValue = parameter.currentValue.toUpperCase();
+            }
+        };
+
+        this.$scope.$watch('editForm.$valid', ():void => {
+            if (this.$scope.editForm) {
+                //    this.$scope.setValidState(this.$scope.editForm.$valid);
+            }
+        });
+
+        this.$scope.updateSelectedArtifact = ():void => {
+            if (!this.$scope.isViewMode() && !this.$scope.isLoading) {
+                let artifact:ArtifactModel = this.getCurrentArtifact();
+                this.setArtifact(artifact); //resets artifact description to original value if invalid.
+                if (artifact && artifact.originalDescription != artifact.description) {
+                    this.$scope.isLoading = true;
+                    let onSuccess = (responseArtifact:ArtifactModel):void => {
+                        this.$scope.artifactDescriptions[responseArtifact.artifactLabel] = responseArtifact.description;
+                        // this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts);
+                        this.initArtifacts(true);
+                        this.$scope.isLoading = false;
+                    };
+
+                    let onFailed = (error:any):void => {
+                        console.log('Delete artifact returned error:', error);
+                        this.$scope.isLoading = false;
+                    };
+
+                    this.$scope.component.addOrUpdateArtifact(artifact).then(onSuccess, onFailed);
+                }
+            }
+        };
+
+        this.$scope.delete = (artifact:ArtifactModel):void => {
+            let onOk = ():void => {
+                this.$scope.isLoading = true;
+                let onSuccess = ():void => {
+                    this.$scope.isLoading = false;
+                    this.initArtifacts(true);
+                    //this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts);
+                };
+
+                let onFailed = (error:any):void => {
+                    this.$scope.isLoading = false;
+                    console.log('Delete artifact returned error:', error);
+                };
+
+                this.$scope.component.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(onSuccess, onFailed);
+            };
+
+            let title:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE");
+            let message:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}");
+            this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
+        };
+
+        this.$scope.getEnvArtifactName = (artifact:ArtifactModel):string => {
+            let envArtifact = this.$scope.getEnvArtifact(artifact);
+            if (envArtifact) {
+                return envArtifact.artifactDisplayName;
+            }
+        };
+
+        this.$scope.openEditEnvParametersModal = (artifact:ArtifactModel):void => {
+            this.ModalsHandler.openEditEnvParametersModal(artifact, this.$scope.component).then(()=> {
+                this.initArtifacts(true);
+            }, ()=> {
+                this.initArtifacts(true);
+            });
+        };
+
+        this.$scope.openDescriptionPopover = (artifactId:string):void => {
+            if (this.$scope.selectedArtifactId && this.$scope.selectedArtifactId != artifactId) {
+                this.$scope.updateSelectedArtifact();
+            }
+            this.$scope.selectedArtifactId = artifactId;
+
+        };
+
+        this.$scope.closeDescriptionPopover = ():void => {
+            if (this.$scope.selectedArtifactId) {
+                this.$scope.updateSelectedArtifact();
+                this.$scope.selectedArtifactId = null;
+            }
+        };
+    };
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
new file mode 100644
index 0000000000..cc914b07a8
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
@@ -0,0 +1,126 @@
+<div class="workspace-deployment-artifact">
+
+    <div data-tests-id="add-deployment-artifact-button" ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" data-tests-id="add-property-button" class="add-btn" data-ng-click="addOrUpdate({})">Add</div>
+
+    <div class="table-container-flex">
+
+        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
+            <loader data-display="isLoading"></loader>
+            <div class="head flex-container">
+                <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
+                    <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
+                </div>
+                <div class="table-no-text-header head-row flex-item"></div>
+            </div>
+
+            <form class="body" name="editForm">
+
+                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
+
+                    <!-- Artifact row -->
+                    <div ng-if="noArtifactsToShow()" data-ng-class="{'disabled': isDisableMode()}" class="no-row-text" translate="DEPLOYMENT_ARTIFACT_NO_ARTIFACTS_TO_DISPLAY"></div>
+                    <div data-ng-repeat-start="artifact in artifacts | orderBy:sortBy:reverse track by $index"
+                         class="flex-container data-row"
+                         data-ng-class="{'selected': selectedArtifactId == artifact.uniqueId }"
+                         data-ng-if="artifact.esId && 'HEAT_ENV' !== artifact.artifactType"
+                         data-tests-id="artifact-item-{{artifact.artifactDisplayName}}">
+                        <div class="table-col-general flex-item" >
+                            <div class="heat-env-connect-container" ng-class="{'heat-env-connect-container-view-mode': isViewMode()}" data-ng-if="artifact.envArtifact">
+                            <span  class="heat-env-connect"></span>
+                             </div>
+                            <span data-tests-id="artifactDisplayName_{{artifact.artifactDisplayName}}" sdc-smart-tooltip class="artifact-name">{{artifact.artifactDisplayName}}</span>
+
+                            <span class="sprite-new show-desc hand description-popover-icon"
+                                  uib-popover-template="popoverTemplate"
+                                  popover-class="parameter-description-popover deployment-artifact-view top"
+                                  popover-title="Description"
+                                  popover-placement="top-left"
+                                  popover-is-open="selectedArtifactId == artifact.uniqueId && !isLoading"
+                                  popover-trigger="'none'"
+                                  popover-append-to-body="true"
+                                  data-ng-click="openDescriptionPopover(artifact.uniqueId)"
+                                  data-tests-id="descriptionIcon_{{artifact.artifactDisplayName}}"></span>
+                        </div>
+
+                        <div class="table-col-general flex-item text" data-tests-id="artifactType_{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactType}}">
+                            {{artifact.artifactType}}
+                        </div>
+                        <div class="table-col-general flex-item" data-tests-id="timeout_{{artifact.artifactDisplayName}}">
+                            {{artifact.timeout? artifact.timeout:''}}
+                        </div>
+                        <div class="table-col-general flex-item" data-tests-id="artifactVersion_{{artifact.artifactDisplayName}}">
+                            {{artifact.artifactVersion}}
+                        </div>
+                        <div class="table-col-general flex-item text" data-tests-id="artifactUUID_{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactUUID}}">
+                            <span>{{artifact.artifactUUID}}</span>
+                        </div>
+
+                        <div class="table-btn-col flex-item">
+                            <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactDisplayName}}"
+                                    data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="addOrUpdate(artifact)"></button>
+                            <button class="table-delete-btn" data-tests-id="delete_{{artifact.artifactDisplayName}}"
+                                    data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="delete(artifact)"> </button>
+                             <button class="table-download-btn" download-artifact  data-tests-id="download_{{artifact.artifactDisplayName}}"
+                                     data-ng-if="artifact.artifactDisplayName" component="component" artifact="artifact"></button>
+                            <button ng-if="!isViewMode() && artifact.isHEAT()"
+                                    class="sprite e-sdc-small-icon-pad edit-paramtes-button"
+                                    data-ng-click="openEditEnvParametersModal(artifact)" type="button"
+                                    data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button>
+                        </div>
+                    </div>
+                    <div data-ng-repeat-end="" class="flex-container data-row" data-ng-if="artifact.envArtifact">
+
+                        <div class="table-col-general flex-item"  zzdata-ng-click="!isViewMode() && addOrUpdate(artifact.envArtifact)">
+                            <span>{{artifact.envArtifact.artifactDisplayName}}</span>
+                        </div>
+
+                        <div class="table-col-general flex-item" data-tests-id="{{artifact.envArtifact.artifactType}}">
+                            {{artifact.envArtifact.artifactType}}
+                        </div>
+                        <div class="table-col-general flex-item" data-tests-id="{{artifact.envArtifact.timeout}}">
+                            {{artifact.envArtifact.timeout? artifact.envArtifact.timeout:''}}
+                        </div>
+                        <div class="table-col-general flex-item" data-tests-id="artifactEnvVersion_{{artifact.artifactDisplayName}}">
+                            {{artifact.envArtifact.artifactVersion}}
+                        </div>
+                        <div class="table-col-general flex-item text" data-tests-id="{{artifact.envArtifact.artifactUUID}}" tooltips tooltip-content="{{artifact.envArtifact.artifactUUID}}">
+                            <span>{{artifact.envArtifact.artifactUUID}}</span>
+                        </div>
+
+
+                        <div class="table-btn-col flex-item" >
+                            <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactLabel}}env"
+                                    data-ng-if="!isViewMode()" data-ng-click="addOrUpdate(artifact.envArtifact)"></button>
+                            <button class="table-download-btn" data-tests-id="download_env_{{artifact.artifactDisplayName}}" download-artifact
+                                    data-ng-if="artifact.artifactName" component="component" artifact="artifact.envArtifact"></button>
+
+                        </div>
+                    </div>
+
+                    <!--<div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env" ng-if="artifact.heatParameters.length">-->
+                        <!--<span class="enabled" data-ng-bind="getEnvArtifactName(artifact)" data-ng-click="!isViewMode() && addOrUpdate(getEnvArtifact(artifact))"></span>-->
+                        <!--<download-artifact class="i-sdc-designer-sidebar-section-content-item-button download-env sprite e-sdc-small-download hand" artifact="getEnvArtifact(artifact)"-->
+                                           <!--component="currentComponent" instance="true"-->
+                                           <!--data-tests-id="download"></download-artifact>-->
+                    <!--</div>-->
+
+
+
+                    <!-- Add artifacts buttons -->
+                    <!--<button class="add-button" data-ng-repeat="artifact in artifacts track by $index"-->
+                            <!--type="button"-->
+                            <!--data-ng-show="!artifact.esId"-->
+                            <!--data-ng-if="!viewModeOrCsarComponent()"-->
+                            <!--data-ng-class="{'disabled': isDisableMode() || component.isCsarComponent()}"-->
+                            <!--data-tests-id="{{artifact.artifactDisplayName}} deployment_artifact"-->
+                            <!--translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_HEAT"-->
+                            <!--translate-values="{'name': '{{artifact.artifactDisplayName}}'}"-->
+                            <!--data-ng-click="addOrUpdate(artifact)"></button>-->
+
+                    <!-- Top add button -->
+                    <button class="add-button" type="button" data-ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER" data-ng-click="addOrUpdate({})"></button>
+                </perfect-scrollbar>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
new file mode 100644
index 0000000000..dd3b16447c
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
@@ -0,0 +1,196 @@
+.workspace-deployment-artifact {
+    width: 93%;
+    display: inline-block;
+    .table-container-flex .table .body .data-row + div.item-opened {
+        align-items: center;
+        padding: 10px 40px 10px 30px;
+    }
+
+    .w-sdc-classic-btn {
+        float: right;
+        margin-bottom: 10px;
+    }
+
+
+    .heat-env-connect-container{
+        background-color: white;
+        position: absolute;
+        height: 70px;
+        width:20px;
+        left: 0;
+        top:0;
+    }
+    .heat-env-connect-container-view-mode{
+        background-color: @tlv_color_t;
+    }
+    .heat-env-connect{
+        border-left: 1px #848586 solid;
+        height: 50px;
+        margin-left: 10px;
+        margin-top: 10px;
+        border-top: 1px #848586 solid;
+        border-bottom: 1px #848586 solid;
+        width: 11px;
+        float: left;
+
+    }
+
+    .artifact-name{
+        width:85%;
+    }
+
+    .table-container-flex .table .body .data-row div .heat-env-connect-container{
+        border-right: none;
+    }
+
+    .i-sdc-designer-sidebar-section-content-item-file-link::before{
+        content:"";
+        background-color: white;
+        width: 12px;
+
+    }
+
+
+
+    .table {
+        height:490px;
+        margin-bottom: 0;
+    }
+
+    .parameter-description {
+        .circle(18px, @color_p);
+        content: '?';
+        line-height: 18px;
+        vertical-align: middle;
+        margin-left: 5px;
+        cursor: default;
+        display: inline-block;
+        position: absolute;
+        top: 16px;
+    }
+
+    .table-container-flex {
+
+        margin-top: 27px;
+
+        .text{
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            white-space: nowrap;
+        }
+
+        .flex-item:nth-child(1) {
+            flex-grow: 15;
+            .hand;
+            padding-left: 30px;
+            position: relative;
+            span.table-arrow {
+                margin-right: 7px;
+            }
+            .description-popover-icon{
+                float:right;
+                margin-top:6px;
+            }
+        }
+
+        .flex-item:nth-child(2) {
+            flex-grow: 6;
+        }
+
+        .flex-item:nth-child(3) {
+            flex-grow: 9;
+        }
+
+        .flex-item:nth-child(4) {
+            flex-grow: 3;
+        }
+
+        .flex-item:nth-child(5) {
+            flex-grow: 20;
+        }
+
+        .flex-item:nth-child(6) {
+            flex-grow: 5;
+
+            &.table-btn-col {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                button {
+                    flex: 0 1 auto;
+                    background-color: transparent;
+                    border: 0;
+                    margin: 0;
+                }
+                .edit-paramtes-button {
+                    order: -1;
+                }
+            }
+        }
+    }
+    .w-sdc-form{
+        text-align: left;
+
+        .w-sdc-env-params{
+            border-top: 1px solid #cdcdcd;
+            margin: 25px 0 10px 0;
+        }
+
+        .i-sdc-form-textarea {
+            border: 1px solid @color_e;
+            min-height: 60px;
+            padding: 10px 13px;
+            width: 100%;
+            resize: none;
+
+        }
+
+        .w-sdc-form-item {
+            &.error {
+                .i-sdc-form-input,
+                .i-sdc-form-select,
+                .i-sdc-form-textarea {
+                    border-color: @color_h;
+                    outline: none;
+                    box-sizing: border-box;
+                }
+            }
+        }
+
+        .i-sdc-env-form-label{
+            font-family: @font-omnes-medium;
+            color: @main_color_m;
+            overflow: hidden;
+            max-width: 450px;
+            text-overflow: ellipsis;
+            display: inline-block;
+            white-space: nowrap;
+            margin-top: 14px;
+
+            &.required::before {
+                color: #f33;
+                content: '*';
+                margin-right: 4px;
+            }
+        }
+    }
+}
+
+.parameter-description-popover.deployment-artifact-view {
+    margin-left: -10px;
+    z-index: 1040;
+    min-width: 300px;
+    .input-error {
+        .q_12_m;
+    }
+    .error textarea{
+        border-color: @main_color_g;
+        color: @color_h;
+        outline: none;
+    }
+    .popover-content textarea {
+        width:100%;
+    }
+}