enhancement #350, #351 - Updates for Policy Hub (#352)

Closes #350
Closes #351

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.11.5",
+	"version": "0.11.6",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},

src/components/Table/CellWithTooltip.tsx

@@ -19,10 +19,12 @@ const useStyles = createUseStyles({
 })
 
 interface CellWithTooltipProps {
+	showTooltip?: boolean
 	text: string
 }
 
 export const CellWithTooltip: FC<CellWithTooltipProps> = ({
+	showTooltip = true,
 	text
 }: CellWithTooltipProps) => {
 	const [hasTooltip, setHasTooltip] = useState(false)
@@ -31,7 +33,7 @@ export const CellWithTooltip: FC<CellWithTooltipProps> = ({
 
 	const classes = useStyles()
 
-	return isMobile ? (
+	return isMobile || !showTooltip ? (
 		<>{text}</>
 	) : (
 		<div className={classes.container}>

src/components/Table/__tests__/Table.sort.test.ts

@@ -75,6 +75,28 @@ describe('Table sort: Column type - "string', () => {
 		])
 	})
 
+	it('sorts columns with array values in correct ascending and correct descending order', () => {
+		const sorter = wrapper.find('thead').find('th').at(2)
+
+		const ascendingOrder = [
+			['apples, bananas'],
+			['blueberries, peaches'],
+			['mangoes, papayas'],
+			['nectarines, plums, raspberries'],
+			['oranges, pears']
+		]
+
+		// ascending order
+		sorter.simulate('click')
+		expect(renderedData(wrapper, 'description')).toEqual(ascendingOrder)
+
+		// descending order
+		sorter.simulate('click')
+		expect(renderedData(wrapper, 'description')).toEqual(
+			ascendingOrder.reverse()
+		)
+	})
+
 	it('sorts columns with missing cells in correct ascending and correct descending order', () => {
 		wrapper = mount(createTable<Client1>(mockData3))
 		const sorter = wrapper.find('.ant-table-column-has-sorters').first()

src/components/Table/__tests__/utils.test.tsx

@@ -64,6 +64,12 @@ describe('processColumns', () => {
 				showSorterTooltip: false,
 				sorter: expect.any(Function),
 				title: 'Age'
+			},
+			{
+				dataIndex: 'description',
+				showSorterTooltip: false,
+				sorter: expect.any(Function),
+				title: 'Description'
 			}
 		]
 
@@ -168,7 +174,12 @@ describe('processData', () => {
 
 describe('mapFilterKeys', () => {
 	it('returns all column keys that should be searched or filtered on', () => {
-		const mockFilteredKeys0 = ['_FORMATTED_DATA', 'name', 'age']
+		const mockFilteredKeys0 = [
+			'_FORMATTED_DATA',
+			'name',
+			'age',
+			'description'
+		]
 		const mockFilteredKeys2 = [
 			'_FORMATTED_DATA',
 			'name',

src/components/Table/fixtures/0_sample_data.ts

@@ -4,6 +4,7 @@ export interface Person {
 	name: string
 	id: number | string
 	age: number
+	description: string[]
 }
 
 const { number, string } = ColumnTypes
@@ -18,32 +19,42 @@ const columns: ColumnType[] = [
 		dataIndex: 'age',
 		title: 'Age',
 		type: number
+	},
+	{
+		dataIndex: 'description',
+		title: 'Description',
+		type: string
 	}
 ]
 
 const data: Person[] = [
 	{
 		age: 36,
+		description: ['apples, bananas'],
 		id: 0,
 		name: 'Lorem'
 	},
 	{
 		age: 32,
+		description: ['oranges, pears'],
 		id: 1,
 		name: 'Ipsum'
 	},
 	{
 		age: 45,
+		description: ['blueberries, peaches'],
 		id: 2,
 		name: 'Amet'
 	},
 	{
 		age: 50,
+		description: ['nectarines, plums, raspberries'],
 		id: 3,
 		name: 'Elit'
 	},
 	{
 		age: 22,
+		description: ['mangoes, papayas'],
 		id: 4,
 		name: 'Dolor'
 	}

src/components/Table/utils.tsx

@@ -174,22 +174,29 @@ export function mapFilterKeys(columns: ColumnType[]) {
 
 /* -*-*-*-*-*- Helpers for parsing columns -*-*-*-*-*- */
 
-const compareIcons = (column: ComponentIconType) => (
-	a: Record<string, any>,
-	b: Record<string, any>
-) => {
-	const {
-		dataIndex,
-		renderProps: { iconKey }
-	} = column
+const compareIcons =
+	(column: ComponentIconType) =>
+	(a: Record<string, any>, b: Record<string, any>) => {
+		const {
+			dataIndex,
+			renderProps: { iconKey }
+		} = column
+
+		const jsonPath = iconKey
+			? `$.${dataIndex}.${iconKey}`
+			: `$.${dataIndex}`
 
-	const jsonPath = iconKey ? `$.${dataIndex}.${iconKey}` : `$.${dataIndex}`
+		const compareValA = getJSONPathValue(jsonPath, a) || ''
 
-	const compareValA = getJSONPathValue(jsonPath, a) || ''
+		const compareValB = getJSONPathValue(jsonPath, b) || ''
+
+		return compareValA.localeCompare(compareValB)
+	}
 
-	const compareValB = getJSONPathValue(jsonPath, b) || ''
+const getStrVal = (value?: string | string[]) => {
+	if (!value) return ''
 
-	return compareValA.localeCompare(compareValB)
+	return Array.isArray(value) ? value.join(', ') : value
 }
 
 /* 
@@ -198,10 +205,10 @@ const compareIcons = (column: ComponentIconType) => (
  */
 function compareStrings(column: ColumnType) {
 	return (a: Record<string, any>, b: Record<string, any>) => {
-		const compareValA: string = a[column.dataIndex] || ''
-		const compareValB: string = b[column.dataIndex] || ''
+		const valA = getStrVal(a[column.dataIndex])
+		const valB = getStrVal(b[column.dataIndex])
 
-		return compareValA.localeCompare(compareValB)
+		return valA.localeCompare(valB)
 	}
 }
 
@@ -295,16 +302,8 @@ function applyRender<TableData extends DataId>(
 	tableMethods: TableMethods<TableData>
 ) {
 	const { component, number, string } = ColumnTypes
-	const {
-		action,
-		byte,
-		date,
-		icon,
-		coloredDot,
-		link,
-		tag,
-		toggle
-	} = ColumnFormats
+	const { action, byte, date, icon, coloredDot, link, tag, toggle } =
+		ColumnFormats
 	const { updateRowData } = tableMethods
 
 	switch (column.type) {
@@ -356,11 +355,17 @@ function applyRender<TableData extends DataId>(
 						break
 					}
 				}
-			} else if (ellipsis) {
-				antDColumn.render = (record: string) => (
-					<CellWithTooltip text={record} />
+			} else {
+				antDColumn.render = (record: string | string[]) => (
+					<CellWithTooltip
+						showTooltip={ellipsis}
+						text={
+							Array.isArray(record) ? record.join(', ') : record
+						}
+					/>
 				)
 			}
+
 			break
 		}
 
@@ -416,9 +421,8 @@ function applyRender<TableData extends DataId>(
 
 						switch (type) {
 							case 'icon': {
-								const {
-									iconMap
-								} = renderProps as RenderPropsIcon
+								const { iconMap } =
+									renderProps as RenderPropsIcon
 
 								return { icon: iconMap[val] }
 							}

src/components/Tabs/TabPane.tsx

@@ -11,6 +11,7 @@ const useStyles = createUseStyles({
 	tabPane: {
 		...font.body,
 		display: ({ isActive }) => (isActive ? 'block' : 'none'),
+		height: '100%',
 		padding: `${spacing.m}px ${spacing.l}px`
 	}
 })
@@ -30,18 +31,17 @@ const TabPane: FC<TabPaneProps> = ({
 
 	return (
 		<LazyMotion features={domAnimation}>
-			<motion.section
+			<motion.div
 				animate={isActive ? ACTIVE : INACTIVE}
+				className={cn(compClasses.tabPane, classes)}
 				transition={{ duration: 0.5 }}
 				variants={{
 					[ACTIVE]: { opacity: 1 },
 					[INACTIVE]: { opacity: 0 }
 				}}
 			>
-				<div className={cn(compClasses.tabPane, classes)}>
-					{render()}
-				</div>
-			</motion.section>
+				{render()}
+			</motion.div>
 		</LazyMotion>
 	)
 }