feat #300 - Address PR comments

package.json

@@ -23,7 +23,7 @@
 		"color": "^3.1.3",
 		"framer-motion": "^2.9.5",
 		"fuse.js": "^6.4.2",
-		"jsonpath-plus": "^5.0.4",
+		"jsonpath-plus": "^5.0.7",
 		"lodash": "^4.17.20",
 		"mark.js": "^8.11.1",
 		"moment": "^2.29.1",

src/components/JSONPathPicker/utils.tsx

@@ -1,8 +1,8 @@
 import { Classes } from './styles'
 import cn from 'classnames'
+import { getJSONPathArr } from 'components/utils'
 import isEmpty from 'lodash/isEmpty'
 import isNull from 'lodash/isNull'
-import { JSONPath } from 'jsonpath-plus'
 import { JSONValue } from '.'
 import React, { ReactNode } from 'react'
 
@@ -12,13 +12,7 @@ enum Relationship {
 	ancestor
 }
 
-/**
- * Takes a JSON path as string and converts to an array
- */
-const getJSONPathArr = (path: string): string[] =>
-	//@ts-ignore
-	JSONPath.toPathArray(path)
-
+const { other, self, ancestor } = Relationship
 /**
  * Gets the relationship between current path and the picked path
  * @returns { Relationship } - Can either be "other", "self" or "ancestor"
@@ -27,26 +21,19 @@ const getPathRelationship = (
 	currPath: string,
 	pickedPath: string
 ): Relationship => {
-	const { other, self, ancestor } = Relationship
-
-	if (!pickedPath) return 0
+	if (!pickedPath) return other
 
-	const pickedAttrs = getJSONPathArr(pickedPath) || []
+	const pickedAttrs = getJSONPathArr(pickedPath)
 	const pickedLen = pickedAttrs.length
 
-	const currAttrs = getJSONPathArr(currPath) || []
+	const currAttrs = getJSONPathArr(currPath)
 	const currLen = currAttrs.length
 
-	if (currLen > pickedLen) return 0
+	if (currLen > pickedLen) return other
 
 	for (let i = 0; i < currLen; i++) {
-		let isInPath: boolean
-
-		if (currAttrs[i] === pickedAttrs[i] || pickedAttrs[i] === '*') {
-			isInPath = true
-		} else {
-			isInPath = false
-		}
+		const isInPath =
+			currAttrs[i] === pickedAttrs[i] || pickedAttrs[i] === '*'
 
 		if (!isInPath) return other
 	}
@@ -78,6 +65,8 @@ enum Types {
 	string = 'string'
 }
 
+const { array, boolean, null: nullType, number, object, string } = Types
+
 // -----------------------------------------------------
 
 const renderComma = ({
@@ -247,35 +236,35 @@ const renderString = ({
 // -------------------------------------------------
 
 const mappedTypesToRenderFns = {
-	[Types.array]: renderArray,
-	[Types.boolean]: (params: RenderParams) =>
-		renderPrimitive({ ...params, type: Types.boolean }),
-	[Types.null]: (params: RenderParams) =>
-		renderPrimitive({ ...params, type: Types.null }),
-	[Types.number]: (params: RenderParams) =>
-		renderPrimitive({ ...params, type: Types.number }),
-	[Types.object]: renderObject,
-	[Types.string]: renderString
+	[array]: renderArray,
+	[boolean]: (params: RenderParams) =>
+		renderPrimitive({ ...params, type: boolean }),
+	[nullType]: (params: RenderParams) =>
+		renderPrimitive({ ...params, type: nullType }),
+	[number]: (params: RenderParams) =>
+		renderPrimitive({ ...params, type: number }),
+	[object]: renderObject,
+	[string]: renderString
 }
 
 const getRemainingJSONType = (remainingJSON: RemainingJSON) => {
-	if (isNull(remainingJSON)) return Types.null
-	else if (Array.isArray(remainingJSON)) return Types.array
+	if (isNull(remainingJSON)) return nullType
+	else if (Array.isArray(remainingJSON)) return array
 	else {
 		const type = typeof remainingJSON
 
 		switch (type) {
 			case 'number':
 			case 'bigint':
-				return Types.number
+				return number
 			case 'object':
-				return Types.object
+				return object
 			case 'string':
-				return Types.string
+				return string
 			case 'boolean':
-				return Types.boolean
+				return boolean
 			default:
-				return Types.null
+				return nullType
 		}
 	}
 }
@@ -297,4 +286,4 @@ export const recursiveRender = ({
 		remainingJSON
 	})
 
-// -x-x-x-x--x-x-x-x--x-x-x-x--x-x-x-x--x-x-x-x-
+/* -x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x- */

src/components/Table/utils.tsx

@@ -3,9 +3,7 @@ import bytes from 'bytes'
 import { CellWithTooltip } from './CellWithTooltip'
 import { ColoredDot } from 'components/ColoredDot'
 import { EditableCell } from './EditableCell'
-import { getJSONPathValue } from 'components/utils'
 import isUndefined from 'lodash/isUndefined'
-import { JSONPath } from 'jsonpath-plus'
 import moment from 'moment'
 import {
 	ColumnFormats,
@@ -20,6 +18,7 @@ import {
 	RenderPropsIcon
 } from './types'
 import { defaultIconHeight, MultipleIcons } from './MultipleIcons'
+import { getJSONPathArr, getJSONPathValue } from 'components/utils'
 import { Icon, IconName, IconProps } from '../Icon'
 import { Link, LinkProps } from '../Link'
 import React, { Key, MouseEvent } from 'react'
@@ -106,8 +105,7 @@ export function processData<TableData extends DataId>(
 				partialData[dataIndex as keyof TableData] = value
 			}
 
-			//@ts-ignore
-			const pathArr: string[] = JSONPath.toPathArray(`$.${dataIndex}`)
+			const pathArr: string[] = getJSONPathArr(`$.${dataIndex}`)
 
 			if (pathArr && pathArr.length) {
 				partialData[pathArr[0] as keyof TableData] = item[pathArr[0]]

src/components/utils.ts

@@ -134,6 +134,12 @@ export const getJSONPathValue = (path: string, obj: Record<string, any>) => {
 	if (value && Array.isArray(value)) return value[0]
 }
 
+/**
+ * Takes a JSON path as string and converts to an array
+ */
+export const getJSONPathArr = (path: string): string[] =>
+	JSONPath.toPathArray(path)
+
 export const getPopupContainerProps = (
 	popupContainerSelector = ''
 ): PopupContainerProps => {