Fix crash when insert a yaml which provides data by an extension

Also show samples in YAMLEditorField only if the user creates a new resource

frontend/packages/console-shared/src/components/editor/YAMLEditorSidebar.tsx

@@ -30,7 +30,7 @@ const YAMLEditorSidebar: React.FC<YAMLEditorSidebarProps> = ({
   const editor = editorRef.current?.editor;
 
   const insertYamlContent = React.useCallback(
-    (id, yamlContent, kind) => {
+    (id: string = 'default', yamlContent: string = '', kind) => {
       const yaml = sanitizeYamlContent ? sanitizeYamlContent(id, yamlContent, kind) : yamlContent;
 
       const selection = editor.getSelection();
@@ -70,15 +70,15 @@ const YAMLEditorSidebar: React.FC<YAMLEditorSidebarProps> = ({
   );
 
   const replaceYamlContent = React.useCallback(
-    (id, yamlContent, kind) => {
+    (id: string = 'default', yamlContent: string = '', kind: string) => {
       const yaml = sanitizeYamlContent ? sanitizeYamlContent(id, yamlContent, kind) : yamlContent;
       editor.setValue(yaml);
     },
     [editor, sanitizeYamlContent],
   );
 
   const downloadYamlContent = React.useCallback(
-    (id = 'default', yamlContent = '', kind) => {
+    (id: string = 'default', yamlContent: string = '', kind: string) => {
       try {
         const yaml = sanitizeYamlContent ? sanitizeYamlContent(id, yamlContent, kind) : yamlContent;
         downloadYaml(yaml);

frontend/packages/console-shared/src/components/formik-fields/YAMLEditorField.tsx

@@ -4,12 +4,14 @@ import { InfoCircleIcon } from '@patternfly/react-icons';
 import { FormikValues, useField, useFormikContext } from 'formik';
 import { isEmpty } from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { useResolvedExtensions, isYAMLTemplate, YAMLTemplate } from '@console/dynamic-plugin-sdk';
 import { AsyncComponent } from '@console/internal/components/utils';
 import {
   useK8sWatchResource,
   WatchK8sResource,
 } from '@console/internal/components/utils/k8s-watch-hook';
 import { ConsoleYAMLSampleModel } from '@console/internal/models';
+import { getYAMLTemplates } from '@console/internal/models/yaml-templates';
 import { definitionFor, K8sResourceCommon, referenceForModel } from '@console/internal/module/k8s';
 import { getResourceSidebarSamples } from '../../utils';
 import { YAMLEditorFieldProps } from './field-types';
@@ -26,6 +28,7 @@ const YAMLEditorField: React.FC<YAMLEditorFieldProps> = ({
   label,
   model,
   schema,
+  showSamples,
   onSave,
 }) => {
   const [field] = useField(name);
@@ -53,7 +56,22 @@ const YAMLEditorField: React.FC<YAMLEditorFieldProps> = ({
 
   const definition = model ? definitionFor(model) : { properties: [] };
   const hasSchema = !!schema || (!!definition && !isEmpty(definition.properties));
-  const hasSidebarContent = hasSchema || !isEmpty(samples) || !isEmpty(snippets);
+  const hasSidebarContent = hasSchema || (showSamples && !isEmpty(samples)) || !isEmpty(snippets);
+
+  const [templateExtensions] = useResolvedExtensions<YAMLTemplate>(isYAMLTemplate);
+
+  const sanitizeYamlContent = React.useCallback(
+    (id: string = 'default', yaml: string = '', kind: string) => {
+      if (yaml) {
+        return yaml;
+      }
+      const yamlByExtension: string = getYAMLTemplates(
+        templateExtensions?.filter((e) => e.properties.model.kind === kind),
+      ).getIn([kind, id]);
+      return yamlByExtension?.trim() || '';
+    },
+    [templateExtensions],
+  );
 
   return (
     <div className="osc-yaml-editor" data-test="yaml-editor">
@@ -84,8 +102,9 @@ const YAMLEditorField: React.FC<YAMLEditorFieldProps> = ({
             editorRef={editorRef}
             model={model}
             schema={schema}
-            samples={samples}
+            samples={showSamples ? samples : []}
             snippets={snippets}
+            sanitizeYamlContent={sanitizeYamlContent}
             sidebarLabel={label}
             toggleSidebar={() => setSidebarOpen(!sidebarOpen)}
           />

frontend/packages/console-shared/src/components/formik-fields/__tests__/SyncedEditorField.spec.tsx

@@ -32,7 +32,7 @@ describe('SyncedEditorField', () => {
 
   const mockEditors = {
     form: <DynamicFormField name="formData" schema={{}} />,
-    yaml: <YAMLEditorField name="yamlData" />,
+    yaml: <YAMLEditorField name="yamlData" showSamples />,
   };
 
   const props: SyncedEditorFieldProps = {

frontend/packages/console-shared/src/components/formik-fields/field-types.ts

@@ -105,7 +105,7 @@ export interface MultiColumnFieldProps extends FieldProps {
 export interface YAMLEditorFieldProps extends FieldProps {
   model?: K8sKind;
   schema?: JSONSchema7;
-  onChange?: (value: string) => void;
+  showSamples: boolean;
   onSave?: () => void;
 }
 

frontend/packages/dev-console/src/components/buildconfig/BuildConfigForm.tsx

@@ -46,7 +46,12 @@ const BuildConfigForm: React.FC<FormikProps<BuildConfigFormikValues> & {
 
   const formEditor = <BuildConfigFormEditor namespace={namespace} />;
   const yamlEditor = (
-    <YAMLEditorField name="yamlData" model={BuildConfigModel} onSave={handleSubmit} />
+    <YAMLEditorField
+      name="yamlData"
+      model={BuildConfigModel}
+      showSamples={!watchedBuildConfig}
+      onSave={handleSubmit}
+    />
   );
 
   const LAST_VIEWED_EDITOR_TYPE_USERSETTING_KEY = 'devconsole.buildConfigForm.editor.lastView';

frontend/packages/dev-console/src/components/buildconfig/__tests__/InputField.spec.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik } from 'formik';
+import { InputField } from '@console/shared/src';
+
+describe('Pure HTML', () => {
+  it('should update formik state with userEvent.type', () => {
+    const onSubmit = jest.fn();
+
+    const renderResult = render(
+      <Formik initialValues={{ name: 'initial name value' }} onSubmit={onSubmit}>
+        {(formikProps) => (
+          <form onSubmit={formikProps.handleSubmit}>
+            <label>
+              <input {...formikProps.getFieldProps('name')} />
+            </label>
+            <input type="submit" value="Submit" />
+          </form>
+        )}
+      </Formik>,
+    );
+
+    const inputField = renderResult.getByRole('textbox');
+    const submitButton = renderResult.getByRole('button');
+
+    userEvent.type(inputField, 'changed value');
+    userEvent.click(submitButton);
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('PatternFly TextInput', () => {
+  it('should update formik state with userEvent.type', () => {
+    const onSubmit = jest.fn();
+
+    const renderResult = render(
+      <Formik initialValues={{ name: 'initial name value' }} onSubmit={onSubmit}>
+        {(formikProps) => (
+          <form onSubmit={formikProps.handleSubmit}>
+            <TextInput {...formikProps.getFieldProps('name')} />
+            <input type="submit" value="Submit" />
+          </form>
+        )}
+      </Formik>,
+    );
+
+    const inputField = renderResult.getByRole('textbox');
+    const submitButton = renderResult.getByRole('button');
+
+    userEvent.type(inputField, 'changed value');
+    userEvent.click(submitButton);
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('InputField', () => {
+  it('should update formik state with userEvent.type', () => {
+    const onSubmit = jest.fn();
+
+    const renderResult = render(
+      <Formik initialValues={{ name: 'initial name value' }} onSubmit={onSubmit}>
+        {(formikProps) => (
+          <form onSubmit={formikProps.handleSubmit}>
+            <InputField name="name" />
+            <input type="submit" value="Submit" />
+          </form>
+        )}
+      </Formik>,
+    );
+
+    const inputField = renderResult.getByRole('textbox');
+    const submitButton = renderResult.getByRole('button');
+
+    userEvent.type(inputField, 'changed value');
+    userEvent.click(submitButton);
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -56,6 +56,7 @@ const EditDeploymentForm: React.FC<FormikProps<FormikValues> & {
     <YAMLEditorField
       name="yamlData"
       model={resourceType === Resources.OpenShift ? DeploymentConfigModel : DeploymentModel}
+      showSamples={!resource}
       onSave={handleSubmit}
     />
   );

frontend/packages/dev-console/src/components/hpa/HPAForm.tsx

@@ -17,6 +17,7 @@ import HPADetailsForm from './HPADetailsForm';
 import { HPAFormValues } from './types';
 
 type HPAFormProps = {
+  existingHPA?: HorizontalPodAutoscalerKind;
   targetResource: K8sResourceCommon;
 };
 
@@ -27,6 +28,7 @@ const HPAForm: React.FC<FormikProps<HPAFormValues> & HPAFormProps> = ({
   status,
   setStatus,
   isSubmitting,
+  existingHPA,
   targetResource,
   validateForm,
   values,
@@ -36,7 +38,12 @@ const HPAForm: React.FC<FormikProps<HPAFormValues> & HPAFormProps> = ({
   const isForm = values.editorType === EditorType.Form;
   const formEditor = <HPADetailsForm />;
   const yamlEditor = (
-    <YAMLEditorField name="yamlData" model={HorizontalPodAutoscalerModel} onSave={handleSubmit} />
+    <YAMLEditorField
+      name="yamlData"
+      model={HorizontalPodAutoscalerModel}
+      showSamples={!existingHPA}
+      onSave={handleSubmit}
+    />
   );
   const customMetrics = false;
 

frontend/packages/dev-console/src/components/hpa/HPAFormikForm.tsx

@@ -79,7 +79,7 @@ const HPAFormikForm: React.FC<HPAFormikFormProps> = ({ existingHPA, targetResour
       validationSchema={hpaValidationSchema(t)}
     >
       {(props: FormikProps<HPAFormValues>) => (
-        <HPAForm {...props} targetResource={targetResource} />
+        <HPAForm {...props} existingHPA={existingHPA} targetResource={targetResource} />
       )}
     </Formik>
   );

frontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmInstallUpgradeForm.tsx

@@ -70,6 +70,7 @@ const HelmInstallUpgradeForm: React.FC<FormikProps<FormikValues> & HelmInstallUp
       name="yamlData"
       label={t('helm-plugin~Helm Chart')}
       schema={formSchema}
+      showSamples={false}
       onSave={handleSubmit}
     />
   );

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

@@ -41,7 +41,7 @@ const EventSourceForm: React.FC<FormikProps<FormikValues> & OwnProps> = ({
 }) => {
   const { t } = useTranslation();
   const LAST_VIEWED_EDITOR_TYPE_USERSETTING_KEY = 'knative.eventSourceForm.editor.lastView';
-  const yamlEditor = <YAMLEditorField name="yamlData" onSave={handleSubmit} />;
+  const yamlEditor = <YAMLEditorField name="yamlData" showSamples onSave={handleSubmit} />;
 
   const sanitizeToYaml = () =>
     safeJSToYAML(getCatalogEventSourceResource(values as EventSourceSyncFormData), 'yamlData', {

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

@@ -112,7 +112,12 @@ const AddBrokerForm: React.FC<FormikProps<AddBrokerFormYamlValues> & AddBrokerFo
     </>
   );
   const yamlEditor = (
-    <YAMLEditorField name="yamlData" model={EventingBrokerModel} onSave={handleSubmit} />
+    <YAMLEditorField
+      name="yamlData"
+      model={EventingBrokerModel}
+      showSamples
+      onSave={handleSubmit}
+    />
   );
   return (
     <FlexForm onSubmit={handleSubmit}>

frontend/packages/knative-plugin/src/components/add/channels/form-fields/ChannelYamlEditor.tsx

@@ -28,7 +28,7 @@ const ChannelYamlEditor: React.FC = () => {
 
   return (
     <FormSection flexLayout fullWidth>
-      <YAMLEditorField name="yamlData" />
+      <YAMLEditorField name="yamlData" showSamples />
     </FormSection>
   );
 };

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

@@ -132,7 +132,12 @@ const PipelineBuilderForm: React.FC<PipelineBuilderFormProps> = (props) => {
   );
 
   const yamlEditor = (
-    <YAMLEditorField name="yamlData" model={PipelineModel} onSave={handleSubmit} />
+    <YAMLEditorField
+      name="yamlData"
+      model={PipelineModel}
+      showSamples={!existingPipeline}
+      onSave={handleSubmit}
+    />
   );
 
   return (

frontend/public/components/edit-yaml.jsx

@@ -613,7 +613,8 @@ export const EditYAML_ = connect(stateToProps)(
             : { samples: [], snippets: [] };
           const definition = model ? definitionFor(model) : { properties: [] };
           const showSchema = definition && !_.isEmpty(definition.properties);
-          const hasSidebarContent = showSchema || !_.isEmpty(samples) || !_.isEmpty(snippets);
+          const hasSidebarContent =
+            showSchema || (create && !_.isEmpty(samples)) || !_.isEmpty(snippets);
           const sidebarLink =
             !showSidebar && hasSidebarContent ? (
               <Button type="button" variant="link" isInline onClick={this.toggleSidebar}>

frontend/public/components/sidebars/resource-sidebar-samples.tsx

@@ -79,7 +79,7 @@ const PreviewYAML = ({ maxPreviewLines = 20, yaml }) => {
 
 interface ResourceSidebarSnippetProps {
   snippet: Sample;
-  insertSnippetYaml(id: string, yaml: string, reference: string);
+  insertSnippetYaml: (id: string, yaml: string, reference: string) => void;
 }
 
 const ResourceSidebarSnippet: React.FC<ResourceSidebarSnippetProps> = ({
@@ -193,9 +193,9 @@ export const ResourceSidebarSamples: React.FC<ResourceSidebarSamplesProps> = ({
   );
 };
 
-type LoadSampleYaml = (id: string, yaml: string, kind: string) => void;
+export type LoadSampleYaml = (id: string, yaml: string, kind: string) => void;
 
-type DownloadSampleYaml = (id: string, yaml: string, kind: string) => void;
+export type DownloadSampleYaml = (id: string, yaml: string, kind: string) => void;
 
 type ResourceSidebarSampleProps = {
   sample: Sample;