Ensure current weight of selected SV is displayed in proposal form (#2437)

Signed-off-by: fayi-da <fayimora.femibalogun@digitalasset.com>

Author: fayi-da

apps/sv/frontend/src/__tests__/governance/forms/update-sv-reward-weight-form-test.test.tsx

@@ -199,6 +199,34 @@ describe('Update SV Reward Weight Form', () => {
     );
   });
 
+  test('Current weight of selected SV is shown', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Wrapper>
+        <UpdateSvRewardWeightForm />
+      </Wrapper>
+    );
+
+    const memberDropdown = screen.getByTestId('update-sv-reward-weight-member-dropdown');
+    expect(memberDropdown).toBeDefined();
+
+    const selectInput = screen.getByRole('combobox');
+
+    const validateCurrentWeightFor = async (sv: string, weight: string) => {
+      await waitFor(async () => {
+        fireEvent.mouseDown(selectInput);
+        const memberToSelect = screen.getByText(sv);
+        expect(memberToSelect).not.toBeNull();
+        await user.click(memberToSelect);
+        expect(await screen.findByText(`Current Weight: ${weight}`)).toBeDefined();
+      });
+    };
+
+    await validateCurrentWeightFor('Digital-Asset-2', '10');
+    await validateCurrentWeightFor('Digital-Asset-Eng-2', '12345');
+  });
+
   test('Weight must be a valid number', async () => {
     const user = userEvent.setup();
     render(

apps/sv/frontend/src/components/form-components/TextField.tsx

@@ -12,11 +12,12 @@ import { useFieldContext } from '../../hooks/formContext';
 export interface TextFieldProps {
   id: string;
   title: string;
+  subtitle?: string;
   muiTextFieldProps?: MuiTextFieldProps;
 }
 
 export const TextField: React.FC<TextFieldProps> = props => {
-  const { title, id, muiTextFieldProps } = props;
+  const { title, subtitle, id, muiTextFieldProps } = props;
   const field = useFieldContext<string>();
   return (
     <Box>
@@ -40,6 +41,11 @@ export const TextField: React.FC<TextFieldProps> = props => {
         inputProps={{ 'data-testid': id }}
         {...muiTextFieldProps}
       />
+      {subtitle && (
+        <Typography variant="body2" color="text.secondary" data-testid={`${id}-subtitle`} mt={1}>
+          {subtitle}
+        </Typography>
+      )}
     </Box>
   );
 };

apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx

@@ -47,9 +47,6 @@ export const UpdateSvRewardWeightForm: React.FC = _ => {
     [dsoInfosQuery]
   );
 
-  const svPartyId = dsoInfosQuery.data?.svPartyId || '';
-  const currentWeight = getSvRewardWeight(svs, svPartyId);
-
   const svOptions: { key: string; value: string }[] = useMemo(
     () => svs.map(([partyId, svInfo]) => ({ key: svInfo.name, value: partyId })),
     [svs]
@@ -108,6 +105,12 @@ export const UpdateSvRewardWeightForm: React.FC = _ => {
     },
   });
 
+  const selectedSv = svOptions.find(o => o.value === form.state.values.sv);
+
+  const currentWeight = useMemo(() => {
+    return getSvRewardWeight(svs, selectedSv?.value || '');
+  }, [svs, selectedSv]);
+
   return (
     <>
       <FormLayout form={form} id="update-sv-reward-weight-form">
@@ -212,7 +215,13 @@ export const UpdateSvRewardWeightForm: React.FC = _ => {
                 onChange: ({ value }) => validateWeight(value),
               }}
             >
-              {field => <field.TextField title="Weight" id="update-sv-reward-weight-weight" />}
+              {field => (
+                <field.TextField
+                  title="Weight"
+                  id="update-sv-reward-weight-weight"
+                  subtitle={selectedSv ? `Current Weight: ${currentWeight}` : undefined}
+                />
+              )}
             </form.AppField>
           </>
         )}