Tech Preview feature not working for Integration Editor

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;
 }
 

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}

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,
     },
   };

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

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,

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}`,
   });
 };

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;

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,15 +242,15 @@ 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'
                 }
                 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>