From 38fbb4aebe6bf43d3557a44f16bf52517c256bed Mon Sep 17 00:00:00 2001
From: Radek Podrazky <rpodrazky@securityscorecard.io>
Date: Mon, 10 Aug 2020 15:15:49 +0200
Subject: [PATCH] fix(ArgValue): fix wrong union type splitting

---
 .../src/blocks/ArgsTable/ArgRow.stories.tsx   | 18 +++++++++++++++
 .../src/blocks/ArgsTable/ArgValue.tsx         | 23 +++++++++++++++----
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
index 6277a3f00646..4dacd38b00bf 100644
--- a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
@@ -298,6 +298,24 @@ LongEnum.args = {
   },
 };
 
+export const complex_union =
+  '((a: string | SVGSVGElement) => void) | RefObject<SVGSVGElement | number> | [a|b] | {a|b}';
+
+export const ComplexUnion = Template.bind({});
+ComplexUnion.args = {
+  ...baseArgs,
+  row: {
+    key: 'complexUnion',
+    name: 'Complex',
+    type: { required: true },
+    table: {
+      type: {
+        summary: complex_union,
+      },
+    },
+  },
+};
+
 export const Markdown = Template.bind({});
 Markdown.args = {
   ...baseArgs,
diff --git a/lib/components/src/blocks/ArgsTable/ArgValue.tsx b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
index 9a08b8e8d2e8..14e15015851f 100644
--- a/lib/components/src/blocks/ArgsTable/ArgValue.tsx
+++ b/lib/components/src/blocks/ArgsTable/ArgValue.tsx
@@ -15,6 +15,7 @@ interface ArgValueProps {
 
 interface ArgTextProps {
   text: string;
+  simple?: boolean;
 }
 
 interface ArgSummaryProps {
@@ -30,19 +31,27 @@ const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
   flexWrap: 'wrap',
   alignItems: 'flex-start',
   marginBottom: '-4px',
+  minWidth: 100,
 }));
 
-const Text = styled.span<{}>(codeCommon, ({ theme }) => ({
-  flex: 0,
+const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ theme, simple = false }) => ({
+  flex: '0 0 auto',
   fontFamily: theme.typography.fonts.mono,
   fontSize: theme.typography.size.s1,
   wordBreak: 'break-word',
+  whiteSpace: 'normal',
+  maxWidth: '100%',
   margin: 0,
   marginRight: '4px',
   marginBottom: '4px',
   paddingTop: '2px',
   paddingBottom: '2px',
   lineHeight: '13px',
+  ...(simple && {
+    background: 'transparent',
+    border: '0 none',
+    paddingLeft: 0,
+  }),
 }));
 
 const ExpandButton = styled.button<{}>(({ theme }) => ({
@@ -90,8 +99,8 @@ const EmptyArg = () => {
   return <span>-</span>;
 };
 
-const ArgText: FC<ArgTextProps> = ({ text }) => {
-  return <Text>{text}</Text>;
+const ArgText: FC<ArgTextProps> = ({ text, simple }) => {
+  return <Text simple={simple}>{text}</Text>;
 };
 
 const calculateDetailWidth = memoize(1000)((detail: string): string => {
@@ -129,6 +138,12 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
   const summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
 
   if (detail == null) {
+    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
+
+    if (cannotBeSafelySplitted) {
+      return <ArgText text={summaryAsString} simple={summaryAsString.includes('|')} />;
+    }
+
     const summaryItems = getSummaryItems(summaryAsString);
     const itemsCount = summaryItems.length;
     const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;