refactor: ui, convert cluster workflow template to functional component

[tczhao]

Tested with UI

• loading cluster wf template
• no cluster wf template
• exist cluster wf template

---

Please do not open a pull request until you have checked ALL of these:

• Create the PR as draft .
• Run make pre-commit -B to fix codegen and lint problems.
• Sign-off your commits (otherwise the DCO check will fail).
• Use a conventional commit message (otherwise the commit message check will fail).
• "Fixes #" is in both the PR title (for release notes) and this description (to automatically link and close the issue).
• Add unit or e2e tests. Say how you tested your changes. If you changed the UI, attach screenshots.
• Github checks are green.
• Once required tests have passed, mark your PR "Ready for review".

If changes were requested, and you've made them, dismiss the review to get it reviewed again.

[terrytangyuan]

What's the motivation for this change?

[tczhao]

added issue: #9810

The thought process goes like:

• we have issue: Trying to access artifacts from archived workflows breaks the UI #9772 clicking artifact in archived workflows throws error #9627
  To fix it we need to port the artifact visuliser from workflow detail to archive workflow detail.

• But the 1 is written in functional component style the other is in class component.
  I'm thinking we'd better align the coding style first (refactor archived workflow to funcitonal component)
  workflow detail.tsx
  arvhiced workflow detail.tsx

• But the archived workflow has quite some code to refactor. Thinking starting small, this cluster template is small

• Also to expand the align on UI coding style, the new issue UI: Refactor to use functional components #9810. Also thinking we should refactor in batches/folder instead of all in one PR