summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
blob: 51702e6d3608c48ef263198f0563c385660b3ab9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';

const SoftwareProductListHeader = ({selectedVendor, onBack}) => (
	<div className='vendor-page-header'>
		<SVGIcon name='back' onClick={onBack}/>
		<div className='tab-separator' />
		<div className='vendor-name'>{selectedVendor.vendorName}</div>
	</div>
);

const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => (
	<div className='catalog-list'>
		{vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>}
		<div className='catalog-items'>
			<div className='create-catalog-item-wrapper'>
				{onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-lm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>}
				{onAddVSP &&
				<CreateItemTile onClick={onAddVSP} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>}
			</div>
			{children}
		</div>
	</div>
);

const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => {
	return (
			<div className={'create-catalog-item tile ' + className} onClick={() => onClick()} data-test-id={dataTestId}>
				<div className='create-item-plus-icon'><SVGIcon name='plus' /></div>
				<div className='create-item-text'>{title}</div>
			</div>
	);
};

export default CatalogList;
l.String.Escape */ .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ .highlight .sx { color: #e6db74 } /* Literal.String.Other */ .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #a6e22e } /* Name.Function.Magic */ .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ } @media (prefers-color-scheme: light) { .highlight .hll { background-color: #ffffcc } .highlight .c { color: #888888 } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ .highlight .k { color: #008800; font-weight: bold } /* Keyword */ .highlight .ch { color: #888888 } /* Comment.Hashbang */ .highlight .cm { color: #888888 } /* Comment.Multiline */ .highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */ .highlight .cpf { color: #888888 } /* Comment.PreprocFile */ .highlight .c1 { color: #888888 } /* Comment.Single */ .highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gr { color: #aa0000 } /* Generic.Error */ .highlight .gh { color: #333333 } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .highlight .go { color: #888888 } /* Generic.Output */ .highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #666666 } /* Generic.Subheading */ .highlight .gt { color: #aa0000 } /* Generic.Traceback */ .highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */ }
@mixin modules-and-artifacts-list-items {
	background-color: $tlv-gray;
	margin-bottom: 12px;
	border: 1px solid $light-gray;
	border-left-width: 18px;
	border-left-color: $blue;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  padding: 10px 20px 0 20px;
}

.heat-setup-view {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
  padding: 0 60px 0 36px;

	.heat-setup-view-modules-and-artifacts {
		margin-right: 20px;
		flex: 1;
		.heat-setup-module-icon {
		  margin: 0 6px 0 0;
		  position: relative;
		  top: -2px;
		}
		.modules-list-wrapper {
			padding-bottom: 20px;
			margin-bottom: 20px;
			border-bottom: 1px solid $tlv-light-gray;
			ul {
				.undefined-dragging {
					opacity: 0.5;
				}
				.modules-list-item-selectors {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.Select-value-label {
						@include ellipsis(85%);
					}

					.validation-input-wrapper {
						flex-basis: 48%;
					}

					.control-label {
						margin-bottom: 4px;
					}

					.form-group {
						margin-bottom: 12px;
					}
				}
			}

			.modules-list-controllers {
				text-align: right;
				.btn-link {
					&[disabled] {
						color: $gray;
					}
					@extend .body-1;
					color: $blue;
					&:last-child {
						padding-right: 0;
					}
					&:hover {
						color: $dark-blue;
						text-decoration: none;
					}
				}
			}

			.modules-list-item-controllers {
				display: flex;
				justify-content: space-between;
				margin-bottom: 7px;

				.btn {
					min-width: 0;
				}

				.svg-icon-wrapper.trashO {
				  .svg-icon {
					fill: $dark-gray;
					height: 18px;
					width: 18px;
					&:hover {
					  fill: $black;
					}
				  }
				}
				.module-title-by-type {
					@extend .heading-5-semibold;
					margin-right: 3px;
				}
				.modules-list-item-filename {
					display: flex;
					align-items: center;

					.svg-icon-wrapper.pencil {
						.svg-icon {
						  height: 15px;
						  width: 15px;
						}
						margin-left: 3px;
						opacity: 0;
					}

					.filename-text {
						@extend .heading-5-semibold;

					}

					.text-and-icon {
						padding: 5px;
						border: 1px solid transparent;
						display: flex;
						align-items: center;
						height: 35px;
						&.in-edit {
							padding: 0;
							.name-edit {
								padding: 4px;
								@extend .heading-5-semibold;
								height: 100%;
								border: 1px solid $light-gray;
								width: 400px;
							}
						}
					}

					input[disabled] {
						border: none;
					}
					&:hover {
						.text-and-icon {
							border-color: $light-gray;
							background-color: $white;

							&.in-edit {
								border-color: transparent;
							}
						}
						.svg-icon-wrapper.pencil {
							margin-left: 10px;
							opacity: 1;
							.svg-icon {
							  stroke: $dark-gray;
							  &:hover {
							   stroke: $black;
							  }
							}
						}
					}
				}
			}

			.modules-list-item {
				@include modules-and-artifacts-list-items;
				position: relative;
				.Select-option {
					@extend .body-1;
					&.is-selected {
						@extend .body-1-semibold;
						background-color: $white;
					}
					&.is-focused {
						background-color: $blue;
						color: $white;
					}
				}
				.add-or-delete-volumes {
					.svg-icon-wrapper {
						margin-right: 8px;
						.svg-icon {
							height: 10px;
							width: 10px;
							fill: $blue;
						}
					}
					cursor: pointer;
					color: $blue;
					margin-bottom: 11px;
					&:hover {
						color: $dark-blue;
						.svg-icon {
							fill: $dark-blue;
						}
					}
				}
				&:before {
					content: "\00B7\00B7\00B7\00B7\00B7\00B7";
					color: $white;
					position: absolute;
					left: -27px;
					top: 56%;
					font-size: 27px;
					width: 75px;
					@include transform-rotate(90);
					height: 0;
					letter-spacing: 1px;
				}
			}
		}

		.artifact-files {
			@include modules-and-artifacts-list-items;
			margin-top: 20px;

			&.nested {
				.nested-list {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 18px;
				}

				.nested-list-item {
					border-radius: 15px;
					background-color: $tlv-light-gray;
					padding: 4px 15px;
					margin: 2px 10px 2px 0;
				}
			}

			.artifact-files-header {
				@extend .heading-5-semibold;
				display: flex;
				margin-bottom: 10px;
				justify-content: space-between;
				.image-icon.artifacts {
					margin-right: 10px;
				}

				span {
					display: flex;
				}

				.add-all-unassigned {
					@extend .body-1;
					margin-bottom: 0;
					color: $blue;
					cursor: pointer;
					&:hover {
						color: $dark-blue;
					}
				}
			}
		}
	}

	.unassigned-files {
		margin-top: 30px;
		border: 1px solid $light-gray;
		background-color: $white;
		height: 250px;
		width: 250px;

		// Will work in chrome from chrome 56
		position: sticky;
		top: 10px;

		.unassigned-files-title {
			@extend .heading-5-semibold;
			background-color: $tlv-gray;
			padding: 11px 0 9px 15px;
		}

		.unassigned-files-list {
			height: 207px;
    	overflow-y: auto;
    	padding-bottom: 5px;

			.go-to-validation-button-wrapper {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 70px;
				.all-files-assigned {
					@extend .heading-4;
					margin-bottom: 10px;
				}
				.link {
					color: $blue;
					cursor: pointer;
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					.svg-icon-wrapper.angleRight {
					  .svg-icon {
						height: 10px;
						width: 10px;
						margin-left: 7px;
						fill: $blue;
					  }
					}
					&:hover {
						color: $dark-blue;
						.svg-icon-wrapper.angleRight {
						  .svg-icon {
							fill: $dark-blue;
						  }
						}
					}
				}
			}

			.unassigned-files-list-item {
				@include ellipsis();
				border-bottom: 1px solid $tlv-light-gray;
				padding: 0 5px 5px 15px;
				&:first-child {
					padding-top: 5px;
				}
				&:last-child {
					border-bottom: none;
					padding-bottom: 0;
				}
			}
		}
	}
}