Skip to content

Commit 0f838da

Browse files
SmitGalaSmitGala
committed
License Page New UI
1 parent 63e9244 commit 0f838da

File tree

7 files changed

+130
-186
lines changed

7 files changed

+130
-186
lines changed

‎app/components/license-detail/index.hbs

Lines changed: 42 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,42 @@
1-
<div class='my-1 p-1'>
2-
<AkTypography @variant='h4'>
3-
{{t 'license'}}
4-
</AkTypography>
5-
6-
<table class='my-2' local-class='license-detail-table'>
7-
<thead>
8-
<tr>
9-
<th
10-
colspan='3'
11-
local-class='{{if @license.isActive "success" "critical"}}'
12-
>
13-
<AkStack @justifyContent='space-between'>
14-
<AkStack @alignItems='center'>
15-
<AkTypography @fontWeight='bold'>
16-
{{#if @license.isLimitedScans}}
17-
{{@license.perScanName}}
18-
{{else}}
19-
{{@license.perAppName}}
20-
{{/if}}
21-
</AkTypography>
22-
</AkStack>
23-
24-
<AkStack @alignItems='center' @spacing='2'>
25-
{{#if @license.isActive}}
26-
<AkIcon @iconName='done' @color='success' @size='small' />
27-
{{else}}
28-
<AkIcon @iconName='close' @color='error' @size='small' />
29-
{{/if}}
30-
31-
<span>
32-
{{@license.status}}
33-
</span>
34-
</AkStack>
35-
</AkStack>
36-
</th>
37-
</tr>
38-
</thead>
39-
40-
<tbody>
41-
<tr>
42-
<td>
43-
<AkStack @alignItems='center' @spacing='2'>
44-
<AkIcon @iconName='shape-line' @size='small' />
45-
46-
<AkTypography>{{t 'features'}}</AkTypography>
47-
</AkStack>
48-
</td>
49-
50-
<td>
51-
{{#if @license.isLimitedScans}}
52-
<AkTypography @color='textSecondary' local-class='uppercase-text'>
53-
No. of Scans
54-
</AkTypography>
55-
56-
<AkTypography @fontWeight='medium'>
57-
{{@license.perScanQuantity}}
58-
</AkTypography>
59-
{{else}}
60-
<AkTypography @color='textSecondary' local-class='uppercase-text'>
61-
{{t 'noOfApps'}}
62-
</AkTypography>
63-
64-
<AkTypography @fontWeight='medium'>
65-
{{@license.perAppQuantity}}
66-
</AkTypography>
67-
{{/if}}
68-
</td>
69-
70-
<td>
71-
<em>
72-
{{#if @license.isLimitedScans}}
73-
{{@license.perScanDescription}}
74-
{{else}}
75-
{{@license.perAppDescription}}
76-
{{/if}}
77-
</em>
78-
</td>
79-
</tr>
80-
81-
<tr>
82-
<td>
83-
<AkStack @alignItems='center' @spacing='2'>
84-
<AkIcon @iconName='calendar-month' @size='small' />
85-
86-
<AkTypography>{{t 'validity'}}</AkTypography>
87-
</AkStack>
88-
</td>
89-
90-
<td>
91-
<AkTypography @color='textSecondary' local-class='uppercase-text'>
92-
{{t 'startDate'}}
93-
</AkTypography>
94-
95-
<AkTypography @fontWeight='medium'>
96-
{{this.startDate}}
97-
</AkTypography>
98-
</td>
99-
100-
<td>
101-
<AkTypography @color='textSecondary' local-class='uppercase-text'>
102-
{{t 'expiryDate'}}
103-
</AkTypography>
104-
105-
<AkTypography @fontWeight='medium'>
106-
{{this.expiryDate}}
107-
</AkTypography>
108-
</td>
109-
</tr>
110-
111-
<tr>
112-
<td>
113-
<AkStack @alignItems='center' @spacing='2'>
114-
<AkIcon @iconName='person' @size='small' />
115-
116-
<AkTypography>{{t 'registration'}}</AkTypography>
117-
</AkStack>
118-
</td>
119-
120-
<td>
121-
<AkTypography @color='textSecondary' local-class='uppercase-text'>
122-
{{t 'licenseKey'}}
123-
</AkTypography>
124-
125-
<AkTypography @fontWeight='medium'>
126-
{{@license.key}}
127-
</AkTypography>
128-
</td>
129-
130-
<td>
131-
<AkTypography @color='textSecondary' local-class='uppercase-text'>
132-
{{t 'licensedTo'}}
133-
</AkTypography>
134-
135-
<AkTypography @fontWeight='medium'>
136-
{{@license.name}}
137-
&lt;{{@license.email}}&gt;
138-
</AkTypography>
139-
</td>
140-
</tr>
141-
</tbody>
142-
</table>
143-
</div>
1+
<AkStack @justifyContent='space-between' local-class='license-detail-header'>
2+
<AkTypography @variant='h5'>{{t 'license'}}</AkTypography>
3+
4+
<AkStack @alignItems='center' @spacing='1.5'>
5+
<AkTypography @variant='h6'>
6+
{{#if @license.isLimitedScans}}
7+
{{@license.perScanName}}
8+
{{else}}
9+
{{@license.perAppName}}
10+
{{/if}}
11+
</AkTypography>
12+
13+
<AkChip
14+
@variant='semi-filled'
15+
@label={{@license.status}}
16+
@color={{if @license.isActive 'success' 'error'}}
17+
@size='small'
18+
/>
19+
</AkStack>
20+
</AkStack>
21+
22+
{{#each this.licenseSections as |section|}}
23+
<AkStack @direction='column' @spacing='1' local-class='license-detail-body'>
24+
<AkIcon @iconName={{section.icon}} @size='small' />
25+
26+
<AkTypography @variant='subtitle1' @gutterBottom={{true}}>
27+
{{section.title}}
28+
</AkTypography>
29+
30+
{{#each section.details as |detail|}}
31+
<AkStack @width='full'>
32+
<AkTypography @color='textSecondary' local-class='key-width'>
33+
{{detail.label}}
34+
</AkTypography>
35+
36+
<AkTypography @variant='h6'>{{detail.value}}</AkTypography>
37+
</AkStack>
38+
{{/each}}
39+
</AkStack>
40+
41+
<AkDivider />
42+
{{/each}}

‎app/components/license-detail/index.scss

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,15 @@
1-
.license-detail-table {
2-
tr {
3-
border: 1px solid var(--license-detail-border-color);
4-
}
5-
6-
td {
7-
font-size: 12px;
8-
}
9-
10-
th {
11-
padding: 1em;
12-
margin-top: 1em;
13-
14-
&.success {
15-
border-color: var(--license-detail-success-light);
16-
background: var(--license-detail-success-light);
17-
}
18-
19-
&.critical {
20-
border-color: var(--license-detail-primary-light);
21-
background: var(--license-detail-primary-light);
22-
}
23-
}
24-
25-
th,
26-
td {
27-
border-width: 0px;
28-
vertical-align: middle;
1+
.license-detail-header {
2+
border: 1px solid var(--license-detail-border-color);
3+
background-color: var(--license-detail-background-color);
4+
padding: 1.142em 1.714em;
5+
margin: 1.428em 0;
6+
}
297

30-
&:first-child {
31-
text-align: left;
32-
padding-left: 1em;
33-
}
34-
}
8+
.license-detail-body {
9+
background-color: var(--license-detail-background-color);
10+
padding: 1.142em 1.714em;
3511
}
3612

37-
.uppercase-text {
38-
text-transform: uppercase;
39-
font-size: 0.83rem;
40-
}
13+
.key-width {
14+
width: 15%;
15+
}

‎app/components/license-detail/index.ts

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import Component from '@glimmer/component';
22
import dayjs from 'dayjs';
3-
import LicenseModel from 'irene/models/license';
3+
import { inject as service } from '@ember/service';
4+
5+
import type LicenseModel from 'irene/models/license';
6+
import type IntlService from 'ember-intl/services/intl';
47

58
export interface LicenseDetailSignature {
69
Args: {
@@ -9,12 +12,72 @@ export interface LicenseDetailSignature {
912
}
1013

1114
export default class LicenseDetailComponent extends Component<LicenseDetailSignature> {
15+
@service declare intl: IntlService;
16+
1217
get startDate() {
13-
return dayjs(this.args.license.startDate).format('DD MMM YYYY');
18+
return dayjs(this.args.license?.startDate).format('DD MMM YYYY');
1419
}
1520

1621
get expiryDate() {
17-
return dayjs(this.args.license.expiryDate).format('DD MMM YYYY');
22+
return dayjs(this.args.license?.expiryDate).format('DD MMM YYYY');
23+
}
24+
25+
get feturesDetails() {
26+
if (this.args.license?.isLimitedScans) {
27+
return [
28+
{
29+
label: this.intl.t('noOfScans'),
30+
value: this.args.license?.perScanQuantity,
31+
},
32+
{
33+
label: this.intl.t('planType'),
34+
value: this.args.license?.perScanDescription,
35+
},
36+
];
37+
}
38+
39+
return [
40+
{
41+
label: this.intl.t('noOfApps'),
42+
value: this.args.license?.perAppQuantity,
43+
},
44+
{
45+
label: this.intl.t('planType'),
46+
value: this.args.license?.perAppDescription,
47+
},
48+
];
49+
}
50+
51+
get licenseSections() {
52+
return [
53+
{
54+
icon: 'shape-line',
55+
title: this.intl.t('feature'),
56+
details: this.feturesDetails,
57+
},
58+
{
59+
icon: 'calendar-month',
60+
title: this.intl.t('validity'),
61+
details: [
62+
{ label: this.intl.t('startDate'), value: this.startDate },
63+
{ label: this.intl.t('expiryDate'), value: this.expiryDate },
64+
],
65+
},
66+
{
67+
icon: 'person',
68+
title: this.intl.t('registration'),
69+
details: [
70+
{
71+
label: this.intl.t('licenseKey'),
72+
value: this.args.license?.key,
73+
},
74+
{
75+
label: this.intl.t('licensedTo'),
76+
value: `${this.args.license?.name} <${this.args.license?.email}>`,
77+
},
78+
],
79+
},
80+
];
1881
}
1982
}
2083

‎app/styles/_component-variables.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1998,8 +1998,7 @@ body {
19981998

19991999
// variables for license-detail
20002000
--license-detail-border-color: var(--border-color-1);
2001-
--license-detail-success-light: var(--success-light);
2002-
--license-detail-primary-light: var(--primary-main-10);
2001+
--license-detail-background-color: var(--common-white);
20032002

20042003
// variables for file-details/dynamic-scan/header
20052004
--file-details-dynamic-scan-header-background-color: var(--background-light);

‎app/templates/authenticated/dashboard/billing.hbs

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
{{#if @model.organization.showBilling}}
44
{{#if @model.license}}
5-
<LicenseDetail @license={{@model.license}} />
5+
<PageWrapper>
6+
<LicenseDetail @license={{@model.license}} />
7+
</PageWrapper>
68
{{else}}
79
<OrganizationBilling />
810
{{/if}}

‎translations/en.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,7 @@
468468
"failedToUpdateDsAutomatedDevicePref": "Failed to update automated DAST device preferences.",
469469
"failedToUpdateDsManualDevicePref": "Failed to update manual DAST device preferences.",
470470
"falsePositive": "Is this a false positive? you can override this analysis here",
471+
"feature": "Feature",
471472
"features": "Features",
472473
"fetchGitHubRepoFailed": "Something went wrong when trying to fetch repo list",
473474
"fetchProjectFailed": "Something went wrong when trying to fetch projects list",
@@ -936,6 +937,7 @@
936937
"noNamespaceDescription": "Once the app is added to appknox dashboard you will be seeing the respected data over here",
937938
"noOfApps": "No. of Apps",
938939
"noOfProjects": "No of projects",
940+
"noOfScans": "No of Scans",
939941
"noPendingRequests": "No pending requests",
940942
"noPersonalToken": "no tokens found",
941943
"noPreference": "No Preference",
@@ -1139,6 +1141,7 @@
11391141
"pinLock": "Pin Lock",
11401142
"planName": "PLAN NAME",
11411143
"plans": "Plans",
1144+
"planType": "Plan Type",
11421145
"platform": "Platform",
11431146
"googlePlayStore": "Google Play Store",
11441147
"pleaseEnterAllDetails": "Please enter all the details",

‎translations/ja.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,7 @@
468468
"failedToUpdateDsAutomatedDevicePref": "Failed to update automated DAST device preferences.",
469469
"failedToUpdateDsManualDevicePref": "Failed to update manual DAST device preferences.",
470470
"falsePositive": "Is this a false positive? you can override this analysis here",
471+
"feature": "Feature",
471472
"features": "Features",
472473
"fetchGitHubRepoFailed": "リポジトリリストの取得時に問題が発生しました",
473474
"fetchProjectFailed": "プロジェクトリストの取得時に問題が発生しました",
@@ -936,6 +937,7 @@
936937
"noNamespaceDescription": "Once the app is added to appknox dashboard you will be seeing the respected data over here",
937938
"noOfApps": "No. of Apps",
938939
"noOfProjects": "プロジェクト数",
940+
"noOfScans": "No of Scans",
939941
"noPendingRequests": "No pending requests",
940942
"noPersonalToken": "トークンが見つかりません",
941943
"noPreference": "指定なし",
@@ -1139,6 +1141,7 @@
11391141
"pinLock": "Pin Lock",
11401142
"planName": "プラン名",
11411143
"plans": "プラン",
1144+
"planType": "Plan Type",
11421145
"platform": "Platform",
11431146
"googlePlayStore": "Google Play Store",
11441147
"pleaseEnterAllDetails": "プラン名",

0 commit comments

Comments
 (0)