Enhance UI of Import External Results page

[Pranshu1902]

WHAT

🤖 Generated by Copilot at 26ba466

Refactor external result upload component to use common modules and styles. This enhances the user interface and the user experience of the ExternalResultUpload.tsx component.

Proposed Changes

• Fixes Enhance the UI of Import External Results page and change the save button #6162
  http://localhost:4000/external_results/upload
  Used New buttons to be consistent with the site
  Added a Cancel button
  

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

HOW

🤖 Generated by Copilot at 26ba466

• Import and use Cancel and Submit components from ButtonV2 module and useAppHistory hook from useAppHistory module to render and handle the buttons and navigation for the external result upload component (link, link, link)
• Modify the layout of the external result upload component by adding flex and justify-center classes to the parent div and changing the width of the child div to full, making the component more responsive and centered on different screen sizes (link)
• Add a data-testid attribute to the submit button for testing purposes (link)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 5, 2023 8:08am

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	851fb17
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/64f6e1e19c8ea60008bdfeb4
😎 Deploy Preview	https://deploy-preview-6163--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

@Pranshu1902

• Choose file button is wider than existing staging, keep it as in the existing staging, which looks good
• keep the cancel button towards the right beside the save buttons, that is what we consistently use across the platform

[Pranshu1902]

@nihal467
Placed the cancel button to the right.
What do you mean that the Choose File button is wider than existing staging, it seems the same to me. I didn't edit that button

Updated view:

[nihal467]

@Pranshu1902

• Check the width of the chosen file button, it's bigger than in staging, so keep it in the same width as staging

[Pranshu1902]

@nihal467
Updated view:

[nihal467]

LGTM