Spectral 10.x Upgrade Guide

Spectral 10.x introduces the ability to add custom icons to connections on a per-connection basis. This is useful when building a code-native integration that interacts with multiple third-party APIs. One connection in your integration can have a Pied Piper icon, while another can have a Hooli icon.

Prior to Spectral 10.x, an OAuth 2.0 connection in a custom component or code-native integration was defined like this:

Connection in Spectral 9.x

export const myConnection = oauth2Connection({
  key: "myConnection",
  label: "This is my label",
  comments: "This is my description", // Optional in-app description
  iconPath: "connect.png", // Optional OAuth connect button override
  inputs: {
    /* ... */
  },
});

Now, label, comments, and iconPath are nested within a display object, where:

• display.label represents the connection's "type" in the integration builder
• display.description was previously called comments and represents an optional in-app description
• display.icons.avatarPath is a new option and represents the icon displayed next to the connection when a customer deploys your integration
• display.icons.oauth2ConnectionIconPath was previously called iconPath and, when present, is displayed instead of the default OAuth 2.0 Connect button

Connection in Spectral 10.x

export const myConnection = oauth2Connection({
  key: "myConnection",
  display: {
    label: "This is my label",
    description: "This is my description", // Previously called "comments"
    icons: {
      avatarPath: "hooli.png",
      oauth2ConnectionIconPath: "connect.png", // Previously called "iconPath"
    },
  },
  inputs: {
    /* ... */
  },
});