fix: Address PR feedback

pinterest · Jan 5, 2023 · a030692 · a030692
1 parent 89591b2
commit a030692
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "querybook",
-    "version": "3.15.6",
+    "version": "3.16.0",
     "description": "A Big Data Webapp",
     "private": true,
     "scripts": {

diff --git a/querybook/webapp/__tests__/lib/utils/complex-types.test.ts b/querybook/webapp/__tests__/lib/utils/complex-types.test.ts
@@ -1,13 +1,40 @@
 import { parseType, prettyPrintType } from 'lib/utils/complex-types';
 
-test('parseType', () => {
+test('simple type', () => {
     expect(parseType('column', 'string')).toEqual({
         key: 'column',
         type: 'string',
     });
+});
+
+test('truncated type', () => {
+    expect(
+        parseType(
+            'column',
+            'struct<date:struct<year:int,month:int,day:int>,hour:int,minute:int,second:int,'
+        )
+    ).toEqual({
+        key: 'column',
+        type: 'struct<date:struct<year:int,month:int,day:int>,hour:int,minute:int,second:int,',
+    });
+
+    // Truncated, but coincidentally matches the regex
+    expect(parseType('column', 'struct<date:struct<hour:int>')).toEqual({
+        key: 'column',
+        type: 'struct<date:struct<hour:int>',
+    });
+});
 
-    expect(parseType('', 'STRUCT<id:string>')).toEqual({
-        key: '',
+test('malformed struct type', () => {
+    expect(parseType('column', 'STRUCT <id:string>')).toEqual({
+        key: 'column',
+        type: 'STRUCT <id:string>',
+    });
+});
+
+test('complex type', () => {
+    expect(parseType('column', 'STRUCT<id:string>')).toEqual({
+        key: 'column',
         type: 'STRUCT<id:string>',
         children: [
             {
@@ -17,11 +44,6 @@ test('parseType', () => {
         ],
     });
 
-    expect(parseType('', 'STRUCT <id:string>')).toEqual({
-        key: '',
-        type: 'STRUCT <id:string>',
-    });
-
     expect(
         parseType(
             'column',

diff --git a/querybook/webapp/components/DataTableViewColumn/DataTableColumnCard.tsx b/querybook/webapp/components/DataTableViewColumn/DataTableColumnCard.tsx
@@ -3,14 +3,15 @@ import * as React from 'react';
 
 import { DataTableColumnStats } from 'components/DataTableStats/DataTableColumnStats';
 import { IDataColumn } from 'const/metastore';
-import { ComplexType, parseType } from 'lib/utils/complex-types';
-import { IconButton } from 'ui/Button/IconButton';
+import { parseType } from 'lib/utils/complex-types';
 import { Card } from 'ui/Card/Card';
 import { EditableTextField } from 'ui/EditableTextField/EditableTextField';
 import { Icon } from 'ui/Icon/Icon';
 import { KeyContentDisplay } from 'ui/KeyContentDisplay/KeyContentDisplay';
 import { AccentText, StyledText } from 'ui/StyledText/StyledText';
 
+import { DataTableColumnCardNestedType } from './DataTableColumnCardNestedType';
+
 import './DataTableColumnCard.scss';
 
 interface IProps {
@@ -82,57 +83,3 @@ export const DataTableColumnCard: React.FunctionComponent<IProps> = ({
         </div>
     );
 };
-
-interface IDataTableColumnCardNestedTypeProps {
-    complexType: ComplexType;
-}
-export const DataTableColumnCardNestedType: React.FunctionComponent<
-    IDataTableColumnCardNestedTypeProps
-> = ({ complexType }) => {
-    const hasChildren = complexType.children?.length > 0;
-    const [expanded, setExpanded] = React.useState(false);
-
-    const rowProps = {
-        className: 'flex-row',
-    };
-
-    if (hasChildren) {
-        rowProps['onClick'] = () => setExpanded(!expanded);
-        rowProps['aria-label'] = expanded
-            ? 'click to collapse'
-            : 'click to expand';
-        rowProps['data-balloon-pos'] = 'down-left';
-    }
-
-    return (
-        <div className="DataTableColumnCardNestedType">
-            <div {...rowProps}>
-                {hasChildren && (
-                    <IconButton
-                        icon={expanded ? 'Minus' : 'Plus'}
-                        size="16"
-                        noPadding={true}
-                        className="expand-icon"
-                    />
-                )}
-
-                <StyledText
-                    color="light"
-                    className={`column-type mr12 ${
-                        !hasChildren && 'nested-indent'
-                    }`}
-                >
-                    {complexType.type}
-                </StyledText>
-                <AccentText weight="extra">{complexType.key}</AccentText>
-            </div>
-            {hasChildren &&
-                expanded &&
-                complexType.children?.map((child) => (
-                    <div className="nested-indent m16" key={child.key}>
-                        <DataTableColumnCardNestedType complexType={child} />
-                    </div>
-                ))}
-        </div>
-    );
-};
diff --git a/querybook/webapp/components/DataTableViewColumn/DataTableColumnCardNestedType.tsx b/querybook/webapp/components/DataTableViewColumn/DataTableColumnCardNestedType.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { ComplexType } from 'lib/utils/complex-types';
+import { IconButton } from 'ui/Button/IconButton';
+import { AccentText, StyledText } from 'ui/StyledText/StyledText';
+
+interface IDataTableColumnCardNestedTypeProps {
+    complexType: ComplexType;
+}
+export const DataTableColumnCardNestedType: React.FunctionComponent<
+    IDataTableColumnCardNestedTypeProps
+> = ({ complexType }) => {
+    const hasChildren = complexType.children?.length > 0;
+    const [expanded, setExpanded] = React.useState(false);
+
+    const rowProps = {
+        className: 'flex-row',
+    };
+
+    if (hasChildren) {
+        rowProps['onClick'] = () => setExpanded(!expanded);
+        rowProps['aria-label'] = expanded
+            ? 'click to collapse'
+            : 'click to expand';
+        rowProps['data-balloon-pos'] = 'down-left';
+    }
+
+    return (
+        <div className="DataTableColumnCardNestedType">
+            <div {...rowProps}>
+                {hasChildren && (
+                    <IconButton
+                        icon={expanded ? 'Minus' : 'Plus'}
+                        size="16"
+                        noPadding={true}
+                        className="expand-icon"
+                    />
+                )}
+                <AccentText weight="extra" className="mr12">
+                    {complexType.key}
+                </AccentText>
+                <StyledText
+                    color="light"
+                    className={`column-type ${!hasChildren && 'nested-indent'}`}
+                >
+                    {complexType.type}
+                </StyledText>
+            </div>
+            {hasChildren &&
+                expanded &&
+                complexType.children?.map((child) => (
+                    <div className="nested-indent m16" key={child.key}>
+                        <DataTableColumnCardNestedType complexType={child} />
+                    </div>
+                ))}
+        </div>
+    );
+};
diff --git a/querybook/webapp/lib/utils/complex-types.ts b/querybook/webapp/lib/utils/complex-types.ts
@@ -29,7 +29,7 @@ export interface ComplexType {
     }
  */
 export function parseType(key: string, type: string): ComplexType {
-    const regex = /(struct|array|map|uniontype)<(.*)>/i;
+    const regex = /^(struct|array|map|uniontype)<(.*)>$/i;
     const matches = type.match(regex);
 
     if (!matches || matches.length < 3) {
@@ -89,6 +89,11 @@ export function parseStructType(
         }
     }
 
+    if (depth > 0) {
+        // Truncated or malformed type, return as-is
+        return { key, type };
+    }
+
     children.push(parseType(currentKey, currentVal));
 
     const structType: ComplexType = {
@@ -129,6 +134,11 @@ export function parseMapType(
         }
     }
 
+    if (depth > 0) {
+        // Truncated or malformed type, return as-is
+        return { key, type };
+    }
+
     children.push(parseType('<key>', currentKey));
     children.push(parseType('<value>', currentVal));
 
@@ -169,6 +179,11 @@ export function parseUnionType(
         }
     }
 
+    if (depth > 0) {
+        // Truncated or malformed type, return as-is
+        return { key, type };
+    }
+
     children.push(parseType('<element>', currentVal));
 
     const unionType: ComplexType = {