fix(frontend): Better CopyToClipboardInline typing (#18723)

* Type `CopyToClipboardInline` narrowly instead of throwing error * Fix issues at `CopyToClipboardInline` call sites * Add `PropertiesTable ` story along with snapshots * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Nov 17, 2023 · e2df3a1 · e2df3a1
1 parent 4557575
commit e2df3a1
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 23 deletions.
diff --git a/frontend/__snapshots__/components-properties-table--properties-table.png b/frontend/__snapshots__/components-properties-table--properties-table.png
diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -4,9 +4,7 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { IconCopy } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 
-interface InlineProps extends HTMLProps<HTMLSpanElement> {
-    children?: JSX.Element | string
-    explicitValue?: string
+interface InlinePropsBase extends HTMLProps<HTMLSpanElement> {
     description?: string
     /** Makes text selectable instead of copying on click anywhere */
     selectable?: boolean
@@ -16,6 +14,15 @@ interface InlineProps extends HTMLProps<HTMLSpanElement> {
     iconPosition?: 'end' | 'start'
     style?: React.CSSProperties
 }
+interface InlinePropsWithStringInside extends InlinePropsBase {
+    children: string
+    explicitValue?: string
+}
+interface InlinePropsWithJSXInside extends InlinePropsBase {
+    children?: JSX.Element
+    explicitValue: string
+}
+type InlineProps = InlinePropsWithStringInside | InlinePropsWithJSXInside
 
 export function CopyToClipboardInline({
     children,
@@ -29,10 +36,6 @@ export function CopyToClipboardInline({
     style,
     ...props
 }: InlineProps): JSX.Element {
-    if (typeof children !== 'string' && !explicitValue) {
-        throw new Error('CopyToClipboardInline must have a string child or explicitValue prop')
-    }
-
     const copy = async (): Promise<boolean> => await copyToClipboard((explicitValue ?? children) as string, description)
 
     const content = (
@@ -54,7 +57,7 @@ export function CopyToClipboardInline({
             onClick={!selectable ? copy : undefined}
             {...props}
         >
-            <span className={iconPosition === 'start' ? 'grow-1' : undefined}>{children}</span>
+            {children && <span className={iconPosition === 'start' ? 'grow-1' : undefined}>{children}</span>}
             <LemonButton
                 size="small"
                 icon={<IconCopy style={{ ...iconStyle }} />}

diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { PropertiesTable as PropertiesTableComponent } from '.'
+import { PropertyDefinitionType } from '~/types'
+
+const meta: Meta<typeof PropertiesTableComponent> = {
+    title: 'Components/Properties Table',
+    component: PropertiesTableComponent,
+}
+export default meta
+
+export const PropertiesTable: StoryFn = () => {
+    const properties = {
+        name: 'John Doe',
+        age: 30,
+        url: 'https://www.google.com',
+        is_good: true,
+        evil_level: null,
+        tags: ['best', 'cool', 'awesome'],
+        location: {
+            city: 'Prague',
+            country: 'Czechia',
+        },
+    }
+    return <PropertiesTableComponent type={PropertyDefinitionType.Event} properties={properties} />
+}
diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -283,13 +283,10 @@ export function PropertiesTable({
             title: '',
             width: 0,
             render: function Copy(_, item: any): JSX.Element | false {
-                if (Array.isArray(item[1]) || item[1] instanceof Object || item[1] === null) {
-                    return false
-                }
                 return (
                     <CopyToClipboardInline
                         description="property value"
-                        explicitValue={item[1]}
+                        explicitValue={typeof item[1] === 'object' ? JSON.stringify(item[1]) : String(item[1])}
                         selectable
                         isValueSensitive
                         style={{ verticalAlign: 'middle' }}

diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -529,12 +529,14 @@ export function Experiment(): JSX.Element {
                                 title={`${experiment?.name}`}
                                 buttons={
                                     <>
-                                        <CopyToClipboardInline
-                                            explicitValue={experiment.feature_flag?.key}
-                                            iconStyle={{ color: 'var(--muted-alt)' }}
-                                        >
-                                            <span className="text-muted">{experiment.feature_flag?.key}</span>
-                                        </CopyToClipboardInline>
+                                        {experiment.feature_flag && (
+                                            <CopyToClipboardInline
+                                                explicitValue={experiment.feature_flag.key}
+                                                iconStyle={{ color: 'var(--muted-alt)' }}
+                                            >
+                                                <span className="text-muted">{experiment.feature_flag.key}</span>
+                                            </CopyToClipboardInline>
+                                        )}
                                         <StatusTag experiment={experiment} />
                                         <ResultsTag />
                                     </>

diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx
@@ -40,7 +40,7 @@ export function ConfigureSAMLModal(): JSX.Element {
                         <CopyToClipboardInline>{`${siteUrl}/complete/saml/`}</CopyToClipboardInline>
                     </Field>
                     <Field label="RelayState" name="_RelayState">
-                        <CopyToClipboardInline>{configureSAMLModalId ?? undefined}</CopyToClipboardInline>
+                        <CopyToClipboardInline>{configureSAMLModalId || 'unknown'}</CopyToClipboardInline>
                     </Field>
                     <Field label="Audience / Entity ID" name="_Audience">
                         <CopyToClipboardInline>{siteUrl}</CopyToClipboardInline>

diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx
@@ -51,9 +51,11 @@ export function VerifyDomainModal(): JSX.Element {
                                     <div className="border rounded p-2 h-10 flex-1">
                                         {domainBeingVerified?.verification_challenge}
                                     </div>
-                                    <CopyToClipboardInline
-                                        explicitValue={domainBeingVerified?.verification_challenge}
-                                    />
+                                    {domainBeingVerified && (
+                                        <CopyToClipboardInline
+                                            explicitValue={domainBeingVerified.verification_challenge}
+                                        />
+                                    )}
                                 </div>
                             </PureField>
                             <PureField label="TTL">

diff --git a/frontend/src/scenes/settings/user/PersonalAPIKeys.tsx b/frontend/src/scenes/settings/user/PersonalAPIKeys.tsx
@@ -90,7 +90,9 @@ function PersonalAPIKeysTable(): JSX.Element {
                     dataIndex: 'value',
                     render: function RenderValue(value) {
                         return value ? (
-                            <CopyToClipboardInline description="personal API key value">{`${value}`}</CopyToClipboardInline>
+                            <CopyToClipboardInline description="personal API key value">
+                                {String(value)}
+                            </CopyToClipboardInline>
                         ) : (
                             <i>secret</i>
                         )