Skip to content

Commit 42deb99

Browse files
prakashsvmxprakashsvmx
authored
License page updates (#2009)
Address conflicts review comments
1 parent 6e31a42 commit 42deb99

File tree

4 files changed

+489
-308
lines changed

4 files changed

+489
-308
lines changed

‎portal-ui/src/screens/Console/License/License.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const styles = (theme: Theme) =>
6666
fontSize: 16,
6767
fontWeight: "bold",
6868
"& ul": {
69-
marginLeft: "-25px",
69+
marginLeft: "-8px",
7070
listStyleType: "square",
7171
color: "#1C5A8D",
7272
fontSize: "16px",

‎portal-ui/src/screens/Console/License/LicensePlans.tsx

Lines changed: 27 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,17 @@ import { Theme, useTheme } from "@mui/material/styles";
2222
import createStyles from "@mui/styles/createStyles";
2323
import { SubnetInfo } from "./types";
2424
import withStyles from "@mui/styles/withStyles";
25-
import { Box, Tooltip } from "@mui/material";
25+
import { Box } from "@mui/material";
2626
import useMediaQuery from "@mui/material/useMediaQuery";
27-
import { HelpIconFilled, LicenseDocIcon, OpenSourceIcon } from "../../../icons";
27+
import { LicenseDocIcon } from "../../../icons";
2828
import {
29+
LICENSE_PLANS,
30+
FEATURE_ITEMS,
2931
COMMUNITY_PLAN_FEATURES,
32+
STANDARD_PLAN_FEATURES,
3033
ENTERPRISE_PLAN_FEATURES,
31-
FEATURE_ITEMS,
32-
LICENSE_PLANS,
3334
PAID_PLANS,
34-
STANDARD_PLAN_FEATURES,
35+
getRenderValue,
3536
} from "./utils";
3637

3738
const styles = (theme: Theme) => createStyles({});
@@ -58,7 +59,6 @@ const PlanHeader = ({
5859
isXsViewActive: boolean;
5960
title: string;
6061
price?: string;
61-
tooltipText?: string;
6262
onClick: any;
6363
children: any;
6464
}) => {
@@ -78,7 +78,6 @@ const PlanHeader = ({
7878
alignItems: "flex-start",
7979
justifyContent: "center",
8080
flexFlow: "column",
81-
paddingLeft: "26px",
8281
borderLeft: "1px solid #eaeaea",
8382
"& .plan-header": {
8483
display: "flex",
@@ -90,7 +89,7 @@ const PlanHeader = ({
9089
"& .title-block": {
9190
paddingTop: "20px",
9291
display: "flex",
93-
alignItems: "flex-start",
92+
alignItems: "center",
9493
flexFlow: "column",
9594
width: "100%",
9695

@@ -114,15 +113,6 @@ const PlanHeader = ({
114113
},
115114
},
116115

117-
"& .price-line": {
118-
fontSize: "16px",
119-
fontWeight: 600,
120-
},
121-
"& .minimum-cost": {
122-
fontSize: "14px",
123-
fontWeight: 400,
124-
marginBottom: "5px",
125-
},
126116
"& .open-source": {
127117
fontSize: "14px",
128118
display: "flex",
@@ -184,17 +174,19 @@ const FeatureTitleRowCmp = (props: { featureLabel: any }) => {
184174

185175
const PricingFeatureItem = (props: {
186176
featureLabel: any;
187-
label?: string;
188-
detail?: string;
177+
label?: any;
178+
detail?: any;
189179
xsLabel?: string;
180+
style?: any;
190181
}) => {
191182
return (
192-
<Box className="feature-item">
183+
<Box className="feature-item" style={props.style}>
193184
<Box className="feature-item-info">
194185
<div className="xs-only">{props.featureLabel} </div>
195186
<Box className="plan-feature">
196-
<div>{props.label || ""}</div>
197-
{props.detail ? <div>{props.detail}</div> : null}
187+
<div>{getRenderValue(props.label || "")}</div>
188+
{getRenderValue(props.detail)}
189+
198190
<div className="xs-only">{props.xsLabel} </div>
199191
</Box>
200192
</Box>
@@ -227,9 +219,6 @@ const LicensePlans = ({
227219
let isXsViewEnterprise = xsPlanView === LICENSE_PLANS.ENTERPRISE;
228220

229221
const getCommunityPlanHeader = () => {
230-
const tooltipText =
231-
"Designed for developers who are building open source applications in compliance with the AGPL v3 license and are able to support themselves. The community version of MinIO has all the functionality of the Standard and Enterprise editions.";
232-
233222
return (
234223
<PlanHeader
235224
isActive={isCommunityPlan}
@@ -240,28 +229,16 @@ const LicensePlans = ({
240229
<Box className="title-block">
241230
<Box className="title-main">
242231
<div className="title">Community</div>
243-
<Tooltip title={tooltipText} placement="top-start">
244-
<div className="tool-tip">
245-
<HelpIconFilled />
246-
</div>
247-
</Tooltip>
248232
</Box>
249233
<div className="cur-plan-text">
250234
{isCommunityPlan ? "Current Plan" : ""}
251235
</div>
252236
</Box>
253-
<div className="open-source">
254-
<OpenSourceIcon />
255-
Open Source
256-
</div>
257237
</PlanHeader>
258238
);
259239
};
260240

261241
const getStandardPlanHeader = () => {
262-
const tooltipText =
263-
"Designed for customers who require a commercial license and can mostly self-support but want the peace of mind that comes with the MinIO Subscription Network’s suite of operational capabilities and direct-to-engineer interaction. The Standard version is fully featured but with SLA limitations. ";
264-
265242
return (
266243
<PlanHeader
267244
isActive={isStandardPlan}
@@ -272,26 +249,16 @@ const LicensePlans = ({
272249
<Box className="title-block">
273250
<Box className="title-main">
274251
<div className="title">Standard</div>
275-
<Tooltip title={tooltipText} placement="top-start">
276-
<div className="tool-tip">
277-
<HelpIconFilled />
278-
</div>
279-
</Tooltip>
280252
</Box>
281253
<div className="cur-plan-text">
282254
{isStandardPlan ? "Current Plan" : ""}
283255
</div>
284256
</Box>
285-
<div className="price-line">$10 per TiB per month</div>
286-
<div className="minimum-cost">(Minimum of 100TiB)</div>
287257
</PlanHeader>
288258
);
289259
};
290260

291261
const getEnterpriseHeader = () => {
292-
const tooltipText =
293-
"Designed for mission critical environments where both a license and strict SLAs are required. The Enterprise version is fully featured but comes with additional capabilities. ";
294-
295262
return (
296263
<PlanHeader
297264
isActive={isEnterprisePlan}
@@ -302,18 +269,11 @@ const LicensePlans = ({
302269
<Box className="title-block">
303270
<Box className="title-main">
304271
<div className="title">Enterprise</div>
305-
<Tooltip title={tooltipText} placement="top-start">
306-
<div className="tool-tip">
307-
<HelpIconFilled />
308-
</div>
309-
</Tooltip>
310272
</Box>
311273
<div className="cur-plan-text">
312274
{isEnterprisePlan ? "Current Plan" : ""}
313275
</div>
314276
</Box>
315-
<div className="price-line">$20 per TiB per month</div>
316-
<div className="minimum-cost">(Minimum of 100TiB)</div>
317277
</PlanHeader>
318278
);
319279
};
@@ -444,7 +404,7 @@ const LicensePlans = ({
444404
borderLeft: "1px solid #eaeaea",
445405
},
446406
"& .plan-header": {
447-
height: "153px",
407+
height: "99px",
448408
borderBottom: "1px solid #eaeaea",
449409
},
450410
"& .feature-title": {
@@ -472,20 +432,13 @@ const LicensePlans = ({
472432
"& .feature-item": {
473433
display: "flex",
474434
flexFlow: "column",
475-
alignItems: "flex-start",
435+
alignItems: "center",
476436
justifyContent: "center",
477437
minHeight: "60px",
478-
padding: "5px",
438+
padding: "0 15px 0 15px",
479439
borderBottom: "1px solid #eaeaea",
480440
borderLeft: " 1px solid #eaeaea",
481-
paddingLeft: "26px",
482441
fontSize: "14px",
483-
484-
"@media (max-width: 900px)": {
485-
maxHeight: "30px",
486-
overflow: "hidden",
487-
},
488-
489442
"& .link-text": {
490443
color: "#2781B0",
491444
},
@@ -500,8 +453,9 @@ const LicensePlans = ({
500453
flex: 1,
501454
display: "flex",
502455
flexFlow: "column",
503-
alignItems: "flex-start",
456+
alignItems: "center",
504457
justifyContent: "space-around",
458+
textAlign: "center",
505459

506460
"@media (max-width: 600px)": {
507461
display: "flex",
@@ -515,7 +469,7 @@ const LicensePlans = ({
515469
},
516470
"& .plan-feature": {
517471
flex: 1,
518-
textAlign: "right",
472+
textAlign: "center",
519473
paddingRight: "10px",
520474
},
521475
},
@@ -619,13 +573,13 @@ const LicensePlans = ({
619573
textTransform: "uppercase",
620574
}}
621575
>
622-
<div>{fi.desc} </div>
576+
<div>{getRenderValue(fi.desc)} </div>
623577
</Box>
624578
);
625579
}
626580
return (
627-
<Box key={fi.desc} className="feature-name">
628-
<div>{fi.desc} </div>
581+
<Box key={fi.desc} className="feature-name" style={fi.style}>
582+
<div>{getRenderValue(fi.desc)} </div>
629583
</Box>
630584
);
631585
})}
@@ -685,6 +639,7 @@ const LicensePlans = ({
685639
label={fi.label}
686640
detail={fi.detail}
687641
xsLabel={fi.xsLabel}
642+
style={fi.style}
688643
/>
689644
);
690645
})}
@@ -723,6 +678,7 @@ const LicensePlans = ({
723678
label={fi.label}
724679
detail={fi.detail}
725680
xsLabel={fi.xsLabel}
681+
style={fi.style}
726682
/>
727683
);
728684
})}
@@ -761,7 +717,7 @@ const LicensePlans = ({
761717
return (
762718
<Box className="feature-item">
763719
<Box className="feature-item-info">
764-
<div className="xs-only"></div>
720+
<div className="xs-only"> </div>
765721
<Box className="plan-feature">
766722
<CheckCircleIcon />
767723
</Box>
@@ -775,6 +731,7 @@ const LicensePlans = ({
775731
featureLabel={featureLabel}
776732
label={fi.label}
777733
detail={fi.detail}
734+
style={fi.style}
778735
/>
779736
);
780737
})}

0 commit comments

Comments
 (0)