Feat/15873666 edit #3320

CzarekDryl · 2024-10-14T11:00:48Z

Description

This PR adds the ability to edit actions after the locked state during the Funding, Release steps. Editing in Payment step is not possible for now.

Edit Mode:
- Displays yellow border and Edit Pill.
- Disables stepper buttons and hides Kebab menu.
- Makes Recipients, Amounts, and Claim Delays editable.
- Change payment button opens modal, disabled until changes are made.
Change Payment Modal:
- Dropdown for execution options (Reputation and Permissions).
Changes Step in Stepper:
- Changes pill appears after edits in Funding, Release step.
- Shows details on edits, permissions, and a change counter.
If there is funding needed after editing, new pill should show after changes one

Testing

Install Lazy Consensus extension to test funding with motion
Create advanced payment action and lock it
Play around with funding and editing

Closed PR with comments - #3075

Design

Resolves #2238

jakubcolony · 2024-10-17T22:06:28Z

This one also needs a rebase @CzarekDryl

CzarekDryl · 2024-10-23T08:23:02Z

@jakubcolony @arrenv Branch rebased and ready to review

jakubcolony

Nice work overall @CzarekDryl, this was not a simple feature to handle 👍

Some notes from my testing:

Missing translations:

Should the Make changes button be disabled if there are no changes? Otherwise it is just sending empty transactions.
After making changes, the values only update after a few seconds. I can't see this mentioned in the spec, but we may want to update them manually in cache so that they're visible to the user straightaway.
If amount is 0, the row should be hidden, that is how they get deleted on the contracts level:

When I select an edit action, should it be the slots after the changes that are shown? That's what seems to be the case, but they change order when clicked on (could be also related to the issue below):

The payment table should be sorted by slot ID, after editing the slots returned from the backend are not necessarily in order (see slot with ID 1 is displayed under slot with ID 2):

I feel like this could be related to the above, I edited only the claim delay but the UI mentions 6 changes:

"expenditureSlotChanges": {
  "oldSlots": [
    {
      "id": 1,
      "recipientAddress": "0xb77D57F4959eAfA0339424b83FcFaf9c15407461",
      "claimDelay": "0",
      "payouts": [
        {
          "amount": "1000000000000000000000",
          "tokenAddress": "0xeF841fe1611ce41bFCf0265097EFaf50486F5111"
        }
      ]
    },
    {
      "id": 2,
      "recipientAddress": "0x9dF24e73f40b2a911Eb254A8825103723E13209C",
      "claimDelay": "3600",
      "payouts": [
        {
          "amount": "2000000000000000000000",
          "tokenAddress": "0xeF841fe1611ce41bFCf0265097EFaf50486F5111"
        }
      ]
    }
  ],
  "newSlots": [
    {
      "id": 2,
      "recipientAddress": "0x9dF24e73f40b2a911Eb254A8825103723E13209C",
      "claimDelay": "3600",
      "payouts": [
        {
          "amount": "2000000000000000000000",
          "tokenAddress": "0xeF841fe1611ce41bFCf0265097EFaf50486F5111"
        }
      ]
    },
    {
      "id": 1,
      "recipientAddress": "0xb77D57F4959eAfA0339424b83FcFaf9c15407461",
      "claimDelay": "18000",
      "payouts": [
        {
          "amount": "1000000000000000000000",
          "tokenAddress": "0xeF841fe1611ce41bFCf0265097EFaf50486F5111"
        }
      ]
    }
  ]
}

After making a change that required another funding step, I'm being asked to fund the entire amount instead of just the difference between payout sum and current expenditure balance for a given token
Adding slots seems to work fine ✅

Editing in different steps shows correctly in the list, nicely done:

jakubcolony · 2024-10-24T22:46:07Z

src/components/v5/common/CompletedAction/CompletedAction.tsx

+  const getEditContent = () => {
+    switch (actionType) {
+      case ColonyActionType.CreateExpenditure:
+        return <PaymentBuilderEdit action={action} />;
+      default:
+        return <div>Not implemented yet</div>;
+    }
+  };


Could this be handled at the level of PaymentBuilder component? It would keep the generic CompletedAction free of feature-specific logic

Sure, I've moved this to PaymentBuilder component

arrenv · 2024-10-30T10:49:55Z

Should the Make changes button be disabled if there are no changes? Otherwise it is just sending empty transactions.

Preferably not disabled, but, we should validate on click if no changes have been made. With a validation message: "No changes have been made yet."

After making changes, the values only update after a few seconds. I can't see this mentioned in the spec, but we may want to update them manually in cache so that they're visible to the user straightaway.

My concern with showing cached values is if there is an issue with the transaction, you are going to get a flashing of the new then back to old values. My thinking here is that it would probably be better to show a skeleton loading state on the whole table. This could be done in a separate issue.

If amount is 0, the row should be hidden, that is how they get deleted on the contracts level:

Yes, I agree, the ones with 0 values should be hidden.

The payment table should be sorted by slot ID, after editing the slots returned from the backend are not necessarily in order (see slot with ID 1 is displayed under slot with ID 2):

Good pickup Jakub, yes, it would be good to have a consistent order.

CzarekDryl · 2024-11-04T14:23:28Z

@jakubcolony I've sorted all data by slotId, please check it now

jakubcolony

I think we might still be missing sorting by slot ID when viewing changes. The newly added slot is shown at the top:

When I select a change request straight after it appears, the blue outline doesn't show:

Screen.Recording.2024-11-08.at.00.10.04.mov

Slots with amounts of 0 should not be shown in the edit mode:

Screen.Recording.2024-11-08.at.00.14.19.mov

In this scenario, I had a single slot and changed the token from CREDS to ETH. It counted 3 changes (should be one) and got a bit confused when displaying the differences:

I suspect this could be because you are comparing old and new payouts by indexes rather than token addresses.

The exit modal should not show if there weren't any changes to the expenditure.

jakubcolony · 2024-11-07T23:38:06Z

.../PaymentBuilderForm/partials/PaymentBuilderRecipientsField/PaymentBuilderRecipientsField.tsx

@@ -178,10 +184,12 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
          isFullSize={isMobile}
          onClick={() => {
            fieldArrayMethods.append({
+              // @TODO: Add slotId (find highest existing slotId and add 1)


My comment can now be removed

jakubcolony · 2024-11-07T23:41:44Z

src/components/v5/common/CompletedAction/partials/EditModeModal/EditModeModal.tsx

+    success: ActionTypes.EXPENDITURE_EDIT_SUCCESS,
+  });
+
+  const handleEditExpenditureViaMotion = async ({ decisionMethod }) => {


This seems to handle editing expenditures via both action and motion, so the name should be updated

jakubcolony · 2024-11-07T23:57:30Z

src/components/v5/common/CompletedAction/partials/PaymentBuilder/PaymentBuilder.tsx

+  const showEditOption =
+    expenditure?.status !== ExpenditureStatus.Cancelled &&
+    expenditure?.status !== ExpenditureStatus.Draft &&
+    expenditure?.status !== ExpenditureStatus.Finalized &&


How about doing it the other way around, ie. checking for statuses that allow editing (Locked, Funding)?

jakubcolony · 2024-11-07T23:59:51Z

...edAction/partials/PaymentBuilder/partials/EditStep/partials/EditRequests/EditRequestItem.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';


If #3162 gets merged first, please try to reuse the shared component introduced there

jakubcolony · 2024-11-08T00:02:25Z

...mon/CompletedAction/partials/PaymentBuilder/partials/EditStep/partials/EditRequests/hooks.ts

+  const sortedOldSlots = oldSlots
+    ? [...oldSlots].sort((a, b) => a.id - b.id)
+    : [];
+  const sortedNewSlots = newSlots
+    ? [...newSlots].sort((a, b) => a.id - b.id)
+    : [];


old and new slots should be defined according to their types

jakubcolony · 2024-11-08T00:04:30Z

...mon/CompletedAction/partials/PaymentBuilder/partials/EditStep/partials/EditRequests/hooks.ts

+  if (newSlots.length !== oldSlots.length) {
+    changes += newSlots.length - oldSlots.length;
+  }


This looks like it would subtract if there were less new slots than old ones, even though normally it shouldn't happen. Still, it feels sensible to wrap this in Math.abs

jakubcolony

I accidentally submitted my previous review too soon. Adding a few more comments

jakubcolony · 2024-11-08T01:05:42Z

src/graphql/fragments/expenditures.graphql

@@ -52,6 +52,7 @@ fragment Expenditure on Expenditure {
    filter: {
      or: [
        { type: { eq: MOVE_FUNDS } }
+        { type: { eq: MOVE_FUNDS_MOTION } }


What was the reason behind adding this? Did you come across some funding motions misclassified as move funds?

jakubcolony · 2024-11-08T01:08:16Z

src/context/ActionSidebarContext/ActionSidebarContextProvider.tsx

+  const [editValues, setEditValues] = useState<
+    ExpenditurePayoutFieldValue[] | undefined
+  >();


Could that be moved to expenditure-specific component, such as PaymentBuilderEdit?

jakubcolony · 2024-11-08T01:26:49Z

src/components/v5/common/CompletedAction/partials/PaymentBuilderEdit/hooks.ts

+    () =>
+      object()
+        .shape({
+          payments: array()


This is almost the same as validation in src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/hooks.ts. Is there a way to reuse it?

jakubcolony · 2024-11-08T01:27:44Z

...nts/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/utils.ts

+    if (!createdAt || !transactionHash) return;
+
+    const fundingActionTime = new Date(createdAt);
+    const actionKey = `${createdAt}-${transactionHash}`;


transactionHash, for now, is a unique identifier of an action so you can just use that

jakubcolony · 2024-11-08T01:28:40Z

...nts/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/utils.ts

+import { type ExpenditureActionFragment, ExpenditureStatus } from '~gql';
 import { type ExpenditureAction, type Expenditure } from '~types/graphql.ts';


ExpenditureActionFragment is the same as ExpenditureAction

CzarekDryl · 2024-11-15T09:40:45Z

@jakubcolony When you click to view the changes, the modified items are at the top of the table and separated by a blue line. This is the desired behavior.

arrenv

Thank you @CzarekDryl, coming along well! I noticed the following:

If you click on the meatball menu, it sits under the action timeline.
Can we remove the bold on the dash, align the values and max the font size of all text the same at text-3 to match the design.
I also removed a recipient row completely, is there any way to see that? When returning, as I can see it says 4 changes, but clicking on it shows only 3 recipients changed.
I did a change where I removed leela, then funded, then went into edit mode again and I can see leela again in the list, removed rows should not show up again if removed. It also causes issues with validation and I need to remove it again.
Submitting that second change using Reputation did not have any affect, the motion did not show up despite the transaction succeeding. It did show up if using Permissions.
Increasing the total amount did prompt another funding step, meaning the payment was not fully funded, but allowed me to go to the Release step, however, that fails as the payment was not fully funded.

CzarekDryl · 2024-12-05T11:04:01Z

@arrenv Everything except the last point has been fixed because I cannot reproduce it

davecreaser · 2025-01-03T10:37:45Z

Hey @CzarekDryl - looks like this one needs another rebase. I tried to test it by editing an advanced payment but got an error, maybe a rebase will fix it?

iamsamgibbs · 2025-01-15T17:41:53Z

I know this PR has been kicking around for a while now so would be good to get it rebased and we can try to get it pushed through!

I just wanted to leave a comment here as I've noticed whilst doing another piece of work that the editExpenditure saga does not use the same "chunked multicall" approach as the createExpenditure saga so I suspect it is likely that editing an expenditure with over 164 slots will fail as the transaction receipt will be too large. Once this PR is refactored we should test editing an expenditure with a large number of payments and open a new issue if we need to make these changes to the editExpenditure saga.

iamsamgibbs

First off, great work on this very complicated issue, there is a LOT going on here.

A lot of it is working great, I'm able to edit at the correct stage of the process, the edit button does not appear for users without permissions, validation messages are showing correctly, etc. On to the issues though, I'm sure some of these could just be handled as separate issues, it maybe even makes sense to make this a mini feature branch just to handle all the cases here.

The number of recipients in the subtitle is not updating correctly. I think it's maybe just not accounting for the rows where the amount is 0.

There is an issue with the slotId not being properly set.

There is an issue with the accordion rows on the changes view not closing properly.

Here is a video:

Screen.Recording.2025-01-21.at.10.40.34.mov

The blue border is also having some issues:

Screen.Recording.2025-01-21.at.10.42.07.mov

There should be a "No changes have been made" validation error if you click the "Make changes" button without making any changes.

Screen.Recording.2025-01-21.at.10.48.02.mov

The additional funding steps also failed to show for me when I added an extra payment row resulting in failed release transaction.

Screen.Recording.2025-01-21.at.10.51.53.mov

I'm not sure if this is intended or not, but I think rows which have been removed in previous edits should not continue to show in future edits. (So for this example, Amy was removed in the first edit, then in the second edit the amount for Leela was changed. When viewing the second edit, I don't think Amy should show at all.)

The change request buttons should be disabled whilst edit mode is active.

Screen.Recording.2025-01-21.at.11.15.06.mov

As mentioned in my previous comment, I suspect there will be issues with large payments over 164 rows, but we'll have to check this once the slotId issue is resolved.

Thanks again though for your work on this so far!

fixes after rebase fix: translations, table borders Fix: Editing expenditure to not change slot IDs or override recipients Chore: Add comments with guidance on edit expenditure implementation Update ingestor image hash fix: table styles fix: remove unused prop CR fixes fixes after rebase fix: edit changes

adam-strzelec · 2025-02-14T16:07:29Z

@iamsamgibbs I fixed all comments from the list except the error that occurs after release transaction. I have no idea what it is caused by. I don't know if it's on the frontend or backend side, but I noticed that it occurs if we remove the row before the Funding step.

CzarekDryl self-assigned this Oct 14, 2024

CzarekDryl requested review from a team as code owners October 14, 2024 11:00

CzarekDryl changed the base branch from master to feat/advanced-payments October 14, 2024 11:00

jakubcolony force-pushed the feat/advanced-payments branch from c0099a8 to c60c833 Compare October 14, 2024 22:02

Base automatically changed from feat/advanced-payments to master October 14, 2024 22:14

CzarekDryl force-pushed the feat/15873666-edit branch from b6eed1c to b98a6fc Compare October 21, 2024 07:39

CzarekDryl force-pushed the feat/15873666-edit branch from b98a6fc to d4f0dcd Compare October 24, 2024 12:28

AdrianDudko mentioned this pull request Oct 25, 2024

Payment builder - Edit action - After Locked state - Action Creator path with Permissions #2238

Open

3 tasks

jakubcolony requested changes Oct 27, 2024

View reviewed changes

CzarekDryl force-pushed the feat/15873666-edit branch from d4f0dcd to 75ce3d4 Compare October 30, 2024 08:02

CzarekDryl force-pushed the feat/15873666-edit branch from 6505b7d to 358a22e Compare November 4, 2024 14:22

CzarekDryl requested a review from jakubcolony November 4, 2024 14:23

jakubcolony requested changes Nov 8, 2024

View reviewed changes

jakubcolony reviewed Nov 8, 2024

View reviewed changes

CzarekDryl force-pushed the feat/15873666-edit branch from 358a22e to a404cde Compare November 14, 2024 11:07

CzarekDryl requested a review from jakubcolony November 15, 2024 09:40

CzarekDryl force-pushed the feat/15873666-edit branch from c9bc973 to 42ab64b Compare November 29, 2024 12:38

arrenv requested changes Dec 3, 2024

View reviewed changes

CzarekDryl force-pushed the feat/15873666-edit branch from c90c33f to 3aa94eb Compare December 5, 2024 11:16

CzarekDryl requested a review from arrenv December 5, 2024 11:20

CzarekDryl force-pushed the feat/15873666-edit branch from 3aa94eb to 8ff7435 Compare January 20, 2025 20:22

rdig requested a review from a team January 21, 2025 08:31

iamsamgibbs requested changes Jan 21, 2025

View reviewed changes

AdrianDudko assigned adam-strzelec and unassigned CzarekDryl Jan 28, 2025

CzarekDryl and others added 3 commits February 14, 2025 15:14

fix: editing

6fdaf25

fix: after rebase

e625f48

adam-strzelec force-pushed the feat/15873666-edit branch from e7196e5 to e625f48 Compare February 14, 2025 16:00

adam-strzelec requested a review from iamsamgibbs February 14, 2025 16:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/15873666 edit #3320

Feat/15873666 edit #3320

CzarekDryl commented Oct 14, 2024

jakubcolony commented Oct 17, 2024

CzarekDryl commented Oct 23, 2024

jakubcolony left a comment

jakubcolony Oct 24, 2024

CzarekDryl Nov 4, 2024

arrenv commented Oct 30, 2024

CzarekDryl commented Nov 4, 2024

jakubcolony left a comment •

edited

Loading

jakubcolony Nov 7, 2024

jakubcolony Nov 7, 2024

jakubcolony Nov 7, 2024

jakubcolony Nov 7, 2024

jakubcolony Nov 8, 2024

jakubcolony Nov 8, 2024

jakubcolony left a comment

jakubcolony Nov 8, 2024

jakubcolony Nov 8, 2024

jakubcolony Nov 8, 2024

jakubcolony Nov 8, 2024

jakubcolony Nov 8, 2024

CzarekDryl commented Nov 15, 2024

arrenv left a comment

CzarekDryl commented Dec 5, 2024

davecreaser commented Jan 3, 2025

iamsamgibbs commented Jan 15, 2025

iamsamgibbs left a comment

adam-strzelec commented Feb 14, 2025

		import { type ExpenditureActionFragment, ExpenditureStatus } from '~gql';
		import { type ExpenditureAction, type Expenditure } from '~types/graphql.ts';

Feat/15873666 edit #3320

Are you sure you want to change the base?

Feat/15873666 edit #3320

Conversation

CzarekDryl commented Oct 14, 2024

Description

Testing

jakubcolony commented Oct 17, 2024

CzarekDryl commented Oct 23, 2024

jakubcolony left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arrenv commented Oct 30, 2024

CzarekDryl commented Nov 4, 2024

jakubcolony left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jakubcolony left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CzarekDryl commented Nov 15, 2024

arrenv left a comment

Choose a reason for hiding this comment

CzarekDryl commented Dec 5, 2024

davecreaser commented Jan 3, 2025

iamsamgibbs commented Jan 15, 2025

iamsamgibbs left a comment

Choose a reason for hiding this comment

adam-strzelec commented Feb 14, 2025

jakubcolony left a comment •

edited

Loading