From 91ee9f2da2eb70249677b61758e4fd7fd1bd2ef9 Mon Sep 17 00:00:00 2001 From: Abhigyan Ghosh Date: Thu, 15 Feb 2024 20:11:29 +0530 Subject: [PATCH 01/10] design: added some icons to the mix and remove circles from count --- .../react/components/Form/Feature/Feature.tsx | 434 +++++++++++------- .../subscribe/react/components/Form/Form.tsx | 7 +- static/sass/_pattern_subscribe.scss | 4 +- static/sass/styles.scss | 43 ++ 4 files changed, 314 insertions(+), 174 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index 4b8ee020c73..284c1422fc5 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -25,170 +25,116 @@ const Feature = () => { const proDisabled = version === LTSVersions.trusty; return ( -
- - -
- - Security coverage for critical, high and selected medium CVEs for: - -
-
-

- Over 2,300 open source deb packages in Ubuntu Main repository for - 10 years, including: -

-
- Systemd - RabbitMQ - OpenSSL - Ruby - PHP - NGINX - MySQL -
-
-
-

- Over 23,000 open source deb packages in Ubuntu Universe repository - for 10 years, including: -

-
- Apache Tomcat - Agios - NodeJS - Puppet - Redis - Rust - Wordpress -
-
- - -
- -
- - -
- -
- - + <> + +

What security coverage do you need?

+ +
+

Not sure? Run [command] to find out which packages and repositories you are currently using.

+ +
+ +
+ +
+ + + +

{ feature === Features.pro ? "25000" : "2300" }

+ + +

Covers { feature === Features.pro ? "25000" : "2300" } packages in Ubuntu Main { feature === Features.pro ? "and Universe":""}

+ + +
+
+

LTS standard security maintenance for Ubuntu Main (initial 5 years)

+ { feature===Features.pro &&

LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)

} + + + +
+ Systemd + RabbitMQ + OpenSSL + Ruby + PHP + NGINX + MySQL + { feature===Features.pro && <> + Apache Tomcat + Agios + NodeJS + Puppet + Redis + Rust + Wordpress + } +
+ + + {

23,000+

packages in Ubuntu universe, including:

-
+ ); }; export default Feature; + +{/* + +
+ + Security coverage for critical, high and selected medium CVEs for: + +
+
+

+ Over 2,300 open source deb packages in Ubuntu Main repository for + 10 years, including: +

+
+ Systemd + RabbitMQ + OpenSSL + Ruby + PHP + NGINX + MySQL +
+
+
+

+ Over 23,000 open source deb packages in Ubuntu Universe repository + for 10 years, including: +

+
+ Apache Tomcat + Agios + NodeJS + Puppet + Redis + Rust + Wordpress +
+
+ + +
+ +
+ + +
+ +
+ + */} \ No newline at end of file diff --git a/static/js/src/advantage/subscribe/react/components/Form/Form.tsx b/static/js/src/advantage/subscribe/react/components/Form/Form.tsx index c306cd5292e..10c74035ed9 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Form.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Form.tsx @@ -76,12 +76,7 @@ const Form = () => {
- -

What security coverage do you need?

- - - - +
diff --git a/static/sass/_pattern_subscribe.scss b/static/sass/_pattern_subscribe.scss index 5dd72cd07cd..25d2674d00e 100644 --- a/static/sass/_pattern_subscribe.scss +++ b/static/sass/_pattern_subscribe.scss @@ -27,11 +27,9 @@ margin-bottom: 2rem; &::before { - @extend .p-heading--3; + @extend .p-heading--2; align-items: center; - border: 1px solid; - border-radius: 100%; content: counter(headings); display: inline-flex; flex-shrink: 0; diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 2722b57db73..cc4210c1fc7 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1466,6 +1466,47 @@ $color-link-dark: #69c !default; } } +.p-graphic-main{ + width: 10%; + background: #923A66; + height: 48px; + display: inline-block; +} + +.p-graphic-universe{ + width: 90%; + background: #000000; + height: 48px; + display: inline-block; +} +.p-graphic-universe--empty{ + border-width: 1px; + border-color: #757575; + border-style: dashed; + width: 90%; + height: 48px; + display: inline-block; +} + +.graphic-legend-main, .graphic-legend-universe{ + gap:1.2rem; + display: flex; + flex-direction: row; + &::before{ + display: inline-flex; + height: 25px; + width: 25px; + content:""; + flex-shrink: 0; + } +} +.graphic-legend-main::before{ + background: #923a66; +} +.graphic-legend-universe::before{ + background: #000; +} + // XXX: MPT: Can be removed once this is fixed in Vanilla // https://github.com/canonical/vanilla-framework/pull/4950 .desktop-footer { @@ -1493,3 +1534,5 @@ hr.is-extra-muted { background-color: rgba(0, 0, 0, 0.1); opacity: 0.5; } + + From 4636bf655040c17d85e52dc24ab7e79503d19fdc Mon Sep 17 00:00:00 2001 From: Abhigyan Ghosh Date: Fri, 16 Feb 2024 02:17:42 +0530 Subject: [PATCH 02/10] Added more icons and added command to check and changed bg colour --- .../react/components/Form/Feature/Feature.tsx | 563 +++++++++--------- templates/advantage/subscribe/index.html | 2 +- 2 files changed, 283 insertions(+), 282 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index 284c1422fc5..dfdc5bd05e6 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -26,131 +26,290 @@ const Feature = () => { return ( <> - -

What security coverage do you need?

- -
-

Not sure? Run [command] to find out which packages and repositories you are currently using.

- -
- -
- -
- - - -

{ feature === Features.pro ? "25000" : "2300" }

- - -

Covers { feature === Features.pro ? "25000" : "2300" } packages in Ubuntu Main { feature === Features.pro ? "and Universe":""}

- - -
-
-

LTS standard security maintenance for Ubuntu Main (initial 5 years)

- { feature===Features.pro &&

LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)

} - - - -
- Systemd - RabbitMQ - OpenSSL - Ruby - PHP - NGINX - MySQL - { feature===Features.pro && <> - Apache Tomcat - Agios - NodeJS - Puppet - Redis +

What security coverage do you need?

+ +
+

Not sure? Run pro security-status to find out which packages and repositories you are currently using.

+ - Rust + - Wordpress - } -
- +
+ + +
+ + + + +

{feature === Features.pro ? "25000" : "2300"}

+ + +

Covers {feature === Features.pro ? "25000" : "2300"} packages in Ubuntu Main {feature === Features.pro ? "and Universe" : ""}

+ + +
+
+

LTS standard security maintenance for Ubuntu Main (initial 5 years)

+ {feature === Features.pro &&

LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)

} + + + + +
+
+
+ Systemd +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ { feature===Features.pro && + <> +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ } +
+
+ + - - - - - { ); }; -export default Feature; - -{/* - -
- - Security coverage for critical, high and selected medium CVEs for: - -
-
-

- Over 2,300 open source deb packages in Ubuntu Main repository for - 10 years, including: -

-
- Systemd - RabbitMQ - OpenSSL - Ruby - PHP - NGINX - MySQL -
-
-
-

- Over 23,000 open source deb packages in Ubuntu Universe repository - for 10 years, including: -

-
- Apache Tomcat - Agios - NodeJS - Puppet - Redis - Rust - Wordpress -
-
- - -
- -
- - -
- -
- - */} \ No newline at end of file +export default Feature; \ No newline at end of file diff --git a/templates/advantage/subscribe/index.html b/templates/advantage/subscribe/index.html index 49d01149a7d..8232fc00842 100644 --- a/templates/advantage/subscribe/index.html +++ b/templates/advantage/subscribe/index.html @@ -6,7 +6,7 @@ %}https://docs.google.com/document/d/1UqL8YJH9ywvOXnrt3syY0U8fiOakfAGWmLS9uerwAWk/edit{% endblock meta_copydoc %} {% block content %} -
+
From d6d5a1d6b81ce81ab4f5760f50b569156fd13935 Mon Sep 17 00:00:00 2001 From: Abhigyan Ghosh Date: Wed, 21 Feb 2024 20:47:34 +0530 Subject: [PATCH 03/10] refactor: lint code --- .../react/components/Form/Feature/Feature.tsx | 378 +++++++++--------- static/sass/styles.scss | 23 +- 2 files changed, 210 insertions(+), 191 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index dfdc5bd05e6..ebea6d62dd9 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -27,15 +27,21 @@ const Feature = () => { return ( <> -

What security coverage do you need?

+ +

What security coverage do you need?

+
-

Not sure? Run pro security-status to find out which packages and repositories you are currently using.

+ data-testid="wrapper" + > +

+ Not sure? Run pro security-status to find out which + packages and repositories you are currently using. +

{ disabled={proDisabled} />
- {
- +

{feature === Features.pro ? "25000" : "2300"}

-

Covers {feature === Features.pro ? "25000" : "2300"} packages in Ubuntu Main {feature === Features.pro ? "and Universe" : ""}

+

+ Covers {feature === Features.pro ? "25000" : "2300"} packages in + Ubuntu Main {feature === Features.pro ? "and Universe" : ""} +

-
-

LTS standard security maintenance for Ubuntu Main (initial 5 years)

- {feature === Features.pro &&

LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)

} +
+

+ LTS standard security maintenance for Ubuntu Main (initial 5 years) +

+ {feature === Features.pro && ( +

+ LTS Expanded Security Maintenance (ESM) for Ubuntu Main + (additional 5 years) +

+ )} @@ -84,7 +103,7 @@ const Feature = () => { width="67" height="64" className="p-logo-section__logo" - /> + />
{ className="p-logo-section__logo" />
- { feature===Features.pro && - <> -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- } + {feature === Features.pro && ( + <> +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + )}
@@ -333,4 +353,4 @@ const Feature = () => { ); }; -export default Feature; \ No newline at end of file +export default Feature; diff --git a/static/sass/styles.scss b/static/sass/styles.scss index cc4210c1fc7..64b2cbb32f6 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1466,20 +1466,20 @@ $color-link-dark: #69c !default; } } -.p-graphic-main{ +.p-graphic-main { width: 10%; - background: #923A66; + background: #923a66; height: 48px; display: inline-block; } -.p-graphic-universe{ +.p-graphic-universe { width: 90%; background: #000000; height: 48px; display: inline-block; } -.p-graphic-universe--empty{ +.p-graphic-universe--empty { border-width: 1px; border-color: #757575; border-style: dashed; @@ -1488,22 +1488,23 @@ $color-link-dark: #69c !default; display: inline-block; } -.graphic-legend-main, .graphic-legend-universe{ - gap:1.2rem; +.graphic-legend-main, +.graphic-legend-universe { + gap: 1.2rem; display: flex; flex-direction: row; - &::before{ + &::before { display: inline-flex; height: 25px; width: 25px; - content:""; + content: ""; flex-shrink: 0; } } -.graphic-legend-main::before{ +.graphic-legend-main::before { background: #923a66; } -.graphic-legend-universe::before{ +.graphic-legend-universe::before { background: #000; } @@ -1534,5 +1535,3 @@ hr.is-extra-muted { background-color: rgba(0, 0, 0, 0.1); opacity: 0.5; } - - From d9c45917f2357fb80755bc6ae44f1285f89e532d Mon Sep 17 00:00:00 2001 From: Abhigyan Ghosh Date: Sun, 25 Feb 2024 20:57:31 +0530 Subject: [PATCH 04/10] fix: tests corrected --- .../subscribe/react/components/Form/Feature/Feature.test.tsx | 4 ++-- .../subscribe/react/components/Form/Feature/Feature.tsx | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx index eeb54082cf3..d629ceb4f6e 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx @@ -22,8 +22,8 @@ test("Feature section renders correctly", () => { ); - screen.getAllByText("Ubuntu Pro"); - screen.getAllByText("Ubuntu Pro (Infra-only)"); + screen.getAllByText("Pro - all repositories"); + screen.getAllByText("Infra only - limited subset"); }); test("Feature sections disables Infra + Apps if destkop is selected", () => { diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index ebea6d62dd9..7f59cfd773f 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -48,6 +48,7 @@ const Feature = () => { value={Features.pro} onChange={handleChange} disabled={proDisabled} + data-testid="pro" />
{ value={Features.infra} onChange={handleChange} disabled={infraOnlyDisabled} + data-testid="infra-only" />
From a22015e89c33e6454da55c635d304d85bcea3093 Mon Sep 17 00:00:00 2001 From: Abhigyan Ghosh Date: Mon, 26 Feb 2024 17:49:31 +0530 Subject: [PATCH 05/10] format scss --- static/sass/styles.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 64b2cbb32f6..def3c7c01e5 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -1467,38 +1467,38 @@ $color-link-dark: #69c !default; } .p-graphic-main { - width: 10%; background: #923a66; - height: 48px; display: inline-block; + height: 48px; + width: 10%; } .p-graphic-universe { - width: 90%; - background: #000000; - height: 48px; + background: #000; display: inline-block; + height: 48px; + width: 90%; } .p-graphic-universe--empty { - border-width: 1px; border-color: #757575; border-style: dashed; - width: 90%; - height: 48px; + border-width: 1px; display: inline-block; + height: 48px; + width: 90%; } .graphic-legend-main, .graphic-legend-universe { - gap: 1.2rem; display: flex; flex-direction: row; + gap: 1.2rem; &::before { + content: ""; display: inline-flex; + flex-shrink: 0; height: 25px; width: 25px; - content: ""; - flex-shrink: 0; } } .graphic-legend-main::before { From 3d9473120b91bd56ab1f6b8f0cbd8ea7c7950bde Mon Sep 17 00:00:00 2001 From: Abhigyan Ghosh Date: Fri, 1 Mar 2024 22:33:17 +0530 Subject: [PATCH 06/10] copy fix and mobile view fixed --- .../react/components/Form/Feature/Feature.tsx | 33 ++++--------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index 7f59cfd773f..61a4cada240 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -52,7 +52,7 @@ const Feature = () => { />
{ -

{feature === Features.pro ? "25000" : "2300"}

+

{feature === Features.pro ? "25,000" : "2,300"}

- Covers {feature === Features.pro ? "25000" : "2300"} packages in + Covers {feature === Features.pro ? "25,000" : "2,300"} packages in Ubuntu Main {feature === Features.pro ? "and Universe" : ""}

@@ -84,18 +84,17 @@ const Feature = () => { })} />

- LTS standard security maintenance for Ubuntu Main (initial 5 years) + 10 years of security maintenance for packages in Ubuntu Main repository

{feature === Features.pro && (

- LTS Expanded Security Maintenance (ESM) for Ubuntu Main - (additional 5 years) + 10 years of security maintenance for packages in Ubuntu Universe repository

)} - +
@@ -331,26 +330,6 @@ const Feature = () => {
- - -

2,300+

-

packages in Ubuntu main, including:

- - -

23,000+

-

packages in Ubuntu universe, including:

- ); }; From e4b1804547c87507c8877b6e215b24ec057e39dc Mon Sep 17 00:00:00 2001 From: abhigyanghosh30 Date: Tue, 5 Mar 2024 19:00:20 +0530 Subject: [PATCH 07/10] fix(prod-summary): Hide overlay on medium screens --- .../react/components/ProductSummary/ProductSummary.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx b/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx index 470c76b5f71..03aa6075dc4 100644 --- a/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx +++ b/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx @@ -37,7 +37,7 @@ const ProductSummary = () => { return ( <>
{
Date: Thu, 7 Mar 2024 23:08:04 +0530 Subject: [PATCH 08/10] fix tests and formatting --- .../react/components/Form/Feature/Feature.test.tsx | 2 +- .../subscribe/react/components/Form/Feature/Feature.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx index d629ceb4f6e..c31c9736d04 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx @@ -23,7 +23,7 @@ test("Feature section renders correctly", () => { ); screen.getAllByText("Pro - all repositories"); - screen.getAllByText("Infra only - limited subset"); + screen.getAllByText("Infra - only limited subset"); }); test("Feature sections disables Infra + Apps if destkop is selected", () => { diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index 61a4cada240..e725f7fe58d 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -84,11 +84,13 @@ const Feature = () => { })} />

- 10 years of security maintenance for packages in Ubuntu Main repository + 10 years of security maintenance for packages in Ubuntu Main + repository

{feature === Features.pro && (

- 10 years of security maintenance for packages in Ubuntu Universe repository + 10 years of security maintenance for packages in Ubuntu Universe + repository

)} From 51f1a58597bd3dda70ef912b0f9dd1f162c679ba Mon Sep 17 00:00:00 2001 From: abhigyanghosh30 Date: Fri, 8 Mar 2024 20:40:31 +0530 Subject: [PATCH 09/10] fix text writing --- .../subscribe/react/components/Form/Feature/Feature.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index e725f7fe58d..17dd906aa25 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -71,7 +71,7 @@ const Feature = () => {

- Covers {feature === Features.pro ? "25,000" : "2,300"} packages in + {feature === Features.pro ? "25,000" : "2,300"} packages in Ubuntu Main {feature === Features.pro ? "and Universe" : ""}

From 7dd83cb3b097067a78f1f08bc08b5c31ba65f8f2 Mon Sep 17 00:00:00 2001 From: abhigyanghosh30 Date: Mon, 11 Mar 2024 23:27:28 +0530 Subject: [PATCH 10/10] remove duplication of numbers --- .../subscribe/react/components/Form/Feature/Feature.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx index 17dd906aa25..f0950671bf1 100644 --- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx +++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx @@ -71,8 +71,8 @@ const Feature = () => {

- {feature === Features.pro ? "25,000" : "2,300"} packages in - Ubuntu Main {feature === Features.pro ? "and Universe" : ""} + packages in Ubuntu Main{" "} + {feature === Features.pro ? "and Universe" : ""}