Skip to content

Commit

Permalink
chore: remove antd from feature success (#18708)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin authored Nov 20, 2023
1 parent ff4bfee commit 60df2a5
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 104 deletions.
Binary file modified frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 13 additions & 16 deletions frontend/src/scenes/experiments/SecondaryMetrics.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Col, Row } from 'antd'
import { useActions, useValues } from 'kea'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { Form } from 'kea-forms'
Expand Down Expand Up @@ -163,11 +162,11 @@ export function SecondaryMetrics({
</Form>
</LemonModal>
{experimentId == 'new' || editingExistingExperiment ? (
<Row>
<Col>
<div className="flex">
<div>
{metrics.map((metric, idx) => (
<Row key={idx} className="mt-4 border rounded p-4">
<Row align="middle" justify="space-between" className="w-full mb-3 pb-2 border-b">
<div key={idx} className="mt-4 border rounded p-4">
<div className="flex items-center justify-between w-full mb-3 pb-2 border-b">
<div>
<b>{metric.name}</b>
</div>
Expand All @@ -185,7 +184,7 @@ export function SecondaryMetrics({
onClick={() => deleteMetric(idx)}
/>
</div>
</Row>
</div>
{metric.filters.insight === InsightType.FUNNELS && (
<ActionFilter
bordered
Expand Down Expand Up @@ -226,19 +225,17 @@ export function SecondaryMetrics({
readOnly={true}
/>
)}
</Row>
</div>
))}
{metrics && !(metrics.length > 2) && (
<Col>
<div className="mb-2 mt-4">
<LemonButton type="secondary" onClick={openModalToCreateSecondaryMetric}>
Add metric
</LemonButton>
</div>
</Col>
<div className="mb-2 mt-4">
<LemonButton type="secondary" onClick={openModalToCreateSecondaryMetric}>
Add metric
</LemonButton>
</div>
)}
</Col>
</Row>
</div>
</div>
) : (
<>
<div className="card-secondary mt-4 mb-1">Secondary metrics</div>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/scenes/feature-flags/FeatureFlag.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.variant-form-list {
.VariantFormList {
font-size: 13px;
border: 1px solid var(--border);
border-radius: var(--radius);
Expand All @@ -19,6 +19,10 @@
align-items: center;
}
}

.VariantFormList__row {
grid-template-columns: repeat(24, minmax(0, 1fr));
}
}

.feature-flag-property-display {
Expand Down
155 changes: 75 additions & 80 deletions frontend/src/scenes/feature-flags/FeatureFlag.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import { Form, Group } from 'kea-forms'
import { Row, Col, Radio, Popconfirm, Skeleton, Card } from 'antd'
import { Radio, Popconfirm, Skeleton, Card } from 'antd'
import { useActions, useValues } from 'kea'
import { alphabet, capitalizeFirstLetter } from 'lib/utils'
import { featureFlagLogic } from './featureFlagLogic'
Expand Down Expand Up @@ -78,7 +78,7 @@ export const scene: SceneExport = {

function focusVariantKeyField(index: number): void {
setTimeout(
() => document.querySelector<HTMLElement>(`.variant-form-list input[data-key-index="${index}"]`)?.focus(),
() => document.querySelector<HTMLElement>(`.VariantFormList input[data-key-index="${index}"]`)?.focus(),
50
)
}
Expand Down Expand Up @@ -732,17 +732,17 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
<>
<h3 className="l3">Variant keys</h3>
<div className="border rounded p-4 mb-4 bg-bg-light">
<Row gutter={16} className="font-semibold">
<Col span={6}>Key</Col>
<Col span={6}>Description</Col>
<Col span={9}>Payload</Col>
<Col span={3}>Rollout</Col>
</Row>
<div className="grid grid-cols-8 gap-4 font-semibold">
<div className="col-span-2">Key</div>
<div className="col-span-2">Description</div>
<div className="col-span-3">Payload</div>
<div>Rollout</div>
</div>
<LemonDivider className="my-3" />
{variants.map((variant, index) => (
<div key={index}>
<Row gutter={16}>
<Col span={6}>
<div className="grid grid-cols-8 gap-4">
<div className="col-span-2">
<Lettermark name={alphabet[index]} color={LettermarkColor.Gray} />
<CopyToClipboardInline
tooltipMessage={null}
Expand All @@ -754,13 +754,13 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
>
{variant.key}
</CopyToClipboardInline>
</Col>
<Col span={6}>
</div>
<div className="col-span-2">
<span className={variant.name ? '' : 'text-muted'}>
{variant.name || 'There is no description for this variant key'}
</span>
</Col>
<Col span={9}>
</div>
<div className="col-span-3">
{featureFlag.filters.payloads?.[index] ? (
<JSONEditorInput
readOnly={true}
Expand All @@ -771,9 +771,9 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
No payload associated with this variant
</span>
)}
</Col>
<Col span={3}>{variant.rollout_percentage}%</Col>
</Row>
</div>
<div>{variant.rollout_percentage}%</div>
</div>
{index !== variants.length - 1 && <LemonDivider className="my-3" />}
</div>
))}
Expand Down Expand Up @@ -874,58 +874,56 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
<span>No payload associated with this flag</span>
)
) : (
<Row gutter={16}>
<Col span={12}>
<div className="text-muted mb-4">
Specify a payload to be returned when the served value is{' '}
<strong>
<code>true</code>
</strong>
</div>
<Group name={['filters', 'payloads']}>
<Field name="true">
<JSONEditorInput
readOnly={readOnly}
placeholder={'Examples: "A string", 2500, {"key": "value"}'}
/>
</Field>
</Group>
</Col>
</Row>
<div className="w-1/2">
<div className="text-muted mb-4">
Specify a payload to be returned when the served value is{' '}
<strong>
<code>true</code>
</strong>
</div>
<Group name={['filters', 'payloads']}>
<Field name="true">
<JSONEditorInput
readOnly={readOnly}
placeholder={'Examples: "A string", 2500, {"key": "value"}'}
/>
</Field>
</Group>
</div>
)}
</div>
)}
{!readOnly && multivariateEnabled && (
<div className="feature-flag-variants">
<h3 className="l4">Variant keys</h3>
<span>The rollout percentage of feature flag variants must add up to 100%</span>
<div className="variant-form-list space-y-2">
<Row gutter={8} className="label-row">
<Col span={1} />
<Col span={4}>Variant key</Col>
<Col span={6}>Description</Col>
<Col span={8}>
<div className="flex flex-col" style={{ fontWeight: 'normal' }}>
<div className="VariantFormList space-y-2">
<div className="VariantFormList__row grid label-row gap-2 items-center">
<div />
<div className="col-span-4">Variant key</div>
<div className="col-span-6">Description</div>
<div className="col-span-8">
<div className="flex flex-col">
<b>Payload</b>
<span className="text-muted">
<span className="text-muted font-normal">
Specify return payload when the variant key matches
</span>
</div>
</Col>
<Col span={4}>
Rollout
</div>
<div className="col-span-4 flex items-center gap-1">
<span>Rollout</span>
<LemonButton type="tertiary" onClick={distributeVariantsEqually}>
(Redistribute)
</LemonButton>
</Col>
</Row>
</div>
</div>
{variants.map((variant, index) => (
<Group key={index} name="filters">
<Row gutter={8} align="top">
<Col span={1} style={{ paddingTop: 8 }}>
<div className="VariantFormList__row grid gap-2">
<div className="flex items-center justify-center">
<Lettermark name={alphabet[index]} color={LettermarkColor.Gray} />
</Col>
<Col span={4}>
</div>
<div className="col-span-4">
<Field name={['multivariate', 'variants', index, 'key']}>
<LemonInput
data-attr="feature-flag-variant-key"
Expand All @@ -944,17 +942,17 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
}
/>
</Field>
</Col>
<Col span={6}>
</div>
<div className="col-span-6">
<Field name={['multivariate', 'variants', index, 'name']}>
<LemonInput
data-attr="feature-flag-variant-name"
className="ph-ignore-input"
placeholder="Description"
/>
</Field>
</Col>
<Col span={8}>
</div>
<div className="col-span-8">
<Field name={['payloads', index]}>
{({ value, onChange }) => {
return (
Expand All @@ -966,8 +964,8 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
)
}}
</Field>
</Col>
<Col span={3}>
</div>
<div className="col-span-3">
<Field name={['multivariate', 'variants', index, 'rollout_percentage']}>
{({ value, onChange }) => (
<div>
Expand Down Expand Up @@ -1012,28 +1010,25 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
</div>
)}
</Field>
</Col>
<Col span={2} style={{ paddingTop: 8 }}>
<Row>
{variants.length > 1 && (
<LemonButton
icon={<IconDelete />}
status="primary-alt"
data-attr={`delete-prop-filter-${index}`}
noPadding
onClick={() => removeVariant(index)}
disabledReason={
featureFlag.experiment_set &&
featureFlag.experiment_set?.length > 0
? 'Cannot delete variants from a feature flag that is part of an experiment'
: undefined
}
tooltipPlacement="topRight"
/>
)}
</Row>
</Col>
</Row>
</div>
<div className="flex items-center justify-center">
{variants.length > 1 && (
<LemonButton
icon={<IconDelete />}
status="primary-alt"
data-attr={`delete-prop-filter-${index}`}
noPadding
onClick={() => removeVariant(index)}
disabledReason={
featureFlag.experiment_set && featureFlag.experiment_set?.length > 0
? 'Cannot delete variants from a feature flag that is part of an experiment'
: undefined
}
tooltipPlacement="topRight"
/>
)}
</div>
</div>
</Group>
))}
{variants.length > 0 && !areVariantRolloutsValid && (
Expand Down
Loading

0 comments on commit 60df2a5

Please sign in to comment.