summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
blob: 7f361d27426a74775f6833abdcb241d005359fd8 (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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*!
 * 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 PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
import {
    catalogItemTypes,
    migrationStatusMapper
} from './onboardingCatalog/OnboardingCatalogConstants.js';
import {
    Tile,
    TileInfo,
    TileInfoLine,
    TileFooter,
    TileFooterCell
} from 'sdc-ui/lib/react';
import { TooltipWrapper } from './onboardingCatalog/Tooltip.jsx';

const ITEM_TYPE_MAP = {
    [catalogItemTypes.LICENSE_MODEL]: {
        headerText: i18n('VLM'),
        contentIconName: 'vlm',
        color: 'purple'
    },
    [catalogItemTypes.SOFTWARE_PRODUCT]: {
        headerText: i18n('VSP'),
        contentIconName: 'vsp',
        color: 'blue'
    }
};

const CatalogItemDetails = ({
    catalogItemData,
    catalogItemTypeClass,
    onSelect,
    onMigrate
}) => {
    let { vendorName, name, owner } = catalogItemData;
    let { headerText, color, contentIconName } = ITEM_TYPE_MAP[
        catalogItemTypeClass
    ];

    let onClick = e => {
        e.stopPropagation();
        e.preventDefault();
        if (
            catalogItemData.isOldVersion &&
            catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION
        ) {
            onMigrate({ softwareProduct: catalogItemData });
        } else {
            onSelect();
        }
    };

    return (
        <Tile
            headerText={headerText}
            headerColor={color}
            iconName={contentIconName}
            iconColor={color}
            onClick={onClick}
            dataTestId={catalogItemTypeClass}>
            <TileInfo data-test-id="catalog-item-content">
                {vendorName && (
                    <TileInfoLine type="supertitle">
                        <TooltipWrapper
                            className="with-overlay"
                            tooltipClassName="tile-super-info"
                            dataTestId="catalog-item-vendor-name">
                            {vendorName}
                        </TooltipWrapper>
                    </TileInfoLine>
                )}
                <TileInfoLine type="title">
                    <TooltipWrapper
                        className="with-overlay"
                        tooltipClassName="tile-title-info"
                        dataTestId="catalog-item-name">
                        {name}
                    </TooltipWrapper>
                </TileInfoLine>
            </TileInfo>
            <TileFooter>
                {owner && <TileFooterCell>Owner - {owner}</TileFooterCell>}
            </TileFooter>
        </Tile>
    );
};

CatalogItemDetails.PropTypes = {
    catalogItemData: PropTypes.obj,
    catalogItemTypeClass: PropTypes.string,
    onSelect: PropTypes.func,
    onMigrate: PropTypes.func
};

export default CatalogItemDetails;