fix: load segment modal UI fix (#2065)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx

@@ -54,7 +54,6 @@ export default function TargetingCard({
   const [saveAsNewSegmentModalOpen, setSaveAsNewSegmentModalOpen] = useState(false);
   const [isSegmentEditorOpen, setIsSegmentEditorOpen] = useState(!!localSurvey.segment?.isPrivate);
   const [loadSegmentModalOpen, setLoadSegmentModalOpen] = useState(false);
-  const [loadSegmentModalStep, setLoadSegmentModalStep] = useState<"initial" | "load">("initial");
   const [resetAllFiltersModalOpen, setResetAllFiltersModalOpen] = useState(false);
   const [segmentEditorViewOnly, setSegmentEditorViewOnly] = useState(true);
 
@@ -372,8 +371,6 @@ export default function TargetingCard({
             open={loadSegmentModalOpen}
             setOpen={setLoadSegmentModalOpen}
             surveyId={localSurvey.id}
-            step={loadSegmentModalStep}
-            setStep={setLoadSegmentModalStep}
             currentSegment={segment}
             segments={segments}
             setSegment={setSegment}

packages/database/migrations/20240207041922_advanced_targeting/data-migration.ts

@@ -80,7 +80,7 @@ async function main() {
 
       await tx.segment.create({
         data: {
-          title: "",
+          title: `${survey.id}`,
           description: "",
           isPrivate: true,
           filters,

packages/ee/advancedTargeting/components/AdvancedTargetingCard.tsx

@@ -55,7 +55,6 @@ export function AdvancedTargetingCard({
   const [saveAsNewSegmentModalOpen, setSaveAsNewSegmentModalOpen] = useState(false);
   const [resetAllFiltersModalOpen, setResetAllFiltersModalOpen] = useState(false);
   const [loadSegmentModalOpen, setLoadSegmentModalOpen] = useState(false);
-  const [loadSegmentModalStep, setLoadSegmentModalStep] = useState<"initial" | "load">("initial");
   const [isSegmentEditorOpen, setIsSegmentEditorOpen] = useState(!!localSurvey.segment?.isPrivate);
   const [segmentEditorViewOnly, setSegmentEditorViewOnly] = useState(true);
 
@@ -183,8 +182,6 @@ export function AdvancedTargetingCard({
                 open={loadSegmentModalOpen}
                 setOpen={setLoadSegmentModalOpen}
                 surveyId={localSurvey.id}
-                step={loadSegmentModalStep}
-                setStep={setLoadSegmentModalStep}
                 currentSegment={segment}
                 segments={segments}
                 setSegment={setSegment}

packages/ui/Targeting/LoadSegmentModal.tsx

@@ -11,25 +11,23 @@ import { TSurvey } from "@formbricks/types/surveys";
 
 import { Modal } from "../Modal";
 
-type SegmentDetailsProps = {
-  surveyId: string;
-  setOpen: (open: boolean) => void;
+type SegmentDetailProps = {
+  segment: TSegment;
   setSegment: (segment: TSegment) => void;
-  currentSegment: TSegment;
-  segments: TSegment[];
+  setOpen: (open: boolean) => void;
   setIsSegmentEditorOpen: (isOpen: boolean) => void;
   onSegmentLoad: (surveyId: string, segmentId: string) => Promise<TSurvey>;
+  surveyId: string;
 };
 
-const SegmentDetails = ({
-  surveyId,
+const SegmentDetail = ({
+  segment,
+  setIsSegmentEditorOpen,
   setOpen,
   setSegment,
-  currentSegment,
-  segments,
-  setIsSegmentEditorOpen,
   onSegmentLoad,
-}: SegmentDetailsProps) => {
+  surveyId,
+}: SegmentDetailProps) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleLoadNewSegment = async (segmentId: string) => {
@@ -70,63 +68,42 @@ const SegmentDetails = ({
     }
   };
 
-  const segmentsArray = segments?.filter((segment) => segment.id !== currentSegment.id && !segment.isPrivate);
-
-  if (!segmentsArray?.length) {
-    return (
-      <div className="group">
-        <div className="flex h-16 w-full flex-col items-center justify-center rounded-lg text-slate-700">
-          You have not created a segment yet.
+  return (
+    <div
+      key={segment.id}
+      className=" relative mt-1 grid h-16 cursor-pointer grid-cols-5 content-center rounded-lg hover:bg-slate-100"
+      onClick={async () => {
+        setIsLoading(true);
+        try {
+          await handleLoadNewSegment(segment.id);
+          setIsLoading(false);
+        } catch (err) {
+          setIsLoading(false);
+        }
+      }}>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-slate-50 opacity-80">
+          <Loader2 className="h-6 w-6 animate-spin" />
+        </div>
+      )}
+      <div className="col-span-3 flex items-center pl-6 text-sm">
+        <div className="flex items-center gap-4">
+          <div className="ph-no-capture h-8 w-8 flex-shrink-0 text-slate-700">
+            <UserGroupIcon />
+          </div>
+          <div className="flex flex-col">
+            <div className="ph-no-capture font-medium text-slate-900">{segment.title}</div>
+            <div className="ph-no-capture text-xs font-medium text-slate-500">{segment.description}</div>
+          </div>
         </div>
       </div>
-    );
-  }
 
-  return (
-    <div className="flex flex-col">
-      <div>
-        <div className="grid h-12 grid-cols-5 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-          <div className="col-span-3 pl-6">Segment</div>
-          <div className="col-span-1 hidden text-center sm:block">Updated at</div>
-          <div className="col-span-1 hidden text-center sm:block">Created at</div>
-        </div>
+      <div className="whitespace-wrap col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
+        <div className="ph-no-capture text-slate-900">{timeSinceDate(segment.updatedAt)}</div>
+      </div>
 
-        {segmentsArray.map((segment) => (
-          <div
-            key={segment.id}
-            className=" relative mt-1 grid h-16 cursor-pointer grid-cols-5 content-center rounded-lg hover:bg-slate-100"
-            onClick={() => {
-              if (isLoading) return;
-              handleLoadNewSegment(segment.id);
-            }}>
-            {isLoading && (
-              <div className="absolute inset-0 flex items-center justify-center bg-slate-50 opacity-80">
-                <Loader2 className="h-6 w-6 animate-spin" />
-              </div>
-            )}
-            <div className="col-span-3 flex items-center pl-6 text-sm">
-              <div className="flex items-center gap-4">
-                <div className="ph-no-capture h-8 w-8 flex-shrink-0 text-slate-700">
-                  <UserGroupIcon />
-                </div>
-                <div className="flex flex-col">
-                  <div className="ph-no-capture font-medium text-slate-900">{segment.title}</div>
-                  <div className="ph-no-capture text-xs font-medium text-slate-500">
-                    {segment.description}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="whitespace-wrap col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
-              <div className="ph-no-capture text-slate-900">{timeSinceDate(segment.updatedAt)}</div>
-            </div>
-
-            <div className="whitespace-wrap col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
-              <div className="ph-no-capture text-slate-900">{formatDate(segment.createdAt)}</div>
-            </div>
-          </div>
-        ))}
+      <div className="whitespace-wrap col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
+        <div className="ph-no-capture text-slate-900">{formatDate(segment.createdAt)}</div>
       </div>
     </div>
   );
@@ -136,8 +113,6 @@ type LoadSegmentModalProps = {
   open: boolean;
   setOpen: (open: boolean) => void;
   surveyId: string;
-  step: "initial" | "load";
-  setStep: (step: "initial" | "load") => void;
   currentSegment: TSegment;
   segments: TSegment[];
   setSegment: (segment: TSegment) => void;
@@ -146,10 +121,9 @@ type LoadSegmentModalProps = {
 };
 
 const LoadSegmentModal = ({
-  surveyId,
   open,
+  surveyId,
   setOpen,
-  setStep,
   currentSegment,
   segments,
   setSegment,
@@ -157,10 +131,11 @@ const LoadSegmentModal = ({
   onSegmentLoad,
 }: LoadSegmentModalProps) => {
   const handleResetState = () => {
-    setStep("initial");
     setOpen(false);
   };
 
+  const segmentsArray = segments?.filter((segment) => segment.id !== currentSegment.id && !segment.isPrivate);
+
   return (
     <Modal
       open={open}
@@ -169,17 +144,36 @@ const LoadSegmentModal = ({
       }}
       title="Load Segment"
       size="lg">
-      <div>
-        <SegmentDetails
-          surveyId={surveyId}
-          setOpen={setOpen}
-          setSegment={setSegment}
-          currentSegment={currentSegment}
-          segments={segments}
-          setIsSegmentEditorOpen={setIsSegmentEditorOpen}
-          onSegmentLoad={onSegmentLoad}
-        />
-      </div>
+      <>
+        {!segmentsArray?.length ? (
+          <div className="group">
+            <div className="flex h-16 w-full flex-col items-center justify-center rounded-lg text-slate-700">
+              You have not created a segment yet.
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col">
+            <div>
+              <div className="grid h-12 grid-cols-5 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+                <div className="col-span-3 pl-6">Segment</div>
+                <div className="col-span-1 hidden text-center sm:block">Updated at</div>
+                <div className="col-span-1 hidden text-center sm:block">Created at</div>
+              </div>
+
+              {segmentsArray.map((segment) => (
+                <SegmentDetail
+                  segment={segment}
+                  setIsSegmentEditorOpen={setIsSegmentEditorOpen}
+                  setOpen={setOpen}
+                  setSegment={setSegment}
+                  onSegmentLoad={onSegmentLoad}
+                  surveyId={surveyId}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </>
     </Modal>
   );
 };