Disclosure Panel and Banner across Automate #5106

SEAjamieD · 2021-05-25T17:21:13Z

🔩 Description: What code changed, and why?

Some of our customers have been requesting a way to add a disclosure statement to the login page, as well as a ribbon across the top of the login page and Automate in order to notify users of various message that relate to using our product on their network. This update will allow a user to define:

A) if they should show the disclosure text
B) Populate the disclosure with HTML content
C) if they should show the ribbon
D) Populate the ribbon with text, background color, and text color

⛓️ Related Resources

Addresses: #4934 and #4974

👍 Definition of Done

A user can choose to display a banner across the top of the screen in their login flow

They may provide their own text in the banner
They may choose the background color and text color

A user can choose to display disclosure text on their login page

They may populate the disclosure with HTML of their choice

Inside Automate

Users may update configuration files so that they can show a customizable banner and disclosure text
Unit tests completed that appropriately test the Warning Banner Component
Screen shot showing what to expect when banner is present
Screen shot showing what to expect when disclosure is present
No visual changes to Automate UI if a user choose to not show the banner or the disclosure text.

👟 How to Build and Test the Change

You'll have to rebuild 5 services for this to populate correctly.
The related services are:

automate-deployment
automate-cli
automate-load-balancer
automate-gateway
automate-dex

In hab studio:
build components/automate-deployment
build components/automate-cli
build components/automate-load-balancer
build components/automate-gateway
build components/automate-dex
start_all_services

You'll also need to run chef-automate config patch dev/patch.toml in hab studio. This will connect all the variables we have coming from the config go files.

If you are already logged into Automate UI, please log out and visit https://a2-dev.test/
If all went well, you should see a block of disclosure text below the login, as well as a blue banner across the top of the screen.

You can then toggle the text of these, or show/hide by opening up the patch.toml file and changing the show attributes to false or changing the text. In order to pick up the new changes you'll need to run chef-automate config patch dev/patch.toml again in hab studio.

✅ Checklist

All PRs must tick these:

I have read the CONTRIBUTING document.
All commits signed-off for the Developer Certification of Origin.

With occasional exceptions, all PRs from Progress employees must tick these:

Is the code clear? (complicated code or lots of comments--subdivide and use well-named methods, meaningful variable names, etc.)
Consistency checked? (user notifications, user prompts, visual patterns, code patterns, variable names)
Repeated code blocks eliminated? (adapt and reuse existing components, blocks, functions, etc.)
Spelling, grammar, typos checked? (at a minimum use make spell in any component directory)
Code well-formatted? (indents, line breaks, etc. improve rather than hinder readability)

All PRs from Progress employees should tick these if appropriate:

Tests added/updated? (all new code needs new tests)
Docs added/updated? (all customer-facing changes)

Please add a note next to any checkbox above if you are NOT ticking it.

📷 Screenshots, if applicable

Banner and Disclosure text in Login

Banner in Automate

netlify · 2021-05-25T17:21:18Z

👷 Deploy Preview for chef-automate processing.

🔨 Explore the source changes: 018d106

🔍 Inspect the deploy log: https://app.netlify.com/sites/chef-automate/deploys/60c21112d79c400007d5c654

SEAjamieD · 2021-05-25T21:21:26Z

components/automate-dex/web/templates/login.html

+</head>
+
+<body>
+  {{ if eq ("showBanner" | extra) "true" }}


In these blocks, we're checking that the user has set their instance to show the banner, if it does, then we go ahead and display the banner. You'll see this similar type of block used both in this file and in password.html. Checking against extra is a pattern that comes from DexIDP (https://dexidp.io/docs/templates/)

SEAjamieD · 2021-05-25T21:22:52Z

components/automate-dex/web/templates/login.html

      <div class="logo">
-        <img class="theme-navbar__logo" alt="Chef Automate" src="{{url .ReqPath "static/img/automate-blue-d9789f4b.svg" }}">
+        <img class="theme-navbar__logo" alt="Chef Automate"


You'll see a few changes like this as well - there is no change in the outcome. Semgrep was complaining we were not interpolating the template variables properly, so we've updated while we're here.

SEAjamieD · 2021-05-25T21:24:23Z

components/automate-dex/web/templates/login.html

+  <script>
+    const populateDisclaimer = () => {
+      const show = '{{ "showDisclosure" | extra }}';
+      if (show !== 'true') return;
+
+      const d = '{{ "disclosureMessage" | extra }}';
+      document.getElementById('disclosure').innerHTML = d;
+    }
+
+    populateDisclaimer();
+  </script>


In order to get true HTML populating the disclosure block, we had to use JavaScript within the same file. In this block, We are getting the disclosure text, and then appending it to the disclosure block.

SEAjamieD · 2021-05-25T21:26:56Z

components/automate-ui/src/app/app.module.ts

+    // Initilization for warning banner component
+    {
+      provide: APP_INITIALIZER,
+      multi: true,
+      deps: [AppConfigService],
+      useFactory: (appConfigService: AppConfigService) => {
+        return () => {
+          return appConfigService.loadAppConfig();
+        };
+      }
+    }


What this block does is allow us to call the AppConfigService's loadConfigApp before the application renders. In this case, we are using that time to grab our configuration for the warning banner.

SEAjamieD · 2021-05-25T21:36:49Z

components/automate-ui/src/app/services/app-config/app-config.service.ts

+  public loadAppConfig() {
+    return new HttpClient(this.handler).get('/banner.js')
+      .toPromise()
+      .then(data => this.appConfig = data);
+  }


This is the function that is doing all the heavy lifting. It is reaching out to /banner.js and returning our configuration data

SEAjamieD · 2021-05-25T21:37:42Z

dev/banner_message.txt

+<h1>Warning</h1>
+<p><b style="color: blue">Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. Nulla a diam porttitor, dignissim tortor eu, cursus urna. Aenean sit amet lorem tincidunt, imperdiet lacus eget, finibus sem. Suspendisse quis odio tempor, semper lorem ac, viverra purus. Ut suscipit mollis libero ac venenatis. Nulla facilisi. Nam imperdiet mi magna, eu molestie mauris eleifend quis. Nam placerat mauris massa, vel dapibus sapien venenatis ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum at congue nibh, non egestas tellus.<p>
+
+<p>Nullam et nulla ornare, viverra augue sit amet, malesuada nisl. Mauris nulla lectus, molestie eget auctor id, pharetra eu eros. Proin non nisi varius, convallis libero id, ullamcorper purus. Mauris hendrerit auctor felis non faucibus. Vestibulum mollis ligula odio, eu vestibulum ante ullamcorper sed. In condimentum elit sapien, nec porttitor mi porttitor et. Donec condimentum posuere lorem, molestie ultricies quam eleifend quis. Sed volutpat purus ante, eu tristique lorem efficitur efficitur.</p>
+
+<p>Nunc nibh eros, malesuada posuere molestie nec, pharetra eleifend magna. Nulla mollis vitae dui ac placerat. In nec pulvinar ex. Cras sodales at sapien finibus fermentum. Sed laoreet tempus velit sit amet condimentum. Ut sed risus id justo pulvinar sodales. Nunc eros velit, sollicitudin sit amet posuere vitae, vulputate in nunc. Maecenas quis risus maximus, finibus augue in, faucibus est.<p>
+
+<p>Nam aliquet maximus hendrerit. Duis lacinia faucibus vulputate. Donec id turpis arcu. Nullam pellentesque lobortis justo id lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin in ornare urna. Mauris id arcu enim. In nisi lectus, porta a aliquam in, porta sit amet urna. Suspendisse sollicitudin purus vitae lorem faucibus, a accumsan leo malesuada. Pellentesque egestas vitae nisi eu pulvinar. Proin magna arcu, ullamcorper eget venenatis ut, vehicula ac mi.</p>
+
+<p>Here is a link to <a href="https://google.com" rel="noopener noreferrer" target="_blank">google</a></p>


This is our demo file for html. Though it is a text file, a user will drop in their desired html for the disclosure panel.

SEAjamieD · 2021-05-25T21:38:00Z

dev/patch.toml

+[global.v1]
+  [global.v1.disclosure]
+    show = true
+    message_file_path = "/src/dev/banner_message.txt"
+  [global.v1.banner]
+    show = true
+    message = "Changing the text around"
+    background_color = "3864f2" # Must be a hex value minus the hash symbol
+    text_color = "FFF" # Must be a hex value minus the hash symbol
+
+    # Find valid HEX codes at https://htmlcolorcodes.com/
+    # check your HTML validation at https://validator.w3.org/


This is where a user will define their global configurations.

components/automate-ui/src/assets/app-config.json

vinay033

LGTM 🎉

Signed-off-by: seajamied <jdegnan@chef.io>

Signed-off-by: Kallol Roy <karoy@progress.com>

Signed-off-by: seajamied <jdegnan@chef.io>

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

sonarcloud · 2021-06-10T13:24:52Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
9.1% Duplication

chaitali-mane

Changes looks good to me

SEAjamieD self-assigned this May 25, 2021

SEAjamieD assigned kalroy May 25, 2021

SEAjamieD added aha-idea automate-ui customer-reported issues reported by customers labels May 25, 2021

This was referenced May 25, 2021

Jamie/banner in UI #5062

Closed

Disclosure Text in Dex #4978

Closed

This was linked to issues May 25, 2021

Display disclosure splash page before login #4974

Closed

Show Warning Banner throughout Automate-UI #5061

Closed

SEAjamieD marked this pull request as ready for review May 25, 2021 21:17

SEAjamieD commented May 25, 2021

View reviewed changes

kalroy force-pushed the jamie/banner-combine branch from f4ea02a to 94590b9 Compare May 26, 2021 11:39

himanshi-chhabra force-pushed the jamie/banner-combine branch from 8b11c85 to 53ff884 Compare June 3, 2021 06:32

himanshi-chhabra self-assigned this Jun 3, 2021

himanshi-chhabra requested review from vinay033, chaitali-mane and rickmarry June 7, 2021 06:18

vinay033 reviewed Jun 7, 2021

View reviewed changes

components/automate-ui/src/assets/app-config.json Outdated Show resolved Hide resolved

vinay033 approved these changes Jun 7, 2021

View reviewed changes

himanshi-chhabra force-pushed the jamie/banner-combine branch 2 times, most recently from cd09087 to 7d4c4ac Compare June 10, 2021 06:28

seajamied added 2 commits June 10, 2021 18:47

Just exploring

0cc2d2e

Signed-off-by: seajamied <jdegnan@chef.io>

Add placeholders for incoming custom data points

a1ae889

Signed-off-by: seajamied <jdegnan@chef.io>

kalroy and others added 21 commits June 10, 2021 18:47

Changes to pass the config request test failures

e48d300

Signed-off-by: Kallol Roy <karoy@progress.com>

Turn off for test

9f9e2df

Signed-off-by: seajamied <jdegnan@chef.io>

Handle 404 error

89ddd3b

Signed-off-by: seajamied <jdegnan@chef.io>

Lint fixes

8e331cc

Signed-off-by: seajamied <jdegnan@chef.io>

Spelling

f97763f

Signed-off-by: seajamied <jdegnan@chef.io>

Test comment out line in cypress

cfb2d9f

Signed-off-by: seajamied <jdegnan@chef.io>

Debug buildkite

61d58c7

Signed-off-by: seajamied <jdegnan@chef.io>

Debug buildkite

584541b

Signed-off-by: seajamied <jdegnan@chef.io>

Added debug buildkite changes.

ecd0c9e

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

Added console to check

3d6168b

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

Adding if/else

d781b74

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

update if/else statement

62c3197

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

added logs for cypress.

1d04d13

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

added url for signup

f8d20e8

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

added url if/else

fd26896

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

added url then if/else

0cfa0bd

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

added reload for url

c8c7f5f

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

Added less wait time.

e7dbea3

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

removed the wait time

80f76e6

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

Added review comments changes.

188daf3

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

increased cypress run time.

018d106

Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>

himanshi-chhabra force-pushed the jamie/banner-combine branch from 3e717ec to 018d106 Compare June 10, 2021 13:18

chaitali-mane approved these changes Jun 15, 2021

View reviewed changes

kalroy merged commit ba3e352 into master Jun 18, 2021

kalroy deleted the jamie/banner-combine branch June 18, 2021 07:52

dishanktiwari2501 mentioned this pull request Jun 23, 2021

Disclosure Panel and Banner #5273

Merged

9 tasks

kalroy added the acceptance: verified label Jul 2, 2021

ekmixon mentioned this pull request Nov 28, 2023

[Snyk] Fix for 21 vulnerabilities ekmixon/automate#139

Open

ekmixon mentioned this pull request Feb 2, 2024

[Snyk] Fix for 17 vulnerabilities ekmixon/automate#157

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Disclosure Panel and Banner across Automate #5106

Disclosure Panel and Banner across Automate #5106

SEAjamieD commented May 25, 2021 •

edited

Loading

netlify bot commented May 25, 2021 •

edited

Loading

SEAjamieD May 25, 2021

SEAjamieD May 25, 2021

SEAjamieD May 25, 2021

SEAjamieD May 25, 2021

SEAjamieD May 25, 2021

SEAjamieD May 25, 2021

SEAjamieD May 25, 2021

vinay033 left a comment

sonarcloud bot commented Jun 10, 2021

chaitali-mane left a comment

Disclosure Panel and Banner across Automate #5106

Disclosure Panel and Banner across Automate #5106

Conversation

SEAjamieD commented May 25, 2021 • edited Loading

🔩 Description: What code changed, and why?

⛓️ Related Resources

👍 Definition of Done

👟 How to Build and Test the Change

✅ Checklist

📷 Screenshots, if applicable

netlify bot commented May 25, 2021 • edited Loading

SEAjamieD May 25, 2021

Choose a reason for hiding this comment

SEAjamieD May 25, 2021

Choose a reason for hiding this comment

SEAjamieD May 25, 2021

Choose a reason for hiding this comment

SEAjamieD May 25, 2021

Choose a reason for hiding this comment

SEAjamieD May 25, 2021

Choose a reason for hiding this comment

SEAjamieD May 25, 2021

Choose a reason for hiding this comment

SEAjamieD May 25, 2021

Choose a reason for hiding this comment

vinay033 left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Jun 10, 2021

chaitali-mane left a comment

Choose a reason for hiding this comment

SEAjamieD commented May 25, 2021 •

edited

Loading

netlify bot commented May 25, 2021 •

edited

Loading