chore: V2 UI rollouts (#3889)

* chore: dont need to pass flag to variants Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com> * chore: dont need to drill variants all the way down Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com> * chore: wire up rollouts Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com> --------- Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>
flipt-io · Feb 8, 2025 · 6080fa6 · 6080fa6
1 parent 3f6936a
commit 6080fa6
Show file tree

Hide file tree

Showing 16 changed files with 420 additions and 796 deletions.
diff --git a/ui/src/app/flags/rolloutsApi.ts b/ui/src/app/flags/rolloutsApi.ts
diff --git a/ui/src/app/flags/rules/Rules.tsx b/ui/src/app/flags/rules/Rules.tsx
@@ -15,7 +15,7 @@ import {
 } from '@dnd-kit/sortable';
 import { StarIcon } from '@heroicons/react/24/outline';
 import { useFormikContext } from 'formik';
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { v4 as uuid } from 'uuid';
 
@@ -37,18 +37,13 @@ import SortableRule from '~/components/rules/SortableRule';
 
 import { IFlag } from '~/types/Flag';
 import { IRule } from '~/types/Rule';
-import {
-  FilterableVariant,
-  IVariant,
-  toFilterableVariant
-} from '~/types/Variant';
+import { FilterableVariant, toFilterableVariant } from '~/types/Variant';
 
 import { useError } from '~/data/hooks/error';
 
 type RulesProps = {
   flag: IFlag;
   rules: IRule[];
-  variants: IVariant[];
 };
 
 export function DefaultVariant(props: RulesProps) {
@@ -127,7 +122,7 @@ export function DefaultVariant(props: RulesProps) {
   );
 }
 
-export default function Rules({ flag, rules, variants }: RulesProps) {
+export default function Rules({ flag, rules }: RulesProps) {
   const [activeRule, setActiveRule] = useState<IRule | null>(null);
   const [deletingRule, setDeletingRule] = useState<IRule | null>(null);
 
@@ -138,6 +133,8 @@ export default function Rules({ flag, rules, variants }: RulesProps) {
 
   const { clearError } = useError();
 
+  const ruleFormRef = useRef(null);
+
   const environment = useSelector(selectCurrentEnvironment);
   const namespace = useSelector(selectCurrentNamespace);
 
@@ -159,7 +156,7 @@ export default function Rules({ flag, rules, variants }: RulesProps) {
     })
   );
 
-  const { setRules, deleteRule } = useContext(FlagFormContext);
+  const { setRules, deleteRule, createRule } = useContext(FlagFormContext);
 
   // disabling eslint due to this being a third-party event type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -222,16 +219,17 @@ export default function Rules({ flag, rules, variants }: RulesProps) {
       </Modal>
 
       {/* rule create form */}
-      <Slideover open={showRuleForm} setOpen={setShowRuleForm}>
+      <Slideover
+        open={showRuleForm}
+        setOpen={setShowRuleForm}
+        ref={ruleFormRef}
+      >
         <RuleForm
           flag={flag}
           rank={(rules?.length || 0) + 1}
           segments={segments}
           setOpen={setShowRuleForm}
-          saveRule={(rule: IRule) => {
-            const id = uuid();
-            setRules([...rules, { id, ...rule }]);
-          }}
+          createRule={createRule}
           onSuccess={() => {
             setShowRuleForm(false);
           }}
@@ -282,14 +280,12 @@ export default function Rules({ flag, rules, variants }: RulesProps) {
                         className="flex-col space-y-6 p-2 md:flex"
                       >
                         {rules &&
-                          rules.length > 0 &&
                           rules.map((rule) => (
                             <SortableRule
                               key={rule.id}
                               flag={flag}
                               rule={rule}
                               segments={segments}
-                              variants={variants}
                               onDelete={() => {
                                 setActiveRule(null);
                                 setDeletingRule(rule);
@@ -306,18 +302,13 @@ export default function Rules({ flag, rules, variants }: RulesProps) {
                           flag={flag}
                           rule={activeRule}
                           segments={segments}
-                          variants={variants}
                         />
                       ) : null}
                     </DragOverlay>
                   </DndContext>
                 )}
                 {showDefaultVariant && (
-                  <DefaultVariant
-                    flag={flag}
-                    rules={rules}
-                    variants={variants}
-                  />
+                  <DefaultVariant flag={flag} rules={rules} />
                 )}
               </div>
             </div>

diff --git a/ui/src/components/flags/FlagForm.tsx b/ui/src/components/flags/FlagForm.tsx
@@ -432,13 +432,13 @@ export default function FlagForm(props: { flag?: IFlag }) {
                       </div>
                     </div>
                     {selectedTab == 'variants' && (
-                      <Variants flag={flag} variants={variants!} />
+                      <Variants variants={variants!} />
+                    )}
+                    {selectedTab == 'rollouts' && (
+                      <Rollouts flag={flag} rollouts={rollouts!} />
                     )}
-                    {/* {selectedTab == 'rollouts' && (
-                        <Rollouts flag={flag} rollouts={rollouts!} />
-                      )} */}
                     {selectedTab == 'rules' && (
-                      <Rules flag={flag} rules={rules!} variants={variants!} />
+                      <Rules flag={flag} rules={rules!} />
                     )}
                   </>
                 )}

diff --git a/...onents/rollouts/forms/EditRolloutForm.tsx → ...c/components/rollouts/EditRolloutForm.tsx b/...onents/rollouts/forms/EditRolloutForm.tsx → ...c/components/rollouts/EditRolloutForm.tsx
@@ -1,10 +1,6 @@
 import { Dialog } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { FieldArray, Form, Formik } from 'formik';
-import { useSelector } from 'react-redux';
-
-import { useUpdateRolloutMutation } from '~/app/flags/rolloutsApi';
-import { selectCurrentNamespace } from '~/app/namespaces/namespacesApi';
 
 import { Button } from '~/components/Button';
 import Loading from '~/components/Loading';
@@ -22,7 +18,6 @@ import {
 } from '~/types/Segment';
 
 import { useError } from '~/data/hooks/error';
-import { useSuccess } from '~/data/hooks/success';
 import { cls } from '~/utils/helpers';
 
 const rolloutRuleTypes = [
@@ -41,7 +36,7 @@ const rolloutRuleTypes = [
 type EditRolloutFormProps = {
   setOpen: (open: boolean) => void;
   onSuccess: () => void;
-  flagKey: string;
+  updateRollout: (rollout: IRollout) => void;
   rollout: IRollout;
   segments: ISegment[];
 };
@@ -55,56 +50,46 @@ interface RolloutFormValues {
 }
 
 export default function EditRolloutForm(props: EditRolloutFormProps) {
-  const { setOpen, onSuccess, flagKey, rollout, segments } = props;
+  const { setOpen, onSuccess, rollout, segments, updateRollout } = props;
 
   const { setError, clearError } = useError();
-  const { setSuccess } = useSuccess();
-
-  const namespace = useSelector(selectCurrentNamespace);
 
   const segmentOperator =
     rollout.segment && rollout.segment.segmentOperator
       ? rollout.segment.segmentOperator
       : SegmentOperatorType.OR;
 
-  const [updateRollout] = useUpdateRolloutMutation();
   const handleSegmentSubmit = (values: RolloutFormValues) => {
     let rolloutSegment = rollout;
     rolloutSegment.threshold = undefined;
 
-    return updateRollout({
-      namespaceKey: namespace.key,
-      flagKey,
-      rolloutId: rollout.id,
-      values: {
-        ...rolloutSegment,
-        description: values.description,
-        segment: {
-          segmentKeys: values.segmentKeys?.map((s) => s.key),
-          segmentOperator: values.operator,
-          value: values.value === 'true'
-        }
+    updateRollout({
+      ...rolloutSegment,
+      description: values.description,
+      segment: {
+        segments: values.segmentKeys?.map((s) => s.key),
+        segmentOperator: values.operator,
+        value: values.value === 'true'
       }
-    }).unwrap();
+    });
+
+    return Promise.resolve();
   };
 
   const handleThresholdSubmit = (values: RolloutFormValues) => {
     let rolloutThreshold = rollout;
     rolloutThreshold.segment = undefined;
 
-    return updateRollout({
-      namespaceKey: namespace.key,
-      flagKey,
-      rolloutId: rollout.id,
-      values: {
-        ...rolloutThreshold,
-        description: values.description,
-        threshold: {
-          percentage: values.percentage || 0,
-          value: values.value === 'true'
-        }
+    updateRollout({
+      ...rolloutThreshold,
+      description: values.description,
+      threshold: {
+        percentage: values.percentage || 0,
+        value: values.value === 'true'
       }
-    }).unwrap();
+    });
+
+    return Promise.resolve();
   };
 
   const initialValue =
@@ -123,7 +108,7 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
         type: rollout.type,
         description: rollout.description || '',
         segmentKeys: segments.flatMap((s) =>
-          rollout.segment?.segmentKeys?.includes(s.key)
+          rollout.segment?.segments?.includes(s.key)
             ? {
                 ...s,
                 displayValue: s.name,
@@ -166,7 +151,6 @@ export default function EditRolloutForm(props: EditRolloutFormProps) {
           .then(() => {
             onSuccess();
             clearError();
-            setSuccess('Successfully updated rollout');
             setOpen(false);
           })
           .catch((err) => {