Merge pull request #2263 from JoinColony/fix/#2223-created-in-should-…

…only-show-current-team

Fix: Created in field should only show current team or general

src/components/v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts

@@ -0,0 +1,58 @@
+import { Id } from '@colony/colony-js';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { DecisionMethod } from '~types/actions.ts';
+import { type SearchSelectOption } from '~v5/shared/SearchSelect/types.ts';
+
+import {
+  CREATED_IN_FIELD_NAME,
+  DECISION_METHOD_FIELD_NAME,
+} from '../consts.ts';
+
+/**
+ * Hook to filter the created in field in the action form, based on the current value of the team field passed in
+ */
+const useFilterCreatedInField = (
+  nameOfFieldToFilterOn: string,
+  onlyAllowRoot = false,
+) => {
+  const { setValue, watch } = useFormContext();
+  const selectedTeam = watch(nameOfFieldToFilterOn);
+  const createdIn = watch(CREATED_IN_FIELD_NAME);
+  const decisionMethod = watch(DECISION_METHOD_FIELD_NAME);
+
+  useEffect(() => {
+    if (onlyAllowRoot || decisionMethod !== DecisionMethod.Reputation) return;
+
+    if (!selectedTeam && !!createdIn && createdIn !== Id.RootDomain) {
+      setValue(nameOfFieldToFilterOn, createdIn);
+    }
+  }, [
+    onlyAllowRoot,
+    createdIn,
+    decisionMethod,
+    nameOfFieldToFilterOn,
+    selectedTeam,
+    setValue,
+  ]);
+
+  useEffect(() => {
+    if (onlyAllowRoot || decisionMethod !== DecisionMethod.Reputation) return;
+
+    if (selectedTeam) {
+      setValue(CREATED_IN_FIELD_NAME, selectedTeam);
+    }
+  }, [onlyAllowRoot, decisionMethod, selectedTeam, setValue]);
+
+  const createdInFilterFn = (team: SearchSelectOption): boolean => {
+    if (onlyAllowRoot) return !!team.isRoot;
+    if (!selectedTeam) return true;
+
+    return team.value === selectedTeam || !!team.isRoot;
+  };
+
+  return createdInFilterFn;
+};
+
+export default useFilterCreatedInField;

src/components/v5/common/ActionSidebar/partials/forms/AdvancedPaymentForm/AdvancedPaymentForm.tsx

@@ -3,6 +3,7 @@ import React, { type FC } from 'react';
 
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 import TeamsSelect from '~v5/common/ActionSidebar/partials/TeamsSelect/index.ts';
 
 import { type ActionFormBaseProps } from '../../../types.ts';
@@ -18,6 +19,8 @@ const displayName = 'v5.common.ActionSidebar.partials.AdvancedPaymentForm';
 const AdvancedPaymentForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
   useAdvancedPayment(getFormOptions);
 
+  const createdInFilterFn = useFilterCreatedInField('from');
+
   return (
     <>
       <ActionFormRow
@@ -35,7 +38,7 @@ const AdvancedPaymentForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
         <TeamsSelect name="from" />
       </ActionFormRow>
       <DecisionMethodField />
-      <CreatedIn />
+      <CreatedIn filterOptionsFn={createdInFilterFn} />
       <Description />
       <AdvancedPaymentRecipientsField name="payments" />
     </>

src/components/v5/common/ActionSidebar/partials/forms/BatchPaymentForm/BatchPaymentForm.tsx

@@ -3,6 +3,7 @@ import React, { type FC } from 'react';
 
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 import DescriptionField from '~v5/common/ActionSidebar/partials/DescriptionField/index.ts';
 import TeamsSelect from '~v5/common/ActionSidebar/partials/TeamsSelect/index.ts';
 
@@ -14,6 +15,8 @@ import DecisionMethodField from '../../DecisionMethodField/index.ts';
 const displayName = 'v5.common.ActionSidebar.partials.BatchPaymentForm';
 
 const BatchPaymentForm: FC<ActionFormBaseProps> = () => {
+  const createdInFilterFn = useFilterCreatedInField('from');
+
   return (
     <>
       <ActionFormRow
@@ -31,7 +34,7 @@ const BatchPaymentForm: FC<ActionFormBaseProps> = () => {
         <TeamsSelect name="from" />
       </ActionFormRow>
       <DecisionMethodField />
-      <CreatedIn />
+      <CreatedIn filterOptionsFn={createdInFilterFn} />
       <ActionFormRow
         icon={Pencil}
         fieldName="description"

src/components/v5/common/ActionSidebar/partials/forms/EditTeamForm/EditTeamForm.tsx

@@ -6,7 +6,6 @@ import {
   UserList,
 } from '@phosphor-icons/react';
 import React, { type FC } from 'react';
-import { useFormContext } from 'react-hook-form';
 
 import {
   MAX_COLONY_DISPLAY_NAME,
@@ -15,6 +14,7 @@ import {
 import { useAdditionalFormOptionsContext } from '~context/AdditionalFormOptionsContext/AdditionalFormOptionsContext.ts';
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 import TeamColorField from '~v5/common/ActionSidebar/partials/TeamColorField/index.ts';
 import TeamsSelect from '~v5/common/ActionSidebar/partials/TeamsSelect/index.ts';
 import FormInputBase from '~v5/common/Fields/InputBase/FormInputBase.tsx';
@@ -32,12 +32,11 @@ const displayName = 'v5.common.ActionSidebar.partials.EditTeamForm';
 
 const EditTeamForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
   const { readonly } = useAdditionalFormOptionsContext();
-  const { watch } = useFormContext();
 
   useEditTeam(getFormOptions);
-  const selectedTeam = watch('team');
 
   const hasNoDecisionMethods = useHasNoDecisionMethods();
+  const createdInFilterFn = useFilterCreatedInField('team');
 
   return (
     <>
@@ -127,12 +126,7 @@ const EditTeamForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
         <TeamColorField name="domainColor" disabled={hasNoDecisionMethods} />
       </ActionFormRow>
       <DecisionMethodField />
-      <CreatedIn
-        filterOptionsFn={(option) =>
-          option.value === Id.RootDomain.toString() ||
-          option.value === selectedTeam
-        }
-      />
+      <CreatedIn filterOptionsFn={createdInFilterFn} />
       <Description />
     </>
   );

src/components/v5/common/ActionSidebar/partials/forms/ManagePermissionsForm/ManagePermissionsForm.tsx

@@ -13,6 +13,7 @@ import { UserRole } from '~constants/permissions.ts';
 import useToggle from '~hooks/useToggle/index.ts';
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 import { FormCardSelect } from '~v5/common/Fields/CardSelect/index.ts';
 import { type CardSelectProps } from '~v5/common/Fields/CardSelect/types.ts';
 
@@ -45,6 +46,7 @@ const ManagePermissionsForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
   const team: string | undefined = useWatch({ name: 'team' });
 
   const hasNoDecisionMethods = useHasNoDecisionMethods();
+  const createdInFilterFn = useFilterCreatedInField('team');
 
   const permissionSelectFooter = useCallback<
     Exclude<CardSelectProps<string>['footer'], React.ReactNode>
@@ -183,7 +185,7 @@ const ManagePermissionsForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
         />
       </ActionFormRow>
       <DecisionMethodField />
-      <CreatedIn />
+      <CreatedIn filterOptionsFn={createdInFilterFn} />
       <Description />
       {role !== RemoveRoleOptionValue.remove && (
         <PermissionsTable name="permissions" role={role} className="mt-7" />

src/components/v5/common/ActionSidebar/partials/forms/ManageReputationForm/ManageReputationForm.tsx

@@ -15,6 +15,7 @@ import {
   TEAM_FIELD_NAME,
 } from '~v5/common/ActionSidebar/consts.ts';
 import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/useHasNoDecisionMethods.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 import { type ActionFormBaseProps } from '~v5/common/ActionSidebar/types.ts';
 import { FormCardSelect } from '~v5/common/Fields/CardSelect/index.ts';
 
@@ -40,7 +41,7 @@ const ManageReputationForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
     modification: string;
     member: string;
   }>();
-  const { resetField } = useFormContext();
+  const { setValue, resetField } = useFormContext();
 
   useManageReputation(getFormOptions);
 
@@ -52,6 +53,11 @@ const ManageReputationForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
         : undefined,
   });
 
+  const createdInFilterFn = useFilterCreatedInField(
+    TEAM_FIELD_NAME,
+    modification === ModificationOption.AwardReputation,
+  );
+
   useEffect(() => {
     if (
       modification === ModificationOption.RemoveReputation &&
@@ -61,6 +67,12 @@ const ManageReputationForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
     }
   }, [member, modification, resetField, usersOptions.options]);
 
+  useEffect(() => {
+    if (modification === ModificationOption.AwardReputation) {
+      setValue(TEAM_FIELD_NAME, Id.RootDomain);
+    }
+  }, [modification, setValue]);
+
   return (
     <>
       <div className="mb-6 w-full">
@@ -130,6 +142,7 @@ const ManageReputationForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
           <TeamsSelect
             name={TEAM_FIELD_NAME}
             disabled={hasNoDecisionMethods}
+            readonly={modification === ModificationOption.AwardReputation}
             filterOptionsFn={
               modification === ModificationOption.AwardReputation
                 ? (option) => option.value === Id.RootDomain
@@ -139,15 +152,8 @@ const ManageReputationForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
         </ActionFormRow>
         <DecisionMethodField />
         <CreatedIn
-          filterOptionsFn={(option) => {
-            if (modification === ModificationOption.AwardReputation) {
-              return option.value === Id.RootDomain;
-            }
-
-            return (
-              option.value === Id.RootDomain || option.value === selectedTeam
-            );
-          }}
+          filterOptionsFn={createdInFilterFn}
+          readonly={modification === ModificationOption.AwardReputation}
         />
         <Description />
       </div>

src/components/v5/common/ActionSidebar/partials/forms/SimplePaymentForm/SimplePaymentForm.tsx

@@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 
 import useHasNoDecisionMethods from '../../../hooks/permissions/useHasNoDecisionMethods.ts';
 import { type ActionFormBaseProps } from '../../../types.ts';
@@ -21,10 +22,12 @@ const displayName = 'v5.common.ActionSidebar.partials.SimplePaymentForm';
 const SimplePaymentForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
   useSimplePayment(getFormOptions);
 
+  const hasNoDecisionMethods = useHasNoDecisionMethods();
+
   const { watch } = useFormContext();
   const selectedTeam = watch('from');
 
-  const hasNoDecisionMethods = useHasNoDecisionMethods();
+  const createdInFilterFn = useFilterCreatedInField('from');
 
   return (
     <>
@@ -69,7 +72,7 @@ const SimplePaymentForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
         }}
       />
       <DecisionMethodField />
-      <CreatedIn />
+      <CreatedIn filterOptionsFn={createdInFilterFn} />
       <Description />
       {/* Disabled for now */}
       {/* <TransactionTable name="payments" /> */}

src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/SplitPaymentForm.tsx

@@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 import TeamsSelect from '~v5/common/ActionSidebar/partials/TeamsSelect/index.ts';
 import { FormCardSelect } from '~v5/common/Fields/CardSelect/index.ts';
 
@@ -25,6 +26,8 @@ const SplitPaymentForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
   const { watch } = useFormContext();
   const selectedTeam = watch('team');
 
+  const createdInFilterFn = useFilterCreatedInField('team');
+
   return (
     <>
       <ActionFormRow
@@ -73,7 +76,7 @@ const SplitPaymentForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
         <TeamsSelect name="team" />
       </ActionFormRow>
       <DecisionMethodField />
-      <CreatedIn />
+      <CreatedIn filterOptionsFn={createdInFilterFn} />
       <Description />
       {currentToken && (
         <SplitPaymentRecipientsField

src/components/v5/common/ActionSidebar/partials/forms/TransferFundsForm/TransferFundsForm.tsx

@@ -1,10 +1,10 @@
-import { Id } from '@colony/colony-js';
 import { ArrowDownRight, UsersThree } from '@phosphor-icons/react';
 import React, { type FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
+import useFilterCreatedInField from '~v5/common/ActionSidebar/hooks/useFilterCreatedInField.ts';
 import TeamsSelect from '~v5/common/ActionSidebar/partials/TeamsSelect/index.ts';
 
 import useHasNoDecisionMethods from '../../../hooks/permissions/useHasNoDecisionMethods.ts';
@@ -25,6 +25,7 @@ const TransferFundsForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
   const selectedTeam = watch('from');
 
   const hasNoDecisionMethods = useHasNoDecisionMethods();
+  const createdInFilterFn = useFilterCreatedInField('from');
 
   return (
     <>
@@ -70,13 +71,7 @@ const TransferFundsForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
       />
 
       <DecisionMethodField />
-      <CreatedIn
-        filterOptionsFn={(option) =>
-          (option.value === Id.RootDomain.toString() ||
-            option.value === selectedTeam) &&
-          !!option.isRoot
-        }
-      />
+      <CreatedIn filterOptionsFn={createdInFilterFn} />
       <Description />
     </>
   );

src/components/v5/common/ActionSidebar/partials/forms/TransferFundsForm/hooks.ts

@@ -83,7 +83,6 @@ export const useTransferFunds = (
     defaultValues: useMemo<DeepPartial<TransferFundsFormValues>>(
       () => ({
         createdIn: from || Id.RootDomain,
-        from: Id.RootDomain,
         tokenAddress: colony.nativeToken.tokenAddress,
       }),
       [from, colony.nativeToken.tokenAddress],

src/components/v5/common/ActionSidebar/partials/forms/UpgradeColonyForm/UpgradeColonyForm.tsx

@@ -18,7 +18,7 @@ const UpgradeColonyForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
     <>
       <ColonyVersionField />
       <DecisionMethodField />
-      <CreatedIn />
+      <CreatedIn readonly />
       <Description />
     </>
   );