feat(ui): allow copying flags across environments

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);
               },

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 }
       ]
     })
   })

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;