EnvironmentConnector

<caos-environment-connector>

pick a source and a target environment, with production unmistakable

May be placed on a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
environments	property only	What can be pointed at: { key, name, domain?, identifier?, production?, connected? }[]. production: true is drawn as the WORD “Production” everywhere the environment appears.	json	empty list	Optional
source	source, markup only	The environment being compared FROM, by key.	text	none declared	Optional
target	target, markup only	The environment being compared TO, by key.	text	none declared	Optional
busy	busy, markup only	A connection is being made: the primary control reads “Connecting…” and raises nothing.	boolean	false	Optional
connectLabel	connect-label, markup only	What the primary control is called.	text	Compare	Optional

Events

Name	When it fires	What it carries
caos-environment-change	Either end changes, including through Swap.	{ source, target, touchesProduction } — whole environments, not just keys.
caos-environment-connect	The primary control is pressed with a real pair chosen.	{ source, target, touchesProduction }.

Slots

Not documented yet — this piece has not said.

Styling hooks

Not documented yet — this piece has not said.

Methods

Not documented yet — this piece has not said.

Readable state

Name	Type	What it tells you
source	CaosEnvironment	undefined
target	CaosEnvironment	undefined
touchesProduction	boolean	Whether either end is production. Read it to gate anything irreversible.
ready	boolean	Both ends RESOLVED against environments AND different. Resolved, not merely named: the attributes are usually set in markup while the list arrives later, and a key nothing answers to is not a chosen environment. A comparison of something with itself is not a comparison either, and offering to run one wastes somebody’s time confidently.

Styling parts

Part	Which piece of it	When it is there
::part(connector)	The outer column.	Always
::part(end)	One end — its label, its dropdown and its chip.	Always
::part(chip)	The chosen environment’s chip.	That end has been chosen.
::part(chip-name)	The environment’s name on the chip.	Always
::part(chip-id)	The domain and identifier on the chip.	The environment carries either.
::part(badge)	The production marking.	The environment is production.
::part(swap)	The swap control.	Always
::part(connect)	The primary control.	Always
::part(summary)	The “from here to here” line, and the production warning.	Always

When to use it

Wherever an action reaches more than one environment. The production marking is the reason to use it rather than two dropdowns.

What to use instead

• CompareView — the environments are chosen and the question is what differs.
• PicklistField — exactly one environment is being chosen and none of them is dangerous — this component’s value is the pairing and the production marking.

Accessibility

Production is stated in THREE places — the chip badge, the dropdown option, and the chip’s aria-label — and in none of them by colour alone. The summary is a role="status" live region announcing the direction in order (“From … to …”) and, when it applies, which end is production, so the most consequential fact on the screen is heard as well as seen. The swap control carries an accessible name saying what it swaps, which a two-letter icon could not. Each chip’s accessible name carries the name, domain, identifier and production state in one reading, so two near-identical sandboxes are distinguishable without sight.

Examples

A load pointed at production

The case the component exists for. Production says so as text on the chip, in the option, and in the summary — the colour only repeats it.

{
  "id": "example",
  "section": "A load pointed at production",
  "columns": 1,
  "items": [
    {
      "id": "environment_connector_1",
      "type": "component",
      "key": "environment_connector",
      "inputs": {
        "source": "uat",
        "target": "prod",
        "environments": [
          {
            "key": "uat",
            "name": "UAT",
            "domain": "acme--uat",
            "identifier": "00D5g000004",
            "connected": true
          },
          {
            "key": "dev",
            "name": "Dev",
            "domain": "acme--dev",
            "identifier": "00D5g000009",
            "connected": true
          },
          {
            "key": "prod",
            "name": "Acme",
            "domain": "acme.my",
            "identifier": "00D5g000001",
            "production": true,
            "connected": true
          }
        ]
      }
    }
  ]
}

<caos-environment-connector id="environmentConnector1" source="uat" target="prod"></caos-environment-connector>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const environmentConnector1 = document.getElementById('environmentConnector1');
environmentConnector1.environments = [
  {
    "key": "uat",
    "name": "UAT",
    "domain": "acme--uat",
    "identifier": "00D5g000004",
    "connected": true
  },
  {
    "key": "dev",
    "name": "Dev",
    "domain": "acme--dev",
    "identifier": "00D5g000009",
    "connected": true
  },
  {
    "key": "prod",
    "name": "Acme",
    "domain": "acme.my",
    "identifier": "00D5g000001",
    "production": true,
    "connected": true
  }
];

Both ends the same

Not ready, and said so. A comparison of something with itself is not a comparison, so the primary control stays disabled rather than offering to run one.

{
  "id": "example",
  "section": "Both ends the same",
  "columns": 1,
  "items": [
    {
      "id": "environment_connector_1",
      "type": "component",
      "key": "environment_connector",
      "inputs": {
        "source": "uat",
        "target": "uat",
        "environments": [
          {
            "key": "uat",
            "name": "UAT",
            "domain": "acme--uat",
            "identifier": "00D5g000004"
          },
          {
            "key": "dev",
            "name": "Dev",
            "domain": "acme--dev",
            "identifier": "00D5g000009"
          }
        ]
      }
    }
  ]
}

<caos-environment-connector id="environmentConnector1" source="uat" target="uat"></caos-environment-connector>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const environmentConnector1 = document.getElementById('environmentConnector1');
environmentConnector1.environments = [
  {
    "key": "uat",
    "name": "UAT",
    "domain": "acme--uat",
    "identifier": "00D5g000004"
  },
  {
    "key": "dev",
    "name": "Dev",
    "domain": "acme--dev",
    "identifier": "00D5g000009"
  }
];

Nothing chosen yet

The chips appear as each end is chosen; until then the screen says what it is waiting for.

{
  "id": "example",
  "section": "Nothing chosen yet",
  "columns": 1,
  "items": [
    {
      "id": "environment_connector_1",
      "type": "component",
      "key": "environment_connector",
      "inputs": {
        "environments": [
          {
            "key": "uat",
            "name": "UAT",
            "domain": "acme--uat",
            "identifier": "00D5g000004"
          },
          {
            "key": "prod",
            "name": "Acme",
            "domain": "acme.my",
            "identifier": "00D5g000001",
            "production": true
          }
        ]
      }
    }
  ]
}

<caos-environment-connector id="environmentConnector1"></caos-environment-connector>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const environmentConnector1 = document.getElementById('environmentConnector1');
environmentConnector1.environments = [
  {
    "key": "uat",
    "name": "UAT",
    "domain": "acme--uat",
    "identifier": "00D5g000004"
  },
  {
    "key": "prod",
    "name": "Acme",
    "domain": "acme.my",
    "identifier": "00D5g000001",
    "production": true
  }
];