env config settings is displayed correctly

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

@@ -1,4 +1,5 @@
 const { _ } = Cypress
+const { each, flow, get, isString, join, map, sortBy, toPairs } = require('lodash/fp')
 
 describe('Settings', () => {
   beforeEach(function () {
@@ -181,6 +182,55 @@ describe('Settings', () => {
           expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/guides/configuration')
         })
       })
+
+      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)
+        })
+      })
     })
 
     describe('when project id panel is opened', () => {

packages/desktop-gui/src/settings/configuration.jsx

@@ -1,50 +1,69 @@
 import _ from 'lodash'
+import { defaultTo, get, flow, join, map, reduce, take, toPairs, toPath } from 'lodash/fp'
 import cn from 'classnames'
 import { observer } from 'mobx-react'
 import React from 'react'
 import Tooltip from '@cypress/react-tooltip'
 import { ObjectInspector, ObjectName } from 'react-inspector'
-
 import { configFileFormatted } from '../lib/config-file-formatted'
 import ipc from '../lib/ipc'
 
-const formatData = (data) => {
-  if (Array.isArray(data)) {
-    return _.map(data, (v) => {
-      if (_.isObject(v) && (v.name || v.displayName)) {
-        return _.defaultTo(v.displayName, v.name)
-      }
-
-      return String(v)
-    }).join(', ')
+const joinWithCommas = join(', ')
+const objToString = (v) => flow([
+  defaultTo(v.name),
+  defaultTo(_.isObject(v) ? joinWithCommas(Object.keys(v)) : undefined),
+  defaultTo(String(v)),
+])(v.displayName)
+
+const formatValue = (value) => {
+  if (Array.isArray(value)) {
+    return flow([
+      map(objToString),
+      joinWithCommas,
+    ])(value)
   }
 
-  if (_.isObject(data)) {
-    return _.defaultTo(_.defaultTo(data.displayName, data.name), String(Object.keys(data).join(', ')))
+  if (_.isObject(value)) {
+    return objToString(value)
   }
 
   const excludedFromQuotations = ['null', 'undefined']
 
-  if (_.isString(data) && !excludedFromQuotations.includes(data)) {
-    return `"${data}"`
+  if (_.isString(value) && !excludedFromQuotations.includes(value)) {
+    return `"${value}"`
   }
 
-  return String(data)
+  return String(value)
 }
+
+const normalizeWithoutMeta = flow([
+  toPairs,
+  reduce((acc, [key, value]) => _.merge({}, acc, {
+    [key]: value.value,
+  }), {}),
+])
+
 const ObjectLabel = ({ name, data, expanded, from, isNonenumerable }) => {
-  const formattedData = formatData(data)
+  const formattedData = formatValue(data)
 
   return (
     <span className="line" key={name}>
       <ObjectName name={name} dimmed={isNonenumerable} />
       <span>:</span>
       {!expanded && (
         <>
-          <Tooltip title={from} placement='right' className='cy-tooltip'>
+          {from && (
+            <Tooltip title={from} placement='right' className='cy-tooltip'>
+              <span className={cn(from, 'key-value-pair-value')}>
+                <span>{formattedData}</span>
+              </span>
+            </Tooltip>
+          )}
+          {!from && (
             <span className={cn(from, 'key-value-pair-value')}>
               <span>{formattedData}</span>
             </span>
-          </Tooltip>
+          )}
         </>
       )}
       {expanded && Array.isArray(data) && (
@@ -58,25 +77,36 @@ ObjectLabel.defaultProps = {
   data: 'undefined',
 }
 
-const createComputeFromValue = (obj) => {
-  return (name, path) => {
-    const pathParts = path.split('.')
-    const pathDepth = pathParts.length
+const computeFromValue = (obj, name, path) => {
+  const normalizedPath = path.replace('$.', '').replace(name, `['${name}']`)
+  const getValueForPath = flow([
+    toPath,
+    _.partialRight(get, obj),
+  ])
+
+  let value = getValueForPath(normalizedPath)
 
-    const rootKey = pathDepth <= 2 ? name : pathParts[1]
+  if (!value) {
+    const onlyFirstKeyInPath = flow([toPath, take(1)])
 
-    return obj[rootKey] ? obj[rootKey].from : undefined
+    value = getValueForPath(onlyFirstKeyInPath(normalizedPath))
   }
+
+  if (!value) {
+    return undefined
+  }
+
+  return value.from ? value.from : undefined
 }
 
 const ConfigDisplay = ({ data: obj }) => {
-  const computeFromValue = createComputeFromValue(obj)
+  const getFromValue = _.partial(computeFromValue, obj)
   const renderNode = ({ depth, name, data, isNonenumerable, expanded, path }) => {
     if (depth === 0) {
       return null
     }
 
-    const from = computeFromValue(name, path)
+    const from = getFromValue(name, path)
 
     return (
       <ObjectLabel
@@ -89,9 +119,9 @@ const ConfigDisplay = ({ data: obj }) => {
     )
   }
 
-  const data = _.reduce(obj, (acc, value, key) => Object.assign(acc, {
-    [key]: value.value,
-  }), {})
+  const data = normalizeWithoutMeta(obj)
+
+  data.env = normalizeWithoutMeta(obj.env)
 
   return (
     <div className="config-vars">