Repository: magento/pwa-studio (JavaScript)

Issue:
[bug]: Page Builder column-line content type is not supported, this content will not be rendered.
**Describe the bug**

Ever since we upgraded to Magento 2.4.5 our Pagebuilder content that uses a column has stopped working. We tested this on a clean Pwa Studio install with a Magento 2.4.5 backend attached to it.

**To reproduce**

Steps to reproduce the behavior:

1. install a fresh pwa studio environment
2. attach it to a magento 2.4.5 backend
3. use a column in pagebuilder on your homepage (or any other page)
4. See error

**Expected behavior**

I expect to see the columns and their content I added using pagebuilder in the frontend application.

**Screenshots**

Landing page backend used for my current homepage:
<img width="1650" alt="image" src="https://user-images.githubusercontent.com/94620325/187884891-b51a7597-de58-4b51-ac6f-0c1aaa0c1eca.png">

Landing page frontend used for my current homepage:
<img width="1277" alt="image" src="https://user-images.githubusercontent.com/94620325/187885223-976775da-e033-43b3-8b47-bad5e802bcc9.png">

error in console:
<img width="1909" alt="image" src="https://user-images.githubusercontent.com/94620325/187885320-f344f125-362e-4ad2-964c-3aa212f6e65e.png">

**Possible solutions**

Extend the @magento/pagebuilder/lib/ContentTypes with the new column-line type.

**Debug Report**

**_yarn build:report output :_**
yarn run v1.22.17
$ buildpack generate-build-report
  ℹ  Generating build report for pwa-test@0.0.1. This may take a moment.

  ℹ  Inspecting Dependencies
    Found 9 @magento dependencies in yarn.lock
    @magento/pwa-buildpack @ 11.4.0
    @adobe/apollo-link-mutation-queue @ 1.0.2
    @magento/babel-preset-peregrine @ 1.2.1
    @magento/eslint-config @ 1.5.3
    @magento/pagebuilder @ 7.4.1
    @magento/peregrine @ 12.5.1
    @magento/pwa-theme-venia @ 1.3.0
    @magento/upward-security-headers @ 1.0.10
    @magento/venia-ui @ 9.6.0

  ℹ  Inspecting Magento Backend
    Not using sample backend.
    Backend is UP!

  ℹ  Inspecting System
    OS: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:25 PDT 2022; root:xnu-8020.140.41~1/RELEASE_X86_64
    Node Version: v16.15.0
    NPM Version: 8.5.5


✨  Done in 4.25s.

**Please complete the following device information:**

-   Device [e.g. iPhone6, PC, Mac, Pixel3]: Mac
-   Browser [e.g. Chrome, Safari]: Chrome
-   Browser Version [e.g. 22]: Version 104.0.5112.101 (Official Build) (x86_64)
-   Magento Version [e.g Adobe Commerce 2.4]: Magento ver. 2.4.5

<!-- Complete the following sections to help us apply appropriate labels! -->

**Please let us know what packages this bug is in regards to:**

-   [ ] `venia-concept`
-   [x] `venia-ui`
-   [x] `pagebuilder`
-   [ ] `pwa-buildpack`
-   [ ] `peregrine`
-   [ ] `pwa-devdocs`
-   [ ] `upward-js`
-   [ ] `upward-spec`
-   [ ] `create-pwa`



Discussion:
Hi @gijsvds. Thank you for your report. 
To speed up processing of this issue, make sure that you provided sufficient information. 

Add a comment to [assign the issue](https://devdocs.magento.com/contributor-guide/contributing.html#assigning-an-issue): `@magento I am working on this` 

---
-  Join [Magento Community Engineering Slack](https://opensource.magento.com/slack) and ask your questions in [#github](https://magentocommeng.slack.com/messages/C7KB93M32) channel.
@adobe export issue to JIRA project PWA as Bug
:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/PWA-2986 is successfully created for this GitHub issue.
@gijsvds - Thanks for the input. Is `column-line` an extension by chance? This is not part of the base supported content types.
@anthoula - Thank you for responding. No, it shouldn't be an extension. It may have something to do with this new feature in 2.4.5:
<img width="804" alt="image" src="https://user-images.githubusercontent.com/94620325/188885205-50565c1c-d332-4445-96ab-b442849630dd.png">

maybe the name of the column-type was changed there? I'm not sure but I do know the issue started since we upgraded to magento 2.4.5
Have same issue, when possible fix will be released?
> Have same issue, when possible fix will be released?

I added a quick fix on my project (I know, it's a dirty fix, but it allowed us continue work on the project with minimal time spent):

1. Override config 
```
module.exports = componentOverride = {
...
    ['@magento/pagebuilder/lib/config.js']: 'src/components/Pagebuilder/config.js'
...
};
```

2. Added "column-line" and used ColumnGroup for this component 
```
...
    'column-group': {
        configAggregator: columnGroupConfigAggregator,
        component: ColumnGroup
    },
+    'column-line': {
+        configAggregator: columnGroupConfigAggregator,
+        component: ColumnGroup
+    },
    image: {
        configAggregator: imageConfigAggregator,
...
```

@oleksiyzestlogic Thank you for providing this temporary solution. We may use this in our project aswel until a fix is provided in pwa-studio.
@oleksiyzestlogic Thank you for this temporary solution. It helped resolve my issue temporary. But waiting from @pwa-studio-bot to release its fixes on repo only.
> > Have same issue, when possible fix will be released?
> 
> I added a quick fix on my project (I know, it's a dirty fix, but it allowed us continue work on the project with minimal time spent):
> 
> 1. Override config
> 
> ```
> module.exports = componentOverride = {
> ...
>     ['@magento/pagebuilder/lib/config.js']: 'src/components/Pagebuilder/config.js'
> ...
> };
> ```


Can you please specify in witch file we can add this override?





Patch:
diff --git a/packages/pagebuilder/lib/ContentTypes/ColumnLine/columnLine.js b/packages/pagebuilder/lib/ContentTypes/ColumnLine/columnLine.js
new file mode 100644
index 0000000000..03378af62c
--- /dev/null
+++ b/packages/pagebuilder/lib/ContentTypes/ColumnLine/columnLine.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import defaultClasses from './columnLine.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { shape, string } from 'prop-types';
+
+/**
+ * Page Builder ColumnLine component.
+ *
+ * This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
+ *
+ * @typedef ColumnLine
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that wraps {@link Column} components.
+ */
+const ColumnLine = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { display, children } = props;
+    const dynamicStyles = {
+        display
+    };
+
+    return (
+        <div style={dynamicStyles} className={classes.root}>
+            {children}
+        </div>
+    );
+};
+
+/**
+ * Props for {@link ColumnLine}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the ColumnLine
+ * @property {String} classes.root CSS classes for the root container element
+ * @property {String} display CSS display property
+ */
+ColumnLine.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    display: string
+};
+
+export default ColumnLine;
diff --git a/packages/pagebuilder/lib/ContentTypes/ColumnLine/columnLine.module.css b/packages/pagebuilder/lib/ContentTypes/ColumnLine/columnLine.module.css
new file mode 100644
index 0000000000..43328fd73d
--- /dev/null
+++ b/packages/pagebuilder/lib/ContentTypes/ColumnLine/columnLine.module.css
@@ -0,0 +1,5 @@
+@media only screen and (max-width: 768px) {
+    .root {
+        flex-wrap: wrap;
+    }
+}
diff --git a/packages/pagebuilder/lib/ContentTypes/ColumnLine/configAggregator.js b/packages/pagebuilder/lib/ContentTypes/ColumnLine/configAggregator.js
new file mode 100644
index 0000000000..0ebe7f4277
--- /dev/null
+++ b/packages/pagebuilder/lib/ContentTypes/ColumnLine/configAggregator.js
@@ -0,0 +1,5 @@
+export default node => {
+    return {
+        display: node.style.display
+    };
+};
diff --git a/packages/pagebuilder/lib/ContentTypes/ColumnLine/index.js b/packages/pagebuilder/lib/ContentTypes/ColumnLine/index.js
new file mode 100644
index 0000000000..647a26eec9
--- /dev/null
+++ b/packages/pagebuilder/lib/ContentTypes/ColumnLine/index.js
@@ -0,0 +1,1 @@
+export { default } from './columnLine';
diff --git a/packages/pagebuilder/lib/config.js b/packages/pagebuilder/lib/config.js
index 23ef80be89..39ff5e1c3a 100644
--- a/packages/pagebuilder/lib/config.js
+++ b/packages/pagebuilder/lib/config.js
@@ -5,6 +5,8 @@ import columnConfigAggregator from './ContentTypes/Column/configAggregator';
 import Column from './ContentTypes/Column';
 import columnGroupConfigAggregator from './ContentTypes/ColumnGroup/configAggregator';
 import ColumnGroup from './ContentTypes/ColumnGroup';
+import columnLineConfigAggregator from './ContentTypes/ColumnLine/configAggregator';
+import ColumnLine from './ContentTypes/ColumnLine';
 import imageConfigAggregator from './ContentTypes/Image/configAggregator';
 import { ImageShimmer } from './ContentTypes/Image';
 import headingConfigAggregator from './ContentTypes/Heading/configAggregator';
@@ -43,6 +45,10 @@ const contentTypesConfig = {
         configAggregator: columnGroupConfigAggregator,
         component: ColumnGroup
     },
+    'column-line': {
+        configAggregator: columnLineConfigAggregator,
+        component: ColumnLine
+    },
     image: {
         configAggregator: imageConfigAggregator,
         component: React.lazy(() => import('./ContentTypes/Image')),


Test patch:
diff --git a/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/__snapshots__/columnLine.spec.js.snap b/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/__snapshots__/columnLine.spec.js.snap
new file mode 100644
index 0000000000..5d10c20985
--- /dev/null
+++ b/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/__snapshots__/columnLine.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a ColumnLine component 1`] = `
+<div
+  style={
+    Object {
+      "display": undefined,
+    }
+  }
+/>
+`;
+
+exports[`renders a ColumnLine component with all props configured 1`] = `
+<div
+  style={
+    Object {
+      "display": "flex",
+    }
+  }
+/>
+`;
diff --git a/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/columnLine.spec.js b/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/columnLine.spec.js
new file mode 100644
index 0000000000..d415e1bb6f
--- /dev/null
+++ b/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/columnLine.spec.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import ColumnLine from '../columnLine';
+
+test('renders a ColumnLine component', () => {
+    const component = createTestInstance(<ColumnLine />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('renders a ColumnLine component with all props configured', () => {
+    const columnLineProps = {
+        display: 'flex'
+    };
+    const component = createTestInstance(<ColumnLine {...columnLineProps} />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/configAggregator.spec.js b/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/configAggregator.spec.js
new file mode 100644
index 0000000000..eda9f7c5f3
--- /dev/null
+++ b/packages/pagebuilder/lib/ContentTypes/ColumnLine/__tests__/configAggregator.spec.js
@@ -0,0 +1,13 @@
+import configAggregator from '../configAggregator';
+
+test('columnLine config is aggregated correctly retrieving display property', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div class="pagebuilder-column-line" style="display:flex;" data-content-type="column-line" 
+        data-grid-size="12" data-element="main"></div>`;
+
+    expect(configAggregator(node.childNodes[0])).toEqual(
+        expect.objectContaining({
+            display: 'flex'
+        })
+    );
+});