From f1fe4f5a5265008507ee29ff7e92149fc2869a82 Mon Sep 17 00:00:00 2001
From: John Kaster <kaster@google.com>
Date: Mon, 15 Nov 2021 08:46:11 -0800
Subject: [PATCH] fix: make sheetCell always return a Span (#907)

`<Tooltip />` now requires an element
---
 packages/hackathon/README.md                 |  1 +
 packages/hackathon/src/models/sheetUtils.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/hackathon/README.md b/packages/hackathon/README.md
index 8f23b66de..de0cfcec0 100644
--- a/packages/hackathon/README.md
+++ b/packages/hackathon/README.md
@@ -38,6 +38,7 @@ application: hackathon {
       "https://*.slack.com/*",
       "https://*.github.com/*",
       "https://*.youtube.com/*",
+      "https://*.youtu.be/*",
       "https://*.vimeo.com/*"
       ]
     use_form_submit: yes
diff --git a/packages/hackathon/src/models/sheetUtils.tsx b/packages/hackathon/src/models/sheetUtils.tsx
index 945b94ec5..58c55fe2c 100644
--- a/packages/hackathon/src/models/sheetUtils.tsx
+++ b/packages/hackathon/src/models/sheetUtils.tsx
@@ -25,7 +25,7 @@
  */
 import type { SheetValues } from '@looker/wholly-sheet'
 import type { DataTableColumn, DataTableColumns } from '@looker/components'
-import { Icon } from '@looker/components'
+import { Span, Icon } from '@looker/components'
 import { Done } from '@styled-icons/material/Done'
 import React from 'react'
 
@@ -86,10 +86,10 @@ export const sheetHeader = (header: string[], row: any) => {
  * @param value to convert to displayable actionitem
  */
 export const sheetCell = (value: any) => {
-  if (typeof value === 'undefined') return ''
+  if (typeof value === 'undefined') return <Span></Span>
 
   if (typeof value === 'boolean') {
-    return value ? <Icon size="small" icon={<Done />} /> : ''
+    return value ? <Icon size="small" icon={<Done />} /> : <Span></Span>
   }
 
   if (value instanceof Set) {
@@ -98,10 +98,10 @@ export const sheetCell = (value: any) => {
     for (const v of value.values()) {
       values.push(v.toString())
     }
-    return values.join(', ')
+    return <Span>{values.join(', ')}</Span>
   }
   if (value instanceof Date) {
-    return value.toDateString()
+    return <Span>{value.toDateString()}</Span>
   }
-  return value.toString()
+  return <Span>{value.toString()}</Span>
 }