Merge branch 'main' into revise-patient-list-view-designs

onaio · May 22, 2024 · 5a7c425 · 5a7c425
2 parents a40e63d + 8f7d51c
commit 5a7c425
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/packages/fhir-group-management/src/components/CommodityAddEdit/Eusm/tests/index.test.tsx b/packages/fhir-group-management/src/components/CommodityAddEdit/Eusm/tests/index.test.tsx
@@ -257,8 +257,12 @@ it('can create new commodity', async () => {
   const accountabilityField = screen.getByLabelText('Accountability period (in months)');
   userEvent.type(accountabilityField, '12');
 
+  // upload button is visible.
+  expect(screen.getByTestId('upload-button')).toBeInTheDocument();
   const productUploadField = screen.getByLabelText('Photo of the product');
   userEvent.upload(productUploadField, productImage);
+  // confirm upload button is no longer visible
+  await waitForElementToBeRemoved(screen.getByTestId('upload-button'));
 
   // simulate value selection for type
   const groupTypeSelectConfig = {
@@ -375,6 +379,14 @@ it('edits resource', async () => {
   userEvent.clear(accountabilityField);
   userEvent.type(accountabilityField, '12');
 
+  // upload field is there
+  expect(screen.getByText('Photo of the product')).toBeInTheDocument();
+  // input widget is not rendered
+  expect(screen.queryByLabelText('Photo of the product')).not.toBeInTheDocument();
+  // need to remove the existing file before uploading.
+  const removeUploadFile = screen.getByTitle('Remove file');
+  userEvent.click(removeUploadFile);
+  await waitFor(() => screen.getByLabelText('Photo of the product'));
   const productUploadField = screen.getByLabelText('Photo of the product');
   userEvent.upload(productUploadField, productImage);
 

diff --git a/packages/fhir-group-management/src/components/ProductForm/index.tsx b/packages/fhir-group-management/src/components/ProductForm/index.tsx
@@ -269,26 +269,39 @@ function CommodityForm<
         <InputNumber disabled={disabled.includes(accountabilityPeriod)} min={0} />
       </FormItem>
 
-      <Form.Item
-        id={productImage}
-        hidden={hidden.includes(productImage)}
-        name={productImage}
-        label={t('Photo of the product')}
-        valuePropName="fileList"
-        getValueFromEvent={normalizeFileInputEvent}
-      >
-        <Upload
-          beforeUpload={() => false}
-          accept="image/*"
-          multiple={false}
-          listType="picture-card"
-          maxCount={1}
-        >
-          <button style={{ border: 0, background: 'none' }} type="button">
-            <PlusOutlined />
-            <div style={{ marginTop: 8 }}>Upload</div>
-          </button>
-        </Upload>
+      <Form.Item noStyle dependencies={[productImage]}>
+        {({ getFieldValue }) => {
+          return (
+            <Form.Item
+              id={productImage}
+              hidden={hidden.includes(productImage)}
+              name={productImage}
+              label={t('Photo of the product')}
+              valuePropName="fileList"
+              getValueFromEvent={normalizeFileInputEvent}
+            >
+              <Upload
+                id={productImage}
+                beforeUpload={() => false}
+                accept="image/*"
+                multiple={false}
+                listType="picture-card"
+                maxCount={1}
+              >
+                {!getFieldValue(productImage)?.length ? (
+                  <button
+                    data-testid="upload-button"
+                    style={{ border: 0, background: 'none' }}
+                    type="button"
+                  >
+                    <PlusOutlined />
+                    <div style={{ marginTop: 8 }}>Upload</div>
+                  </button>
+                ) : null}
+              </Upload>
+            </Form.Item>
+          );
+        }}
       </Form.Item>
 
       <FormItem {...tailLayout}>