Skip to content

Commit

Permalink
feat(rules/rollouts): hide or and and based on segment keys length, a…
Browse files Browse the repository at this point in the history 
…nd UX around adding segments (#1975)

* feat(rules/rollouts): hide or and and based on segment keys length, and change UX for adding segments

* chore: fix UI integration tests
  • Loading branch information
@yquansah
yquansah authored Aug 9, 2023
1 parent c3870c1 commit 45149d6
Show file tree
Hide file tree
Showing 7 changed files with 240 additions and 227 deletions.
12 changes: 7 additions & 5 deletions ui/src/components/forms/SegmentsPicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { MinusSmallIcon, PlusSmallIcon } from '@heroicons/react/24/outline';
import { useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';
import Combobox from '~/components/forms/Combobox';
import { FilterableSegment, ISegment } from '~/types/Segment';
import { truncateKey } from '~/utils/helpers';

type SegmentPickerProps = {
readonly?: boolean;
editMode?: boolean;
segments: ISegment[];
selectedSegments: FilterableSegment[];
segmentAdd: (segment: FilterableSegment) => void;
Expand All @@ -17,7 +16,6 @@ type SegmentPickerProps = {

export default function SegmentsPicker({
readonly = false,
editMode = false,
segments,
selectedSegments: parentSegments,
segmentAdd,
Expand All @@ -28,7 +26,11 @@ export default function SegmentsPicker({
new Set<string>(parentSegments.map((s) => s.key))
);

const [editing, setEditing] = useState<boolean>(editMode);
const [editing, setEditing] = useState<boolean>(true);

useEffect(() => {
setEditing(true);
}, [parentSegments]);

const handleSegmentRemove = (index: number) => {
const filterableSegment = parentSegments[index];
Expand All @@ -37,7 +39,7 @@ export default function SegmentsPicker({
segmentsSet.current!.delete(filterableSegment.key);
segmentRemove(index);

if (editMode && parentSegments.length == 1) {
if (editing && parentSegments.length == 1) {
setEditing(true);
}
};
Expand Down
86 changes: 43 additions & 43 deletions ui/src/components/rollouts/forms/EditRolloutForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,6 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
render={(arrayHelpers) => (
<SegmentsPicker
readonly={readOnly}
editMode
segments={segments}
segmentAdd={(segment: FilterableSegment) =>
arrayHelpers.push(segment)
Expand All @@ -305,49 +304,50 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
/>
</div>
<div className="mt-6 flex space-x-8">
{segmentOperators.map((segmentOperator, index) => (
<div className="flex space-x-2" key={index}>
<div>
<input
id={segmentOperator.id}
name="operator"
type="radio"
className={twMerge(
`text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400 ${
readOnly ? 'cursor-not-allowed' : undefined
}`
)}
onChange={() => {
formik.setFieldValue(
'operator',
segmentOperator.id
);
}}
checked={
segmentOperator.id === formik.values.operator
}
value={segmentOperator.id}
disabled={readOnly}
title={
readOnly
? 'Not allowed in Read-Only mode'
: undefined
}
/>
{formik.values.segmentKeys.length > 1 &&
segmentOperators.map((segmentOperator, index) => (
<div className="flex space-x-2" key={index}>
<div>
<input
id={segmentOperator.id}
name="operator"
type="radio"
className={twMerge(
`text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400 ${
readOnly ? 'cursor-not-allowed' : undefined
}`
)}
onChange={() => {
formik.setFieldValue(
'operator',
segmentOperator.id
);
}}
checked={
segmentOperator.id === formik.values.operator
}
value={segmentOperator.id}
disabled={readOnly}
title={
readOnly
? 'Not allowed in Read-Only mode'
: undefined
}
/>
</div>
<div>
<label
htmlFor={segmentOperator.id}
className="text-gray-700 block text-sm"
>
{segmentOperator.name}{' '}
<span className="font-light">
{segmentOperator.meta}
</span>
</label>
</div>
</div>
<div>
<label
htmlFor={segmentOperator.id}
className="text-gray-700 block text-sm"
>
{segmentOperator.name}{' '}
<span className="font-light">
{segmentOperator.meta}
</span>
</label>
</div>
</div>
))}
))}
</div>
</div>
</div>
Expand Down
86 changes: 43 additions & 43 deletions ui/src/components/rollouts/forms/QuickEditRolloutForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@ export default function QuickEditRolloutForm(props: QuickEditRolloutFormProps) {
render={(arrayHelpers) => (
<SegmentsPicker
readonly={readOnly}
editMode
segments={segments}
segmentAdd={(segment: FilterableSegment) =>
arrayHelpers.push(segment)
Expand All @@ -211,49 +210,50 @@ export default function QuickEditRolloutForm(props: QuickEditRolloutFormProps) {
/>
</div>
<div className="mt-6 flex space-x-8">
{segmentOperators.map((segmentOperator, index) => (
<div className="flex space-x-2" key={index}>
<div>
<input
id={segmentOperator.id}
name="operator"
type="radio"
className={twMerge(
`text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400 ${
readOnly ? 'cursor-not-allowed' : undefined
}`
)}
onChange={() => {
formik.setFieldValue(
'operator',
segmentOperator.id
);
}}
checked={
segmentOperator.id === formik.values.operator
}
value={segmentOperator.id}
disabled={readOnly}
title={
readOnly
? 'Not allowed in Read-Only mode'
: undefined
}
/>
{formik.values.segmentKeys.length > 1 &&
segmentOperators.map((segmentOperator, index) => (
<div className="flex space-x-2" key={index}>
<div>
<input
id={segmentOperator.id}
name="operator"
type="radio"
className={twMerge(
`text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400 ${
readOnly ? 'cursor-not-allowed' : undefined
}`
)}
onChange={() => {
formik.setFieldValue(
'operator',
segmentOperator.id
);
}}
checked={
segmentOperator.id === formik.values.operator
}
value={segmentOperator.id}
disabled={readOnly}
title={
readOnly
? 'Not allowed in Read-Only mode'
: undefined
}
/>
</div>
<div>
<label
htmlFor={segmentOperator.id}
className="text-gray-700 block text-sm"
>
{segmentOperator.name}{' '}
<span className="font-light">
{segmentOperator.meta}
</span>
</label>
</div>
</div>
<div>
<label
htmlFor={segmentOperator.id}
className="text-gray-700 block text-sm"
>
{segmentOperator.name}{' '}
<span className="font-light">
{segmentOperator.meta}
</span>
</label>
</div>
</div>
))}
))}
</div>
</div>
</div>
Expand Down
95 changes: 50 additions & 45 deletions ui/src/components/rollouts/forms/RolloutForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,53 +276,58 @@ export default function RolloutForm(props: RolloutFormProps) {
)}
/>
</div>
<div>
<label
htmlFor="operator"
className="text-gray-900 block text-sm font-medium sm:mt-px sm:pt-2"
>
Operator
</label>
</div>
<div>
<div className="sm:col-span-2">
<div className="w-48 space-y-4">
{segmentOperators.map((segmentOperator, index) => (
<div className="flex space-x-4" key={index}>
<div>
<input
id={segmentOperator.id}
name="operator"
type="radio"
className="text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400"
onChange={() => {
formik.setFieldValue(
'operator',
segmentOperator.id
);
}}
checked={
segmentOperator.id === formik.values.operator
}
value={segmentOperator.id}
/>
</div>
<div className="mt-1">
<label
htmlFor={segmentOperator.id}
className="text-gray-700 block text-sm"
>
{segmentOperator.name}{' '}
<span className="font-light">
{segmentOperator.meta}
</span>
</label>
</div>
{formik.values.segmentKeys.length > 1 && (
<>
<div>
<label
htmlFor="operator"
className="text-gray-900 block text-sm font-medium sm:mt-px sm:pt-2"
>
Operator
</label>
</div>
<div>
<div className="sm:col-span-2">
<div className="w-48 space-y-4">
{segmentOperators.map((segmentOperator, index) => (
<div className="flex space-x-4" key={index}>
<div>
<input
id={segmentOperator.id}
name="operator"
type="radio"
className="text-violet-400 border-gray-300 h-4 w-4 focus:ring-violet-400"
onChange={() => {
formik.setFieldValue(
'operator',
segmentOperator.id
);
}}
checked={
segmentOperator.id ===
formik.values.operator
}
value={segmentOperator.id}
/>
</div>
<div className="mt-1">
<label
htmlFor={segmentOperator.id}
className="text-gray-700 block text-sm"
>
{segmentOperator.name}{' '}
<span className="font-light">
{segmentOperator.meta}
</span>
</label>
</div>
</div>
))}
</div>
))}
</div>
</div>
</div>
</div>
</>
)}
</div>
)}
<div className="space-y-1 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
Expand Down
Loading

0 comments on commit 45149d6

Please sign in to comment.