Skip to content

Commit 088ac8d

Browse files
rovelnicrovelnic
authored
Merge pull request #11 from episerver/bugfix/CMS-38389-adapt-to-new-component-model
Adapted to the new component structure
2 parents cd4cdc6 + a9fee84 commit 088ac8d

12 files changed

+164
-171
lines changed

‎README.md

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@ If you have an empty CMS instance, and you want to see how it all
1212
works go to your CMS (SaaS) instance and:
1313

1414
1. Go to **Settings** > **Content Types**.
15-
2. Click **Create New** and select **Element Type** from the drop-down list.
15+
2. Click **Create New** and select **Block Type** from the drop-down list.
1616
3. Enter _ParagraphElement_ for the **Name** and **Display name** fields.
1717
4. Click **Create**.
1818
5. Click **Add Property** and select **Text** from the drop-down list.
1919
6. Enter _Text_ for the **Name** in the **Configure Property** page.
2020
7. Click on the **Text Type** drop-down menu and select **XHTML string (>255)**.
2121
8. Click **Save**.
22+
8. Go to **Setting**
23+
9. Tick checkboxes **Available for composition in Visual Builder** and **Display as Element**
24+
10. Click **Save**.
2225

2326
Then in order to run the sample you need to do the following:
2427

@@ -110,21 +113,24 @@ We now need to add a new script to package.json
110113
111114
This script will generate types based your graphql schema.
112115

113-
### Adding element type
116+
### Adding element
114117

115-
Before we run the codegen let's add a simple Element type to our SaaS CMS instance.
118+
Before we run the codegen let's add a simple Element to our SaaS CMS instance.
116119
Please open `Settings` and `Content types` screen.
117120

118-
Click on `Create New...` menu item and choose `Element type` option.
119-
![clicking add element type](docs/contenttype_add_elementtype.png)
121+
Click on `Create New...` menu item and choose `Block type` option.
122+
![clicking add element type](docs/contenttype_add_block.png)
120123

121124
Fill in the name and display name and hit the `Create` button.
122-
![adding element name](docs/contenttype_add_elementtype_dialog.png)
125+
![adding element name](docs/contenttype_add_block_dialog.png)
123126

124127
You will see an empty list of properties, hit the `Add property` button and add a single `Text` `XHTML string` property:
125128
![adding property](docs/contenttype_add_property.png)
126129

127-
After that you should see the newly created element type in the list.
130+
After that click on `Settings`and tick `Available for composition in Visual Builder` and `Display as Element` checkboxes
131+
![display as element](docs/block_settings_display_as.png)
132+
133+
You should see the newly created element type in the list.
128134
![added element type](docs/contenttype_list.png)
129135

130136
### Graphql generation
@@ -201,7 +207,7 @@ query VisualBuilder($key: String, $version: String) {
201207
... on CompositionStructureNode {
202208
key
203209
elements: nodes {
204-
...compositionElementNode
210+
...compositionComponentNode
205211
}
206212
}
207213
}
@@ -265,7 +271,7 @@ const VisualBuilderComponent: FC<VisualBuilderProps> = ({ key, version }) => {
265271
<div className="flex-1 flex flex-col flex-nowrap justify-start vb:col" key={column.key}>
266272
{column.elements?.map((element: any) =>
267273
<div data-epi-block-id={element?.key} key={element?.key}>
268-
<CompositionNodeComponent compositionElementNode={element}/>
274+
<CompositionNodeComponent compositionComponentNode={element}/>
269275
</div>
270276
)}
271277
</div>
@@ -292,10 +298,10 @@ import { FragmentType, useFragment } from '../../graphql/fragment-masking'
292298
import { graphql } from '@/graphql'
293299
import ParagraphElementComponent from '../elements/ParagraphElementComponent'
294300

295-
export const CompositionElementNodeFragment = graphql(/* GraphQL */ `
296-
fragment compositionElementNode on CompositionElementNode {
301+
export const CompositionComponentNodeFragment = graphql(/* GraphQL */ `
302+
fragment compositionComponentNode on CompositionComponentNode {
297303
key
298-
element {
304+
component {
299305
_metadata {
300306
types
301307
}
@@ -304,23 +310,23 @@ export const CompositionElementNodeFragment = graphql(/* GraphQL */ `
304310
}
305311
`)
306312

307-
const CompositionElementNodeComponent = (props: {
308-
compositionElementNode: FragmentType<typeof CompositionElementNodeFragment>
313+
const CompositionComponentNodeComponent = (props: {
314+
compositionComponentNode: FragmentType<typeof CompositionComponentNodeFragment>
309315
}) => {
310-
const compositionElementNode = useFragment(CompositionElementNodeFragment, props.compositionElementNode)
311-
const element = compositionElementNode.element
312-
switch (element?.__typename) {
316+
const compositionComponentNode = useFragment(CompositionComponentNodeFragment, props.compositionComponentNode)
317+
const component = compositionComponentNode.component
318+
switch (component?.__typename) {
313319
case "ParagraphElement":
314-
return <ParagraphElementComponent paragraphElement={element}/>
320+
return <ParagraphElementComponent paragraphElement={component}/>
315321
default:
316322
return <>NotImplementedException</>
317323
}
318324
}
319325

320-
export default CompositionElementNodeComponent
326+
export default CompositionComponentNodeComponent
321327
```
322328

323-
As you can see based on `element.__typename` we can use different components - in our
329+
As you can see based on `component.__typename` we can use different components - in our
324330
example we will use `ParagraphElementComponent`.
325331

326332
### Subscribing to content changes

‎docs/block_settings_display_as.png

96.9 KB
Loading

‎docs/contenttype_add_block.png

129 KB
Loading

‎docs/contenttype_add_block_dialog.png

112 KB
Loading

‎docs/contenttype_add_elementtype.png

-74.9 KB
Binary file not shown.

‎docs/contenttype_add_elementtype_dialog.png

-64.8 KB
Binary file not shown.

‎docs/contenttype_add_property.png

50.6 KB
Loading

‎docs/contenttype_list.png

50.8 KB
Loading

‎src/components/base/CompositionNodeComponent.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { FragmentType, useFragment } from '../../graphql/fragment-masking'
22
import { graphql } from '@/graphql'
33
import ParagraphElementComponent from '../elements/ParagraphElementComponent'
44

5-
export const CompositionElementNodeFragment = graphql(/* GraphQL */ `
6-
fragment compositionElementNode on CompositionElementNode {
5+
export const CompositionComponentNodeFragment = graphql(/* GraphQL */ `
6+
fragment compositionComponentNode on CompositionComponentNode {
77
key
8-
element {
8+
component {
99
_metadata {
1010
types
1111
}
@@ -14,17 +14,17 @@ export const CompositionElementNodeFragment = graphql(/* GraphQL */ `
1414
}
1515
`)
1616

17-
const CompositionElementNodeComponent = (props: {
18-
compositionElementNode: FragmentType<typeof CompositionElementNodeFragment>
17+
const CompositionComponentNodeComponent = (props: {
18+
compositionComponentNode: FragmentType<typeof CompositionComponentNodeFragment>
1919
}) => {
20-
const compositionElementNode = useFragment(CompositionElementNodeFragment, props.compositionElementNode)
21-
const element = compositionElementNode.element
22-
switch (element?.__typename) {
20+
const compositionComponentNode = useFragment(CompositionComponentNodeFragment, props.compositionComponentNode)
21+
const component = compositionComponentNode.component
22+
switch (component?.__typename) {
2323
case "ParagraphElement":
24-
return <ParagraphElementComponent paragraphElement={element}/>
24+
return <ParagraphElementComponent paragraphElement={component}/>
2525
default:
2626
return <>NotImplementedException</>
2727
}
2828
}
2929

30-
export default CompositionElementNodeComponent
30+
export default CompositionComponentNodeComponent

‎src/components/base/VisualBuilderComponent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ query VisualBuilder($key: String, $version: String) {
2323
... on CompositionStructureNode {
2424
key
2525
elements: nodes {
26-
...compositionElementNode
26+
...compositionComponentNode
2727
}
2828
}
2929
}
@@ -94,7 +94,7 @@ const VisualBuilderComponent: FC<VisualBuilderProps> = ({ version, contentKey })
9494
<div className="flex-1 flex flex-col flex-nowrap justify-start vb:col" key={column.key}>
9595
{column.elements?.map((element: any) =>
9696
<div data-epi-block-id={element?.key} key={element?.key}>
97-
<CompositionNodeComponent compositionElementNode={element}/>
97+
<CompositionNodeComponent compositionComponentNode={element}/>
9898
</div>
9999
)}
100100
</div>

‎src/graphql/gql.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
1313
* Therefore it is highly recommended to use the babel or swc plugin for production.
1414
*/
1515
const documents = {
16-
"\n fragment compositionElementNode on CompositionElementNode {\n key\n element {\n _metadata {\n types\n }\n ...paragraphElement\n }\n }\n": types.CompositionElementNodeFragmentDoc,
17-
"\nquery VisualBuilder($key: String, $version: String) {\n _Experience(where: {\n _metadata: { key: { eq: $key } }\n _or: { _metadata: { version: { eq: $version } } }\n }) {\n items { \n composition {\n grids: nodes {\n ... on CompositionStructureNode {\n key\n rows: nodes {\n ... on CompositionStructureNode {\n key\n columns: nodes {\n ... on CompositionStructureNode {\n key\n elements: nodes {\n ...compositionElementNode\n }\n }\n }\n }\n }\n }\n }\n }\n _metadata {\n key\n version, \n }\n }\n }\n}\n": types.VisualBuilderDocument,
16+
"\n fragment compositionComponentNode on CompositionComponentNode {\n key\n component {\n _metadata {\n types\n }\n ...paragraphElement\n }\n }\n": types.CompositionComponentNodeFragmentDoc,
17+
"\nquery VisualBuilder($key: String, $version: String) {\n _Experience(where: {\n _metadata: { key: { eq: $key } }\n _or: { _metadata: { version: { eq: $version } } }\n }) {\n items { \n composition {\n grids: nodes {\n ... on CompositionStructureNode {\n key\n rows: nodes {\n ... on CompositionStructureNode {\n key\n columns: nodes {\n ... on CompositionStructureNode {\n key\n elements: nodes {\n ...compositionComponentNode\n }\n }\n }\n }\n }\n }\n }\n }\n _metadata {\n key\n version, \n }\n }\n }\n}\n": types.VisualBuilderDocument,
1818
"\n fragment paragraphElement on ParagraphElement {\n Text {\n html\n }\n }\n": types.ParagraphElementFragmentDoc,
1919
};
2020

@@ -35,11 +35,11 @@ export function graphql(source: string): unknown;
3535
/**
3636
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
3737
*/
38-
export function graphql(source: "\n fragment compositionElementNode on CompositionElementNode {\n key\n element {\n _metadata {\n types\n }\n ...paragraphElement\n }\n }\n"): (typeof documents)["\n fragment compositionElementNode on CompositionElementNode {\n key\n element {\n _metadata {\n types\n }\n ...paragraphElement\n }\n }\n"];
38+
export function graphql(source: "\n fragment compositionComponentNode on CompositionComponentNode {\n key\n component {\n _metadata {\n types\n }\n ...paragraphElement\n }\n }\n"): (typeof documents)["\n fragment compositionComponentNode on CompositionComponentNode {\n key\n component {\n _metadata {\n types\n }\n ...paragraphElement\n }\n }\n"];
3939
/**
4040
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
4141
*/
42-
export function graphql(source: "\nquery VisualBuilder($key: String, $version: String) {\n _Experience(where: {\n _metadata: { key: { eq: $key } }\n _or: { _metadata: { version: { eq: $version } } }\n }) {\n items { \n composition {\n grids: nodes {\n ... on CompositionStructureNode {\n key\n rows: nodes {\n ... on CompositionStructureNode {\n key\n columns: nodes {\n ... on CompositionStructureNode {\n key\n elements: nodes {\n ...compositionElementNode\n }\n }\n }\n }\n }\n }\n }\n }\n _metadata {\n key\n version, \n }\n }\n }\n}\n"): (typeof documents)["\nquery VisualBuilder($key: String, $version: String) {\n _Experience(where: {\n _metadata: { key: { eq: $key } }\n _or: { _metadata: { version: { eq: $version } } }\n }) {\n items { \n composition {\n grids: nodes {\n ... on CompositionStructureNode {\n key\n rows: nodes {\n ... on CompositionStructureNode {\n key\n columns: nodes {\n ... on CompositionStructureNode {\n key\n elements: nodes {\n ...compositionElementNode\n }\n }\n }\n }\n }\n }\n }\n }\n _metadata {\n key\n version, \n }\n }\n }\n}\n"];
42+
export function graphql(source: "\nquery VisualBuilder($key: String, $version: String) {\n _Experience(where: {\n _metadata: { key: { eq: $key } }\n _or: { _metadata: { version: { eq: $version } } }\n }) {\n items { \n composition {\n grids: nodes {\n ... on CompositionStructureNode {\n key\n rows: nodes {\n ... on CompositionStructureNode {\n key\n columns: nodes {\n ... on CompositionStructureNode {\n key\n elements: nodes {\n ...compositionComponentNode\n }\n }\n }\n }\n }\n }\n }\n }\n _metadata {\n key\n version, \n }\n }\n }\n}\n"): (typeof documents)["\nquery VisualBuilder($key: String, $version: String) {\n _Experience(where: {\n _metadata: { key: { eq: $key } }\n _or: { _metadata: { version: { eq: $version } } }\n }) {\n items { \n composition {\n grids: nodes {\n ... on CompositionStructureNode {\n key\n rows: nodes {\n ... on CompositionStructureNode {\n key\n columns: nodes {\n ... on CompositionStructureNode {\n key\n elements: nodes {\n ...compositionComponentNode\n }\n }\n }\n }\n }\n }\n }\n }\n _metadata {\n key\n version, \n }\n }\n }\n}\n"];
4343
/**
4444
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
4545
*/

0 commit comments

Comments
 (0)