fix initial yaml editor values

frontend/packages/dev-console/src/components/edit-deployment/EditDeployment.tsx

@@ -8,6 +8,7 @@ import { K8sResourceKind, k8sUpdate } from '@console/internal/module/k8s';
 import { useExtensions, Perspective, isPerspective } from '@console/plugin-sdk';
 import { useActivePerspective } from '@console/shared';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
+import { safeJSToYAML } from '@console/shared/src/utils/yaml';
 import { getResourcesType } from '../edit-application/edit-application-utils';
 import { handleRedirect } from '../import/import-submit-utils';
 import { Resources } from '../import/import-types';
@@ -33,7 +34,9 @@ const EditDeployment: React.FC<EditDeploymentProps> = ({ heading, resource, name
 
   const initialValues = React.useRef({
     editorType: EditorType.Form,
-    yamlData: '',
+    yamlData: safeJSToYAML(resource, 'yamlData', {
+      skipInvalid: true,
+    }),
     formData: convertDeploymentToEditForm(resource),
   });
 

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

@@ -16,6 +16,7 @@ import { RootState } from '@console/internal/redux';
 import { isPerspective, Perspective, useExtensions } from '@console/plugin-sdk';
 import { ALL_APPLICATIONS_KEY, useActivePerspective } from '@console/shared';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
+import { safeJSToYAML } from '@console/shared/src/utils/yaml';
 import { sanitizeApplicationValue } from '@console/topology/src/utils/application-utils';
 import { KNATIVE_EVENT_SOURCE_APIGROUP } from '../../const';
 import { CamelKameletBindingModel } from '../../models';
@@ -25,13 +26,19 @@ import {
   getEventSourceData,
   handleRedirect,
   getKameletSourceData,
+  getEventSourceResource,
 } from '../../utils/create-eventsources-utils';
 import { getEventSourceModels } from '../../utils/fetch-dynamic-eventsources-utils';
 import { EVENT_SOURCES_APP } from './const';
 import { eventSourceValidationSchema } from './eventSource-validation-utils';
 import EventSourceForm from './EventSourceForm';
 import EventSourceMetaDescription from './EventSourceMetadataDescription';
-import { EventSourceSyncFormData, SinkType, EventSourceMetaData } from './import-types';
+import {
+  EventSourceSyncFormData,
+  SinkType,
+  EventSourceMetaData,
+  EventSourceFormData,
+} from './import-types';
 
 interface EventSourceProps {
   namespace: string;
@@ -87,34 +94,46 @@ export const EventSource: React.FC<Props> = ({
   const eventSourceMetaDescription = (
     <EventSourceMetaDescription normalizedSource={normalizedSource} />
   );
+
+  const initialFormData: EventSourceFormData = {
+    project: {
+      name: namespace || '',
+      displayName: '',
+      description: '',
+    },
+    application: {
+      initial: sanitizeApplicationValue(activeApplication),
+      name: sanitizeApplicationValue(activeApplication) || EVENT_SOURCES_APP,
+      selectedKey: activeApplication,
+    },
+    name: selSourceName,
+    apiVersion: selApiVersion,
+    sinkType: SinkType.Resource,
+    sink: {
+      apiVersion: sinkApiVersion,
+      kind: sinkKind,
+      name: sinkName,
+      key: sinkKey,
+      uri: '',
+    },
+    type: sourceKind,
+    data: sourceData,
+  };
+
+  const initialYamlData: string = safeJSToYAML(
+    getEventSourceResource(initialFormData),
+    'yamlData',
+    {
+      skipInvalid: true,
+      noRefs: true,
+    },
+  );
+
   const catalogInitialValues: EventSourceSyncFormData = {
     editorType: EditorType.Form,
     showCanUseYAMLMessage: true,
-    formData: {
-      project: {
-        name: namespace || '',
-        displayName: '',
-        description: '',
-      },
-      application: {
-        initial: sanitizeApplicationValue(activeApplication),
-        name: sanitizeApplicationValue(activeApplication) || EVENT_SOURCES_APP,
-        selectedKey: activeApplication,
-      },
-      name: selSourceName,
-      apiVersion: selApiVersion,
-      sinkType: SinkType.Resource,
-      sink: {
-        apiVersion: sinkApiVersion,
-        kind: sinkKind,
-        name: sinkName,
-        key: sinkKey,
-        uri: '',
-      },
-      type: sourceKind,
-      data: sourceData,
-    },
-    yamlData: '',
+    formData: initialFormData,
+    yamlData: initialYamlData,
   };
 
   const createResources = (rawFormData: any): Promise<K8sResourceKind> => {

frontend/packages/knative-plugin/src/components/add/brokers/AddBroker.tsx

@@ -35,7 +35,7 @@ const AddBroker: React.FC<AddBrokerProps> = ({ namespace, selectedApplication })
   ): Promise<K8sResourceKind> => {
     let broker: K8sResourceKind;
     if (formValues.editorType === EditorType.Form) {
-      broker = convertFormToBrokerYaml(formValues);
+      broker = convertFormToBrokerYaml(formValues.formData);
     } else {
       try {
         broker = safeLoad(formValues.yamlData);

frontend/packages/knative-plugin/src/components/add/brokers/AddBrokerForm.tsx

@@ -78,7 +78,7 @@ const AddBrokerForm: React.FC<FormikProps<AddBrokerFormYamlValues> & AddBrokerFo
   };
 
   const sanitizeToYaml = () =>
-    safeJSToYAML(convertFormToBrokerYaml(values), 'yamlData', {
+    safeJSToYAML(convertFormToBrokerYaml(values.formData), 'yamlData', {
       skipInvalid: true,
     });
 

frontend/packages/knative-plugin/src/components/add/brokers/__tests__/add-broker-utils.spec.ts

@@ -6,38 +6,35 @@ import { convertFormToBrokerYaml, addBrokerInitialValues } from '../add-broker-u
 describe('broker-utils: ', () => {
   describe('convertFormToBrokerYaml', () => {
     it('should contain all the top level keys for broker', () => {
-      const formValues = addBrokerInitialValues('test-ns', '');
-      const broker = convertFormToBrokerYaml(formValues);
+      const { formData } = addBrokerInitialValues('test-ns', '');
+      const broker = convertFormToBrokerYaml(formData);
       expect(broker.apiVersion).toBe(apiVersionForModel(EventingBrokerModel));
       expect(broker.kind).toBe(EventingBrokerModel.kind);
       expect(broker.metadata).toBeDefined();
       expect(broker.spec).toBeDefined();
     });
 
     it('should contain default application name', () => {
-      const formValues = addBrokerInitialValues('test-ns', '');
-      const broker = convertFormToBrokerYaml(formValues);
+      const { formData } = addBrokerInitialValues('test-ns', '');
+      const broker = convertFormToBrokerYaml(formData);
       expect(broker.metadata.labels[LABEL_PART_OF]).toBe(EVENT_BROKER_APP);
     });
 
     it('should contain custom application name', () => {
-      const formValues = addBrokerInitialValues('test-ns', 'custom-group-name');
-      const broker = convertFormToBrokerYaml(formValues);
+      const { formData } = addBrokerInitialValues('test-ns', 'custom-group-name');
+      const broker = convertFormToBrokerYaml(formData);
       expect(broker.metadata.labels[LABEL_PART_OF]).toBe('custom-group-name');
     });
 
     it('should not contain the metadata labels', () => {
-      const formValues = addBrokerInitialValues('test-ns', '');
+      const { formData } = addBrokerInitialValues('test-ns', '');
 
       const broker = convertFormToBrokerYaml({
-        ...formValues,
-        formData: {
-          ...formValues.formData,
-          application: {
-            initial: null,
-            name: '',
-            selectedKey: '',
-          },
+        ...formData,
+        application: {
+          initial: null,
+          name: '',
+          selectedKey: '',
         },
       });
       expect(broker.metadata.labels).toBeUndefined();

frontend/packages/knative-plugin/src/components/add/brokers/add-broker-utils.ts

@@ -1,42 +1,19 @@
 import { apiVersionForModel, K8sResourceKind } from '@console/internal/module/k8s';
 import { UNASSIGNED_APPLICATIONS_KEY } from '@console/shared';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
+import { safeJSToYAML } from '@console/shared/src/utils/yaml';
 import { sanitizeApplicationValue } from '@console/topology/src/utils';
 import { EventingBrokerModel } from '../../../models';
 import { LABEL_PART_OF, EVENT_BROKER_APP, DEFAULT_BROKER_NAME } from '../const';
-import { AddBrokerFormYamlValues } from '../import-types';
+import { AddBrokerFormYamlValues, BrokerFormData } from '../import-types';
 
-export const addBrokerInitialValues = (
-  namespace: string,
-  selectedApplication: string,
-): AddBrokerFormYamlValues => {
-  return {
-    showCanUseYAMLMessage: true,
-    editorType: EditorType.Form,
-    yamlData: '',
-    formData: {
-      name: DEFAULT_BROKER_NAME,
-      spec: {},
-      project: {
-        name: namespace || '',
-        displayName: '',
-        description: '',
-      },
-      application: {
-        initial: sanitizeApplicationValue(selectedApplication),
-        name: sanitizeApplicationValue(selectedApplication) || EVENT_BROKER_APP,
-        selectedKey: selectedApplication,
-      },
-    },
-  };
-};
-export const convertFormToBrokerYaml = (formValues: AddBrokerFormYamlValues): K8sResourceKind => {
+export const convertFormToBrokerYaml = (formData: BrokerFormData): K8sResourceKind => {
   const {
     name,
     project: { name: namespace },
     application: { selectedKey, name: appName = null },
     spec = {},
-  } = formValues.formData;
+  } = formData;
 
   return {
     apiVersion: apiVersionForModel(EventingBrokerModel),
@@ -54,3 +31,36 @@ export const convertFormToBrokerYaml = (formValues: AddBrokerFormYamlValues): K8
     spec,
   };
 };
+
+export const addBrokerInitialValues = (
+  namespace: string,
+  selectedApplication: string,
+): AddBrokerFormYamlValues => {
+  const initialFormData: BrokerFormData = {
+    name: DEFAULT_BROKER_NAME,
+    spec: {},
+    project: {
+      name: namespace || '',
+      displayName: '',
+      description: '',
+    },
+    application: {
+      initial: sanitizeApplicationValue(selectedApplication),
+      name: sanitizeApplicationValue(selectedApplication) || EVENT_BROKER_APP,
+      selectedKey: selectedApplication,
+    },
+  };
+  const initialYamlData: string = safeJSToYAML(
+    convertFormToBrokerYaml(initialFormData),
+    'yamlData',
+    {
+      skipInvalid: true,
+    },
+  );
+  return {
+    showCanUseYAMLMessage: true,
+    editorType: EditorType.Form,
+    yamlData: initialYamlData,
+    formData: initialFormData,
+  };
+};

frontend/packages/knative-plugin/src/utils/__tests__/create-eventsources-utils.spec.ts

@@ -316,9 +316,9 @@ describe('sanitizeSourceToForm always returns valid Event Source', () => {
   });
 
   it('expect getKafkaSourceResource to return sasl and tls with secrets if enabled and present', () => {
-    const KafkaSourceData = getDefaultEventingData(EventSources.KafkaSource);
-    KafkaSourceData.formData.data[EventSources.KafkaSource] = {
-      ...KafkaSourceData.formData.data[EventSources.KafkaSource],
+    const { formData: KafkaSourceFormData } = getDefaultEventingData(EventSources.KafkaSource);
+    KafkaSourceFormData.data[EventSources.KafkaSource] = {
+      ...KafkaSourceFormData.data[EventSources.KafkaSource],
       bootstrapServers: ['server1', 'server2'],
       topics: ['topic1'],
       consumerGroup: 'knative-group',
@@ -340,7 +340,7 @@ describe('sanitizeSourceToForm always returns valid Event Source', () => {
       spec: {
         net: { sasl, tls },
       },
-    } = getKafkaSourceResource(KafkaSourceData);
+    } = getKafkaSourceResource(KafkaSourceFormData);
     expect(sasl.enable).toBe(true);
     expect(sasl.user).toEqual({
       secretKeyRef: { name: 'username', key: 'userkey' },
@@ -349,9 +349,9 @@ describe('sanitizeSourceToForm always returns valid Event Source', () => {
   });
 
   it('expect getKafkaSourceResource to return sasl and tls without secrets if not enabled', () => {
-    const KafkaSourceData = getDefaultEventingData(EventSources.KafkaSource);
-    KafkaSourceData.formData.data[EventSources.KafkaSource] = {
-      ...KafkaSourceData.formData.data[EventSources.KafkaSource],
+    const { formData: KafkaSourceFormData } = getDefaultEventingData(EventSources.KafkaSource);
+    KafkaSourceFormData.data[EventSources.KafkaSource] = {
+      ...KafkaSourceFormData.data[EventSources.KafkaSource],
       bootstrapServers: ['server1', 'server2'],
       topics: ['topic1'],
       consumerGroup: 'knative-group',
@@ -373,7 +373,7 @@ describe('sanitizeSourceToForm always returns valid Event Source', () => {
       spec: {
         net: { sasl, tls },
       },
-    } = getKafkaSourceResource(KafkaSourceData);
+    } = getKafkaSourceResource(KafkaSourceFormData);
     expect(sasl.enable).toBeUndefined();
     expect(sasl).toEqual({ user: {}, password: {} });
     expect(tls.enable).toBeUndefined();

frontend/packages/knative-plugin/src/utils/create-eventsources-utils.ts

@@ -88,8 +88,8 @@ export const isSecretKeyRefPresent = (dataObj: {
   secretKeyRef: { name: string; key: string };
 }): boolean => !!(dataObj?.secretKeyRef?.name || dataObj?.secretKeyRef?.key);
 
-export const getKafkaSourceResource = (sourceFormData: any): K8sResourceKind => {
-  const baseResource = getEventSourcesDepResource(sourceFormData.formData);
+export const getKafkaSourceResource = (formData: any): K8sResourceKind => {
+  const baseResource = getEventSourcesDepResource(formData);
   const { net } = baseResource.spec;
   baseResource.spec.net = {
     ...net,
@@ -125,18 +125,23 @@ export const loadYamlData = (formData: EventSourceSyncFormData) => {
   return yamlDataObj;
 };
 
+export const getEventSourceResource = (formData: EventSourceFormData) => {
+  switch (formData.type) {
+    case EventSources.KafkaSource:
+      return getKafkaSourceResource(formData);
+    default:
+      return getEventSourcesDepResource(formData);
+  }
+};
+
 export const getCatalogEventSourceResource = (
   sourceFormData: EventSourceSyncFormData,
 ): K8sResourceKind => {
   if (sourceFormData.editorType === EditorType.YAML) {
     return loadYamlData(sourceFormData);
   }
-  switch (sourceFormData.formData.type) {
-    case EventSources.KafkaSource:
-      return getKafkaSourceResource(sourceFormData);
-    default:
-      return getEventSourcesDepResource(sourceFormData.formData);
-  }
+  const { formData } = sourceFormData;
+  return getEventSourceResource(formData);
 };
 
 export const getEventSourceData = (source: string) => {

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/views/operator.view.ts

@@ -120,15 +120,15 @@ export const operator = {
     listPage.clickCreateYAMLbutton();
     cy.url().should('contain', '~new');
     cy.log('create a new operand');
-    cy.get('label')
-      .contains('Name')
-      .parent()
-      .within(() => {
-        cy.get('input')
-          .should('not.be.disabled')
-          .clear();
-        cy.get('input').type(exampleName);
-      });
+    // cy.get('label')
+    //   .contains('Name')
+    //   .parent()
+    //   .within(() => {
+    cy.get('[id="root_metadata_name"]')
+      .should('not.be.disabled')
+      .clear();
+    cy.get('[id="root_metadata_name"]').type(exampleName);
+    // });
     cy.get(submitButton).click();
   },
   operandShouldExist: (

frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderPage.tsx

@@ -10,6 +10,7 @@ import { EditorType } from '@console/shared/src/components/synced-editor/editor-
 import { PipelineModel } from '../../../models';
 import { PipelineKind } from '../../../types';
 import { initialPipelineFormData } from './const';
+import { sanitizeToYaml } from './form-switcher-validation';
 import PipelineBuilderForm from './PipelineBuilderForm';
 import { PipelineBuilderFormYamlValues, PipelineBuilderFormikValues } from './types';
 import { convertBuilderFormToPipeline, convertPipelineToBuilderForm } from './utils';
@@ -32,7 +33,7 @@ const PipelineBuilderPage: React.FC<PipelineBuilderPageProps> = (props) => {
 
   const initialValues: PipelineBuilderFormYamlValues = {
     editorType: EditorType.Form,
-    yamlData: '',
+    yamlData: sanitizeToYaml(initialPipelineFormData, ns, existingPipeline),
     formData: {
       ...initialPipelineFormData,
       ...(convertPipelineToBuilderForm(existingPipeline) || {}),