fixes review comments

openshift · Mar 18, 2020 · 79e7d80 · 79e7d80
1 parent 0f93dcd
commit 79e7d80
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 126 deletions.
diff --git a/frontend/packages/dev-console/src/components/import/builder/BuilderImageSelector.tsx b/frontend/packages/dev-console/src/components/import/builder/BuilderImageSelector.tsx
@@ -6,7 +6,7 @@ import { FormGroup, Alert } from '@patternfly/react-core';
 import { StarIcon } from '@patternfly/react-icons';
 import { getFieldId } from '@console/shared';
 import { NormalizedBuilderImages } from '../../../utils/imagestream-utils';
-import BuilderImageCard from './BuilderImageCard';
+import SelectorCard from './SelectorCard';
 import './BuilderImageSelector.scss';
 
 export interface BuilderImageSelectorProps {
@@ -86,7 +86,7 @@ const BuilderImageSelector: React.FC<BuilderImageSelectorProps> = ({
       ) : (
         <div id="builder-image-selector-field" className="odc-builder-image-selector">
           {_.values(builderImages).map((image) => (
-            <BuilderImageCard
+            <SelectorCard
               key={image.name}
               image={image}
               selected={selected.value === image.name}

diff --git a/...ents/import/builder/BuilderImageCard.scss → ...mponents/import/builder/SelectorCard.scss b/...ents/import/builder/BuilderImageCard.scss → ...mponents/import/builder/SelectorCard.scss
@@ -1,4 +1,4 @@
-.odc-builder-image-card {
+.odc-Selector-card {
   position: relative;
   width: 136px;
   min-height: 118px;

diff --git a/...nents/import/builder/BuilderImageCard.tsx → ...omponents/import/builder/SelectorCard.tsx b/...nents/import/builder/BuilderImageCard.tsx → ...omponents/import/builder/SelectorCard.tsx
@@ -4,22 +4,22 @@ import { Card, CardHeader, CardBody } from '@patternfly/react-core';
 import { StarIcon } from '@patternfly/react-icons';
 import { BuilderImage } from '../../../utils/imagestream-utils';
 
-import './BuilderImageCard.scss';
+import './SelectorCard.scss';
 
-export interface BuilderImageCardProps {
+export interface SelectorCardProps {
   image: BuilderImage;
   selected: boolean;
   recommended?: boolean;
   onChange: (name: string) => void;
 }
 
-const BuilderImageCard: React.FC<BuilderImageCardProps> = ({
+const SelectorCard: React.FC<SelectorCardProps> = ({
   image,
   selected,
   recommended = false,
   onChange,
 }) => {
-  const classes = classNames('odc-builder-image-card', { 'is-selected': selected });
+  const classes = classNames('odc-Selector-card', { 'is-selected': selected });
   return (
     <Card
       component="button"
@@ -29,18 +29,18 @@ const BuilderImageCard: React.FC<BuilderImageCardProps> = ({
       onClick={() => onChange(image.name)}
     >
       <CardHeader>
-        <img className="odc-builder-image-card__icon" src={image.iconUrl} alt={image.displayName} />
+        <img className="odc-Selector-card__icon" src={image.iconUrl} alt={image.displayName} />
       </CardHeader>
       <CardBody>
-        <span className="odc-builder-image-card__title">{image.title}</span>
+        <span className="odc-Selector-card__title">{image.title}</span>
       </CardBody>
       {recommended && (
-        <span className="odc-builder-image-card__recommended">
+        <span className="odc-Selector-card__recommended">
           <StarIcon />
         </span>
       )}
     </Card>
   );
 };
 
-export default BuilderImageCard;
+export default SelectorCard;
diff --git a/frontend/packages/knative-plugin/src/components/add/EventSource.tsx b/frontend/packages/knative-plugin/src/components/add/EventSource.tsx
@@ -80,8 +80,9 @@ const EventSource: React.FC<Props> = ({ namespace, projects, activeApplication,
       onSubmit={handleSubmit}
       onReset={history.goBack}
       validationSchema={eventSourceValidationSchema}
-      render={(props) => <EventSourceForm {...props} projects={projects} services={ksservices} />}
-    />
+    >
+      {(props) => <EventSourceForm {...props} projects={projects} services={ksservices} />}
+    </Formik>
   );
 };
 

diff --git a/frontend/packages/knative-plugin/src/components/add/EventSourceForm.tsx b/frontend/packages/knative-plugin/src/components/add/EventSourceForm.tsx
@@ -1,43 +1,21 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { FormikProps, FormikValues } from 'formik';
-import { Form, ActionGroup, ButtonVariant, Button } from '@patternfly/react-core';
-import { ButtonBar, useAccessReview } from '@console/internal/components/utils';
-import { getActiveNamespace } from '@console/internal/actions/ui';
+import { FormFooter } from '@console/shared';
+import { Form } from '@patternfly/react-core';
 import AppSection from '@console/dev-console/src/components/import/app/AppSection';
 import { FirehoseList } from '@console/dev-console/src/components/import/import-types';
 import CronJobSection from './event-sources/CronJobSection';
 import SinkSection from './event-sources/SinkSection';
 import { EventSources } from './import-types';
-import {
-  EventSourceCronJobModel,
-  EventSourceSinkBindingModel,
-  EventSourceApiServerModel,
-  EventSourceCamelModel,
-  EventSourceKafkaModel,
-} from '../../models';
 import EventSourcesSelector from './event-sources/EventSourcesSelector';
-import * as apiServerSourceImg from '../../imgs/logos/apiserversource.png';
-import * as camelSourceImg from '../../imgs/logos/camelsource.svg';
-import * as containerSourceImg from '../../imgs/logos/containersource.png';
-import * as cronJobSourceImg from '../../imgs/logos/cronjobsource.png';
-import * as kafkaSourceImg from '../../imgs/logos/kafkasource.svg';
+import { useEventSourceList } from '../../utils/create-eventsources-utils';
 
 interface OwnProps {
   services: FirehoseList;
   projects: FirehoseList;
 }
 
-const useKnativeEventingAccess = (model): boolean => {
-  const canCreateEventSource = useAccessReview({
-    group: model.apiGroup,
-    resource: model.plural,
-    namespace: getActiveNamespace(),
-    verb: 'create',
-  });
-  return canCreateEventSource;
-};
-
 const EventSourceForm: React.FC<FormikProps<FormikValues> & OwnProps> = ({
   values,
   errors,
@@ -48,66 +26,24 @@ const EventSourceForm: React.FC<FormikProps<FormikValues> & OwnProps> = ({
   dirty,
   projects,
   services,
-}) => {
-  const eventSourceList = [
-    useKnativeEventingAccess(EventSourceCronJobModel) && {
-      name: 'CronJobSource',
-      iconUrl: cronJobSourceImg,
-      displayName: 'CronJobSource',
-      title: 'CronJobSource',
-    },
-    useKnativeEventingAccess(EventSourceSinkBindingModel) && {
-      name: 'SinkBinding',
-      iconUrl: containerSourceImg,
-      displayName: 'SinkBinding',
-      title: 'SinkBinding',
-    },
-    useKnativeEventingAccess(EventSourceApiServerModel) && {
-      name: 'ApiServerSource',
-      iconUrl: apiServerSourceImg,
-      displayName: 'ApiServerSource',
-      title: 'ApiServerSource',
-    },
-    useKnativeEventingAccess(EventSourceKafkaModel) && {
-      name: 'KafkaSource',
-      iconUrl: kafkaSourceImg,
-      displayName: 'KafkaSource',
-      title: 'KafkaSource',
-    },
-    useKnativeEventingAccess(EventSourceCamelModel) && {
-      name: 'CamelSource',
-      iconUrl: camelSourceImg,
-      displayName: 'CamelSource',
-      title: 'CamelSource',
-    },
-  ];
-
-  return (
-    <Form className="co-deploy-image" onSubmit={handleSubmit}>
-      <EventSourcesSelector eventSourceList={_.filter(eventSourceList)} />
-      {values.type === EventSources.CronJobSource && <CronJobSection />}
-      <SinkSection services={services} />
-      <AppSection
-        project={values.project}
-        noProjectsAvailable={projects?.loaded && _.isEmpty(projects.data)}
-      />
-      <ButtonBar errorMessage={status && status.submitError} inProgress={isSubmitting}>
-        <ActionGroup className="pf-c-form">
-          <Button
-            type="submit"
-            variant={ButtonVariant.primary}
-            isDisabled={!dirty || !_.isEmpty(errors)}
-            data-test-id="deploy-image-form-submit-btn"
-          >
-            Create
-          </Button>
-          <Button type="button" variant={ButtonVariant.secondary} onClick={handleReset}>
-            Cancel
-          </Button>
-        </ActionGroup>
-      </ButtonBar>
-    </Form>
-  );
-};
+}) => (
+  <Form className="co-deploy-image" onSubmit={handleSubmit}>
+    <EventSourcesSelector eventSourceList={useEventSourceList()} />
+    {values.type === EventSources.CronJobSource && <CronJobSection />}
+    <SinkSection services={services} />
+    <AppSection
+      project={values.project}
+      noProjectsAvailable={projects?.loaded && _.isEmpty(projects.data)}
+    />
+    <FormFooter
+      handleReset={handleReset}
+      errorMessage={status && status.submitError}
+      isSubmitting={isSubmitting}
+      submitLabel="Create"
+      disableSubmit={!dirty || !_.isEmpty(errors)}
+      resetLabel="Cancel"
+    />
+  </Form>
+);
 
 export default EventSourceForm;
diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/EventSourcesSelector.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/EventSourcesSelector.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { useField, useFormikContext, FormikValues } from 'formik';
-import BuilderImageCard from '@console/dev-console/src/components/import/builder/BuilderImageCard';
+import { useFormikContext, FormikValues } from 'formik';
+import SelectorCard from '@console/dev-console/src/components/import/builder/SelectorCard';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 import './EventSourcesSelector.scss';
 
@@ -10,41 +10,25 @@ interface EventSourcesSelectorProps {
 }
 
 const EventSourcesSelector: React.FC<EventSourcesSelectorProps> = ({ eventSourceList }) => {
-  const [selected] = useField('type');
   const { values, setFieldValue, setFieldTouched, validateForm } = useFormikContext<FormikValues>();
-  const eventSourceCount = _.keys(eventSourceList).length;
 
-  const handleImageChange = React.useCallback(
+  const handleTypeChange = React.useCallback(
     (value: string) => {
       setFieldValue('type', value);
       setFieldTouched('type', true);
       validateForm();
     },
     [setFieldValue, setFieldTouched, validateForm],
   );
-
-  React.useEffect(() => {
-    if (!selected.value && eventSourceCount === 1) {
-      const image = _.find(eventSourceList);
-      handleImageChange(image.name);
-    }
-    if (!selected.value && values.type) {
-      handleImageChange(values.type);
-    }
-  }, [eventSourceCount, eventSourceList, handleImageChange, selected.value, values.type]);
-
-  if (eventSourceCount === 1) {
-    return null;
-  }
   return (
     <FormSection title="Type" fullWidth>
       <div id="event-source-selector-field" className="odc-event-source-selector">
-        {_.values(eventSourceList).map((image) => (
-          <BuilderImageCard
-            key={image.name}
-            image={image}
-            selected={values.type === image.name}
-            onChange={handleImageChange}
+        {_.values(eventSourceList).map((type) => (
+          <SelectorCard
+            key={type.name}
+            image={type}
+            selected={values.type === type.name}
+            onChange={handleTypeChange}
           />
         ))}
       </div>

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/SinkSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/SinkSection.tsx
@@ -20,7 +20,7 @@ const DropdownItem: React.FC<DropdownItemProps> = ({ model, name }) => (
         <ResourceIcon kind={referenceForModel(model)} />
       </span>
       <span className="co-resource-item__resource-name">
-        <span className="co-resource-item__resource-api text-muted co-truncate show co-nowrap small">
+        <span className="co-resource-item__resource-api co-truncate show co-nowrap small">
           {name}
         </span>
       </span>

diff --git a/frontend/packages/knative-plugin/src/utils/create-eventsources-utils.ts b/frontend/packages/knative-plugin/src/utils/create-eventsources-utils.ts
@@ -1,9 +1,24 @@
+import * as _ from 'lodash';
 import { K8sResourceKind } from '@console/internal/module/k8s';
+import { useAccessReview } from '@console/internal/components/utils';
+import { getActiveNamespace } from '@console/internal/actions/ui';
 import { getAppLabels } from '@console/dev-console/src/utils/resource-label-utils';
 import { annotations } from '@console/dev-console/src/utils/shared-submit-utils';
 import { EventSources } from '../components/add/import-types';
-import { ServiceModel } from '../models';
+import {
+  ServiceModel,
+  EventSourceCronJobModel,
+  EventSourceSinkBindingModel,
+  EventSourceApiServerModel,
+  EventSourceCamelModel,
+  EventSourceKafkaModel,
+} from '../models';
 import { KNATIVE_EVENT_SOURCE_APIGROUP, KNATIVE_EVENT_SOURCE_APIGROUP_DEP } from '../const';
+import * as apiServerSourceImg from '../imgs/logos/apiserversource.png';
+import * as camelSourceImg from '../imgs/logos/camelsource.svg';
+import * as containerSourceImg from '../imgs/logos/containersource.png';
+import * as cronJobSourceImg from '../imgs/logos/cronjobsource.png';
+import * as kafkaSourceImg from '../imgs/logos/kafkasource.svg';
 
 export const getEventSourcesDepResource = (formData: any): K8sResourceKind => {
   const {
@@ -47,3 +62,49 @@ export const getEventSourcesDepResource = (formData: any): K8sResourceKind => {
 
   return eventSourceResource;
 };
+
+export const useKnativeEventingAccess = (model): boolean => {
+  const canCreateEventSource = useAccessReview({
+    group: model.apiGroup,
+    resource: model.plural,
+    namespace: getActiveNamespace(),
+    verb: 'create',
+  });
+  return canCreateEventSource;
+};
+
+export const useEventSourceList = () => {
+  const eventSourceList = _.filter([
+    useKnativeEventingAccess(EventSourceCronJobModel) && {
+      name: EventSourceCronJobModel.kind,
+      iconUrl: cronJobSourceImg,
+      displayName: EventSourceCronJobModel.label,
+      title: EventSourceCronJobModel.kind,
+    },
+    useKnativeEventingAccess(EventSourceSinkBindingModel) && {
+      name: EventSourceSinkBindingModel.kind,
+      iconUrl: containerSourceImg,
+      displayName: EventSourceSinkBindingModel.label,
+      title: EventSourceSinkBindingModel.kind,
+    },
+    useKnativeEventingAccess(EventSourceApiServerModel) && {
+      name: EventSourceApiServerModel.kind,
+      iconUrl: apiServerSourceImg,
+      displayName: EventSourceApiServerModel.label,
+      title: EventSourceApiServerModel.kind,
+    },
+    useKnativeEventingAccess(EventSourceKafkaModel) && {
+      name: EventSourceKafkaModel.kind,
+      iconUrl: kafkaSourceImg,
+      displayName: EventSourceKafkaModel.label,
+      title: EventSourceKafkaModel.kind,
+    },
+    useKnativeEventingAccess(EventSourceCamelModel) && {
+      name: EventSourceCamelModel.kind,
+      iconUrl: camelSourceImg,
+      displayName: EventSourceCamelModel.label,
+      title: EventSourceCamelModel.kind,
+    },
+  ]);
+  return eventSourceList;
+};