Merge pull request syndesisio#346 from kahboom/api-editors

app/ui-react/packages/api/src/callFetch.ts

@@ -56,6 +56,7 @@ export function callFetch({
   includeReferrerPolicy = true,
   stringifyBody = true,
 }: IFetch) {
+  headers = { ...headers };
   if (includeAccept && !(acceptId in headers)) {
     headers[acceptId] = accept;
   }
@@ -71,6 +72,7 @@ export function callFetch({
     stringifyBody
       ? JSON.stringify(body)
       : body;
+
   return fetch(url, {
     body: data,
     cache: 'no-cache',

app/ui-react/packages/api/src/helpers/integrationFunctions.ts

@@ -16,7 +16,12 @@ import {
 } from '@syndesis/models';
 import { key } from '@syndesis/utils';
 import produce from 'immer';
-import { AGGREGATE, DataShapeKinds, ENDPOINT } from '../constants';
+import {
+  AGGREGATE,
+  API_PROVIDER,
+  DataShapeKinds,
+  ENDPOINT,
+} from '../constants';
 import { getConnectionIcon } from './connectionFunctions';
 
 export const NEW_INTEGRATION = {
@@ -80,10 +85,10 @@ export function toDataShapeKinds(
 /**
  * returns an empty integration object.
  *
- * @todo make the returned object immutable to avoid uncontrolled changes
  */
 export function getEmptyIntegration(): Integration {
   return produce(NEW_INTEGRATION, draft => {
+    draft.id = key();
     draft.flows = [
       {
         id: key(),
@@ -1324,3 +1329,7 @@ export function isMiddleStep(
     !isEndStep(integration, flowId, position)
   );
 }
+
+export function isIntegrationApiProvider(integration: IntegrationOverview) {
+  return (integration.tags || []).includes(API_PROVIDER);
+}

app/ui-react/packages/api/src/index.ts

@@ -7,6 +7,7 @@ export * from './helpers';
 export * from './ServerEventsContext';
 export * from './Stream';
 export * from './SyndesisFetch';
+export * from './useApiProvider';
 export * from './useIntegrationHelpers';
 export * from './WithActionDescriptor';
 export * from './WithActivities';

app/ui-react/packages/api/src/useApiProvider.tsx

@@ -0,0 +1,67 @@
+import { APISummary } from '@syndesis/models';
+import * as React from 'react';
+import { ApiContext } from './ApiContext';
+import { callFetch } from './callFetch';
+
+export function useApiProviderSummary(specification: string) {
+  const apiContext = React.useContext(ApiContext);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<false | Error>(false);
+  const [apiSummary, setApiSummary] = React.useState<APISummary | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const fetchSummary = async () => {
+      setLoading(true);
+      try {
+        const body = new FormData();
+        body.append('specification', specification);
+        const response = await callFetch({
+          body,
+          headers: apiContext.headers,
+          includeAccept: true,
+          includeContentType: false,
+          method: 'POST',
+          url: `${apiContext.apiUri}/apis/info`,
+        });
+        const summary = await response.json();
+        if (summary.errorCode) {
+          throw new Error(summary.userMsg);
+        }
+        setApiSummary(summary as APISummary);
+      } catch (e) {
+        setError(e as Error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchSummary();
+  }, [specification, apiContext, setLoading]);
+
+  return { apiSummary, loading, error };
+}
+
+export function useApiProviderIntegration() {
+  const apiContext = React.useContext(ApiContext);
+
+  const getIntegration = async (specification: string) => {
+    const body = new FormData();
+    body.append('specification', specification);
+    const response = await callFetch({
+      body,
+      headers: apiContext.headers,
+      includeAccept: true,
+      includeContentType: false,
+      method: 'POST',
+      url: `${apiContext.apiUri}/apis/generator`,
+    });
+    const integration = await response.json();
+    if (integration.errorCode) {
+      throw new Error(integration.userMsg);
+    }
+    return integration;
+  };
+
+  return getIntegration;
+}

app/ui-react/packages/api/src/useIntegrationHelpers.tsx

@@ -182,6 +182,10 @@ export const useIntegrationHelpers = () => {
     }
   };
 
+  /**
+   * Uploads and imports the supplied OpenAPI specification
+   */
+
   /**
    * Requests a .zip file of the integration, using the specified filename
    * @param id

app/ui-react/packages/ui/src/Integration/Editor/IntegrationEditorLayout.tsx

@@ -40,6 +40,7 @@ import './IntegrationEditorLayout.css';
 export interface IIntegrationEditorLayoutProps {
   title: string;
   description?: string;
+  toolbar?: React.ReactNode;
   sidebar?: React.ReactNode;
   content: React.ReactNode;
   onCancel?: (e: React.MouseEvent<any>) => void;
@@ -71,6 +72,7 @@ export const IntegrationEditorLayout: React.FunctionComponent<
 > = ({
   title,
   description,
+  toolbar,
   sidebar,
   content,
   onPublish,
@@ -89,6 +91,7 @@ export const IntegrationEditorLayout: React.FunctionComponent<
     <div className={'integration-editor-layout'}>
       <div className={'integration-editor-layout__header'}>
         <PageSection variant={'light'}>
+          {toolbar}
           <Level gutter={'sm'}>
             <LevelItem>
               <TextContent>

app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderReviewOperations.tsx

@@ -1,16 +1,18 @@
+import { PageSection } from '@patternfly/react-core';
+import { ListView } from 'patternfly-react';
 import * as React from 'react';
-
-export interface IApiProviderReviewOperationsProps {
-  /**
-   * The title
-   */
-  i18nTitle?: string;
-}
+import { IListViewToolbarProps, ListViewToolbar } from '../../../Shared';
 
 export class ApiProviderReviewOperations extends React.Component<
-  IApiProviderReviewOperationsProps
+  IListViewToolbarProps
 > {
   public render() {
-    return <>{this.props.i18nTitle}</>;
+    const { children, ...props } = this.props;
+    return (
+      <PageSection>
+        <ListViewToolbar {...props} />
+        <ListView>{children}</ListView>
+      </PageSection>
+    );
   }
 }

app/ui-react/packages/ui/src/Integration/Editor/apiProvider/ApiProviderReviewOperationsItem.tsx

@@ -0,0 +1,43 @@
+import * as H from '@syndesis/history';
+import { ListView } from 'patternfly-react';
+import * as React from 'react';
+import { ButtonLink } from '../../../Layout';
+import { HttpMethodColors } from '../../../Shared';
+
+export interface IApiProviderReviewOperationsItemProps {
+  createAsPrimary: boolean;
+  createFlowHref: H.LocationDescriptor;
+  i18nCreateFlow: string;
+  onCreateFlow?: (e: React.MouseEvent<any>) => void;
+  operationDescription: string;
+  operationHttpMethod: string;
+  operationPath: string;
+}
+
+export class ApiProviderReviewOperationsItem extends React.Component<
+  IApiProviderReviewOperationsItemProps
+> {
+  public render() {
+    return (
+      <ListView.Item
+        actions={
+          <ButtonLink
+            data-testid={'api-provider-operations-create-flow'}
+            onClick={this.props.onCreateFlow}
+            href={this.props.createFlowHref}
+            as={this.props.createAsPrimary ? 'primary' : 'default'}
+          >
+            {this.props.i18nCreateFlow}
+          </ButtonLink>
+        }
+        className={'api-provider-operations-list-item'}
+        heading={this.props.operationPath}
+        description={this.props.operationDescription}
+        leftContent={
+          <HttpMethodColors method={this.props.operationHttpMethod} />
+        }
+        stacked={false}
+      />
+    );
+  }
+}