From cedd70535264bbdde25fecf0027590cde552c510 Mon Sep 17 00:00:00 2001
From: AnouarMohamed <m.anouar@mundiapolis.ma>
Date: Wed, 22 Apr 2026 23:31:40 +0100
Subject: [PATCH 1/2] fix(ui): support controlled listbox selections

Signed-off-by: AnouarMohamed <m.anouar@mundiapolis.ma>
---
 ui/src/components/forms/Listbox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/forms/Listbox.tsx b/ui/src/components/forms/Listbox.tsx
index c3f3978f69..af12193e48 100644
--- a/ui/src/components/forms/Listbox.tsx
+++ b/ui/src/components/forms/Listbox.tsx
@@ -13,7 +13,7 @@ type ListBoxProps<T extends ISelectable> = {
   id: string;
   name: string;
   values?: T[];
-  selected: T;
+  selected?: T;
   setSelected?: (v: T) => void;
   disabled?: boolean;
   className?: string;
@@ -27,7 +27,7 @@ export default function Listbox<T extends ISelectable>(props: ListBoxProps<T>) {
     <Select
       name={name}
       disabled={disabled}
-      defaultValue={selected?.key}
+      value={selected?.key}
       onValueChange={(key) => {
         if (setSelected) {
           const value = values?.find((el) => el.key == key) as T;

From 31f87ce0d760b720aa8f2b23b68023aa7ff1d9b3 Mon Sep 17 00:00:00 2001
From: AnouarMohamed <m.anouar@mundiapolis.ma>
Date: Wed, 22 Apr 2026 23:31:43 +0100
Subject: [PATCH 2/2] feat(ui): allow copying flags across environments

Signed-off-by: AnouarMohamed <m.anouar@mundiapolis.ma>
---
 ui/src/app/flags/Flag.tsx                  |  36 ++-
 ui/src/app/flags/flagsApi.ts               |  42 ++--
 ui/src/components/panels/CopyFlagPanel.tsx | 258 +++++++++++++++++++++
 ui/tests/flags.spec.ts                     |  36 ++-
 4 files changed, 345 insertions(+), 27 deletions(-)
 create mode 100644 ui/src/components/panels/CopyFlagPanel.tsx

diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
index afe7591e54..8e31214bbd 100644
--- a/ui/src/app/flags/Flag.tsx
+++ b/ui/src/app/flags/Flag.tsx
@@ -11,7 +11,10 @@ import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
 import { useParams } from 'react-router';
 
-import { selectCurrentEnvironment } from '~/app/environments/environmentsApi';
+import {
+  selectAllEnvironments,
+  selectCurrentEnvironment
+} from '~/app/environments/environmentsApi';
 import { selectInfo } from '~/app/meta/metaSlice';
 import {
   selectCurrentNamespace,
@@ -23,7 +26,7 @@ import Dropdown from '~/components/Dropdown';
 import Loading from '~/components/Loading';
 import { PageHeader } from '~/components/Page';
 import FlagForm from '~/components/flags/FlagForm';
-import CopyToNamespacePanel from '~/components/panels/CopyToNamespacePanel';
+import CopyFlagPanel from '~/components/panels/CopyFlagPanel';
 import DeletePanel from '~/components/panels/DeletePanel';
 
 import { FlagType, flagTypeToLabel } from '~/types/Flag';
@@ -51,6 +54,7 @@ export default function Flag() {
   const navigate = useNavigate();
 
   const environment = useSelector(selectCurrentEnvironment);
+  const environments = useSelector(selectAllEnvironments);
   const namespaces = useSelector(selectNamespaces);
   const namespace = useSelector(selectCurrentNamespace);
 
@@ -75,6 +79,10 @@ export default function Flag() {
   const [deleteFlag] = useDeleteFlagMutation();
   const [copyFlag] = useCopyFlagMutation();
 
+  const hasCopyDestinations =
+    namespaces.some((candidate) => candidate.key !== namespace.key) ||
+    environments.some((candidate) => candidate.key !== environment.key);
+
   useEffect(() => {
     if (isError) {
       setError(error);
@@ -117,22 +125,28 @@ export default function Flag() {
       />
 
       {/* flag copy modal */}
-      <CopyToNamespacePanel
+      <CopyFlagPanel
         open={showCopyFlagModal}
         panelMessage={
           <>
             Copy the flag{' '}
             <span className="font-medium text-brand">{flag.key}</span> to the
-            namespace:
+            selected environment and namespace:
           </>
         }
-        panelType="Flag"
         setOpen={setShowCopyFlagModal}
-        handleCopy={(namespaceKey: string) =>
+        handleCopy={({ environmentKey, namespaceKey }) =>
           copyFlag({
-            environmentKey: environment.key,
-            from: { namespaceKey: namespace.key, flagKey: flag.key },
-            to: { namespaceKey: namespaceKey, flagKey: flag.key }
+            from: {
+              environmentKey: environment.key,
+              namespaceKey: namespace.key,
+              flagKey: flag.key
+            },
+            to: {
+              environmentKey,
+              namespaceKey,
+              flagKey: flag.key
+            }
           }).unwrap()
         }
         onSuccess={() => {
@@ -198,8 +212,8 @@ export default function Flag() {
             },
             {
               id: 'flag-copy',
-              label: 'Copy to Namespace',
-              disabled: namespaces.length < 2,
+              label: 'Copy to Environment / Namespace',
+              disabled: !hasCopyDestinations,
               onClick: () => {
                 setShowCopyFlagModal(true);
               },
diff --git a/ui/src/app/flags/flagsApi.ts b/ui/src/app/flags/flagsApi.ts
index ec99c32bc7..e1f1cf845d 100644
--- a/ui/src/app/flags/flagsApi.ts
+++ b/ui/src/app/flags/flagsApi.ts
@@ -211,19 +211,21 @@ export const flagsApi = createApi({
     copyFlag: builder.mutation<
       void,
       {
-        environmentKey: string;
-        from: { namespaceKey: string; flagKey: string };
-        to: { namespaceKey: string; flagKey: string };
+        from: {
+          environmentKey: string;
+          namespaceKey: string;
+          flagKey: string;
+        };
+        to: {
+          environmentKey: string;
+          namespaceKey: string;
+          flagKey: string;
+        };
       }
     >({
-      queryFn: async (
-        { environmentKey, from, to },
-        _api,
-        _extraOptions,
-        baseQuery
-      ) => {
+      queryFn: async ({ from, to }, _api, _extraOptions, baseQuery) => {
         let resp = await baseQuery({
-          url: `/${environmentKey}/namespaces/${from.namespaceKey}/resources/flipt.core.Flag/${from.flagKey}`,
+          url: `/${from.environmentKey}/namespaces/${from.namespaceKey}/resources/flipt.core.Flag/${from.flagKey}`,
           method: 'GET'
         });
         if (resp.error) {
@@ -235,14 +237,24 @@ export const flagsApi = createApi({
           revision: string;
         };
 
-        let data = {
+        resp = await baseQuery({
+          url: `/${to.environmentKey}/namespaces`,
+          method: 'GET'
+        });
+        if (resp.error) {
+          return { error: resp.error };
+        }
+
+        const destination = resp.data as { revision?: string };
+
+        const data = {
           key: res.resource.key,
           payload: res.resource.payload,
-          revision: res.revision
+          revision: destination.revision
         };
 
         resp = await baseQuery({
-          url: `/${environmentKey}/namespaces/${to.namespaceKey}/resources`,
+          url: `/${to.environmentKey}/namespaces/${to.namespaceKey}/resources`,
           method: 'POST',
           body: data
         });
@@ -251,8 +263,8 @@ export const flagsApi = createApi({
         }
         return { data: undefined };
       },
-      invalidatesTags: (_result, _error, { environmentKey, to }) => [
-        { type: 'Flag', id: environmentKey + '/' + to.namespaceKey }
+      invalidatesTags: (_result, _error, { to }) => [
+        { type: 'Flag', id: to.environmentKey + '/' + to.namespaceKey }
       ]
     })
   })
diff --git a/ui/src/components/panels/CopyFlagPanel.tsx b/ui/src/components/panels/CopyFlagPanel.tsx
new file mode 100644
index 0000000000..2d83cd4eed
--- /dev/null
+++ b/ui/src/components/panels/CopyFlagPanel.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import {
+  selectAllEnvironments,
+  selectCurrentEnvironment
+} from '~/app/environments/environmentsApi';
+import {
+  selectCurrentNamespace,
+  selectNamespaces
+} from '~/app/namespaces/namespacesApi';
+
+import { Button } from '~/components/Button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '~/components/Dialog';
+import Listbox from '~/components/forms/Listbox';
+
+import { IEnvironment } from '~/types/Environment';
+import { INamespace } from '~/types/Namespace';
+import { ISelectable } from '~/types/Selectable';
+
+import { apiURL, request } from '~/data/api';
+import { useError } from '~/data/hooks/error';
+
+type SelectableEnvironment = Pick<IEnvironment, 'key' | 'name'> & ISelectable;
+type SelectableNamespace = Pick<INamespace, 'key' | 'name'> & ISelectable;
+
+type CopyFlagPanelProps = {
+  panelMessage: string | React.ReactNode;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  handleCopy: (target: {
+    environmentKey: string;
+    namespaceKey: string;
+  }) => Promise<any>;
+  onSuccess?: () => void;
+};
+
+function toSelectableEnvironment(
+  environment: IEnvironment
+): SelectableEnvironment {
+  return {
+    key: environment.key,
+    name: environment.name,
+    displayValue: environment.name || environment.key
+  };
+}
+
+function toSelectableNamespace(namespace: INamespace): SelectableNamespace {
+  return {
+    key: namespace.key,
+    name: namespace.name,
+    displayValue: namespace.name
+  };
+}
+
+export default function CopyFlagPanel(props: CopyFlagPanelProps) {
+  const { open, setOpen, panelMessage, onSuccess, handleCopy } = props;
+
+  const { setError, clearError } = useError();
+
+  const environment = useSelector(selectCurrentEnvironment);
+  const environments = useSelector(selectAllEnvironments);
+  const namespace = useSelector(selectCurrentNamespace);
+  const namespaces = useSelector(selectNamespaces);
+
+  const environmentOptions = useMemo(
+    () => environments.map(toSelectableEnvironment),
+    [environments]
+  );
+
+  const hasAlternativeNamespace = useMemo(
+    () => namespaces.some((candidate) => candidate.key !== namespace.key),
+    [namespaces, namespace.key]
+  );
+
+  const [selectedEnvironment, setSelectedEnvironment] =
+    useState<SelectableEnvironment>();
+  const [selectedNamespace, setSelectedNamespace] =
+    useState<SelectableNamespace>();
+  const [namespaceOptions, setNamespaceOptions] = useState<
+    SelectableNamespace[]
+  >([]);
+  const [namespacesLoading, setNamespacesLoading] = useState(false);
+
+  useEffect(() => {
+    if (!open || environmentOptions.length === 0) {
+      return;
+    }
+
+    const initialEnvironmentKey = hasAlternativeNamespace
+      ? environment.key
+      : environmentOptions.find(
+          (candidate) => candidate.key !== environment.key
+        )?.key || environment.key;
+
+    const initialEnvironment =
+      environmentOptions.find(
+        (candidate) => candidate.key === initialEnvironmentKey
+      ) || environmentOptions[0];
+
+    setSelectedEnvironment(initialEnvironment);
+  }, [open, environment.key, environmentOptions, hasAlternativeNamespace]);
+
+  useEffect(() => {
+    if (!open || !selectedEnvironment?.key) {
+      return;
+    }
+
+    let active = true;
+
+    setNamespacesLoading(true);
+
+    request('GET', `${apiURL}/${selectedEnvironment.key}/namespaces`)
+      .then((response) => {
+        if (!active) {
+          return;
+        }
+
+        const data = response as { items?: INamespace[] };
+
+        setNamespaceOptions(
+          (data.items ?? [])
+            .filter((candidate) => {
+              if (selectedEnvironment.key !== environment.key) {
+                return true;
+              }
+
+              return candidate.key !== namespace.key;
+            })
+            .map(toSelectableNamespace)
+        );
+      })
+      .catch((err) => {
+        if (!active) {
+          return;
+        }
+
+        setNamespaceOptions([]);
+        setError(err);
+      })
+      .finally(() => {
+        if (active) {
+          setNamespacesLoading(false);
+        }
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [environment.key, namespace.key, open, selectedEnvironment, setError]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    if (namespaceOptions.length === 0) {
+      setSelectedNamespace(undefined);
+      return;
+    }
+
+    setSelectedNamespace((current) => {
+      if (!current) {
+        return namespaceOptions[0];
+      }
+
+      return (
+        namespaceOptions.find((candidate) => candidate.key === current.key) ||
+        namespaceOptions[0]
+      );
+    });
+  }, [open, namespaceOptions]);
+
+  const handleSubmit = () => {
+    if (!selectedEnvironment || !selectedNamespace) {
+      return Promise.resolve();
+    }
+
+    return handleCopy({
+      environmentKey: selectedEnvironment.key,
+      namespaceKey: selectedNamespace.key
+    });
+  };
+
+  const isCopyDisabled =
+    !selectedEnvironment || !selectedNamespace || namespacesLoading;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Copy Flag</DialogTitle>
+          <DialogDescription>{panelMessage}</DialogDescription>
+        </DialogHeader>
+        <div className="my-2 space-y-4">
+          <div className="space-y-2">
+            <div className="text-sm font-medium">Environment</div>
+            <Listbox<SelectableEnvironment>
+              id="copyToEnvironment"
+              name="environmentKey"
+              values={environmentOptions}
+              selected={selectedEnvironment}
+              setSelected={setSelectedEnvironment}
+            />
+          </div>
+          <div className="space-y-2">
+            <div className="text-sm font-medium">Namespace</div>
+            <Listbox<SelectableNamespace>
+              key={selectedEnvironment?.key || 'copy-namespace'}
+              id="copyToNamespace"
+              name="namespaceKey"
+              values={namespaceOptions}
+              selected={selectedNamespace}
+              setSelected={setSelectedNamespace}
+              disabled={namespacesLoading || namespaceOptions.length === 0}
+            />
+            {namespaceOptions.length === 0 && (
+              <p className="text-sm text-muted-foreground">
+                No namespaces are available in the selected environment.
+              </p>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose>Cancel</DialogClose>
+          <Button
+            variant="primary"
+            type="button"
+            disabled={isCopyDisabled}
+            onClick={() => {
+              handleSubmit()
+                .then(() => {
+                  clearError();
+                  if (onSuccess) {
+                    onSuccess();
+                  }
+                  setOpen(false);
+                })
+                .catch((err) => {
+                  setError(err);
+                });
+            }}
+          >
+            Copy
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/ui/tests/flags.spec.ts b/ui/tests/flags.spec.ts
index 0cd8740ded..89edf8bd91 100644
--- a/ui/tests/flags.spec.ts
+++ b/ui/tests/flags.spec.ts
@@ -136,7 +136,9 @@ test.describe('Flags', () => {
 
     // perform copy to new namespace
     await page.getByRole('button', { name: 'Actions' }).click();
-    await page.getByRole('menuitem', { name: 'Copy to Namespace' }).click();
+    await page
+      .getByRole('menuitem', { name: 'Copy to Environment / Namespace' })
+      .click();
     await page.locator('#copyToNamespace-select-button').click();
     await page.getByRole('option', { name: 'copy flag', exact: true }).click();
     await page.getByRole('button', { name: 'Copy', exact: true }).click();
@@ -161,6 +163,38 @@ test.describe('Flags', () => {
     await expect(page.getByText('firefox', { exact: true })).toBeVisible();
   });
 
+  test('can copy flag to another environment', async ({ page }) => {
+    await page.getByRole('link', { name: 'test-flag' }).click();
+
+    await page.getByRole('button', { name: 'Actions' }).click();
+    await page
+      .getByRole('menuitem', { name: 'Copy to Environment / Namespace' })
+      .click();
+    await page.locator('#copyToEnvironment-select-button').click();
+    await page.getByRole('option', { name: 'production', exact: true }).click();
+    await page.locator('#copyToNamespace-select-button').click();
+    await page.getByRole('option', { name: 'production', exact: true }).click();
+    await page.getByRole('button', { name: 'Copy', exact: true }).click();
+    await expect(page.getByText('Successfully copied flag')).toBeVisible();
+
+    await page
+      .getByTestId('environment-namespace-switcher')
+      .getByRole('button')
+      .click();
+    await page
+      .getByTestId('environment-listbox')
+      .getByRole('button', { name: 'production' })
+      .click();
+    await page
+      .getByTestId('namespace-listbox')
+      .getByRole('button', { name: 'production' })
+      .click();
+
+    await page.getByRole('link', { name: 'test-flag' }).click();
+    await expect(page.getByText('chrome', { exact: true })).toBeVisible();
+    await expect(page.getByText('firefox', { exact: true })).toBeVisible();
+  });
+
   test('can create flag with metadata', async ({ page }) => {
     await page.getByRole('button', { name: 'New Flag' }).click();
     await page.getByTestId('BOOLEAN_FLAG_TYPE').click();