fix(309): Add codeblock to unknown node

[tplevko]

fixes #309

@lordrip I tried both - the <pre> with <code> and the PF CodeBlock - I believe using CodeBlock the yaml code gets more highlighted, but I can change to the originally proposed solution.

Also I wanted to ask, whether we should add some info, regarding the displayed block of code - I was thinking about, to be consistent - something like FieldLabelIcon qestionmark with popover, containing information, regarding the displayed yaml and some info, regarding the node itself - that the name is not correct and needs to be changed in source code, or replaced in the canvas.
Let me know, what do you think.

[lordrip]

@tplevko looks good 👍

[lordrip]

💅 Maybe it would be nice to extract this into a dedicated component.

[lordrip]

It could look like this

<UnknownComponent componentName={componentName} } code={stringify(model)} />

Alternatively, we could reorder a bit the component to avoid duplicating the <Title> component:

  const isUnknownComponent = useMemo(() => {
    return schema?.schema === undefined || Object.keys(schema?.schema).length === 0;
  }, [schema]);

  return (
    <ErrorBoundary key={props.selectedNode.id} fallback={<p>This node cannot be configured yet</p>}>
      <Title headingLevel="h1">{componentName}</Title>
      {isUnknownComponent ? (
        <CodeBlock>
          <CodeBlockCode>{stringify(props.selectedNode.data?.vizNode?.getComponentSchema())}</CodeBlockCode>
        </CodeBlock>
      ) : (
        <AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
          {isExpressionAwareStep && <StepExpressionEditor selectedNode={props.selectedNode} />}
          {isDataFormatAwareStep && <DataFormatEditor selectedNode={props.selectedNode} />}
          {isLoadBalanceAwareStep && <LoadBalancerEditor selectedNode={props.selectedNode} />}
          <AutoForm ref={formRef} schema={schema} model={model} onChangeModel={handleOnChange} data-testid="autoform">
            <AutoFields omitFields={omitFields} />
            <ErrorsField />
          </AutoForm>
        </AutoField.componentDetectorContext.Provider>
      )}
    </ErrorBoundary>
  );

[tplevko]

Thanks for the hint Ricardo, I updated the PR to remove the duplicate <Title> and also updated the failing tests.

[lordrip]

@tplevko if I'm not mistaken, we shown the component's definition, but now we're showing an internal kaoto object, is this intended?