feat: add edit to payment builder action

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

Author: CzarekDryl

docker/colony-cdapp-dev-env-block-ingestor

@@ -1,6 +1,6 @@
 FROM colony-cdapp-dev-env/base:latest
 
-ENV BLOCK_INGESTOR_HASH=1b94ee2fdd9d2a20014d53cf7550ac2dbd3b8e0c
+ENV BLOCK_INGESTOR_HASH=6d15a210fdef298f94fc2706548f6b0e06dee829
 
 # Declare volumes to set up metadata
 VOLUME [ "/colonyCDapp/amplify/mock-data" ]

src/components/v5/common/ActionSidebar/ActionSidebar.tsx

@@ -65,6 +65,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
   } = useGetActionData(transactionId);
 
   const {
+    isEditMode,
     actionSidebarToggle: [
       isActionSidebarOpen,
       { toggle: toggleActionSidebarOff, registerContainerRef },
@@ -257,7 +258,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
       ref={registerContainerRef}
     >
       <div className="relative">
-        <div className="flex w-full items-center justify-between border-b border-gray-200 px-6 py-4">
+        <div className="flex w-full items-center justify-between px-6 py-4">
           <div className="flex items-center gap-2">
             <button
               type="button"
@@ -288,6 +289,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
                   !isMotion &&
                   !isMultiSig &&
                   !expenditure &&
+                  !isEditMode &&
                   !loadingExpenditure && (
                     <PillsBase
                       className="bg-success-100 text-success-400"
@@ -305,6 +307,25 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
                 {(!!isMotion || !!isMultiSig) && motionState && (
                   <MotionOutcomeBadge motionState={motionState} />
                 )}
+                {!!expenditure && isEditMode && (
+                  <Tooltip
+                    tooltipContent={
+                      <span className="font-medium">
+                        {formatText({
+                          id: 'expenditure.edit.tooltip',
+                        })}
+                      </span>
+                    }
+                    placement="bottom-start"
+                  >
+                    <PillsBase
+                      className="bg-warning-100 text-warning-400"
+                      isCapitalized={false}
+                    >
+                      {formatText({ id: 'badge.edit' })}
+                    </PillsBase>
+                  </Tooltip>
+                )}
               </div>
             )}
             {isMobile && getShareButton()}

src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx

@@ -339,7 +339,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
     >
       <Stepper<Steps>
         activeStepKey={activeStepKey}
-        setActiveStepKey={setActiveStepKey}
+        setActiveStepKey={(key: Steps) => setActiveStepKey(key)}
         items={items}
       />
     </MotionProvider>

src/components/v5/common/ActionSidebar/partials/MultiSigSidebar/partials/MultiSigWidget/MultiSigWidget.tsx

@@ -146,7 +146,7 @@ const MultiSigWidget: FC<MultiSigWidgetProps> = ({ action }) => {
       <Stepper<MultiSigState>
         items={items}
         activeStepKey={activeStepKey}
-        setActiveStepKey={setActiveStepKey}
+        setActiveStepKey={(key: MultiSigState) => setActiveStepKey(key)}
       />
     </div>
   );

src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/PaymentBuilderRecipientsField.tsx

@@ -132,6 +132,12 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
       item.tokenAddress === nativeToken?.tokenAddress,
   );
 
+  const latestSlotId = value.sort((a, b) => {
+    if (!a.slotId || !b.slotId) return 0;
+
+    return b.slotId - a.slotId;
+  })[0]?.slotId;
+
   return (
     <div>
       <h5 className="mb-3 mt-6 text-2">
@@ -178,10 +184,12 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
           isFullSize={isMobile}
           onClick={() => {
             fieldArrayMethods.append({
+              // @TODO: Add slotId (find highest existing slotId and add 1)
               recipient: '',
               amount: '',
               tokenAddress: nativeToken?.tokenAddress || '',
               delay: '',
+              slotId: latestSlotId ? latestSlotId + 1 : undefined,
             });
           }}
           disabled={hasNoDecisionMethods || data.length === 400}

src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/types.ts

@@ -11,4 +11,5 @@ export interface PaymentBuilderRecipientsFieldModel {
   amount?: string;
   tokenAddress?: string;
   delay?: string;
+  slotId?: number;
 }

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
+import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { ColonyActionType } from '~gql';
 import { ExtendedColonyActionType } from '~types/actions.ts';
@@ -14,6 +15,7 @@ import MultiSigSidebar from '../ActionSidebar/partials/MultiSigSidebar/MultiSigS
 import AddVerifiedMembers from './partials/AddVerifiedMembers/index.ts';
 import CreateDecision from './partials/CreateDecision/index.ts';
 import EditColonyDetails from './partials/EditColonyDetails/index.ts';
+import ExitEditModeModal from './partials/ExitEditModeModal/ExitEditModeModal.tsx';
 import ManageReputation from './partials/ManageReputation/index.ts';
 import ManageTeam from './partials/ManageTeam/index.ts';
 import ManageTokens from './partials/ManageTokens/ManageTokens.tsx';
@@ -39,6 +41,13 @@ const CompletedAction = ({ action }: CompletedActionProps) => {
   const { colony } = useColonyContext();
 
   const actionType = getExtendedActionType(action, colony.metadata);
+  const {
+    isEditMode,
+    cancelEditModalToggle: [
+      isCancelModalOpen,
+      { toggleOff: toggleOffCancelModal },
+    ],
+  } = useActionSidebarContext();
 
   const getActionContent = () => {
     switch (actionType) {
@@ -157,37 +166,38 @@ const CompletedAction = ({ action }: CompletedActionProps) => {
         return <PermissionSidebar action={action} />;
     }
   };
-
   return (
-    <div className="flex flex-grow flex-col-reverse justify-end overflow-auto sm:flex-row sm:justify-start">
-      <div
-        className={clsx('w-full overflow-y-auto px-6 pb-6 pt-8', {
-          'sm:w-[calc(100%-23.75rem)]': action.isMotion,
-        })}
-      >
-        {getActionContent()}
-      </div>
+    <>
+      <div className="relative flex flex-grow flex-col-reverse justify-end overflow-auto sm:flex-row sm:justify-start">
+        <div
+          className={clsx(
+            'w-full overflow-y-auto px-6 pb-6 pt-8 sm:border sm:border-gray-200',
+            {
+              'sm:w-[calc(100%-23.75rem)]': action.isMotion,
+              'mb-[8.5rem] sm:mb-[5.5rem] sm:border-warning-400': isEditMode,
+              'sm:border-b-0 sm:border-l-0': !isEditMode,
+            },
+          )}
+        >
+          {getActionContent()}
+        </div>
 
-      <div
-        className={`
-            w-full
-            border-b
-            border-b-gray-200
-            bg-gray-25
-            px-6
-            py-8
-            sm:h-full
-            sm:w-[23.75rem]
-            sm:flex-shrink-0
-            sm:overflow-y-auto
-            sm:border-b-0
-            sm:border-l
-            sm:border-l-gray-200
-          `}
-      >
-        {getSidebarWidgetContent()}
+        <div
+          className={clsx(
+            'w-full border-b border-b-gray-200 bg-gray-25 px-6 py-8 sm:h-full sm:w-[23.75rem] sm:flex-shrink-0 sm:overflow-y-auto sm:border-b-0 sm:border-t sm:border-gray-200',
+            {
+              'border-b-warning-400': isEditMode,
+            },
+          )}
+        >
+          {getSidebarWidgetContent()}
+        </div>
       </div>
-    </div>
+      <ExitEditModeModal
+        isOpen={isCancelModalOpen}
+        onClose={toggleOffCancelModal}
+      />
+    </>
   );
 };