env config settings is displayed correctly #5879

andrew-codes · 2019-12-04T15:07:07Z

Closes Configuration shows env variables as undefined #5859

User facing changelog

env configuration option displays properly within the settings panel. Previously, setting env options would incorrectly render "undefined" as the value.

Additional details

The resolved config has metadata around where the value comes from. For example, blacklistHosts's value is an object with a from and value key. The component rendering the config accepts a normal object, so we do not want to include this additional metadata. Prior to passing it along, the resolved config is normalized without the metadata. However, the env value turned out to be a special case; with its value being the actual value instead of a from and value object. Due to this, the process of normalizing the resolved config stripped this out entirely; leaving an undefined value.

Now, the resolved config is processed to strip metadata and then the env key is explicitly added back.

Tests were also added to ensure the existence of env data is rendered properly; both initially, expanded, and with the correct tooltip information.

How has the user experience changed?

Before Screenshot

After Screenshot

PR Tasks

Have tests been added/updated?
Has the original issue been tagged with a release in ZenHub?

Previously was being dropped as the value of `env` was slightly different from the rest of the resolved config. It did not have an explicit `from`/`value` combo. NormalizeWithoutMeta strips `from`/`value` to simply the value. This is not explictly done for the env key's values.

cypress-bot · 2019-12-04T15:07:09Z

Thanks for the contribution! Below are some guidelines Cypress uses when doing PR reviews.

Please write [WIP] in the title of your Pull Request if your PR is not ready for review - someone will review your PR as soon as the [WIP] is removed.
Please familiarize yourself with the PR Review Checklist and feel free to make updates on your PR based on these guidelines.

PR Review Checklist

If any of the following requirements can't be met, leave a comment in the review selecting 'Request changes', otherwise 'Approve'.

User Experience

The feature/bugfix is self-documenting from within the product.
The change provides the end user with a way to fix their problem (no dead ends).

Functionality

The code works and performs its intended function with the correct logic.
Performance has been factored in (for example, the code cleans up after itself to not cause memory leaks).
The code guards against edge cases and invalid input and has tests to cover it.

Maintainability

The code is readable (too many nested 'if's are a bad sign).
Names used for variables, methods, etc, clearly describe their function.
The code is easy to understood and there are relevant comments explaining.
New algorithms are documented in the code with link(s) to external docs (flowcharts, w3c, chrome, firefox).
There are comments containing link(s) to the addressed issue (in tests and code).

Quality

The change does not reimplement code.
There's not a module from the ecosystem that should be used instead.
There is no redundant or duplicate code.
There are no irrelevant comments left in the code.
Tests are testing the code’s intended functionality in the best way possible.

Internal

The original issue has been tagged with a release in ZenHub.

cypress · 2019-12-04T15:16:27Z

Test summary

3588 • 0 • 47 • 0

Run details


Project	cypress
Status	Passed
Commit	`e1a97a1`
Started	Dec 12, 2019 9:40 PM
Ended	Dec 12, 2019 9:46 PM
Duration	05:32 💡
OS	Linux Debian - 9.11
Browser	Multiple

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

jennifer-shehane

Manually tested, looks good - also nests the env vars. 👍 I did not have time to review the code.

Also, just as a note @andrew-codes, in the section for 'How has the user experience changed' it's nice to have a before/after screenshot (after like the one below) demonstrating the fix versus the undefined value before. It's quicker than having to go look at the issue or read all the text explaining.

andrew-codes · 2019-12-04T17:40:34Z

Let me pull a screenshot of before and after. Thank you for the feedback @jennifer-shehane

chrisbreiding · 2019-12-05T18:41:16Z

Is this what we want when env is undefined? I feel like it shouldn't be there or should say null or undefined instead of being blank.

andrew-codes · 2019-12-06T14:42:08Z

Good catch @chrisbreiding. Let me add a test and resolve the issue when there is no env value.

brian-mann · 2019-12-06T17:20:04Z

packages/desktop-gui/cypress/integration/settings_spec.js

+      it('displays env settings', () => {
+        cy.get('@config').then(({ resolved }) => {
+          const getEnvKeys = flow([
+            get('env'),
+            toPairs,
+            map(([key]) => key),
+            sortBy(get('')),
+          ])
+
+          cy.contains('.line', 'env').contains(flow([getEnvKeys, join(', ')])(resolved))
+          cy.contains('.line', 'env').click()
+          const assertKeyExists = each((key) => cy.contains('.line', key))
+          const assertKeyValuesExists = flow([
+            map((key) => {
+              return flow([
+                get(['env', key, 'value']),
+                (v) => {
+                  if (isString(v)) {
+                    return `"${v}"`
+                  }
+
+                  return v
+                },
+              ])(resolved)
+            }),
+            each((v) => {
+              cy.contains('.key-value-pair-value', v)
+            }),
+          ])
+
+          const assertFromTooltipsExist = flow([
+            map((key) => {
+              return [key,
+                flow([
+                  get(['env', key, 'from']),
+                  (from) => `.${from}`,
+                ])(resolved)]
+            }),
+            each(([key, fromTooltipClassName]) => {
+              cy.contains(key).parents('.line').first().find(fromTooltipClassName)
+            }),
+          ])
+
+          flow([getEnvKeys, assertKeyExists])(resolved)
+          flow([getEnvKeys, assertKeyValuesExists])(resolved)
+          flow([getEnvKeys, assertFromTooltipsExist])(resolved)
+        })
+      })


this looks pretty gnarly, and i think you could use some cypress-isms to clean this up. come find me and i can show you some tricks

brian-mann · 2019-12-06T17:21:07Z

packages/desktop-gui/cypress/integration/settings_spec.js

+          cy.contains('.line', 'env').contains(flow([getEnvKeys, join(', ')])(resolved))
+          cy.contains('.line', 'env').click()


these lines should go below the const ... = assignments because the execute async.

It's generally better to group the sync/async code together

brian-mann

I left a few comments and since I don't see the test for handling when env is undefined I assume you still need to commit something...

So I'll Request Changes in the mean time so you can address the other feedback.

brian-mann · 2019-12-11T20:39:17Z

packages/desktop-gui/cypress/integration/settings_spec.js

+        this.ipc.openProject.onCall(1).resolves(setConfigEnv(this.config, null))
+        this.ipc.onConfigChanged.yield()
+
+        cy.contains('.line', 'env:null')
+
+        this.ipc.openProject.onCall(2).resolves(setConfigEnv(this.config, {}))
+        this.ipc.onConfigChanged.yield()
+
+        cy.contains('.line', 'env:null')
+
+        this.ipc.openProject.onCall(3).resolves(setConfigEnv(this.config, undefined))
+        this.ipc.onConfigChanged.yield()
+
+        cy.contains('.line', 'env:null')


i don't believe you're coordinating the stubs + the cypress commands correctly here because the cypress commands are async and the this.ipc.onConfigChanged.yield() is synchronous. I believe it's synchronously firing the onConfigChanged immediately (three times), and so the final undefined value is being flushed to the DOM, and then the three cy.contains(...) are running only against the last render of the DOM (which is undefined).

To fix this you need to use a .then() so that the IPC events are fired after the cy.contains()

Thanks for pointing this out and going over it with me. Consequently, the implementation passes for each use case, null, undefined, and {}. However, even with the new code changes to the test that we worked on, I get strange behavior. I broke them into 3 separate E2E test cases, but I don't much like it. I'd love it if anyone has any insights on how to combine them into a single test case.

implementation works individually for each of the three test cases. I don't like breaking them into three separate E2E tests, but I'm unsure how to orchestrate them properly otherwise.

brian-mann

approving assuming we get the tests cleaned up a bit and passing

- only a single test; no longer 3 separate tests for the same case

cypress-bot · 2019-12-12T23:34:48Z

Released in 3.8.0.

Merge branch 'develop' into issue-5859-env-vars-show-undefined

94283d6

andrew-codes requested a review from a team December 4, 2019 15:50

jennifer-shehane reviewed Dec 4, 2019

View reviewed changes

jennifer-shehane requested a review from a team December 4, 2019 15:58

Merge branch 'develop' into issue-5859-env-vars-show-undefined

9ba8890

brian-mann reviewed Dec 6, 2019

View reviewed changes

brian-mann requested changes Dec 6, 2019

View reviewed changes

andrew-codes and others added 4 commits December 6, 2019 14:05

properly handle when env vars are not set; should show as null

86b6b74

Merge branch 'develop' into issue-5859-env-vars-show-undefined

42dd706

include test for undefined env vars

1aca6ce

Merge branch 'develop' into issue-5859-env-vars-show-undefined

6dca914

jennifer-shehane requested a review from brian-mann December 11, 2019 14:23

brian-mann requested changes Dec 11, 2019

View reviewed changes

brian-mann and others added 3 commits December 12, 2019 13:02

Merge branch 'develop' into issue-5859-env-vars-show-undefined

c52c341

correctly await yielding the onConfigChanged callbacks

ffa2aca

make tests pass

98320cf

implementation works individually for each of the three test cases. I don't like breaking them into three separate E2E tests, but I'm unsure how to orchestrate them properly otherwise.

andrew-codes requested a review from brian-mann December 12, 2019 18:36

make tests pass; for real

3690eed

brian-mann previously approved these changes Dec 12, 2019

View reviewed changes

improve tests

5423399

- only a single test; no longer 3 separate tests for the same case

andrew-codes dismissed brian-mann’s stale review via 5423399 December 12, 2019 21:32

Merge branch 'develop' into issue-5859-env-vars-show-undefined

e1a97a1

andrew-codes requested a review from brian-mann December 12, 2019 21:35

flotwig approved these changes Dec 12, 2019

View reviewed changes

andrew-codes merged commit 7757252 into develop Dec 12, 2019

andrew-codes deleted the issue-5859-env-vars-show-undefined branch December 12, 2019 22:01

cypress-bot bot mentioned this pull request Dec 12, 2019

Configuration shows env variables as undefined #5859

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

env config settings is displayed correctly #5879

env config settings is displayed correctly #5879

andrew-codes commented Dec 4, 2019 •

edited

Loading

cypress-bot bot commented Dec 4, 2019

cypress bot commented Dec 4, 2019 •

edited

Loading

jennifer-shehane left a comment •

edited

Loading

andrew-codes commented Dec 4, 2019

chrisbreiding commented Dec 5, 2019

andrew-codes commented Dec 6, 2019

brian-mann Dec 6, 2019 •

edited

Loading

brian-mann Dec 6, 2019

brian-mann left a comment

brian-mann Dec 11, 2019

andrew-codes Dec 12, 2019 •

edited

Loading

brian-mann left a comment

cypress-bot bot commented Dec 12, 2019

		cy.contains('.line', 'env').contains(flow([getEnvKeys, join(', ')])(resolved))
		cy.contains('.line', 'env').click()

env config settings is displayed correctly #5879

env config settings is displayed correctly #5879

Conversation

andrew-codes commented Dec 4, 2019 • edited Loading

User facing changelog

Additional details

How has the user experience changed?

Before Screenshot

After Screenshot

PR Tasks

cypress-bot bot commented Dec 4, 2019

PR Review Checklist

User Experience

Functionality

Maintainability

Quality

Internal

cypress bot commented Dec 4, 2019 • edited Loading

Test summary

Run details

jennifer-shehane left a comment • edited Loading

Choose a reason for hiding this comment

andrew-codes commented Dec 4, 2019

chrisbreiding commented Dec 5, 2019

andrew-codes commented Dec 6, 2019

brian-mann Dec 6, 2019 • edited Loading

Choose a reason for hiding this comment

brian-mann Dec 6, 2019

Choose a reason for hiding this comment

brian-mann left a comment

Choose a reason for hiding this comment

brian-mann Dec 11, 2019

Choose a reason for hiding this comment

andrew-codes Dec 12, 2019 • edited Loading

Choose a reason for hiding this comment

brian-mann left a comment

Choose a reason for hiding this comment

cypress-bot bot commented Dec 12, 2019

andrew-codes commented Dec 4, 2019 •

edited

Loading

cypress bot commented Dec 4, 2019 •

edited

Loading

jennifer-shehane left a comment •

edited

Loading

brian-mann Dec 6, 2019 •

edited

Loading

andrew-codes Dec 12, 2019 •

edited

Loading