diff --git a/app/ui-react/packages/api/src/WithConnections.tsx b/app/ui-react/packages/api/src/WithConnections.tsx
index 6983b09e6..bbe78425f 100644
--- a/app/ui-react/packages/api/src/WithConnections.tsx
+++ b/app/ui-react/packages/api/src/WithConnections.tsx
@@ -1,4 +1,4 @@
-import { ConnectionOverview } from '@syndesis/models';
+import { IConnectionOverview } from '@syndesis/models';
 import * as React from 'react';
 import { IFetchState } from './Fetch';
 import { ServerEventsContext } from './ServerEventsContext';
@@ -7,14 +7,14 @@ import { transformConnectionResponse } from './useConnection';
 import { WithChangeListener } from './WithChangeListener';
 import { IChangeEvent } from './WithServerEvents';
 
-export function getConnectionsForDisplay(connections: ConnectionOverview[]) {
+export function getConnectionsForDisplay(connections: IConnectionOverview[]) {
   return connections.filter(
     c => !c.metadata || !c.metadata['hide-from-connection-pages']
   );
 }
 
 export function getConnectionsWithFromAction(
-  connections: ConnectionOverview[]
+  connections: IConnectionOverview[]
 ) {
   return connections.filter(connection => {
     if (!connection.connector) {
@@ -27,7 +27,7 @@ export function getConnectionsWithFromAction(
   });
 }
 
-export function getConnectionsWithToAction(connections: ConnectionOverview[]) {
+export function getConnectionsWithToAction(connections: IConnectionOverview[]) {
   return connections.filter(connection => {
     if (!connection.connector) {
       // safety net
@@ -44,15 +44,15 @@ export function getConnectionsWithToAction(connections: ConnectionOverview[]) {
 }
 
 export interface IConnectionsFetchResponse {
-  readonly items: ConnectionOverview[];
+  readonly items: IConnectionOverview[];
   readonly totalCount: number;
 }
 
 export interface IConnectionsResponse {
-  readonly connectionsForDisplay: ConnectionOverview[];
-  readonly connectionsWithToAction: ConnectionOverview[];
-  readonly connectionsWithFromAction: ConnectionOverview[];
-  readonly dangerouslyUnfilteredConnections: ConnectionOverview[];
+  readonly connectionsForDisplay: IConnectionOverview[];
+  readonly connectionsWithToAction: IConnectionOverview[];
+  readonly connectionsWithFromAction: IConnectionOverview[];
+  readonly dangerouslyUnfilteredConnections: IConnectionOverview[];
   readonly totalCount: number;
 }
 
diff --git a/app/ui-react/packages/api/src/WithConnector.tsx b/app/ui-react/packages/api/src/WithConnector.tsx
index c50c45504..cad84ec97 100644
--- a/app/ui-react/packages/api/src/WithConnector.tsx
+++ b/app/ui-react/packages/api/src/WithConnector.tsx
@@ -1,21 +1,22 @@
-import { Connector } from '@syndesis/models';
+import { IConnector } from '@syndesis/models';
 import * as React from 'react';
 import { IFetchState } from './Fetch';
 import { SyndesisFetch } from './SyndesisFetch';
 
 export interface IWithConnectorProps {
   id: string;
-  initialValue?: Connector;
-  children(props: IFetchState<Connector>): any;
+  initialValue?: IConnector;
+  children(props: IFetchState<IConnector>): any;
 }
 
 export class WithConnector extends React.Component<IWithConnectorProps> {
   public render() {
     return (
-      <SyndesisFetch<Connector>
+      <SyndesisFetch<IConnector>
         url={`/connectors/${this.props.id}`}
         defaultValue={{
           actions: [],
+          isTechPreview: false,
           name: '',
         }}
         initialValue={this.props.initialValue}
diff --git a/app/ui-react/packages/api/src/WithConnectors.tsx b/app/ui-react/packages/api/src/WithConnectors.tsx
index 5e352f712..4039b33ff 100644
--- a/app/ui-react/packages/api/src/WithConnectors.tsx
+++ b/app/ui-react/packages/api/src/WithConnectors.tsx
@@ -1,19 +1,20 @@
-import { Connector } from '@syndesis/models';
+import { IConnector } from '@syndesis/models';
 import * as React from 'react';
 import { IFetchState } from './Fetch';
 import { ServerEventsContext } from './ServerEventsContext';
 import { SyndesisFetch } from './SyndesisFetch';
+import { transformConnectorResponse } from './useConnector';
 import { WithChangeListener } from './WithChangeListener';
 import { IChangeEvent } from './WithServerEvents';
 
 export interface IConnectorsFetchResponse {
-  readonly items: Connector[];
+  readonly items: IConnector[];
   readonly totalCount: number;
 }
 
 export interface IConnectorsResponse {
-  readonly connectorsForDisplay: Connector[];
-  readonly dangerouslyUnfilteredConnections: Connector[];
+  readonly connectorsForDisplay: IConnector[];
+  readonly dangerouslyUnfilteredConnections: IConnector[];
   readonly totalCount: number;
 }
 
@@ -22,7 +23,7 @@ export interface IWithConnectorsProps {
   children(props: IFetchState<IConnectorsResponse>): any;
 }
 
-export function getConnectorsForDisplay(connectors: Connector[]) {
+export function getConnectorsForDisplay(connectors: IConnector[]) {
   return connectors.filter(
     c => !c.metadata || !c.metadata['hide-from-connection-pages']
   );
@@ -31,11 +32,13 @@ export function getConnectorsForDisplay(connectors: Connector[]) {
 export function transformConnectorsResponse(
   response: IFetchState<IConnectorsFetchResponse>
 ): IFetchState<IConnectorsResponse> {
+  const connectors = response.data.items.map(transformConnectorResponse);
+
   return {
     ...response,
     data: {
-      connectorsForDisplay: getConnectorsForDisplay(response.data.items),
-      dangerouslyUnfilteredConnections: response.data.items,
+      connectorsForDisplay: getConnectorsForDisplay(connectors),
+      dangerouslyUnfilteredConnections: connectors,
       totalCount: response.data.totalCount,
     },
   };
diff --git a/app/ui-react/packages/api/src/helpers/connectionFunctions.ts b/app/ui-react/packages/api/src/helpers/connectionFunctions.ts
index 2511c803c..15ec0fac3 100644
--- a/app/ui-react/packages/api/src/helpers/connectionFunctions.ts
+++ b/app/ui-react/packages/api/src/helpers/connectionFunctions.ts
@@ -4,9 +4,11 @@ import {
   ActionDescriptorStep,
   ConfigurationProperty,
   Connection,
-  ConnectionOverview,
-  Connector,
+  ConnectionBulletinBoard,
+  IConnectionOverview,
+  IConnector,
 } from '@syndesis/models';
+import { getMetadataValue } from './integrationFunctions';
 
 export function getActionsWithFrom(actions: Action[] = []) {
   return actions.filter(a => a.pattern === 'From');
@@ -25,15 +27,15 @@ export function getConnectionMetadataValue(
 }
 
 export function getConnectionConnector(
-  connection: ConnectionOverview
-): Connector {
+  connection: IConnectionOverview
+): IConnector {
   if (!connection.connector) {
     throw Error(`FATAL: Connection ${connection.id} doesn't have a connector`);
   }
   return connection.connector;
 }
 
-export function getConnectorActions(connector: Connector): Action[] {
+export function getConnectorActions(connector: IConnector): Action[] {
   return connector.actions;
 }
 
@@ -82,6 +84,27 @@ export function getActionStepDefinition(
   return step.properties;
 }
 
+/**
+ * Checks whether the ConnectionBulletinBoard provided
+ * @param board
+ */
+export function isConfigRequired(board: ConnectionBulletinBoard): boolean {
+  return (board.notices || board.warnings || board.errors)! > 0;
+}
+
+/**
+ * Checks whether or not the provided object is a technical preview.
+ * Accepts a Connector.
+ * Returns a boolean for whether or not the metadata `tech-preview` key
+ * returns a string value of 'true'
+ * @param connector
+ */
+export function isTechPreview(connector: IConnector): boolean {
+  return (
+    getMetadataValue<string>('tech-preview', connector.metadata) === 'true'
+  );
+}
+
 /**
  * Return bool if a connection is derived, meaning that its configuration comes
  * from an OAuth flow. This helper is to work around a bug in the swagger definition
diff --git a/app/ui-react/packages/api/src/useConnection.tsx b/app/ui-react/packages/api/src/useConnection.tsx
index d20dad7d8..410f0337d 100644
--- a/app/ui-react/packages/api/src/useConnection.tsx
+++ b/app/ui-react/packages/api/src/useConnection.tsx
@@ -1,26 +1,38 @@
-import { ConnectionOverview } from '@syndesis/models';
-import { getActionsWithFrom, getActionsWithTo, isDerived } from './helpers';
+import { IConnectionOverview } from '@syndesis/models';
+import {
+  getActionsWithFrom,
+  getActionsWithTo,
+  isConfigRequired,
+  isDerived,
+} from './helpers';
 import { useApiResource } from './useApiResource';
+import { transformConnectorResponse } from './useConnector';
 
-export const transformConnectionResponse = (connection: ConnectionOverview) => {
+export const transformConnectionResponse = (
+  connection: IConnectionOverview
+) => {
+  const connector = connection.connector
+    ? transformConnectorResponse(connection.connector)
+    : undefined;
   return {
     ...connection,
-    actionsWithFrom: getActionsWithFrom(
-      connection.connector ? connection.connector.actions : []
-    ),
-    actionsWithTo: getActionsWithTo(
-      connection.connector ? connection.connector.actions : []
-    ),
+    actionsWithFrom: getActionsWithFrom(connector ? connector.actions : []),
+    actionsWithTo: getActionsWithTo(connector ? connector.actions : []),
+    connector,
     derived: isDerived(connection),
+    isConfigRequired: isConfigRequired(connection),
+    isTechPreview: connector ? connector.isTechPreview : false,
   };
 };
 
 export const useConnection = (
   connectionId: string,
-  initialValue?: ConnectionOverview
+  initialValue?: IConnectionOverview
 ) => {
-  return useApiResource<ConnectionOverview>({
+  return useApiResource<IConnectionOverview>({
     defaultValue: {
+      isConfigRequired: false,
+      isTechPreview: false,
       name: '',
     },
     initialValue,
diff --git a/app/ui-react/packages/api/src/useConnector.tsx b/app/ui-react/packages/api/src/useConnector.tsx
index 81d8f8df4..7dad138a2 100644
--- a/app/ui-react/packages/api/src/useConnector.tsx
+++ b/app/ui-react/packages/api/src/useConnector.tsx
@@ -1,13 +1,29 @@
-import { Connector } from '@syndesis/models';
+import { IConnector } from '@syndesis/models';
+import { isTechPreview } from './helpers';
 import { useApiResource } from './useApiResource';
 
-export const useConnector = (connectorId: string, initialValue?: Connector) => {
-  return useApiResource<Connector>({
+export const transformConnectorResponse = (connector: IConnector) => {
+  return {
+    ...connector,
+    isTechPreview: isTechPreview(connector),
+  };
+};
+
+export const useConnector = (
+  connectorId: string,
+  initialValue?: IConnector
+) => {
+  return useApiResource<IConnector>({
     defaultValue: {
       actions: [],
+      isTechPreview: false,
       name: '',
     },
     initialValue,
+    transformResponse: async response => {
+      const connector = await response.json();
+      return transformConnectorResponse(connector);
+    },
     url: `/connectors/${connectorId}`,
   });
 };
diff --git a/app/ui-react/packages/models/src/extra.d.ts b/app/ui-react/packages/models/src/extra.d.ts
index 39b82f029..cf8ebcb06 100644
--- a/app/ui-react/packages/models/src/extra.d.ts
+++ b/app/ui-react/packages/models/src/extra.d.ts
@@ -1,3 +1,9 @@
+import { Omit } from 'react-router';
+import {
+  Connector,
+  ConnectionBulletinBoard,
+  ConnectionOverview,
+} from '../dist';
 import {
   ConfigurationProperty,
   Connection,
@@ -57,6 +63,17 @@ export interface IConfigurationProperty extends ConfigurationProperty {
   [name: string]: any;
 }
 
+export interface IConnectionOverview
+  extends Omit<ConnectionOverview, 'connector'> {
+  connector?: IConnector;
+  isConfigRequired: boolean;
+  isTechPreview: boolean;
+}
+
+export interface IConnector extends Connector {
+  isTechPreview: boolean;
+}
+
 // Extended connection interface to add support for the 'iconFile' property
 export interface IConnectionWithIconFile extends Connection {
   icon?: any;
diff --git a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
index 2d5b53eda..b4c204a7e 100644
--- a/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
+++ b/app/ui-react/packages/ui/src/Connection/ConnectionCard.tsx
@@ -36,16 +36,16 @@ export interface IConnectionCardMenuProps {
 }
 
 export interface IConnectionProps {
-  configurationRequired?: boolean;
   description: string;
   href: H.LocationDescriptor;
   i18nCannotDelete?: string;
-  i18nConfigurationRequired?: string;
+  i18nConfigRequired?: string;
   i18nTechPreview?: string;
   icon: React.ReactNode;
+  isConfigRequired?: boolean;
+  isTechPreview?: boolean;
   menuProps?: IConnectionCardMenuProps;
   name: string;
-  techPreview?: boolean;
   techPreviewPopoverHtml?: React.ReactNode;
 }
 
@@ -131,7 +131,7 @@ export class ConnectionCard extends React.PureComponent<
           matchHeight={true}
           className={'connection-card'}
         >
-          {this.props.techPreview && (
+          {this.props.isTechPreview && (
             <div
               className="connection-card__tech-preview"
               data-testid={'connection-card-tech-preview-heading'}
@@ -242,7 +242,7 @@ export class ConnectionCard extends React.PureComponent<
                 </Text>
               </div>
             </Card.Body>
-            {this.props.configurationRequired && (
+            {this.props.isConfigRequired && (
               <Card.Footer
                 className={
                   'connection-card__footer--config-required alert alert-warning'
@@ -250,7 +250,7 @@ export class ConnectionCard extends React.PureComponent<
                 data-testid={'connection-card-config-required-footer'}
               >
                 <Icon type={'pf'} name={'warning-triangle-o'} size={'2x'} />
-                {this.props.i18nConfigurationRequired}
+                {this.props.i18nConfigRequired}
               </Card.Footer>
             )}
           </Link>
diff --git a/app/ui-react/packages/ui/stories/Connection/ConnectionCard.stories.tsx b/app/ui-react/packages/ui/stories/Connection/ConnectionCard.stories.tsx
index 4b3bcff99..5da739b61 100644
--- a/app/ui-react/packages/ui/stories/Connection/ConnectionCard.stories.tsx
+++ b/app/ui-react/packages/ui/stories/Connection/ConnectionCard.stories.tsx
@@ -46,14 +46,14 @@ const techPreviewPopoverHtml = (
 stories.add('no menu', () => (
   <MemoryRouter>
     <ConnectionCard
-      configurationRequired={false}
       description={text('description', 'Sample connection description')}
       href={text('#example') || ''}
-      i18nConfigurationRequired={'Configuration Required'}
+      i18nConfigRequired={'Configuration Required'}
       i18nTechPreview={'Technology Preview'}
       icon={<div />}
+      isConfigRequired={false}
+      isTechPreview={false}
       name={text('name', 'Sample connection')}
-      techPreview={false}
     />
   </MemoryRouter>
 ));
@@ -62,18 +62,17 @@ stories.add('with menu', () => (
   <MemoryRouter>
     <Container style={{ width: '50%' }}>
       <ConnectionCard
-        configurationRequired={false}
         description={text('description', 'Sample connection description')}
         href={text('#example') || ''}
         i18nCannotDelete={
           'Unable to delete this connection as it is being used by one or more integrations'
         }
-        i18nConfigurationRequired={'Configuration Required'}
+        i18nConfigRequired={'Configuration Required'}
         i18nTechPreview={'Technology Preview'}
         icon={<div />}
+        isConfigRequired={false}
         menuProps={menuProps}
         name={text('name', 'Sample connection')}
-        techPreview={false}
       />
     </Container>
   </MemoryRouter>
@@ -83,18 +82,18 @@ stories.add('tech preview and configuration required', () => (
   <MemoryRouter>
     <Container style={{ width: '50%' }}>
       <ConnectionCard
-        configurationRequired={true}
         description={text('description', 'Sample connection description')}
         href={text('#example') || ''}
         i18nCannotDelete={
           'Unable to delete this connection as it is being used by one or more integrations'
         }
-        i18nConfigurationRequired={'Configuration Required'}
+        i18nConfigRequired={'Configuration Required'}
         i18nTechPreview={'Technology Preview'}
+        isConfigRequired={true}
+        isTechPreview={true}
         icon={<div />}
         menuProps={menuProps}
         name={text('name', 'Sample connection')}
-        techPreview={true}
         techPreviewPopoverHtml={techPreviewPopoverHtml}
       />
     </Container>
diff --git a/app/ui-react/packages/ui/stories/Connection/ConnectionsListView.stories.tsx b/app/ui-react/packages/ui/stories/Connection/ConnectionsListView.stories.tsx
index 075b669d1..909150583 100644
--- a/app/ui-react/packages/ui/stories/Connection/ConnectionsListView.stories.tsx
+++ b/app/ui-react/packages/ui/stories/Connection/ConnectionsListView.stories.tsx
@@ -54,13 +54,13 @@ const connections = (
     <ConnectionsGridCell>
       <ConnectionCard
         name={text('name', 'Connection 3')}
-        configurationRequired={true}
         description={text('description', 'Config required and tech preview.')}
         href={'#example'}
-        i18nConfigurationRequired={'Configuration Required'}
+        i18nConfigRequired={'Configuration Required'}
         i18nTechPreview={'Technology Preview'}
         icon={<div />}
-        techPreview={true}
+        isConfigRequired={true}
+        isTechPreview={true}
         techPreviewPopoverHtml={techPreviewPopoverHtml}
       />
     </ConnectionsGridCell>
diff --git a/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx b/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx
index 15756d399..c0dc471c9 100644
--- a/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx
+++ b/app/ui-react/packages/ui/tests/ConnectionCard.spec.tsx
@@ -8,16 +8,16 @@ export default describe('ConnectionCard', () => {
     <MemoryRouter>
       <ConnectionCard
         name={'Sample connection'}
-        configurationRequired={false}
         description={'Sample connection description'}
         icon={<div />}
         i18nCannotDelete={
           'Unable to delete this connection as it is being used by one or more integrations'
         }
-        i18nConfigurationRequired={'Configuration Required'}
+        i18nConfigRequired={'Configuration Required'}
         i18nTechPreview={'Technology Preview'}
+        isConfigRequired={false}
+        isTechPreview={false}
         href={'/test'}
-        techPreview={false}
         techPreviewPopoverHtml={
           <span>
             Some popover <strong>HTML</strong>.
diff --git a/app/ui-react/syndesis/src/modules/connections/components/Connections.tsx b/app/ui-react/syndesis/src/modules/connections/components/Connections.tsx
index 1e0132920..81f08ca09 100644
--- a/app/ui-react/syndesis/src/modules/connections/components/Connections.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/components/Connections.tsx
@@ -1,6 +1,6 @@
 import { WithConnectionHelpers } from '@syndesis/api';
 import * as H from '@syndesis/history';
-import { ConnectionOverview } from '@syndesis/models';
+import { IConnectionOverview } from '@syndesis/models';
 import {
   ConnectionCard,
   ConnectionsGrid,
@@ -17,10 +17,10 @@ export interface IConnectionsProps {
   error: boolean;
   includeConnectionMenu: boolean;
   loading: boolean;
-  connections: ConnectionOverview[];
+  connections: IConnectionOverview[];
 
-  getConnectionHref(connection: ConnectionOverview): H.LocationDescriptor;
-  getConnectionEditHref?(connection: ConnectionOverview): H.LocationDescriptor;
+  getConnectionHref(connection: IConnectionOverview): H.LocationDescriptor;
+  getConnectionEditHref?(connection: IConnectionOverview): H.LocationDescriptor;
 }
 
 export class Connections extends React.Component<IConnectionsProps> {
@@ -77,25 +77,10 @@ export class Connections extends React.Component<IConnectionsProps> {
                                 doDelete(c.id!, c.name); // must have an ID if deleting
                               };
 
-                              const configurationRequired =
-                                c.board &&
-                                (c.board!.notices ||
-                                  c.board!.warnings ||
-                                  c.board!.errors)! > 0;
-
-                              const isTechPreview =
-                                c.connector! && c.connector!.metadata!
-                                  ? c.connector!.metadata!['tech-preview'] ===
-                                    'true'
-                                  : false;
-
                               return (
                                 <ConnectionsGridCell key={index}>
                                   <ConnectionCard
                                     name={c.name}
-                                    configurationRequired={
-                                      configurationRequired
-                                    }
                                     description={c.description || ''}
                                     icon={
                                       <EntityIcon
@@ -106,10 +91,12 @@ export class Connections extends React.Component<IConnectionsProps> {
                                     }
                                     href={this.props.getConnectionHref(c)}
                                     i18nCannotDelete={t('cannotDelete')}
-                                    i18nConfigurationRequired={t(
+                                    i18nConfigRequired={t(
                                       'configurationRequired'
                                     )}
                                     i18nTechPreview={t('techPreview')}
+                                    isConfigRequired={c.isConfigRequired}
+                                    isTechPreview={c.isTechPreview}
                                     menuProps={
                                       this.props.includeConnectionMenu
                                         ? {
@@ -135,7 +122,6 @@ export class Connections extends React.Component<IConnectionsProps> {
                                           }
                                         : undefined
                                     }
-                                    techPreview={isTechPreview}
                                     techPreviewPopoverHtml={
                                       <span
                                         dangerouslySetInnerHTML={{
diff --git a/app/ui-react/syndesis/src/modules/connections/components/ConnectionsWithToolbar.tsx b/app/ui-react/syndesis/src/modules/connections/components/ConnectionsWithToolbar.tsx
index 10560dcf7..dfccef7bc 100644
--- a/app/ui-react/syndesis/src/modules/connections/components/ConnectionsWithToolbar.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/components/ConnectionsWithToolbar.tsx
@@ -1,4 +1,4 @@
-import { Connection } from '@syndesis/models';
+import { IConnectionOverview } from '@syndesis/models';
 import {
   ConnectionsListView,
   IActiveFilter,
@@ -14,7 +14,7 @@ import resolvers from '../resolvers';
 import { Connections, IConnectionsProps } from './Connections';
 
 function getFilteredAndSortedConnections(
-  connections: Connection[],
+  connections: IConnectionOverview[],
   activeFilters: IActiveFilter[],
   currentSortType: ISortType,
   isSortAscending: boolean
@@ -23,7 +23,7 @@ function getFilteredAndSortedConnections(
   activeFilters.forEach((filter: IActiveFilter) => {
     const valueToLower = filter.value.toLowerCase();
     filteredAndSortedConnections = filteredAndSortedConnections.filter(
-      (c: Connection) => c.name.toLowerCase().includes(valueToLower)
+      (c: IConnectionOverview) => c.name.toLowerCase().includes(valueToLower)
     );
   });
 
diff --git a/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx b/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx
index 75fba72e5..5f2ece162 100644
--- a/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/pages/ConnectionDetailsPage.tsx
@@ -4,7 +4,7 @@ import {
   useConnectionHelpers,
   useConnectorVerifier,
 } from '@syndesis/api';
-import { Connection } from '@syndesis/models';
+import { IConnectionOverview } from '@syndesis/models';
 import {
   Breadcrumb,
   ConnectionDetailsForm,
@@ -27,7 +27,7 @@ import { parseValidationResult } from '../utils';
 export interface IConnectionDetailsOauthProps {
   connectorId: string;
   connectionName: string;
-  configuredProperties: Pick<Connection, 'configuredProperties'>;
+  configuredProperties: Pick<IConnectionOverview, 'configuredProperties'>;
 }
 const ConnectionDetailsOAuth: React.FunctionComponent<
   IConnectionDetailsOauthProps
@@ -75,7 +75,7 @@ export interface IConnectionDetailsRouteParams {
 }
 
 export interface IConnectionDetailsRouteState {
-  connection?: Connection;
+  connection?: IConnectionOverview;
 }
 
 export interface IConnectionDetailsPageProps {
@@ -102,7 +102,7 @@ export const ConnectionDetailsPage: React.FunctionComponent<
     state.connection
   );
 
-  const getUsedByMessage = (c: Connection): string => {
+  const getUsedByMessage = (c: IConnectionOverview): string => {
     // TODO: Schema is currently wrong as it has 'uses' as an OptionalInt. Remove cast when schema is fixed.
     const numUsedBy = c.uses as number;
 
diff --git a/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx b/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx
index df513372e..0ccb4cfbc 100644
--- a/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/pages/create/ConfigurationPage.tsx
@@ -1,6 +1,6 @@
 import { useConnector, useConnectorCredentials } from '@syndesis/api';
 import * as H from '@syndesis/history';
-import { Connector } from '@syndesis/models';
+import { IConnector } from '@syndesis/models';
 import {
   ConnectionCreatorLayout,
   ConnectorAuthorization,
@@ -27,7 +27,7 @@ export interface IConfigurationPageRouteParams {
 }
 
 export interface IConfigurationPageRouteState {
-  connector: Connector;
+  connector: IConnector;
 }
 
 interface IOAuthFlowProps {
diff --git a/app/ui-react/syndesis/src/modules/connections/pages/create/ConnectorsPage.tsx b/app/ui-react/syndesis/src/modules/connections/pages/create/ConnectorsPage.tsx
index 80e7c0a55..e9a0c9dd8 100644
--- a/app/ui-react/syndesis/src/modules/connections/pages/create/ConnectorsPage.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/pages/create/ConnectorsPage.tsx
@@ -1,5 +1,5 @@
 import { WithConnectors } from '@syndesis/api';
-import { Connector } from '@syndesis/models';
+import { IConnector } from '@syndesis/models';
 import {
   ConnectionCard,
   ConnectionCreatorLayout,
@@ -21,7 +21,7 @@ import { ConnectionCreatorBreadcrumb } from '../../components/ConnectionCreatorB
 import resolvers from '../../resolvers';
 
 function getFilteredAndSortedConnectors(
-  connections: Connector[],
+  connections: IConnector[],
   activeFilters: IActiveFilter[],
   currentSortType: ISortType,
   isSortAscending: boolean
@@ -30,7 +30,7 @@ function getFilteredAndSortedConnectors(
   activeFilters.forEach((filter: IActiveFilter) => {
     const valueToLower = filter.value.toLowerCase();
     filteredAndSortedConnections = filteredAndSortedConnections.filter(
-      (c: Connector) => c.name.toLowerCase().includes(valueToLower)
+      (c: IConnector) => c.name.toLowerCase().includes(valueToLower)
     );
   });
 
@@ -122,21 +122,15 @@ export class ConnectorsPage extends React.Component {
                                 <PageSection>
                                   {filteredAndSortedConnectors.map(
                                     (connector, index) => {
-                                      const isTechPreview =
-                                        connector!.metadata! &&
-                                        connector!.metadata!['tech-preview'] ===
-                                          'true';
-
                                       return (
                                         <ConnectionsGridCell key={index}>
                                           <ConnectionCard
-                                            configurationRequired={false}
                                             name={connector.name}
                                             description={
                                               connector.description || ''
                                             }
                                             i18nCannotDelete={t('cannotDelete')}
-                                            i18nConfigurationRequired={t(
+                                            i18nConfigRequired={t(
                                               'configurationRequired'
                                             )}
                                             i18nTechPreview={t('techPreview')}
@@ -147,12 +141,15 @@ export class ConnectorsPage extends React.Component {
                                                 width={46}
                                               />
                                             }
+                                            isConfigRequired={false}
+                                            isTechPreview={
+                                              connector.isTechPreview
+                                            }
                                             href={resolvers.create.configureConnector(
                                               {
                                                 connector,
                                               }
                                             )}
-                                            techPreview={isTechPreview}
                                             techPreviewPopoverHtml={
                                               <span
                                                 dangerouslySetInnerHTML={{
diff --git a/app/ui-react/syndesis/src/modules/connections/pages/create/ReviewPage.tsx b/app/ui-react/syndesis/src/modules/connections/pages/create/ReviewPage.tsx
index 0314f45a6..6b049f436 100644
--- a/app/ui-react/syndesis/src/modules/connections/pages/create/ReviewPage.tsx
+++ b/app/ui-react/syndesis/src/modules/connections/pages/create/ReviewPage.tsx
@@ -1,7 +1,7 @@
 import { useConnectionHelpers, useConnector } from '@syndesis/api';
 import { AutoForm, IFormDefinition } from '@syndesis/auto-form';
 import * as H from '@syndesis/history';
-import { Connector } from '@syndesis/models';
+import { IConnector } from '@syndesis/models';
 import {
   ConnectionCreatorLayout,
   ConnectorConfigurationForm,
@@ -29,7 +29,7 @@ export interface IReviewPageRouteParams {
 }
 
 export interface IReviewPageRouteState {
-  connector: Connector;
+  connector: IConnector;
   configuredProperties?: { [key: string]: string };
 }
 
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorSteps.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorSteps.tsx
new file mode 100644
index 000000000..790ca6469
--- /dev/null
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorSteps.tsx
@@ -0,0 +1,74 @@
+import * as H from '@syndesis/history';
+import {
+  ConnectionCard,
+  ConnectionsGrid,
+  ConnectionsGridCell,
+  ConnectionSkeleton,
+} from '@syndesis/ui';
+import { WithLoader } from '@syndesis/utils';
+import * as React from 'react';
+import { Translation } from 'react-i18next';
+import { ApiError, EntityIcon } from '../../../../shared';
+import { IUIStep } from './interfaces';
+
+export interface IEditorStepsProps {
+  error: boolean;
+  loading: boolean;
+  steps: IUIStep[];
+
+  getEditorStepHref(editorStep: IUIStep): H.LocationDescriptor;
+}
+
+export class EditorSteps extends React.Component<IEditorStepsProps> {
+  public render() {
+    return (
+      <Translation ns={['connections', 'shared']}>
+        {t => (
+          <ConnectionsGrid>
+            <WithLoader
+              error={this.props.error}
+              loading={this.props.loading}
+              loaderChildren={
+                <>
+                  {new Array(5).fill(0).map((_, index) => (
+                    <ConnectionsGridCell key={index}>
+                      <ConnectionSkeleton />
+                    </ConnectionsGridCell>
+                  ))}
+                </>
+              }
+              errorChildren={<ApiError />}
+            >
+              {() => {
+                return this.props.steps.map((s, index) => {
+                  return (
+                    <ConnectionsGridCell key={index}>
+                      <ConnectionCard
+                        name={s.name}
+                        description={s.description || ''}
+                        icon={<EntityIcon entity={s} alt={s.name} width={46} />}
+                        href={this.props.getEditorStepHref(s)}
+                        i18nCannotDelete={t('cannotDelete')}
+                        i18nConfigRequired={t('configurationRequired')}
+                        i18nTechPreview={t('techPreview')}
+                        isConfigRequired={s.isConfigRequired}
+                        isTechPreview={s.isTechPreview}
+                        techPreviewPopoverHtml={
+                          <span
+                            dangerouslySetInnerHTML={{
+                              __html: t('techPreviewPopoverHtml'),
+                            }}
+                          />
+                        }
+                      />
+                    </ConnectionsGridCell>
+                  );
+                });
+              }}
+            </WithLoader>
+          </ConnectionsGrid>
+        )}
+      </Translation>
+    );
+  }
+}
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorStepsWithToolbar.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorStepsWithToolbar.tsx
new file mode 100644
index 000000000..0383f0f2a
--- /dev/null
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/EditorStepsWithToolbar.tsx
@@ -0,0 +1,113 @@
+import {
+  ConnectionsListView,
+  IActiveFilter,
+  IConnectionsListViewProps,
+  IFilterType,
+  ISortType,
+} from '@syndesis/ui';
+import { WithListViewToolbarHelpers } from '@syndesis/utils';
+import * as React from 'react';
+import { Translation } from 'react-i18next';
+import i18n from '../../../../i18n';
+import resolvers from '../../../connections/resolvers';
+import { EditorSteps, IEditorStepsProps } from './EditorSteps';
+import { IUIStep } from './interfaces';
+
+function getFilteredAndSortedEditorSteps(
+  steps: IUIStep[],
+  activeFilters: IActiveFilter[],
+  currentSortType: ISortType,
+  isSortAscending: boolean
+) {
+  let filteredAndSortedEditorSteps = steps;
+  activeFilters.forEach((filter: IActiveFilter) => {
+    const valueToLower = filter.value.toLowerCase();
+    filteredAndSortedEditorSteps = filteredAndSortedEditorSteps.filter(
+      (e: IUIStep) => e.name.toLowerCase().includes(valueToLower)
+    );
+  });
+
+  filteredAndSortedEditorSteps = filteredAndSortedEditorSteps.sort(
+    (miA, miB) => {
+      const left = isSortAscending ? miA : miB;
+      const right = isSortAscending ? miB : miA;
+      return left.name.localeCompare(right.name);
+    }
+  );
+
+  return filteredAndSortedEditorSteps;
+}
+
+const filterByName = {
+  filterType: 'text',
+  id: 'name',
+  placeholder: i18n.t('shared:filterByNamePlaceholder'),
+  title: i18n.t('shared:Name'),
+} as IFilterType;
+
+const filterTypes = [filterByName];
+
+const sortByName = {
+  id: 'name',
+  isNumeric: false,
+  title: i18n.t('shared:Name'),
+} as ISortType;
+
+const sortTypes: ISortType[] = [sortByName];
+
+export interface IEditorStepsWithToolbarProps
+  extends IEditorStepsProps,
+    Pick<IConnectionsListViewProps, 'createConnectionButtonStyle'> {
+  children?: any;
+}
+
+export class EditorStepsWithToolbar extends React.Component<
+  IEditorStepsWithToolbarProps
+> {
+  public render() {
+    return (
+      <Translation ns={['connections', 'shared']}>
+        {t => (
+          <WithListViewToolbarHelpers
+            defaultFilterType={filterByName}
+            defaultSortType={sortByName}
+          >
+            {helpers => {
+              const filteredAndSortedEditorSteps = getFilteredAndSortedEditorSteps(
+                this.props.steps,
+                helpers.activeFilters,
+                helpers.currentSortType,
+                helpers.isSortAscending
+              );
+
+              return (
+                <ConnectionsListView
+                  createConnectionButtonStyle={
+                    this.props.createConnectionButtonStyle
+                  }
+                  linkToConnectionCreate={resolvers.create.selectConnector()}
+                  filterTypes={filterTypes}
+                  sortTypes={sortTypes}
+                  resultsCount={filteredAndSortedEditorSteps.length}
+                  {...helpers}
+                  i18nLinkCreateConnection={t('shared:linkCreateConnection')}
+                  i18nResultsCount={t('shared:resultsCount', {
+                    count: filteredAndSortedEditorSteps.length,
+                  })}
+                >
+                  {this.props.children}
+                  <EditorSteps
+                    error={this.props.error}
+                    loading={this.props.loading}
+                    steps={filteredAndSortedEditorSteps}
+                    getEditorStepHref={this.props.getEditorStepHref}
+                  />
+                </ConnectionsListView>
+              );
+            }}
+          </WithListViewToolbarHelpers>
+        )}
+      </Translation>
+    );
+  }
+}
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/SelectConnectionPage.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/SelectConnectionPage.tsx
index d003f82ec..4adb75e97 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/editor/SelectConnectionPage.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/SelectConnectionPage.tsx
@@ -12,8 +12,8 @@ import { WithRouteData } from '@syndesis/utils';
 import * as React from 'react';
 import { Translation } from 'react-i18next';
 import { PageTitle } from '../../../../shared';
-import { ConnectionsWithToolbar } from '../../../connections/components';
 import { IEditorSidebarProps } from './EditorSidebar';
+import { EditorStepsWithToolbar } from './EditorStepsWithToolbar';
 import {
   IPageWithEditorBreadcrumb,
   ISelectConnectionRouteParams,
@@ -55,7 +55,7 @@ export class SelectConnectionPage extends React.Component<
   public render() {
     return (
       <WithRouteData<ISelectConnectionRouteParams, ISelectConnectionRouteState>>
-        {(params, state, { history }) => {
+        {(params, state) => {
           const { flowId, position } = params;
           const { integration = getEmptyIntegration() } = state;
           const positionAsNumber = parseInt(position, 10) || 0;
@@ -104,8 +104,9 @@ export class SelectConnectionPage extends React.Component<
                                     positionAsNumber,
                                     integrationSteps
                                   ) as IUIStep[];
+
                                   return (
-                                    <ConnectionsWithToolbar
+                                    <EditorStepsWithToolbar
                                       loading={
                                         !hasConnectionsData ||
                                         !hasExtensionsData
@@ -113,8 +114,7 @@ export class SelectConnectionPage extends React.Component<
                                       error={
                                         connectionsError || extensionsError
                                       }
-                                      includeConnectionMenu={false}
-                                      getConnectionHref={step =>
+                                      getEditorStepHref={step =>
                                         getStepHref(
                                           step,
                                           params,
@@ -122,7 +122,7 @@ export class SelectConnectionPage extends React.Component<
                                           this.props
                                         )
                                       }
-                                      connections={visibleSteps}
+                                      steps={visibleSteps}
                                       createConnectionButtonStyle={'default'}
                                     />
                                   );
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx b/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx
index 54f80bdba..0f7bb2104 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/endpoint/WithConfigurationForm.tsx
@@ -5,7 +5,7 @@ import {
   WithActionDescriptor,
 } from '@syndesis/api';
 import * as H from '@syndesis/history';
-import { Action, ConnectionOverview } from '@syndesis/models';
+import { Action, IConnectionOverview } from '@syndesis/models';
 import { PageSectionLoader } from '@syndesis/ui';
 import { WithLoader } from '@syndesis/utils';
 import * as React from 'react';
@@ -37,7 +37,7 @@ export interface IWithConfigurationFormProps {
    * [actionId]{@link IWithConfigurationFormProps#actionId}. Used to retrieve
    * the form definition.
    */
-  connection: ConnectionOverview;
+  connection: IConnectionOverview;
   /**
    * the ID of the action that needs to be configured.
    */
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.ts b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.ts
index 25b4008cc..e7b928bbf 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.ts
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/interfaces.ts
@@ -1,9 +1,9 @@
 /* tslint:disable:object-literal-sort-keys no-empty-interface */
 import {
   ConnectionBulletinBoard,
-  ConnectionOverview,
-  Connector,
   DataShape,
+  IConnectionOverview,
+  IConnector,
   Integration,
   StepKind,
 } from '@syndesis/models';
@@ -29,7 +29,9 @@ export enum DataShapeDirection {
 
 export interface IUIStep extends StepKind {
   board?: ConnectionBulletinBoard;
-  connector?: Connector;
+  connector?: IConnector;
+  isConfigRequired: boolean;
+  isTechPreview: boolean;
   uiStepKind: 'api-provider' | StepKind['stepKind'];
   title: string;
   metadata: { [key: string]: any };
@@ -109,7 +111,7 @@ export interface IConfigureActionRouteParams extends IBaseFlowRouteParams {
  * step when configuring a multi-page connection.
  */
 export interface IConfigureActionRouteState extends IBaseRouteState {
-  connection: ConnectionOverview;
+  connection: IConnectionOverview;
   updatedIntegration?: Integration;
   configuredProperties: { [key: string]: string };
 }
@@ -122,7 +124,7 @@ export interface IDescribeDataShapeRouteParams extends IBaseFlowRouteParams {
 
 export interface IDescribeDataShapeRouteState extends IBaseRouteState {
   step: StepKind;
-  connection: ConnectionOverview;
+  connection: IConnectionOverview;
   updatedIntegration?: Integration;
 }
 
@@ -142,7 +144,7 @@ export interface ISelectActionRouteParams extends IBaseFlowRouteParams {
  * to render the IVP.
  */
 export interface ISelectActionRouteState extends IBaseRouteState {
-  connection: ConnectionOverview;
+  connection: IConnectionOverview;
 }
 
 /**
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts
index 78391d4d9..460f6346a 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts
+++ b/app/ui-react/syndesis/src/modules/integrations/components/editor/utils.ts
@@ -27,6 +27,7 @@ import {
   ConnectorAction,
   DataShape,
   Extension,
+  IConnectionOverview,
   Step,
   StepKind,
 } from '@syndesis/models';
@@ -74,6 +75,8 @@ export function toUIStep(step: Step | StepKind): IUIStep {
           (step as StepKind).extension!.description ||
           '',
         inputDataShape,
+        isConfigRequired: false,
+        isTechPreview: false,
         metadata: {
           ...(step.extension!.metadata || {}),
           ...(step.metadata || {}),
@@ -91,10 +94,13 @@ export function toUIStep(step: Step | StepKind): IUIStep {
       return {
         ...step,
         description:
-          (step as ConnectionOverview).description ||
+          (step as IConnectionOverview).description ||
           step.connection!.description ||
           '',
         inputDataShape,
+        isConfigRequired: (step.connection as IConnectionOverview)
+          .isConfigRequired,
+        isTechPreview: (step.connection as IConnectionOverview).isTechPreview,
         metadata: {
           ...(step.connection!.metadata || {}),
           ...(step.metadata || {}),
@@ -120,6 +126,8 @@ export function toUIStep(step: Step | StepKind): IUIStep {
       return {
         ...(step as StepKind),
         inputDataShape,
+        isConfigRequired: false,
+        isTechPreview: false,
         metadata: step.metadata || {},
         name,
         outputDataShape,
@@ -282,7 +290,6 @@ export function mergeConnectionsSources(
     ...connections.map(connection =>
       toUIStep({
         connection,
-        name: connection.name,
         stepKind: ENDPOINT,
       } as StepKind)
     ),
diff --git a/app/ui-react/syndesis/src/modules/integrations/components/index.ts b/app/ui-react/syndesis/src/modules/integrations/components/index.ts
index 510c4c480..8a69184ef 100644
--- a/app/ui-react/syndesis/src/modules/integrations/components/index.ts
+++ b/app/ui-react/syndesis/src/modules/integrations/components/index.ts
@@ -4,4 +4,6 @@ export * from './IntegrationDetailHeader';
 export * from './IntegrationDetailSteps';
 export * from './IntegrationEditorBreadcrumbs';
 export * from './IntegrationEditorStepAdder';
+export * from './editor/EditorSteps';
+export * from './editor/EditorStepsWithToolbar';
 export * from './WithIntegrationActions';