Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add UI ITs for reordering/deleting rules and rollouts #3915

Merged
merged 2 commits into from
Feb 12, 2025
Merged

chore: add UI ITs for reordering/deleting rules and rollouts #3915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ffd5b4
chore: add UI ITs for reordering/deleting rules and rollouts
markphelps Feb 11, 2025
0ef3b6b
chore: fix lint errors
markphelps Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions ui/src/components/UnsavedChangesModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,11 @@ export function UnsavedChangesModalWrapper(props: UnsavedChangesModalProps) {
}, [formik.dirty]);

const handleDiscard = () => {
onDiscard ? onDiscard() : formik.resetForm();
if (onDiscard) {
onDiscard();
} else {
formik.resetForm();
}
setShowUnsavedModal(false);
if (blocker.state === 'blocked') {
blocker.proceed();
Expand All @@ -94,7 +98,11 @@ export function UnsavedChangesModalWrapper(props: UnsavedChangesModalProps) {
};

const handleSave = async () => {
onSave ? onSave() : await formik.submitForm();
if (onSave) {
onSave();
} else {
await formik.submitForm();
}
setShowUnsavedModal(false);
if (blocker.state === 'blocked') {
blocker.proceed();
Expand Down
1 change: 1 addition & 0 deletions ui/src/components/rollouts/Rollout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const Rollout = forwardRef(
key={rollout.id}
ref={ref}
style={style}
data-testid={`rollout-${rollout.rank}`}
className={`${className} w-full items-center space-y-2 rounded-md border border-violet-300 bg-background shadow-md shadow-violet-100 hover:shadow-violet-200 sm:flex sm:flex-col lg:px-6 lg:py-2`}
>
<div className="w-full rounded-t-lg border-b border-gray-200 p-2">
Expand Down
8 changes: 5 additions & 3 deletions ui/src/components/rollouts/SortableRollout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { IFlag } from '~/types/Flag';
import { IRollout } from '~/types/Rollout';
import { ISegment } from '~/types/Segment';

import { cls } from '~/utils/helpers';

import Rollout from './Rollout';

type SortableRolloutProps = {
Expand Down Expand Up @@ -35,16 +37,16 @@ export default function SortableRollout(props: SortableRolloutProps) {
}
: undefined;

const className = isDragging ? 'border-violet-500 cursor-move' : '';

return (
<Rollout
key={rollout.id}
ref={setNodeRef}
{...listeners}
{...attributes}
style={style}
className={className}
className={cls({
'border-violet-500': isDragging
})}
flag={flag}
rollout={rollout}
segments={segments}
Expand Down
1 change: 1 addition & 0 deletions ui/src/components/rules/Rule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const Rule = forwardRef(
key={rule.id}
ref={ref}
style={style}
data-testid={`rule-${rule.rank}`}
className={`${className} w-full items-center space-y-2 rounded-md border border-violet-300 bg-background shadow-md shadow-violet-100 hover:shadow-violet-200 sm:flex sm:flex-col lg:px-4 lg:py-2`}
>
<div className="w-full rounded-t-lg border-b border-gray-200 p-2">
Expand Down
8 changes: 5 additions & 3 deletions ui/src/components/rules/SortableRule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { IFlag } from '~/types/Flag';
import { IRule } from '~/types/Rule';
import { ISegment } from '~/types/Segment';

import { cls } from '~/utils/helpers';

import Rule from './Rule';

type SortableRuleProps = {
Expand Down Expand Up @@ -34,16 +36,16 @@ export default function SortableRule(props: SortableRuleProps) {
}
: undefined;

const className = isDragging ? 'border-violet-500 cursor-move' : '';

return (
<Rule
key={rule.id}
ref={setNodeRef}
{...listeners}
{...attributes}
style={style}
className={className}
className={cls({
'border-violet-500': isDragging
})}
flag={flag}
rule={rule}
segments={segments}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/segments/SegmentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {

import { Button } from '~/components/Button';
import Loading from '~/components/Loading';
import { UnsavedChangesModalWrapper } from '~/components/UnsavedChangesModal';
import Constraints from '~/components/constraints/Constraints';
import Input from '~/components/forms/Input';

Expand All @@ -29,7 +30,6 @@ import {
stringAsKey
} from '~/utils/helpers';

import { UnsavedChangesModalWrapper } from '../UnsavedChangesModal';
import { SegmentFormProvider } from './SegmentFormContext';

const segmentMatchTypes = [
Expand Down
43 changes: 31 additions & 12 deletions ui/tests/rollouts.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,18 +66,6 @@ test.describe('Rollouts', () => {
await expect(page.getByText('Successfully updated flag')).toBeVisible();
});

test('can delete rollout', async ({ page }) => {
await page.getByRole('link', { name: 'test-boolean' }).click();
await page.getByTestId('rollout-menu-button').click();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Update' }).click();
await expect(page.getByText('Successfully updated flag')).toBeVisible();
await expect(
page.getByRole('button', { name: 'Threshold Rollout' })
).toBeHidden();
});

test('can create segment rollout', async ({ page }) => {
await test.step('create segment', async () => {
await page.getByRole('link', { name: 'Segments' }).click();
Expand Down Expand Up @@ -107,4 +95,35 @@ test.describe('Rollouts', () => {
await expect(page.getByText('Successfully updated flag')).toBeVisible();
});
});

test('can reorder rollouts', async ({ page }) => {
await page.getByRole('link', { name: 'test-boolean' }).click();
await page
.getByTestId('rollout-0')
.getByRole('button', { name: 'Rollout' })
.dragTo(
page.getByTestId('rollout-1').getByRole('button', { name: 'Rollout' })
);
await page.getByRole('button', { name: 'Update' }).click();
await expect(page.getByText('Successfully updated flag')).toBeVisible();
await expect(
page.getByTestId('rollout-0').getByRole('button', { name: '1' })
).toBeVisible();
await expect(
page.getByTestId('rollout-1').getByRole('button', { name: '2' })
).toBeVisible();
});

test('can delete rollout', async ({ page }) => {
await page.getByRole('link', { name: 'test-boolean' }).click();
await page
.getByTestId('rollout-1')
.getByTestId('rollout-menu-button')
.click();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Update' }).click();
await expect(page.getByText('Successfully updated flag')).toBeVisible();
await expect(page.getByTestId('rollout-1')).toBeHidden();
});
});
32 changes: 30 additions & 2 deletions ui/tests/rules.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,15 +105,43 @@ test.describe('Rules', () => {
await expect(page.getByText('Successfully updated flag')).toBeVisible();
});

test('can reorder rules', async ({ page }) => {
await page.getByRole('link', { name: 'test-rule' }).click();
await page.getByRole('link', { name: 'Rules' }).click();
await page
.getByTestId('rule-1')
.getByRole('button', { name: 'Rule' })
.dragTo(page.getByTestId('rule-0').getByRole('button', { name: 'Rule' }));
await page.getByRole('button', { name: 'Update' }).click();
await expect(page.getByText('Successfully updated flag')).toBeVisible();
await expect(
page.getByTestId('rule-0').getByRole('button', { name: '1' })
).toBeVisible();
await expect(
page.getByTestId('rule-1').getByRole('button', { name: '2' })
).toBeVisible();
});

test('can update default rule', async ({ page }) => {
await page.getByRole('link', { name: 'test-rule' }).click();
await page.getByRole('link', { name: 'Rules' }).click();
await expect(
page.getByRole('heading', { name: 'Default Rule' })
).toBeVisible();
await page.locator('#defaultVariant-select-input').click();
await page.getByLabel('', { exact: true }).getByText('456').click(); // TODO: should get variant by label
await page.locator('#defaultVariant-select-button').click();
await page.getByRole('option', { name: '456' }).locator('div').click();
await page.getByRole('button', { name: 'Update' }).click();
await expect(page.getByText('Successfully updated flag')).toBeVisible();
});

test('can delete rule', async ({ page }) => {
await page.getByRole('link', { name: 'test-rule' }).click();
await page.getByRole('link', { name: 'Rules' }).click();
await page.getByTestId('rule-1').getByTestId('rule-menu-button').click();
await page.getByRole('menuitem', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Delete' }).click();
await page.getByRole('button', { name: 'Update' }).click();
await expect(page.getByText('Successfully updated flag')).toBeVisible();
await expect(page.getByTestId('rule-1')).toBeHidden();
});
});
Loading