add support for creating camel source

frontend/packages/dev-console/src/components/import/app/AppSection.tsx

@@ -9,13 +9,14 @@ import ApplicationSelector from './ApplicationSelector';
 export interface AppSectionProps {
   project: ProjectData;
   noProjectsAvailable?: boolean;
+  extraMargin?: boolean;
 }
 
-const AppSection: React.FC<AppSectionProps> = ({ project, noProjectsAvailable }) => {
+const AppSection: React.FC<AppSectionProps> = ({ project, noProjectsAvailable, extraMargin }) => {
   const [initialApplication] = useField('application.initial');
   const [formType] = useField('formType');
   return (
-    <FormSection title="General">
+    <FormSection title="General" extraMargin={extraMargin}>
       {noProjectsAvailable && (
         <>
           <InputField

frontend/packages/dev-console/src/components/import/section/FormSection.scss

@@ -1,3 +1,8 @@
-.odc-form-section__heading {
-  margin: 0;
+.odc-form-section {
+  &__heading {
+    margin: 0;
+  }
+  &--extra-margin {
+    margin: var(--pf-global--spacer--md) 0;
+  }
 }

frontend/packages/dev-console/src/components/import/section/FormSection.tsx

@@ -8,10 +8,32 @@ export interface FormSectionProps {
   subTitle?: React.ReactNode;
   fullWidth?: boolean;
   children: React.ReactNode;
+  flexLayout?: boolean;
+  extraMargin?: boolean;
 }
 
-const FormSection: React.FC<FormSectionProps> = ({ title, subTitle, fullWidth, children }) => (
-  <div className={cx('pf-c-form', { 'co-m-pane__form': !fullWidth })}>
+const flexStyle: React.CSSProperties = {
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  margin: 'var(--pf-global--spacer--md) 0',
+};
+
+const FormSection: React.FC<FormSectionProps> = ({
+  title,
+  subTitle,
+  fullWidth,
+  children,
+  flexLayout,
+  extraMargin,
+}) => (
+  <div
+    className={cx('pf-c-form', {
+      'co-m-pane__form': !fullWidth,
+      'odc-form-section--extra-margin': extraMargin,
+    })}
+    style={flexLayout ? flexStyle : {}}
+  >
     {title && <h2 className="odc-form-section__heading">{title}</h2>}
     {subTitle && <FormHelperText isHidden={false}>{subTitle}</FormHelperText>}
     {children}

frontend/packages/dev-console/src/components/pipelines/__tests__/__snapshots__/PipelineResourceSection.spec.tsx.snap

@@ -4,6 +4,7 @@ exports[`PipelineResourceSection component It should match the previous pipeline
 Array [
   <div
     className="pf-c-form"
+    style={Object {}}
   >
     <h2
       className="odc-form-section__heading"
@@ -25,6 +26,7 @@ Array [
   </div>,
   <div
     className="pf-c-form"
+    style={Object {}}
   >
     <h2
       className="odc-form-section__heading"

frontend/packages/dev-console/src/utils/resource-label-utils.ts

@@ -12,8 +12,10 @@ export const getAppLabels = (
     app: name,
     'app.kubernetes.io/instance': name,
     'app.kubernetes.io/component': name,
-    'app.kubernetes.io/name': imageStreamName,
-    'app.openshift.io/runtime': imageStreamName,
+    ...(imageStreamName && {
+      'app.kubernetes.io/name': imageStreamName,
+      'app.openshift.io/runtime': imageStreamName,
+    }),
   };
 
   if (application && application.trim().length > 0) {

frontend/packages/knative-plugin/src/components/add/AdvancedSection.tsx

@@ -11,7 +11,7 @@ const AdvancedSection: React.FC = () => {
   };
 
   return (
-    <FormSection title="Advanced Options" fullWidth>
+    <FormSection title="Advanced Options" fullWidth extraMargin>
       <ProgressiveList
         text="Click on the names to access advanced options for"
         visibleItems={visibleItems}

frontend/packages/knative-plugin/src/components/add/EventSource.tsx

@@ -69,6 +69,7 @@ const EventSource: React.FC<Props> = ({
     },
     type: '',
     data: {},
+    yamlData: '',
   };
 
   const createResources = (rawFormData: any): Promise<K8sResourceKind> => {

frontend/packages/knative-plugin/src/components/add/EventSourceForm.tsx

@@ -1,28 +1,18 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { FormikProps, FormikValues } from 'formik';
-import { FormFooter } from '@console/shared';
-import { Form } from '@patternfly/react-core';
-import AppSection from '@console/dev-console/src/components/import/app/AppSection';
+import { FormFooter, FlexForm } from '@console/shared';
 import { FirehoseList } from '@console/dev-console/src/components/import/import-types';
-import { useEventSourceList } from '../../utils/create-eventsources-utils';
-import CronJobSection from './event-sources/CronJobSection';
-import SinkBindingSection from './event-sources/SinkBindingSection';
-import ApiServerSection from './event-sources/ApiServerSection';
-import SinkSection from './event-sources/SinkSection';
-import { EventSources } from './import-types';
 import EventSourcesSelector from './event-sources/EventSourcesSelector';
-import KafkaSourceSection from './event-sources/KafkaSourceSection';
-import AdvancedSection from './AdvancedSection';
-import ContainerSourceSection from './event-sources/ContainerSourceSection';
+import { useEventSourceList } from '../../utils/create-eventsources-utils';
+import EventSourceSection from './event-sources/EventSourceSection';
 
 interface OwnProps {
   namespace: string;
   projects: FirehoseList;
 }
 
 const EventSourceForm: React.FC<FormikProps<FormikValues> & OwnProps> = ({
-  values,
   errors,
   handleSubmit,
   handleReset,
@@ -32,29 +22,19 @@ const EventSourceForm: React.FC<FormikProps<FormikValues> & OwnProps> = ({
   namespace,
   projects,
 }) => (
-  <Form className="co-deploy-image" onSubmit={handleSubmit}>
+  <FlexForm onSubmit={handleSubmit}>
     <EventSourcesSelector eventSourceList={useEventSourceList(namespace)} />
-    {values.type === EventSources.CronJobSource && <CronJobSection />}
-    {values.type === EventSources.SinkBinding && <SinkBindingSection />}
-    {values.type === EventSources.ApiServerSource && <ApiServerSection />}
-    {values.type === EventSources.KafkaSource && <KafkaSourceSection />}
-    {values.type === EventSources.ContainerSource && <ContainerSourceSection />}
-    <SinkSection namespace={namespace} />
-    <AppSection
-      project={values.project}
-      noProjectsAvailable={projects?.loaded && _.isEmpty(projects.data)}
-    />
-    {values.type === EventSources.KafkaSource && <AdvancedSection />}
+    <EventSourceSection projects={projects} namespace={namespace} />
     <FormFooter
       handleReset={handleReset}
       errorMessage={status && status.submitError}
       isSubmitting={isSubmitting}
       submitLabel="Create"
-      sticky
       disableSubmit={!dirty || !_.isEmpty(errors)}
       resetLabel="Cancel"
+      sticky
     />
-  </Form>
+  </FlexForm>
 );
 
 export default EventSourceForm;

frontend/packages/knative-plugin/src/components/add/EventSourcePage.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { RouteComponentProps } from 'react-router';
+import { PageBody } from '@console/shared';
 import { PageHeading, Firehose } from '@console/internal/components/utils';
 import { ProjectModel } from '@console/internal/models';
 import NamespacedPage, {
@@ -21,15 +22,15 @@ const EventSourcePage: React.FC<EventSourcePageProps> = ({ match, location }) =>
         <title>Event Sources</title>
       </Helmet>
       <PageHeading title="Event Sources" />
-      <div className="co-m-pane__body">
+      <PageBody flexLayout>
         <Firehose resources={resources}>
           <EventSource
             namespace={namespace}
             selectedApplication={searchParams.get(QUERY_PROPERTIES.APPLICATION)}
             contextSource={searchParams.get(QUERY_PROPERTIES.CONTEXT_SOURCE)}
           />
         </Firehose>
-      </div>
+      </PageBody>
     </NamespacedPage>
   );
 };

frontend/packages/knative-plugin/src/components/add/__tests__/EventSourceForm.spec.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { cloneDeep } from 'lodash';
+import { formikFormProps } from '@console/shared/src/test-utils/formik-props-utils';
 import EventSourceForm from '../EventSourceForm';
 import EventSourcesSelector from '../event-sources/EventSourcesSelector';
-import CronJobSection from '../event-sources/CronJobSection';
-import SinkSection from '../event-sources/SinkSection';
 import { getDefaultEventingData } from '../../../utils/__tests__/knative-serving-data';
 import { EventSources } from '../import-types';
-import KafkaSourceSection from '../event-sources/KafkaSourceSection';
-import AdvancedSection from '../AdvancedSection';
+import EventSourceSection from '../event-sources/EventSourceSection';
 
 type EventSourceFormProps = React.ComponentProps<typeof EventSourceForm>;
 let formProps: EventSourceFormProps;
@@ -17,77 +14,23 @@ describe('EventSource Form', () => {
   const defaultEventingData = getDefaultEventingData(EventSources.CronJobSource);
   beforeEach(() => {
     formProps = {
+      ...formikFormProps,
       values: {
         type: 'CronJobSource',
       },
       namespace: 'myapp',
-      errors: {},
-      touched: {},
-      isSubmitting: true,
-      isValidating: true,
-      status: {},
-      submitCount: 0,
-      dirty: false,
-      handleReset: jest.fn(),
-      handleSubmit: jest.fn(),
-      getFieldProps: jest.fn(),
-      handleBlur: jest.fn(),
-      handleChange: jest.fn(),
-      initialErrors: {},
-      initialStatus: {},
-      initialTouched: {},
-      isValid: true,
       projects: { loaded: true, loadError: '', data: [] },
       initialValues: defaultEventingData,
-      registerField: jest.fn(),
-      resetForm: jest.fn(),
-      setErrors: jest.fn(),
-      setFieldError: jest.fn(),
-      setFieldTouched: jest.fn(),
-      setFieldValue: jest.fn(),
-      setFormikState: jest.fn(),
-      setStatus: jest.fn(),
-      setSubmitting: jest.fn(),
-      setTouched: jest.fn(),
-      setValues: jest.fn(),
-      submitForm: jest.fn(),
-      unregisterField: jest.fn(),
-      validateField: jest.fn(),
-      validateForm: jest.fn(),
-      getFieldMeta: jest.fn(),
-      validateOnBlur: true,
-      validateOnChange: true,
     };
   });
-  it('should render SinkSection , EventSourcesSelector for all sources', () => {
+
+  it('should render EventSourcesSelector ', () => {
     const eventSourceForm = shallow(<EventSourceForm {...formProps} />);
-    expect(eventSourceForm.find(SinkSection)).toHaveLength(1);
     expect(eventSourceForm.find(EventSourcesSelector)).toHaveLength(1);
   });
 
-  it('should render CronJobSection for cronJob source', () => {
+  it('should render EventSourceSection ', () => {
     const eventSourceForm = shallow(<EventSourceForm {...formProps} />);
-    expect(eventSourceForm.find(CronJobSection)).toHaveLength(1);
-  });
-
-  it('should not render CronJobSection for other source', () => {
-    const modFormProps = cloneDeep(formProps);
-    modFormProps.values.type = 'SinkBinding';
-    const eventSourceForm = shallow(<EventSourceForm {...modFormProps} />);
-    expect(eventSourceForm.find(CronJobSection)).toHaveLength(0);
-  });
-
-  it('should render KafkaSource section when KafkaSource type is selected', () => {
-    const modFormProps = cloneDeep(formProps);
-    modFormProps.values.type = 'KafkaSource';
-    const eventSourceForm = shallow(<EventSourceForm {...modFormProps} />);
-    expect(eventSourceForm.find(KafkaSourceSection)).toHaveLength(1);
-  });
-
-  it('should render Advanced options section when KafkaSource type is selected', () => {
-    const modFormProps = cloneDeep(formProps);
-    modFormProps.values.type = 'KafkaSource';
-    const eventSourceForm = shallow(<EventSourceForm {...modFormProps} />);
-    expect(eventSourceForm.find(AdvancedSection)).toHaveLength(1);
+    expect(eventSourceForm.find(EventSourceSection)).toHaveLength(1);
   });
 });

frontend/packages/knative-plugin/src/components/add/__tests__/eventSource-validation-utils.spec.ts

@@ -9,6 +9,7 @@ describe('Event Source ValidationUtils', () => {
       const defaultEventingData = getDefaultEventingData(EventSources.CronJobSource);
       const mockData = _.omit(_.cloneDeep(defaultEventingData), 'data.cronjobsource.data');
       await eventSourceValidationSchema
+        .resolve({ value: mockData })
         .isValid(mockData)
         .then((valid) => expect(valid).toEqual(true));
     });
@@ -18,6 +19,7 @@ describe('Event Source ValidationUtils', () => {
       const mockData = _.cloneDeep(defaultEventingData);
       mockData.sink.knativeService = '';
       await eventSourceValidationSchema
+        .resolve({ value: mockData })
         .isValid(mockData)
         .then((valid) => expect(valid).toEqual(false));
       await eventSourceValidationSchema.validate(mockData).catch((err) => {
@@ -32,6 +34,7 @@ describe('Event Source ValidationUtils', () => {
       const defaultEventingData = getDefaultEventingData(EventSources.ApiServerSource);
       const mockData = _.cloneDeep(defaultEventingData);
       await eventSourceValidationSchema
+        .resolve({ value: mockData })
         .isValid(mockData)
         .then((valid) => expect(valid).toEqual(true));
     });
@@ -42,6 +45,7 @@ describe('Event Source ValidationUtils', () => {
       mockData.sink.knativeService = '';
       mockData.data.apiserversource.resources[0] = { apiVersion: '', kind: '' };
       await eventSourceValidationSchema
+        .resolve({ value: mockData })
         .isValid(mockData)
         .then((valid) => expect(valid).toEqual(false));
       await eventSourceValidationSchema.validate(mockData).catch((err) => {
@@ -56,6 +60,7 @@ describe('Event Source ValidationUtils', () => {
       const defaultEventingData = getDefaultEventingData(EventSources.KafkaSource);
       const mockData = _.cloneDeep(defaultEventingData);
       await eventSourceValidationSchema
+        .resolve({ value: mockData })
         .isValid(mockData)
         .then((valid) => expect(valid).toEqual(true));
     });
@@ -65,6 +70,7 @@ describe('Event Source ValidationUtils', () => {
       const mockData = _.cloneDeep(defaultEventingData);
       mockData.data.kafkasource.bootstrapServers = '';
       await eventSourceValidationSchema
+        .resolve({ value: mockData })
         .isValid(mockData)
         .then((valid) => expect(valid).toEqual(false));
       await eventSourceValidationSchema.validate(mockData).catch((err) => {
@@ -79,6 +85,7 @@ describe('Event Source ValidationUtils', () => {
         ...getDefaultEventingData(EventSources.ContainerSource),
       };
       await eventSourceValidationSchema
+        .resolve({ value: ContainerSourceData })
         .isValid(ContainerSourceData)
         .then((valid) => expect(valid).toEqual(true));
     });
@@ -89,6 +96,7 @@ describe('Event Source ValidationUtils', () => {
       };
       ContainerSourceData.data.containersource.containers[0].image = '';
       await eventSourceValidationSchema
+        .resolve({ value: ContainerSourceData })
         .isValid(ContainerSourceData)
         .then((valid) => expect(valid).toEqual(false));
       await eventSourceValidationSchema.validate(ContainerSourceData).catch((err) => {

frontend/packages/knative-plugin/src/components/add/event-sources/ApiServerSection.tsx

@@ -35,7 +35,7 @@ const ApiServerSection: React.FC = () => {
   };
   const fieldId = getFieldId(values.type, 'res-input');
   return (
-    <FormSection title="ApiServerSource">
+    <FormSection title="ApiServerSource" extraMargin>
       <FormGroup fieldId={fieldId} label="Resource" isRequired>
         <AsyncComponent
           loader={() =>

frontend/packages/knative-plugin/src/components/add/event-sources/ContainerSourceSection.tsx

@@ -36,7 +36,7 @@ const ContainerSourceSection: React.FC = () => {
     [setFieldValue],
   );
   return (
-    <FormSection title="ContainerSource">
+    <FormSection title="ContainerSource" extraMargin>
       <h3 className="co-section-heading-tertiary">Container</h3>
       <InputField
         data-test-id="container-image-field"

frontend/packages/knative-plugin/src/components/add/event-sources/CronJobSection.tsx

@@ -4,7 +4,7 @@ import { InputField } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 
 const CronJobSection: React.FC = () => (
-  <FormSection title="CronJobSource">
+  <FormSection title="CronJobSource" extraMargin>
     <InputField type={TextInputTypes.text} name="data.cronjobsource.data" label="Data" />
     <InputField
       type={TextInputTypes.text}