diff --git a/frontend/__snapshots__/components-properties-table--properties-table.png b/frontend/__snapshots__/components-properties-table--properties-table.png new file mode 100644 index 0000000000000..0ebb3a71ccb83 Binary files /dev/null and b/frontend/__snapshots__/components-properties-table--properties-table.png differ diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx index bf19ae2d3f782..4ffd1456cef3f 100644 --- 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 { - children?: JSX.Element | string - explicitValue?: string +interface InlinePropsBase extends HTMLProps { description?: string /** Makes text selectable instead of copying on click anywhere */ selectable?: boolean @@ -16,6 +14,15 @@ interface InlineProps extends HTMLProps { 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 => await copyToClipboard((explicitValue ?? children) as string, description) const content = ( @@ -54,7 +57,7 @@ export function CopyToClipboardInline({ onClick={!selectable ? copy : undefined} {...props} > - {children} + {children && {children}} } diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx new file mode 100644 index 0000000000000..4a577e8c10741 --- /dev/null +++ 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 = { + 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 +} diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx index 6729d55ee42b4..1344eed38581f 100644 --- 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 ( - - {experiment.feature_flag?.key} - + {experiment.feature_flag && ( + + {experiment.feature_flag.key} + + )} diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/ConfigureSAMLModal.tsx index 2d8304b40ca7f..a950609c6fa02 100644 --- 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 { {`${siteUrl}/complete/saml/`} - {configureSAMLModalId ?? undefined} + {configureSAMLModalId || 'unknown'} {siteUrl} diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/VerifyDomainModal.tsx index 6fcc0606652c1..f461bb2ef737b 100644 --- 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 {
{domainBeingVerified?.verification_challenge}
- + {domainBeingVerified && ( + + )} diff --git a/frontend/src/scenes/settings/user/PersonalAPIKeys.tsx b/frontend/src/scenes/settings/user/PersonalAPIKeys.tsx index f9f79327e1ba4..aca059f1e1fd5 100644 --- 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 ? ( - {`${value}`} + + {String(value)} + ) : ( secret )