Merge pull request #106 from storyblok/fix/shape-6598

fix(shape-6598): fix pull and push components to handle multiple levels of groups
storyblok · Aug 26, 2024 · b435d17 · b435d17
2 parents 4b95daf + 5298545
commit b435d17
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 33 deletions.
diff --git a/src/tasks/pull-components.js b/src/tasks/pull-components.js
@@ -61,7 +61,7 @@ const pullComponents = async (api, options) => {
     }
 
     const file = `components.${fileName}.json`
-    const data = JSON.stringify({ components }, null, 2)
+    const data = JSON.stringify({ components, component_groups: componentGroups }, null, 2)
 
     console.log(`${chalk.green('✓')} We've saved your components in the file: ${file}`)
 

diff --git a/src/tasks/push-components.js b/src/tasks/push-components.js
@@ -6,6 +6,7 @@ import lodash from 'lodash'
 const { isEmpty } = lodash
 
 const isUrl = source => source.indexOf('http') === 0
+ const listOfGroups = []
 
 /**
  * @method isGroupExists
@@ -69,45 +70,77 @@ const pushComponents = async (api, { source, presetsSource }) => {
     const components = createContentList(rawComponents, 'components')
     const rawPresets = await getDataFromPath(presetsSource)
     const presets = createContentList(rawPresets, 'presets')
+    const componentGroups = createContentList(rawComponents, 'component_groups')
 
-    return push(api, components, presets)
+    return push(api, components, componentGroups, presets)
   } catch (err) {
     console.error(`${chalk.red('X')} Can not push invalid json - please provide a valid json file`)
     return Promise.reject(new Error('Can not push invalid json - please provide a valid json file'))
   }
 }
 
-const push = async (api, components, presets = []) => {
-  const presetsLib = new PresetsLib({ oauthToken: api.accessToken, targetSpaceId: api.spaceId })
-  try {
-    const componentsGroups = await api.getComponentGroups()
-    for (let i = 0; i < components.length; i++) {
-      const groupName = components[i].component_group_name
-      if (components[i].component_group_name) {
-        const currentGroup = getGroupByName(componentsGroups, groupName)
-        if (!currentGroup.name) {
-          try {
-            console.log(`${chalk.blue('-')} Creating the ${groupName} component group...`)
-            const newGroup = await api.post('component_groups', {
-              component_group: {
-                name: groupName
-              }
-            })
-            componentsGroups.push({
-              ...newGroup.data.component_group,
-              source_uuid: components[i].component_group_uuid
-            })
-          } catch (err) {
-            console.log(
-              `${chalk.yellow('-')} Components group ${groupName} already exists...`
-            )
-          }
-        } else {
-          currentGroup.source_uuid = components[i].component_group_uuid
+const buildComponentsGroupsTree = (groups) => {
+    const map = new Map()
+    const roots = []
+
+    groups.forEach(component => {
+      map.set(component.id, { ...component, children: [] })
+    });
+
+    groups.forEach(component => {
+      if (component.parent_id === null) {
+        roots.push(map.get(component.id))
+      } else {
+        const parent = map.get(component.parent_id)
+        if (parent) {
+          parent.children.push(map.get(component.id))
+        }
+      }
+    })
+
+    return roots
+  }
+
+const pushComponentsGroups = async (api, group) => {
+    const groupName = group.name
+
+    try {
+      console.log(`${chalk.blue('-')} Creating the ${groupName} component group...`)
+      const newGroup = await api.post('component_groups', {
+        component_group: {
+          name: groupName,
+          parent_id: group.parent_id
         }
+      })
+
+      listOfGroups.push(newGroup.data.component_group)
+
+      for (const child of group.children) {
+        const children = {
+          ...child,
+          parent_id: newGroup.data.component_group.id
+        }
+
+        await pushComponentsGroups(api, children)
       }
+
+    } catch (err) {
+      console.log(err)
+      console.log(
+        `${chalk.yellow('-')} Components group ${groupName} already exists...`
+      )
     }
+}
+
+const push = async (api, components, componentsGroups = [], presets = []) => {
+  const presetsLib = new PresetsLib({ oauthToken: api.accessToken, targetSpaceId: api.spaceId })
+  try {
+    const componentGroupsTree = buildComponentsGroupsTree(componentsGroups)
 
+    for (const rootComponent of componentGroupsTree) {
+      await pushComponentsGroups(api, rootComponent)
+    }
+
     const apiComponents = await api.getComponents()
 
     for (let i = 0; i < components.length; i++) {
@@ -117,7 +150,7 @@ const push = async (api, components, presets = []) => {
       delete components[i].created_at
 
       const groupName = components[i].component_group_name
-      const groupData = getGroupByName(componentsGroups, groupName)
+      const groupData = getGroupByName(listOfGroups, groupName)
 
       if (groupName) {
         components[i].component_group_uuid = groupData.uuid
@@ -129,7 +162,7 @@ const push = async (api, components, presets = []) => {
         Object.keys(schema).forEach(field => {
           if (schema[field].component_group_whitelist) {
             schema[field].component_group_whitelist = schema[field].component_group_whitelist.map(uuid =>
-              getGroupByUuid(componentsGroups, uuid) ? getGroupByUuid(componentsGroups, uuid).uuid : uuid
+              getGroupByUuid(listOfGroups, uuid) ? getGroupByUuid(listOfGroups, uuid).uuid : uuid
             )
           }
         })

diff --git a/tests/units/pull-components.spec.js b/tests/units/pull-components.spec.js
@@ -51,7 +51,7 @@ describe('testing pullComponents', () => {
 
     expect(fs.writeFileSync.mock.calls.length).toBe(1)
     expect(path).toBe(`./${expectFileName}`)
-    expect(JSON.parse(data)).toEqual({ components: [FAKE_COMPONENTS()[0]] })
+    expect(JSON.parse(data)).toEqual({ components: [FAKE_COMPONENTS()[0]], component_groups: [] })
   })
 
   it('pull components should be call fs.writeFileSync correctly and generate a component and preset files', async () => {
@@ -83,7 +83,7 @@ describe('testing pullComponents', () => {
     expect(fs.writeFileSync.mock.calls.length).toBe(2)
 
     expect(compPath).toBe(`./${expectComponentFileName}`)
-    expect(JSON.parse(compData)).toEqual({ components: [FAKE_COMPONENTS()[0]] })
+    expect(JSON.parse(compData)).toEqual({ components: [FAKE_COMPONENTS()[0]], component_groups: [] })
 
     expect(presetPath).toBe(`./${expectPresetFileName}`)
     expect(JSON.parse(presetData)).toEqual({ presets: FAKE_PRESET() })