feat(studio): allow third party content types to preview images (#390)

* feat(studio): allow third party content types to preview images

* add unit testing for recursiveSearch

* requested changes

jest.unit.config.ts

@@ -13,6 +13,16 @@ const config: Config.InitialOptions = {
         ...tsjPreset.transform
       },
       clearMocks: true
+    },
+    {
+      rootDir: 'packages/studio-ui/src/web',
+      testMatch: ['<rootDir>/**/*.test.ts'],
+      displayName: { name: 'ui', color: 'blue' },
+      testEnvironment: 'jsdom',
+      transform: {
+        ...tsjPreset.transform
+      },
+      clearMocks: true
     }
   ]
 }

packages/studio-ui/src/web/util.ts

@@ -63,3 +63,19 @@ export const sanitizeName = (text: string) =>
 export const stripDots = (str: string) => str.replace(/\./g, '--dot--')
 
 export const restoreDots = (str: string) => str.replace(/--dot--/g, '.')
+
+export const recursiveSearch = (obj: any, searchKey: string, results: string[] = []) => {
+  if (!obj || typeof obj !== 'object') {
+    return results
+  }
+
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key]
+    if (key === searchKey && typeof value !== 'object') {
+      results.push(value)
+    } else if (typeof value === 'object') {
+      recursiveSearch(value, searchKey, results)
+    }
+  })
+  return results
+}

packages/studio-ui/src/web/utils.test.ts

@@ -0,0 +1,25 @@
+import { recursiveSearch } from './util'
+
+test('recursiveSearch', () => {
+  const obj = {
+    sub: {
+      id: 1,
+      type: 'image',
+      micro: {
+        name: 'test',
+        type: 'node'
+      }
+    },
+    id: 2,
+    type: 'standard'
+  }
+  expect(recursiveSearch(obj, 'type')).toEqual(['image', 'node', 'standard'])
+  expect(recursiveSearch(obj, 'other')).toEqual([])
+  expect(recursiveSearch({}, 'type')).toEqual([])
+  expect(recursiveSearch([], 'type')).toEqual([])
+  expect(recursiveSearch(null, 'type')).toEqual([])
+  expect(recursiveSearch(undefined, 'type')).toEqual([])
+  expect(recursiveSearch('string', 'type')).toEqual([])
+  expect(recursiveSearch(1, 'type')).toEqual([])
+  expect(recursiveSearch(obj, '')).toEqual([])
+})

packages/studio-ui/src/web/views/FlowBuilder/common/ActionItem.tsx

@@ -9,7 +9,7 @@ import { fetchContentItem, refreshFlowsLinks } from '~/actions'
 
 import { isMissingCurlyBraceClosure } from '~/components/Util/form.util'
 import { isRTLLocale } from '~/translations'
-import { restoreDots, stripDots } from '~/util'
+import { restoreDots, stripDots, recursiveSearch } from '~/util'
 import withLanguage from '../../../components/Util/withLanguage'
 import { ActionPopover } from './ActionPopover'
 
@@ -65,7 +65,9 @@ class ActionItem extends Component<Props> {
       [style.missingTranslation]: preview?.startsWith('(missing translation) ')
     })
 
-    if (preview && item?.schema?.title === 'image') {
+    const hasImageSubtype = recursiveSearch(item?.schema?.json, '$subtype')?.indexOf('image') !== -1
+
+    if (preview && hasImageSubtype) {
       const markdownRender = (
         <Markdown
           source={preview}

packages/studio-ui/tsconfig.json

@@ -10,8 +10,8 @@
     "target": "es5",
     "lib": ["es7", "dom"],
     "jsx": "react",
-    "typeRoots": ["./node_modules/@types", "src/web/typings.d.ts"],
-    "types": ["bluebird-global"],
+    "typeRoots": ["./node_modules/@types", "src/web/typings.d.ts", "../../node_modules/@types"],
+    "types": ["jest", "bluebird-global"],
     "baseUrl": "./",
     "paths": {
       "~/*": ["src/web/*"],
@@ -21,5 +21,5 @@
     }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": []
+  "exclude": ["**/*.test.ts"]
 }